An Interactive Guide
What are
design tokens?
What are
design tokens?
Your current setup
What is related?
What is related?
Send me the hex code
No common vocabulary
So, what are design tokens?
Design tokens
are
nicknames
for
design elements.
Imagine you own a cat. Your cat’s name is “Lola.”
You also call her “Lolita,” “Loly,” and “Cutie.”
It's the same with tokens.
🐈
your cat
still the same cat
Loly
yep, still me
Lolita
meow, meow
⬇️
#FFDF38
Raw value
green-100
Primitive design token
link-color-default
Semantic design token
button-primary-background-color
component level design token
☝️
Our decisions
Design tokens
store
design decisions.
for all these types:
color
A
font
space
size
border
border radius
gradient
shadow
time
icons
z-index
motion
composite
Instead of sharing hard coded values
#FFDF38
We create a shared vocabulary.
We define names our team understands.
Benefits
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form action="/submit-your-login-form" method="post">
<div class="input-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
Development
Design
Shared vocabulary
Improves communication between teams.
Scalability and theming
Adding new brands or themes becomes easier.
Solid foundations
A steady design system adds value over time.
Easier maintenance
Edit in one place, and update everything at once.
Consistency
Ensures uniformity in products and brand, making them easier to manage and less prone to visual errors.
Less tech debt
Fewer design and technical issues, saving resources.
Faster development
One source of truth, consistent across all platforms. Cuts down time spent on manual updates. More time to focus on code, not bugs.
Performance optimization
Reduces CSS file sizes by centralizing values.
Speeds up load times and improves performance.
Mobile version
coming soon
Design token levels
☝️
Click and play
Raw value
#FFDF38
Primitive
Semantic
Component
Computational
Adaptive
light
dark
Composite design tokens
combine multiple tokens to create a reusable styles.
☝️
Composite design tokens
A
Text Style
font-size
weight
family
line-height
Border
color
width
style
Gradient
colors
Shadow
color
blur
spread
direction
"header-text-style": {
"font-family": "{font-family-header}",
"font-size": "{font-size-header}",
"font-weight": "{font-weight-bold}"
Token scales
With scales we standardize elements like:
space
size
time
z-index
1
2
3
4
5
numeric
100
200
300
400
500
numeric
xs
s
m
l
xl
xxl
sizes
low
medium
high
emphasis
level-1
level-2
level-3
levels
regular
active
heading
strong
sharp
pill
medium
card
small
full
instant
slow
medium
fast
Design Tokens Naming Structure
Names should be
Short
Meaningful
Scalable
Flexible
Clear, no jargon
Some well-known approaches:
C-T-I approach
category
type
item
color-background-primary
BEM approach
block
element
modifier
color-background-primary
Functional approach
practical use
primary-background-color
tab-color-text-hover
Design Tokens Naming Playground 🛟
Make up a story:
🙋♀️
I need the
color
The button has the
background
for the
button
default
active
hover
focus
disabled
for the
base theme.
role.
I need it in all states (
)
optional
Start playing with names here⤵
Where?
What
Which
How
When
Code vs design
Code
Namespace can be added automatically ⤵
dsg-productX-
color-button-background-primary-active-onlight
productX-
color-button-background-primary-active-onlight
Figma
You don't need to add the namespace/theme in Figma ⤵
color-button-background-primary-active-onlight
Don't do it
What is the difference? 😥
size-100
size-200
size-300
size-400
size-500
size-600
space-padding-xsmall
space-padding-small
space-padding-medium
space-padding-large
space-padding-2xlarge
space-padding-3xlarge
spacing.desktop.small
spacing.desktop.medium
spacing.desktop.large
spacing.mobile.small
spacing.web.small
font-size-12
font-size-14
font-size-16
font-size-18
font-size-22
Don't use exact values 😥
Tools
Implementation
povej formate itd.
Documenting design tokens
I use
Airtable
size
time
z-index
What is related?
How do people find values?
Which tokens did we apply?
Who is responsible?
Where can I find the list?
What users see
Choosing theme
Applying design tokens
Connecting
with global
design tokens
User
Interface
Design
Multi-brand
Design
System
Components
Semantic
Design
Tokens
Foundations
Multi-brand design system
From MVP to Launch
3
Design Tokens Inventory
Code
Database 1
Database 2
Database 3
1
Workshop
Figma
4
MVP
2
Naming Structure
01
Define the scope of the MVP.
02
Develop the language and grammar.
Text Case, Separators, Scales
03
Define naming structure
04
Tooling
Code repos, Figma Libraries, Plugins
05
Testing, Feedback
6
Theming and Scaling
5
Launch v1
CI/CD pipelines
Version control
Automation
APIs
Testing
Code reviews
Linting
Visual
High contrast
Minimalistic
Light
Product/Brand
Brand X
Brand Y
Product X
Accessible
High contrast
Color Blindness
No animations
Platform
iOS
Android
TV
VR/AR
Low motion
3D elements
Start small.
Play.
Blend in.
Learn more
48,1% of respondents still prefer to craft their own naming conventions saying they values "ease of understanding" as their priority when naming.
Mobile version
coming soon
Code is the source.
Design tokens
store
design decisions.
Less decisions,
less chaos.