One token set, five sites

What a project is allowed to change

Two axes, and no others. A hue angle, and the typefaces the site self-hosts. Identical everywhere else — which is what makes five sites read as one hand without making them look like one template.

Palette

Authored in OKLCH so a hue change moves every brand colour together and keeps its lightness — the reason one number can rebrand a site. Both columns are rendered from the same file; nothing switches with your system theme.

Contrast contract

Each pair below is measured at build against two models and has to clear both. WCAG 2.1 is the normative one. APCA is the second opinion, and it earns its place: WCAG 2 applies one formula to both polarities and so flatters light-on-dark, which is how a dark --muted once shipped at 6.0:1 — past AA without argument — and Lc 42, under half of body level. Nothing in any suite could see it.

APCA is not a standard, and the WCAG 3 draft neither adopts nor mentions it — its own requirement text still reads @@[contrast measure to be determined]. The Lc floors here are ours, calibrated against what Primer, Carbon, Material and Tailwind ship.

Two rows are meant to be red. A /55 tint of the body colour is why --muted exists at all: it measures under AA and looks perfectly fine, which is the worst combination. And --primary is a fill, held dark enough that --on-primary clears AA on top of it — which leaves it unreadable as text, and is why --link is a separate token. Both rows are here so the failure is visible rather than remembered.

The table proves the ramp is sound. Proving the pages use it takes a second suite: every visible text node on one page per template, in both themes and with the modal open, is measured in the rendered DOM and held to the weakest floor the contract grants at that size. Lighthouse cannot reach any of that — it audits light mode only, scores nothing without a text node, and never opens a dialog.

It is not decorative. Turned on here it found 122 alpha tints of the body colour, five more in color-mix(), an accent fill used as 13px text, and a heading pair at 1.33:1 — on pages that were scoring 100 for accessibility.

Type scale

A ~1.25 ratio, six steps. The families are the one thing each project sets for itself: this site pairs Outfit with DM Serif Display, the library landings use Schibsted Grotesk, and x-profile-location self-hosts Archivo on a hard LCP budget.

Shape, depth and motion

Durations are tokens too — --dur-fast, --dur-base and --dur-slow — and all three collapse to 1ms under prefers-reduced-motion, once, in the token file. A consuming stylesheet never writes that media query for a transition again.

Who uses it

Distributed by copying the file. No package, no version, nothing to bump — five consumers is well under the point where a registry earns the release ceremony it costs.