Design
Tokens
Explained
Design tokens explained: what they are, how they connect design and code, and how to set them up for theming and consistency.
What Design Tokens Are
Quick answer: design tokens are named values for design decisions, such as colors, font sizes and spacing, stored in a format both designers and developers use. Change a token once and it updates everywhere. For example, a token called color-primary might hold your brand pink. Every button using that token updates if the pink changes. Tokens also make cross-platform work easier, since the same values can be exported for web, iOS and Android.
Tokens turn a design system from a set of drawings into a shared language between design and code. Semantic tokens make design intent clear. A developer reading color-text-error immediately understands where it should be used.
Design System
Development
Types of Tokens
Global tokens store raw values, like pink-500 or space-16. Alias or semantic tokens describe purpose, like color-button-primary or space-card-padding, and point to global tokens. Keep the number of tokens manageable. Too many tokens can be as confusing as none at all.
Component tokens apply to one component, like button-radius. This layering lets you change a theme, add dark mode or rebrand without touching every component. Spacing and radius tokens are just as important as color, because they shape the overall feel of the interface.
How to Set Up Tokens
Start with color, typography and spacing. Name tokens by purpose, not appearance, so they still make sense after a rebrand. Use Figma variables for design and export tokens to code with tools that keep both in sync. Document each token with its purpose and an example so the whole team uses them correctly.
Kites Design sets up token-based design systems for SaaS teams as part of our product design plans. Review tokens during any rebrand or theme change. Updating a few values is far faster than editing every screen.
(Project)
