Token pipeline · proof artefact
The substrate, proven end‑to‑end.
This page renders entirely from tokens. Every colour, size, space and
radius below resolves through vendor/tokens.css, which is
built from DTCG JSON and synced by the pipeline. There is no hand-written
value on this page to fall back on — which is the whole point. The values
printed beside each token are read back out of the rendered page, not
typed in, so if a token changed and this page disagreed, it could only
disagree with itself.
The page is laid out on the same 12-column grid and numbered rail as every other page here, so it demonstrates the layout system as well as the values underneath it.
01
Semantic colours
Thirteen roles, each an alias onto a primitive. The role is what a page
consumes; the primitive underneath can move without a single consumer
changing. Two roles here resolve to the same value — text/default
and background/inverse are both the darkest neutral, because
ink on paper and the ground of an inverse band are the same colour asked
for two different reasons. That is the layer working, not a duplicate.
Text
Background
Border
02
Type scale
All eleven steps. Display sizes are Inter Tight, prose and UI are Inter.
Sizes are authored in rem; the pixel figure beside each is
that value resolved at the browser's root size.
03
Spacing
The scale has deliberate gaps — no 5, 7, 9, 10, 11. Reaching repeatedly for a value between two steps is a signal the scale needs a step, not a reason to hardcode one. Bars are drawn at the token's own width.
- space/0…
- space/1…
- space/2…
- space/3…
- space/4…
- space/6…
- space/8…
- space/12…
- space/16…
- space/24…
04
Radius
Four steps. radius/md does most of the work — it is on the
button, the cards, and the swatches above.
05
Links
Prose and UI set in Inter; headlines in Inter Tight.
A link resolves through the semantic
colour/text/link token and shifts to
link-hover on interaction.
06
Button primitive
One primary button sitewide, on background/accent with
text/on-accent and radius/md.