A design system is a set of decisions you only get to make well once — the tokens, the type axis, the scale, the single easing curve. This page documents the ones the rest of the site is built on, and demonstrates each in the same medium it governs.
Five values per side, one accent. No purple, no mint, no gradient — just two bones, two inks, and one lacquer spot — every pair contrast-checked in both editions. The swatches below re-render live when you switch theme.
Type grade anywhere for the live contrast audit.
A display sans for statements, a monospace for instruments, a body sans for prose. Three open-source faces, each with one job. Heading emphasis is rationed to one lacquer word per heading — color carries the stress; the face and posture never change.
Display — Archivo, wdth 125 / wght 860
Close the gap.
Data — IBM Plex Mono
The instrument layer. Labels, metadata, timestamps, the command palette.
Body — Archivo
Body text for longer reading, set at a comfortable measure with a baseline-aligned rhythm.
Every margin, padding, and height is a multiple of eight pixels. The bars below are the actual spacing tokens, drawn to size.
All motion on the site runs on a single easing curve — cubic-bezier(0.22, 1, 0.36, 1) — at one of five sanctioned durations. Hover a row to feel it.
Dividers are true half-pixel rules — structure without weight. Two tones: ambient and strong. The rules below are the real thing.
The system documents its own components. Every state a real interface needs — not the happy path — designed, named, and demonstrated live in the medium it governs.
17 states designed, documented, and demonstrated below — not one of them the happy path.
Three moves, written down like any other token: the one easing curve, the activation tick, and the latch that decides when a plotted figure counts as read.