# brianlovin.com

Source: https://brianlovin.com/
Captured: 2026-09-20
Tags: portfolio, landing, light, both, minimal, editorial, calm, confident, human, technical
Colors: #ffffff, #d0d0d0, #afafaf, #959494, #6d6f76, #05224a, #334564
Type (h1): Inter · 24px/32px · 600 — "Brian Lovin"
Type (h2): Inter · 16px/25.6px · 400 — "Writing"
Type (body): Inter · 24px/32px · 600 — "I'm a software designer living in San Francisco, currently making AI products at"
Radii: 9999px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/brianlovin-com/hero.webp?v=096a5e2c
- Page crop (mid-1): https://media.lvly.design/library/brianlovin-com/mid-1.webp?v=379b2b6a
- Page crop (mid-2): https://media.lvly.design/library/brianlovin-com/mid-2.webp?v=661c2731
- Hero (mobile): https://media.lvly.design/library/brianlovin-com/mobile-hero.webp?v=c287fe71
- Full page (desktop): https://media.lvly.design/library/brianlovin-com/full.jpg?v=5b0c400a
- Full page (mobile): https://media.lvly.design/library/brianlovin-com/mobile-full.jpg?v=60684c3f
- Clip preview (mp4): https://media.lvly.design/library/brianlovin-com/video-jn5x69.preview.mp4?v=f7477d76

A personal site that has removed almost everything and then set the little that remains with real care. The page is white (#ffffff covers 96% of it), the nav has shrunk to a two-line glyph in the top-left corner, and a single column of content sits left of center at about 28% of a 1440px viewport, leaving a wide, deliberately empty right margin. Inter does all the work across a scale with essentially two steps: 24px/600 for both the name and the one-sentence bio, and 16px/400 in light gray for the section labels. Everything between those two poles is a link — a writing list of plain dark rows, then a projects list of two-tone rows where a bold label and a gray description share one line with no separator, no columns and no card. There is no border, no fill, no shadow and no accent color anywhere; hierarchy is carried entirely by weight and by four steps of gray (#d0d0d0, #afafaf, #959494, #6d6f76) against near-black ink. The only curve on the page is the 9999px avatar, and the only image is that 60px photograph. It works because the restraint is not decorative: with nothing to look at but type, the eye goes straight to the titles, which is exactly what a directory page is for.

## Steal-worthy details

- The bio is set at the same size and weight as the name — both 24px/600 Inter — so the sentence *is* the headline and the page needs no separate hero type at all
- A two-step type scale with nothing in between: 24px/600 for identity, 16px/400 for section labels. Any row that is neither of those is a link, which makes the whole page scannable by size alone
- Section labels are one light-gray 16px word plus a small chevron ("Writing ›") — no rule, no all-caps, no tracking. The chevron is the only thing telling you the label is itself a link to the archive
- The content column is left-offset, not centered: it starts at ~28% of the viewport width and runs ~560px, so the empty right margin is wider than the text. Reads like a document, not a landing page
- The entire nav collapses to a 12px two-line glyph in the top-left corner with no bar, no fill and no border — the header occupies zero vertical space and the content starts ~185px down instead
- Project rows are two-tone on a single line: bold near-black label followed by a #959494 description with only a space between them. No dot separator, no second column, no wrapping — the gray is the separator
- External destinations carry a small ↗ set between the label and its description, so internal and external links are distinguishable before you hover or read the status bar
- One 60px circular avatar at 9999px is the only image and the only radius on the page; the social row under it is three monochrome 20px glyphs at ~#959494, dimmed so they never compete with the writing list

## Style recipe

Build a text-first page on pure white (#ffffff) with Inter for everything, and give it a scale of exactly two steps: 24px/600 with 32px line-height for the identity line and the one-sentence statement beneath it, and 16px/400 with 25.6px line-height in light gray for section labels. Set every other row as a link at roughly 20px medium weight in near-black. Offset the single content column to the left — start it at about 28% of the viewport width and cap it near 560px — and let the right margin stay empty rather than centering the column. Start the content ~180px below the top of the page and give the navigation no chrome at all: a single 12px glyph in the top-left corner, no bar, no fill, no border, no shadow.

Color is four grays and nothing else: near-black ink, #6d6f76 for secondary text, #959494 for descriptions and icons, #afafaf and #d0d0d0 for anything that must recede further. Ban accents, fills, badges, cards and dividers — a section is announced by a gray 16px label with a small chevron after it, and separated from the next by ~56px of vertical space, never by a rule. Rhythm: ~38px between rows inside a list, ~56–70px between sections.

Two moves make the style recognizable. First, the collapsed hierarchy: the introductory sentence is typeset identically to the name, so the page opens with a statement instead of a title. Second, two-tone rows: a bold label and a gray description share one line with a single space between them, the gray doing the job a separator or a second column would normally do, and a small inline ↗ appended to any label that leaves the site. Radii: 0 everywhere except a fully round 9999px avatar, the only image on the page. Motion is limited to color transitions on hover — gray to ink — with no movement, no scale and no reveal animation.