finnolivertaylor.com

A solo designer's portfolio that runs a strict Swiss grid and then vandalizes it, politely, with 1-bit computer nostalgia. The ground is an almost-white #f6f6f6 panel (80% of the page) sitting on a #f1f1f1 body, and the hero holds exactly three things: a wordmark, a paragraph, and one image. The wordmark is the surprise — "Finn / taylor" set in a high-contrast bookish serif at roughly 64px, stacked on two lines with the second word indented right so the pair staircases, while every other character on the site is Neue Montreal, a neutral grotesk, at a single 400 weight. Pixel-art cursors are stuck onto it like decals: a 1-bit pointing-hand overlapping the "n" of Finn, a pixel wire-and-plug doodle tucked into the crook of "taylor", both in the page's one saturated color, #2159e5. The intro paragraph is set ragged-left at 16px/23 and carries three levels of emphasis inside a single sentence — gray default, near-black semibold on the claims ("design & ship", "cares."), and the blue on the links — so the copy self-annotates without a single underline. Filling the right half is a Klein-blue duotone of a classical marble Atlas hoisting a beige-box CRT and monitor, wired in loops of VGA cable, bled off the right edge and the bottom fold with no frame, no radius, no container; its shading supplies the rest of the palette (#648ced, #93aff3, #b3c8f9, #cfd5e3, #0a34a1), which is why the page reads as duotone even though nothing else is colored. There is no top navigation at all. The nav lives in a fixed bottom bar with no fill and no border — a pixel folder glyph, then lowercase work fun art about with the active item in black and the rest gray, and a pixel external-link glyph pinned bottom-right — floating over whatever happens to be scrolling underneath. Below the fold the ground steps down half a tone and the work section becomes three enormous project rows: a 35px-radius media card at ~43% width with a soft drop shadow, facing a right-hand column with a dotted eyebrow (• client • years, 13px/25 gray), a 24px/30 headline, a two-line gray description, and a "View project" line that is not a button — it is the same pixel folder icon, plain text, and a pixel double-arrow. buttonStyle comes back null because the site genuinely has no buttons. All the saturation on the page lives inside those three rectangles — a purple harmoniq splash, an amber phosphor-green terminal, a teal-on-navy AiDA gradient — while the page around them stays resolutely gray. The result is a portfolio that looks expensive and unbothered, and is funny in exactly two places.

Build on a near-white neutral ground — #f6f6f6 for the hero plate over a #f1f1f1 body — and divide sections with a half-tone step plus a soft inset shadow along the seam rather than a rule or a border. Set all running text in one neo-grotesk (Neue Montreal; substitutes Söhne, Basis Grotesque, Inter) at a single 400 weight: headlines 24px/30, body 16px/23, metadata 13px/25, letter-spacing normal throughout. Get hierarchy from size, color and a semibold inline span — never from a second weight on headings. Reserve a serif for exactly one element: the name or logotype, stacked over two lines with the second indented right, at 60–72px in a high-contrast bookish face; let it appear once and nowhere else. Choose one saturated accent (#2159e5, an electric cobalt) and spend it on three things only — links, the decorative glyphs, and the duotone treatment of the hero image. Derive the rest of the palette from that image's own shading (#648ced, #93aff3, #b3c8f9, #cfd5e3, #0a34a1) so the page reads as one hue without anything else being colored. Ship no buttons. Every action is plain body text preceded by a 1-bit icon and followed by a pixel arrow, on no ground, with no radius and no border; the same icon should recur in the nav so its meaning is taught twice. Draw those icons as hard-edged, unantialiased 1-bit pixel art at ~24px — folder, cursor, external link — and scatter two or three oversized ones (~56px) across the hero as decals overlapping the type. Put the navigation in a fixed bottom bar with no fill and no border: an icon at each end, lowercase labels in the middle, active item near-black and the rest at ~40% gray. Set the intro paragraph ragged-left in a ~400px measure and mark it up in three tones — gray prose, near-black semibold on the claims, accent on the links — with no underline anywhere. For the hero image use a single subject cut out with no background, duotoned to the accent, and bled off the right edge and the bottom fold; give it no frame, no radius and no shadow. Below the fold, lay out content as two-column rows: a 35px-radius media card at ~43% width with a soft drop shadow, a text column starting at ~64%, a 20% empty canyon between them, and ~460px of vertical air between rows. Head each row with a metadata line of •-bulleted pairs at 13px gray. Let the artwork inside the cards carry all the saturation and keep the page frame gray around it. Use lowercase for navigation and sentence case for everything else, and write the copy as a first-person claim with the qualifier doing the boasting.