When building an app or website, keeping the design consistent can be tricky. This is where design tokens come in.
What are design tokens?
Think of design tokens as the digital building blocks of a brand.
Instead of typing a specific blue colour like #0055FF every single time you need to use it in your app, you save it as a named token, like color-brand-primary.
If the company later decides to change their primary colour to red, you only update that token once. The entire app (across websites, iOS, and Android) updates instantly. This saves immense time and prevents mistakes.
The cooking analogy
To understand how tokens fit into building an app, think of cooking:
-
Primitive Tokens (Basic Ingredients)
- 🌾 Flour
- 🍬 Sugar
- 🧈 Butter
- 🥚 Eggs
In design, these are your base colours, raw spacing values, and raw fonts.
-
Semantic Tokens (Pre-measured Ingredients)
- 🍰 Cake Mix
- 🍪 Cookie Dough
- 🍞 Bread Dough
In design, these are tokens named
button-background-colororheading-font-size. They give a specific, easy-to-understand purpose to the basic ingredients. -
Components (Final Dishes)
- 🥞 Pancakes
- 🍔 Burgers
- 🍕 Pizza
In design, these are a fully functional “Submit” button or a user profile card on the screen.
Why do we use them?
- Consistency: Ensures the website and mobile apps look exactly the same.
- Efficiency: Changing a style in one central place updates it everywhere automatically.
- Teamwork: Designers and developers finally speak the exact same language.
The takeaway
Design tokens are just a smarter way to store and manage design decisions. By organising styles as reusable named values, teams can build faster, adapt to changes easily, and deliver great products.