Design tokens can sound like over-engineering, but they remove repeated design decisions from individual screens. Well-governed tokens speed up changes and make consistent execution auditable.
What are design tokens?
A design token is a name for a design decision. "Primary blue" instead of "#1e3a8a". "Spacing-md" instead of "24px". Sounds trivial, isn't.
The difference: change your brand blue, edit one line, 200 screens update. No find-replace, no forgotten spots.
What tokens minimum?
Start small. A minimal token set has:
- Colours: 8-12 tokens cover the entire system (text, bg, surface, border, accent, status).
- Spacing scale: 6 steps (xs/sm/md/lg/xl/2xl) is enough for 95% of UI.
- Type scale: display/h1/h2/h3/body/caption + 1-2 monospace variants.
- Border-radius: 3 values (sm/md/lg) instead of ad-hoc 4/6/8/10/12px everywhere.
- Shadows: 3 elevation levels.
Don't: 47 grey shades, 12 spacing steps, 8 border-radius values. That's not a design system, that's a design museum.
The impact in practice
The practical difference appears in how the team works:
- Without tokens: every feature repeats decisions for color, spacing, type and states.
- With tokens: teams reuse the same decisions and limit visual drift.
- Additional benefit: theme changes and rebrands have one governed source.
When to start?
Ideally before you have 5+ screens. But it's never too late:
Rule of thumb: >10 screens and >2 people on design? No tokens costs you more than they would.
Conclusion
Design tokens aren't an enterprise-only luxury. They're the foundations of every product that wants to move faster than its competition.