Style guide
One paper. Two typefaces. One color.
How this site looks, and why. No cards. No boxes. No second color. What says authority here is scale, restraint, and proof. Not decoration.
Color
Use these colors. These colors only.
Each one has a light and a dark value. Switch the theme in the footer and watch this page follow.
paper
The page.
wash
Code, and a menu under the cursor.
rule
The one line between things.
ink-3
Dates, labels, what can wait.
ink-2
Sentences that support.
ink
The writing.
mark
The one color. Use it once per thought.
bad
Something went wrong, or is about to.
Typography
Newsreader for the writing. Inter for everything that isn’t.
.display
The serif, very large. Once per page.
The quick brown fox.
.statement
Two sentences. The second, in <em>, takes the color.
Jumps over the lazy dog. Every single time.
.eyebrow
The label over a part of the page.
Who I am
.lede
The sentences under a statement.
The job requires extra pluck and zeal from every young wage earner.
.prose
Posts and pages, as they read.
Heading 2: Two driven jocks help
Body text with a link, bold, italic and inline code. Pack my box with five dozen liquor jugs.
Heading 3: Fax my big quiz
Waltz, bad nymph, for quick jigs vex.
- A list item
- And another
.cta {
background: var(--ink);
border-radius: 999px;
}.ui / .ui-xs
Inter, small. Dates, navigation, the operator.
September 18, 2026 · 6 min read
Recently featured
Controls
One pill. At most one filled per part of a page.
.cta
The thing the page is asking for.
Button (fill) Button (quiet)Small
.row
A link that is a line ending in an arrow.
.field
An input is a line, not a box.