kitlangton.com

A personal homepage built like a terminal broadsheet: pure black (#000000), one monospace face (commitMono) at 16px/24px for absolutely everything, and three full-height columns divided by 1px hairlines so faint (#242424) they read as folds rather than borders. There is no hero headline and no button anywhere on the page — the top of the left column is a marquee ticker ("CURRENT LIFE GOAL:") and a photograph of the author as a small child at a beige keyboard, and everything under it is the same repeated row unit: a near-white title (#f0f0f0) over a muted one-line description (#7d7d7d), with a small chip or a star count pinned to the far right. Sections are announced by tracked uppercase labels in the same muted gray, and the only horizontal division on the page is a hand-drawn sine wave in #2d2d2d, which is the single move that stops the whole thing reading as a directory listing. Color enters only through content — the video thumbnails' fiery reds (#ee2b1d) at 8px radius down the right column — so the artwork supplies the warmth and the chrome supplies none. It works because the discipline is total: with one typeface, one size and one weight axis, hierarchy has nowhere to go but case, opacity and position, and the page ends up feeling like a well-kept index rather than a portfolio pitch.

Build on pure black #000000 with no elevated surfaces: no panels, no cards, no gradients, no shadows. Set one monospaced family for the entire page (commitMono, Berkeley Mono, JetBrains Mono) at 16px/24px, weight 400, normal tracking, and refuse a second family — no display face for headings. Derive the whole hierarchy from three text colors: #f0f0f0 for primary text and links, #7d7d7d for descriptions, section labels and all metadata, and #ffffff for the one bolded phrase per block that deserves it. Section labels are uppercase, 12px, weight 300, +0.3px tracking, in the muted gray, with no rule and no fill under them.

Lay the page out as 2–4 full-height columns divided by 1px vertical hairlines in #242424 that run from the top edge of the viewport to the bottom, with ~48px of inner padding on each side of a rule. Divide vertically exactly once, and do it with a drawn SVG sine wave (~8px amplitude, ~24px wavelength, 1px stroke, #2d2d2d) repeating across the column width — that squiggle against otherwise perfectly straight rules is the signature; a straight border-top throws the style away.

Make every list item the same two-line unit: title in #f0f0f0 on line one, a single-sentence description in #7d7d7d on line two, ~24px between pairs, and any classifier flushed to the right edge of the column — a 4px-radius chip filled #2f2b2c with ~11px uppercase text tracked +0.5px, or a 14px icon plus a tabular number. Use exactly two radii, 8px for images and 4px for chips, and nothing else rounded. Let images carry every saturated color in the design: full-width 8px-radius artwork with small overlay stats sitting on the image's lower-left in a translucent dark pill, and a hot red in the #ee2b1d family appearing only because the artwork contains it, never as a UI color.

Keep interaction almost invisible: no buttons, no CTAs, no borders on hover — a link brightens from #7d7d7d to #f0f0f0 in ~120ms and nothing moves. Allow exactly one animated element, a slow marquee line at the top set in italic for the label and bold for the value, and let it run past the column edge so the rule clips it. Open the page with a personal artifact — a photograph, a scan, a screenshot — rather than a headline, and collapse all columns to a single stacked sequence below ~900px with the rules and the wave removed.