Design system
The actual tokens and primitives this site renders with, imported from the same code the pages use, so this page cannot drift from reality. Quiet, typography-led, near-monochrome with one accent.
Principles
- Typography does the design: hierarchy from size, weight, and space, not boxes.
- One accent colour, spent sparingly on links and selection.
- Hairline borders separate; backgrounds stay out of the way.
- Every element earns its place. If it doesn't inform, it goes.
- Server-rendered and semantic first; scripts only enhance.
Colour
Tokens are OKLCH with a 140° green hue thread. Toggle the theme to see both modes:
--bgbgPage background--surfacesurfaceCode blocks, subtle panels--inkinkBody text, primary buttons--mutedmutedSecondary text, quiet links--accentaccentLinks, selection, the one colour--borderborderHairlines, dividers--border-strongborder-strongInteractive borders
Type
Newsreader (serif) for display, Geist for body and UI, Geist Mono for code and data. Body measure caps at 65ch via max-w-prose.
Spacing rhythm
gap-x-4 / 1remBetween inline linksmt-3 / 0.75remHeading to its subtitlemt-6 / 1.5remHeading to section contentspace-y-10 / 2.5remBetween entries in a listmt-16 / 4remBetween page sectionspy-16 / 4remPage top and bottom padding
Primitives
TextLink · accent / quiet / ink
Button · primary / secondary / ghost
TextInput · Select · Checkbox
EntryGrid · dated entries (CV, education, lists)
Entry heading
Organisation · context note
Body content sits in the right column; the left gutter carries the date in tabular figures.
MetaText · DateStamp
Secondary information
Divided list (repo table rows)
- first itemTypeScript · Jul 2026
- second itemTypeScript · Jul 2026
Prose (blog posts)
Long-form content uses prose-quiet: comfortable line height, accent links, and surface-tinted code blocks.
pnpm buildSelection
Select this sentence to see the accent selection colour.