brianlovin.com

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.

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.