Tokens before components, every time
The fastest way to make a design system feel real is to ship components. Buttons, inputs, modals, something people can pull into a file this week. It is also the fastest way to build a library that becomes impossible to change eighteen months later.
Tokens first is slower to demonstrate and much harder to sell, because a token architecture looks like nothing. It is a spreadsheet of names. But it is the difference between a rebrand taking nine days and a rebrand taking a quarter.
I have now watched both approaches play out on the same organisation, and the gap is not close.
A design token is a named decision. Not a hex value with a label on it, a decision with a name, so that when the decision changes the name does not have to.
That distinction sounds pedantic until you try to change something. If four hundred components reference a value called blue-600, then blue-600 is now load-bearing and you cannot make your primary colour green without either lying with the name or editing four hundred files.
Three tiers, and no shortcuts
The architecture I use has three levels, and the discipline is entirely in the second one.
- Primitives: the raw palette. teal-500, space-4, radius-lg. No meaning attached, no product ever references these directly.
- Semantics: the decision. action-background, surface-raised, text-muted, border-focus. Products consume these and only these.
- Component tokens: the local override. button-primary-background, table-header-border. They point at semantics, never at primitives.
The rule that makes it work is one line long: product teams may never reference a primitive. It sounds bureaucratic. It is the entire mechanism. Everything downstream of it is what lets you change a decision in one place and have it land correctly in four hundred.
What this bought, concretely
On a four-product B2B system I built, the company ran a rebrand nine months after launch. New primary colour, adjusted greys, a slightly different corner radius throughout.
It took nine days end to end, and most of that was visual QA rather than editing. We changed the primitive values, checked that every semantic alias still met its contrast requirement, and shipped. The previous rebrand at that company, before the system, had taken a full quarter and never actually finished, which is why there were still four button styles in production.
Naming is the hard part, and it is worth the argument
Semantic names are where systems live or die, and they are genuinely difficult. Name by role, never by appearance. text-muted survives a redesign, text-grey-light does not. surface-raised holds up when raised stops meaning a drop shadow and starts meaning a border.
Some tests I apply before a name ships: could I change the underlying value substantially without the name becoming a lie? Would a new engineer pick this correctly without reading documentation? Does it describe where it goes rather than what it looks like?
If you have to explain why the token called grey-100 is now beige, the name was wrong before the value changed.
Accessibility becomes a property of the system
This is the benefit that rarely gets mentioned and matters most. Define semantics as surface and content pairs and contrast stops being something a designer has to remember on each screen.
On an insurance product I retrofitted, changing six colour tokens resolved three hundred and eighty separate WCAG failures in one commit. Not because anyone touched three hundred and eighty screens, but because those screens were consuming semantics rather than picking their own greys.
Selling it to people who want components
You will still be asked for a button in week one, and you should give them one. Build the token layer, then ship three or four high-traffic components on top of it immediately, so people can see the mechanism working rather than just hearing about it.
The pitch is not architecture. It is this: how long did the last rebrand take, and how much of that was find and replace? Everyone remembers. That question does more work than any diagram of three tiers.