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 paper, ink, and cinnabar held in reserve. The swatches below re-render live when you switch theme.
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 italic word, set in the cinnabar accent.
Display sans — Archivo Black
Close the gap.
Monospace — IBM Plex Mono
The instrument layer. Labels, metadata, timestamps, the command palette.
Body sans — 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.