An Interactive Guide with Playbook
Design Tokens Naming Playbook
Design Tokens Naming Playbook
Design Tokens Naming Playbook
So, what are design tokens?
So, what are design tokens?
Design tokens
Design tokens
Design tokens
are
are
are
nicknames
nicknames
nicknames
for
for
for
design elements.
design elements.
design elements.
size-ladybeetle
🐞
size-butterfly
🦋
size-squirrel
🐿️
size-dog
🐕
size-elephant
🐘
Imagine creating names with real-world analogies. Not okay :)
Mobile version
coming soon
Why is it so hard?
“I will just use this color here ...”
"Difficult to understand".
What are Figma Variables?
Oooops, scaling...😅
What does a design system mean to you?
What is Git?
Should we have a lot of tokens?
Omg,
so many
duplicates.
Too many tokens
What is the best
naming strategy?
I have no clue what composite tokens are.
Life before tokens was easier. 😅
“Token is deprecated”. What now?
Ohhh, no guides here. 🫠
Library is not updated. 😢
I will just use AI …
Common challenges
Code, not design, is the definitive source. It's the final view for users.
We should have one central repository to pull and push design tokens.
Code ≠ design
Collaboration
Developers
Designers
Content Specialists
QA
Product manager
Stakeholders
Accessibility Specialists
Design tokens
are
design decisions.
Fewer decisions,
less chaos.
You get:
Improved product development
Easier maintenance
Brand consistency
Scalability
green grass
too sunny
fire
##F8783A
barbie-light
my favourite
water bright
darker vanilla
I’m vanilla
they call me invisible
dark green
Design Token Categories
color
A
font
space
size
border
border radius
gradient
shadow
motion
time
icons
composite
z-index
Design token types
Raw value
#FFDF38
Primitive
Semantic
Component
Computational
Adaptive
light
dark
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
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
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
Workflow
components
components
1
Define foundations
2
Workshop
3
Documenting
4
MVP
5
Launch
6
Theming and scaling
02
Workshop
Workshop Goals
Understand current processes
General alignment
🕵️ Game: Name of the component?
Naming structure versions
Share experience
Choose tooling
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
Your approach?
CTO
designer
DS Manager
developer
03
Documenting
What is related?
How do people find values?
Which tokens did we apply?
Who is responsible?
Where can I find the list?
Courses and guides
Courses and guides
The Ultimate Airtable DS Inventory Guide
The Ultimate Airtable DS Inventory Guide
What's inside:
Step-by-step guide with screenshots
Video instructions
Instructions
Workshop Instructions
Ready to use Airtable database
Figma template
List of Automations with set-up guides
Prompts and examples you can copy and use immediately
List of useful tools
Useful Airtable Extensions
Design Tokens Mastery Guide
Guides
Presentations
Checklists
Guides
Guides
Presentations
Checklists
Guides
Guides
Presentations
Checklists
Guides
Step-by-step video lessons
Presentations in PDF
Editable Figma playground files
Editable JSON files (simple to multidimensional themes)
Checklists in PDF, Google Docs, Airtable
The list of useful tools
List of design systems with tokens
Lifetime access to course materials
Playground files to apply learnings
🔄
Free course updates and new lessons
💎
BONUS: Tool for generating design tokens
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
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2025 The Design System Guide by Romina Kavcic
The DSG Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2025 The Design System Guide by Romina Kavcic
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox.
No ads, no fluff.
© 2022 - 2025 The Design System Guide by Romina Kavcic