Governed design tokens across the interface

TL;DR

• The interface needed consistency without turning shared values into a grab bag.
• I needed tokens to preserve component intent, not just visual similarity.
• I separated primitives from semantic and component-owned tokens, then added drift checks.
• The result was a system where components could share foundations without borrowing each other's meaning.

A design system is not just a set of components. It is a way to keep decisions from being remade differently every time a screen is built.

Where it started

Components could look consistent while still depending on the wrong tokens. A button and a card might share a primitive value, but that does not mean one should inherit the other's surface token.

What needed to change

The system needed shared primitives, semantic tokens, and local component tokens. A button should not borrow a card token just because the value happens to look close.

Primitive values can be shared, but each component still owns the tokens that describe its role.

What I built

Colour values start from OKLCH primitives and flow into semantic tokens. Components then compose their own surface, text, border, and state tokens from those primitives.

Drift checks make token changes visible so accidental differences do not quietly become part of the system.

What changed

This gives designers and engineers a shared language. A component can evolve without turning global primitives into a grab bag of one-off values.

What I would watch

More explicit tokens mean more names to maintain. The payoff is that names carry intent instead of only carrying colour values.