Design notes
This site is built out of about a dozen tokens and five components. I keep them written down here so that anything I put on a subdomain can look like it belongs without me redesigning it from scratch.
Principles
- 01One column, 40rem wide. Content is never wider than it is comfortable to read.
- 02Four type sizes and three weights. Emphasis comes from space and placement, not from more styles.
- 03Colour carries meaning, not decoration. The accent appears on hover and on status, and nowhere else.
- 04Motion is one idea repeated: 8px up, 620ms, staggered by position. CSS-only, transform-only, and never hidden before it moves.
- 05Every hairline is one pixel. Every radius is small. Nothing has a shadow.
Colour
- bgThe page. Warm, never pure white or black.
- surfaceHover washes, code blocks, quiet containers.
- fgText you are meant to read.
- mutedText that supports the text you are meant to read.
- faintLabels, metadata, timestamps. Present, not loud.
- lineHairlines. One pixel, always.
- accentEmber. Hover states and status. Nothing else.
Defined once in app/globals.css, flipped by a .dark class on <html>. Every value is in oklch, so lightness moves without dragging hue along with it.
Type
24 / titleArjun Sahlot
15 / bodyGeist, set at fifteen pixels over 1.65.
13 / labelSection labels, navigation, footers.
12 / metaGeist Mono · 2026 — now
accentInstrument Serif, for the one phrase per page that earns it.
Reuse
A subdomain gets the same system by copying three files: app/globals.css, components/ui/, and content/site.ts. That is the whole design system. Everything else is composition.
The rule for a new surface: if it needs a token that isn’t here, add it here first, then use it, so nothing routes around the system.