Skip to content

Token Spec Sheet

A living specimen page generated from a design-token module.

Planned — not built yet

A densely instrumented block — type scale, colour tiers with measured contrast ratios, surface swatches, the spacing scale, the radii — generated entirely from a single tokens module rather than typed out. Add, rename or retune a token and the sheet changes with it, because there is nowhere else for it to come from.

Pairs with an inspector overlay that reads the same module at runtime, so the sheet and the running page can never disagree.

Details

Stack
React · TypeScript
Licence
Free
Added
11 Sep 2026
Tags
design-system, tokens, generated

Start with a background.

The backgrounds are the most finished corner of the catalogue. Take one and drop it under your own copy.

Browse backgrounds