Reference
One token file. Zero inline styles.
The whole site reads from a single set of semantic tokens. If a colour appears anywhere else, it is a bug.
01Colour
A warm ladder and one accent
Paper
The reading ground. Warm, low-chroma, never pure white.
Crema
One step down, for banded sections and rhythm.
Espresso
Deep warm near-black for text and inverted panels.
Copper
A single action accent. Primary buttons, focus ring, key links. Nothing else.
Colours are defined in OKLCH in assets/css/tokens.css, the only file in the project containing a raw colour, size or duration. site.css and v2.css consume semantic tokens only.
This site is light-only. It is a reading-heavy site for people who mostly read it in daylight or under office lighting, so the palette is tuned once, for paper, rather than compromised across two grounds.
Type
Fraunces (variable, optical sizing) for display, Inter (variable) for body and UI. Both are self-hosted and licensed under the SIL OFL — no third-party font host, which is also why this site needs no cookie banner. Display tracking is tightened, headings use text-wrap: balance, body runs at a 65-character measure, and numbers are set with tabular-nums.
Space, elevation, motion
- Space: a 4 px base; section rhythm at 64 / 96 / 128; a 1240 px container.
- Elevation: hairline borders and stepped surfaces rather than shadows. One soft shadow exists, on the hero canvas.
- Radius: 6 on controls, 14 on cards, a pill on the primary call to action. Nested radii are concentric.
- Motion: 150 / 220 / 320 ms, ease-out. Hover effects are gated behind
(hover: hover). Everything collapses to a 1 ms fade underprefers-reduced-motion.
Accessibility rules that constrain the design
- WCAG 2.2 AA is the target; see the accessibility statement.
- 44 px minimum target size, labels above fields, a dual-ring focus indicator that works on every surface.
- No horizontal overflow at any width from 280 px up.
forced-colors,prefers-reduced-transparencyandprefers-contrastare all honoured.