Design tokens sound like over-engineering, but they're the simplest investment with the biggest leverage a product team can make. Set them up once, and you'll build 3× faster the rest of the year.
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
A SaaS team we worked with:
- Before tokens: new feature page took 4 days design + 5 days build.
- After tokens: 1 day design + 2 days build. 3× faster, guaranteed consistent.
- Bonus: dark mode in a week instead of a month — just override tokens.
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.