# finnolivertaylor.com

Source: https://finnolivertaylor.com/
Captured: 2026-09-19
Tags: portfolio, landing, light, both, minimal, swiss, playful, confident, playful, nostalgic, calm
Colors: #f6f6f6, #2159e5, #648ced, #93aff3, #cfd5e3, #0a34a1, #010203, #b3c8f9
Type (h2): neueMontreal · 24px/30px · 400 — "Agentic AI - Creating HarmonIQ."
Type (body): neueMontreal · 16px/23px · 400 — "Hi, I'm a UK-born, US-based Product Designer using AI workflows to design & ship"
Type (small): neueMontreal · 13px/25px · 400 — "Aria Intelligent Solutions"
Radii: 35px (6), 59px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/finnolivertaylor-com/hero.webp?v=bf9c933c
- Page crop (mid-1): https://media.lvly.design/library/finnolivertaylor-com/mid-1.webp?v=79ee0d76
- Page crop (mid-2): https://media.lvly.design/library/finnolivertaylor-com/mid-2.webp?v=b41fdfcf
- Hero (mobile): https://media.lvly.design/library/finnolivertaylor-com/mobile-hero.webp?v=f4abc776
- Full page (desktop): https://media.lvly.design/library/finnolivertaylor-com/full.jpg?v=c99616e7
- Full page (mobile): https://media.lvly.design/library/finnolivertaylor-com/mobile-full.jpg?v=8a1efccb
- Clip preview (mp4): https://media.lvly.design/library/finnolivertaylor-com/video-w8jnxb.preview.mp4?v=ca972c72

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.

## Steal-worthy details

- Stack the wordmark in a high-contrast serif and set literally everything else in one grotesk at one weight. Two lines, second indented right so the name staircases; the serif appears once and never again, so it functions as a logo rather than a typeface choice.
- Pixel-art cursors as stickers: a 1-bit pointing-hand and a pixel wire-and-plug doodle in `#2159e5`, sized ~56px, dropped on top of the wordmark at casual angles so they overlap the letterforms instead of sitting beside them. Hard-edged and unantialiased against a page that is otherwise perfectly smooth.
- The hero image is a duotone cutout bled off two edges — a marble Atlas carrying a CRT, flattened to one hue and cropped by the right edge and the fold, with no card, no radius and no drop shadow. It sits directly on the page ground, which is what makes it read as artwork rather than as a screenshot.
- Three levels of emphasis inside one ragged-left paragraph: gray for default prose, near-black semibold on the claims, and the accent blue on the links. No underlines, no highlight, no second font — the sentence marks up its own argument.
- Icon-only contact row: mail, X and LinkedIn as 1px stroked line glyphs, each trailed by a tiny `↗` set at superscript height. Centered under the paragraph, no labels, no pills, no fills.
- No top navigation. The nav is a fixed bottom bar with no ground and no border — pixel folder glyph, lowercase `work fun art about` with the active item black and the rest gray, and a pixel external-link glyph at the far right — so the top of every screen is free for content and the chrome never competes with the hero.
- Sections are divided by a half-tone step in the ground plus a soft inset shadow along the seam, never a rule. The hero panel is the lighter `#f6f6f6`; the work section drops to `#f1f1f1` and content appears to scroll *under* the lighter plate above it.
- Project rows are two columns with a deliberate canyon between them: a 35px-radius media card at ~43% of the width on the left, a text column starting at ~64% on the right, and roughly 20% of the viewport left empty in between. Vertical rhythm is enormous — about 460px of air between one row and the next.
- The call to action is not a control. "View project" is a pixel folder icon, plain body-size text, and a pixel double-headed arrow, on no ground at all — the same folder glyph the nav uses, so the icon teaches its own meaning twice on one page.
- Every dotted eyebrow is a pair of metadata chips with a `•` bullet ahead of each half — `• Aria Intelligent Solutions   • 2025 - 2026` — at 13px/25 in gray, doing the job a tag row or a pill would, at a fraction of the surface area.
- All the color lives inside the cards. Purple, amber and teal each belong to a project's own artwork; the page frame stays gray and the only brand color outside the rectangles is the one blue. Three loud pieces of work stay loud without the portfolio around them having to pick a side.

## Style recipe

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.