Glossary — the words this site invented

This site uses nine words in ways you would not guess. None of them is standard vocabulary; all of them appear thousands of times. Here is what each one means.

They exist because this design system spans three unrelated worlds — React components, hand-written CSS classes, and a Figma library — and ordinary words like "component" quietly assume one of the three.

The words

construct — a component, in the broadest possible sense. We avoid "component" because some of these are React components, some are only a CSS class with no JavaScript at all, and some are both. If you read "construct" as "component" you will almost never be misled.

axis — one of the four independent places a construct can exist: in code, in a stylesheet, in Storybook, in Figma. A construct can be present on one axis and absent from the other three, and most are. "Complete on all four axes" is the system's best case and it is rare.

token — a named value. --color-azure-400 rather than a hex code written by hand, so the value can change in one place. Nothing more exotic than that.

tier — how far a colour is from being a raw value. A primitive is a specific colour and says nothing about its purpose. A semantic token is named for what it is for — an alert, an error surface — and points at a primitive. Legacy tokens are older names still in the code that new work should avoid. Reach for semantic tokens: the purpose survives a repaint and a specific red does not.

verdict — our judgement on whether a token is usable, and there are exactly three:

• house — we declare it and it renders. Use it.
• vendor — it renders, and it comes from Tailwind's defaults rather than from anyone here. It carries no design intent.
• inert — we declare it and nothing renders it. This is the dangerous one. An inert name is byte-identical in the source to one that works, so it looks entirely usable and is not. --font-size-3xl is the canonical example.

resolves through — the chain of names between a token and its real value. --color-link may mean --link, which means --color-azure-400, which is finally a hex code. Where light and dark themes take different routes, both chains are shown, because a value read off the wrong chain is wrong in a way nothing signals.

class root — the base of a CSS class, without its variants. The root of .c-button--white is .c-button. We count roots rather than classes because a construct is one thing regardless of how many modifiers it has.

specimen — a swatch published in the Figma library, encoding a value as a component variant. It exists because our Figma plan gives no API access to variables, so the values had to be published as something an API can read. It is a workaround, visible in the vocabulary.

drift — the design library and the shipped CSS disagree about a value. Worth separating from not comparable, which means the two sides are not the same kind of thing and no verdict is possible.

Two words that mean less than they look

join — matching records from different sources by name, nothing more. When this site says two things "join", it means their names were identical. There is deliberately no cleverness: if Figma says Side navigation and the code says SideNavigation, they do not join, and the site reports that rather than bridging it. A rule that bridged the gap would be a mapping table nobody could audit, and the mismatch is itself the finding.

provenance — where a number came from and how current it is. Every generated page carries it at the foot: which commit of the product was read, and when.

What none of these words tell you

Whether anything is good. This vocabulary describes what exists and where it exists. Every judgement — which control to use, whether a gap matters, whether a component should exist at all — is on a hand-written page or nowhere.