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

🐈
Lola

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.

Mobile version

coming soon

Code is the source.

Design tokens

store

design decisions.

Less decisions,

less chaos.