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.
Colour
Five values per side, one accent. No purple, no mint, no gradient: 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.
Type
A display serif for statements, a Clarendon for prose, figures, and controls, and one italic for every label. Two 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: Redaction, regular
Close the gap.
Figures & instruments: Besley 500, tabular
The instrument layer. 0123456789 · 150+ · 2023–2026 · 41%
Body: Besley 400, 16.5 on 27
Body text for longer reading, set at a comfortable measure with a baseline-aligned rhythm.
Scale
Every margin, padding, and height is a multiple of eight pixels. The bars below are the actual spacing tokens, drawn to size.
Motion
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. Each row below arrives in the duration it names; hover one to feel it again.
Rules
Dividers are true half-pixel rules: structure without weight. Two tones: ambient and strong. The rules below are the real thing.
States
The system documents its own components. Every state a real interface needs, not just the happy path, designed, named, and demonstrated live in the medium it governs.
17 states designed, documented, and demonstrated below, and not one of them the happy path.
Choreography
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.