STEP 1

STEP 1

STEP 1

Design tokens, what?

Design tokens, what?

Design tokens, what?

Imagine you own a cat. Your cat’s name is “Lola.” But you also call her “Lolita,” “Loly,” and “Cutie.”

Imagine you own a cat. Your cat’s name is “Lola.” But you also call her “Lolita,” “Loly,” and “Cutie.”

Imagine you own a cat. Your cat’s name is “Lola.” But you also call her “Lolita,” “Loly,” and “Cutie.”

🐈
Lola
🐈
🐈
Loly
🐈
Lolita

original name

original

name

the same cat

the same

cat

#00FFD7
green-100
link-color-default

button-primary-background-color

button-primary-bg-color

the same color

original name

original

name

Think of design tokens like nicknames for your design elements.

Instead of using hard codes like color hex codes or pixel sizes, we give them names. These names, or 'tokens', store design details in a simple, easy-to-read way. They work with all style files in your system, making your design consistent and easy to scale.

These tokens can be linked to create a theme. This makes it easy to grow your design and keep it consistent across all platforms, like Web, iOS, and Android.

The idea of design tokens started with Salesforce’s Design System in 2014. Now, they're the smallest but most important part of any design system. They're like the building blocks of your design language, making sure your brand looks the same across all platforms.

In short, design tokens are the backbone of your design system. They keep your brand's visual style consistent and easy to manage.

why use design tokens?

why use design tokens?

why use design tokens?

Benefits

Benefits

Benefits

With design tokens, we achieve:

With design tokens, we achieve:

With design tokens, we achieve:

Use of the same language.

Improved communication between teams.

Synced files.

One source of truth, 

consistency on all platforms.

Solid foundations.

Steady design system brings value.

Easy maintenance.

Edit in one place, update all at once.

Brand consistency

Creating new products, maintaining uniformity, and managing a brand is becoming more accessible, faster, and cheaper with a transparent visual hierarchy system.

It becomes more accessible, faster, and cheaper with a transparent visual hierarchy system.

Less design and technical debt.

means fewer resources are spent.

ONE STANDARD, UNLIMITED APPS

ONE STANDARD, UNLIMITED APPS

ONE STANDARD, UNLIMITED APPS

Standard, where are you?

Standard, where are you?

Standard, where are you?

No matter what, we need a standard if we want to adopt design tokens in multiple apps.

No matter what, we need a standard if we want to adopt design tokens in multiple apps.

No matter what, we need a standard if we want to adopt design tokens in multiple apps.

The good news is that W3C Design Tokens Standard is coming up! Soon-ish.

When the standard is published, it will allow other tools to communicate in the same “language.” Imagine taking colors from the Figma Tokens plugin and plugging them into Adobe Illustrator or Pitch. Exciting times. 😅

If you want to learn more about the standard, you can visit the Official Design Tokens Community Group.

The good news is that W3C Design Tokens Standard is coming up! Soon-ish.

When the standard is published, it will allow other tools to communicate in the same “language.” Imagine taking colors from the Figma Tokens plugin and plugging them into Adobe Illustrator or Pitch. Exciting times. 😅

If you want to learn more about the standard, you can visit the Official Design Tokens Community Group.

The good news is that W3C Design Tokens Standard is coming up! Soon-ish.

When the standard is published, it will allow other tools to communicate in the same “language.” Imagine taking colors from the Figma Tokens plugin and plugging them into Adobe Illustrator or Pitch. Exciting times. 😅

If you want to learn more about the standard, you can visit the Official Design Tokens Community Group.

DESIGN TOKEN TYPES

DESIGN TOKEN TYPES

DESIGN TOKEN TYPES

Naming Conventions

Naming Conventions

Naming Conventions

These categories are now your guidance for naming. However, you can use a different logic, as long as others will understand it too.

These categories are now your guidance for naming. However, you can use a different logic, as long as others will understand it too.

These categories are now your guidance for naming. However, you can use a different logic, as long as others will understand it too.

Naming takes time. Usually, teams spend a lot of brain power finding the perfect logic. You can find inspiration in other open design systems, but that doesn’t mean it will work for you. I recommend a workshop to find the most optimal structure for your use case.

Naming takes time. Usually, teams spend a lot of brain power finding the perfect logic. You can find inspiration in other open design systems, but that doesn’t mean it will work for you. I recommend a workshop to find the most optimal structure for your use case.

Names should be:

short

meaningful

easy-to understand

modular

consistent

Let's go through some basic examples.

Let's go through some basic examples.

Primitive tokens
are the primitive values.

blue-700

Alias tokens
relates to specific context.

bg-color

Component-specific tokens
relate to a component.

button-bg-color

Play with design token types ⤵️

Play with design token types ⤵️

Play with design token types ⤵️

Raw value

#FFDF38

Primitive

Semantic

Component

Computational

Adaptive

light

dark

Primitive design tokens

We also call them "global design tokens" or "core design tokens." Imagine that you put all your brand possibilities (colors, spacings, etc.) into one bucket.

We also call them "global design tokens" or "core design tokens." Imagine that you put all your brand possibilities (colors, spacings, etc.) into one bucket.

Colors

Some teams love names like mystery blue, fresh pink, and sunshine yellow, but this only works when you have a limited set of colors. It is memorable and easily understood by non-designers, but it is tough to memorize 50+ crazy names.

The solution is to use abstract names based on tonal values and then combine them with semantic, component-specific tokens (remember the cat above 😅).

Some teams love names like mystery blue, fresh pink, and sunshine yellow, but this only works when you have a limited set of colors. It is memorable and easily understood by non-designers, but it is tough to memorize 50+ crazy names.

The solution is to use abstract names based on tonal values and then combine them with semantic, component-specific tokens (remember the cat above 😅).

We also call them "global design tokens" or "core design tokens." Imagine that you put all your brand possibilities (colors, spacings, etc.) into one bucket.

Instead of using #hex color codes, you would name colors with values from 1 to 100 (or 100-1000). This logic allows you to add a color inbetween, if needed.

Every tone value between 0 and 100 expresses the amount of light present in the color. The 100 tone is always 100% white, the lightest tone in the range; the 0 tone is 100% black, the darkest tone in the range.

We also call them "global design tokens" or "core design tokens." Imagine that you put all your brand possibilities (colors, spacings, etc.) into one bucket.

Instead of using #hex color codes, you would name colors with values from 1 to 100 (or 100-1000). This logic allows you to add a color inbetween, if needed.

Every tone value between 0 and 100 expresses the amount of light present in the color. The 100 tone is always 100% white, the lightest tone in the range; the 0 tone is 100% black, the darkest tone in the range.

Example:

blue-400

blue-500

blue-600

Strive for a simple, minimal palette.

This doesn’t mean you should add all the colors in the world. 😅

Strive for a simple, minimal palette.

Please remember that this doesn’t mean you should add all the colors in the world.

Alias design tokens

Here, we use a combination of descriptive (specific) tokens with a purpose (color name—color-blue-400). These two examples can serve as connectors and reference the colors above. You are adding a meaningful layer to the value.

Here, we use a combination of descriptive (specific) tokens with a purpose (color name—color-blue-400). These two examples can serve as connectors and reference the colors above. You are adding a meaningful layer to the value.

Example:

color-background-primary

color-background-primary

blue-400

color-text-default

#ffffff

You are adding a meaningful layer to it. ⤴️

You are adding a meaningful layer to it. ⤴️

You are adding a meaningful layer to it. ⤴️

Component-specific names

color-background-button-primary-active

blue-400

color-background-button-primary-hover

white

You can use alias tokens and create different themes if you have a multi-brand design system. For example:

You can use alias tokens and create different themes if you have a multi-brand design system. For example:

Brand A

color-bg-card

white

Brand B

color-bg-card

grey-400

Sizes

T-shirt sizes

xx-small

x-small

small

medium

large

x-large

The easiest way for technical or non-technical people is using T-shirt sizes. We are all aware of small, medium, large and extra large.

The easiest way for technical or non-technical people is using T-shirt sizes. We are all aware of small, medium, large and extra large.

Numeric states

1

2

3

4

5

6

Cloudspace Design System

You can also use numeric scales, for example, 0-1000, 1-10, etc. The easiest way is to follow the same pattern and steps between numbers once you decide on multiplayer.

For example, If you use number 1 for 2px and want to multiply it by 2, then number 2 should be 4px.

You can also use numeric scales, for example, 0-1000, 1-10, etc.

The easiest way is to follow same pattern and steps between numbers once you decide on multiplayer.

For example: If you use number 1 for 2px, and you want to multiply it by 2, then number 2 should be 4px.

States

default
default
hover
hover
active
active
selected
selected
visited
visited
disabled
disabled
enabled
enabled

Categories

color

color

A

A

font

font

space

space

size

size

border

border

border radius

border radius

gradient

gradient

shadow

shadow

motion

motion

time

time

icons

icons

composite

composite

z-index

z-index

Levels

Now that you understand the basics, we can move on to the more sophisticated names. Complex, multi-brand design systems need many levels for naming because they need to include multiple themes.

Now that you understand the basics, we can move on to the more sophisticated names. Complex, multi-brand design systems need many levels for naming because they need to include multiple themes.

2 level naming:

category

concept

color-action

3-level naming:

category

component

variant

background-button-primary

4-level naming:

category

component

variant

state

background-button-primary-hover

Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool comes with its own set of features, so it's important to understand what each offers and how it can benefit your design process.


If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values. One of the best and most used is Style Dictionary.

Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool comes with its own set of features, so it's important to understand what each offers and how it can benefit your design process.


If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values. One of the best and most used is Style Dictionary.

Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool comes with its own set of features, so it's important to understand what each offers and how it can benefit your design process.


If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values. One of the best and most used is Style Dictionary.

TOOLS

TOOLS

TOOLS

Managing Design Tokens

Managing Design Tokens

Managing Design Tokens

Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool has its own features, so it's important to understand what each offers and how it can benefit your design process.

For example, I'm using Airtable to have an overview of all design tokens and components. When I change the value, it automatically changes everywhere where I am using it. Also, it is very easy to see which design tokens are applied to components, tag responsible people, send automatic messages to design system channels, etc. With the help of AI, I transform the table to JSON and copy it to Figma (to get variables) or Tokens Studio.

Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool has its own features, so it's important to understand what each offers and how it can benefit your design process.

For example, I'm using Airtable to have an overview of all design tokens and components. When I change the value, it automatically changes everywhere where I am using it. Also, it is very easy to see which design tokens are applied to components, tag responsible people, send automatic messages to design system channels, etc. With the help of AI, I transform the table to JSON and copy it to Figma (to get variables) or Tokens Studio.

Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool has its own features, so it's important to understand what each offers and how it can benefit your design process.

For example, I'm using Airtable to have an overview of all design tokens and components. When I change the value, it automatically changes on my view. With the help of AI, I transform the table to JSON and copy it to Figma (to get variables) or Tokens Studio.

The Ultimate Design System Inventory Guide

Create an overview of your components and design tokens with Airtable.
Automatically sync values, notify people and track changes.

Create an overview of your components and design tokens with Airtable. Automatically sync values, notify people and track changes.

Create an overview of your components and design tokens with Airtable. It's the easiest way to organize all your design decisions.

Style Dictionary

Style Dictionary

If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values. One of the best and most used is Style Dictionary.

If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values. One of the best and most used is Style Dictionary.

If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values. One of the best and most used is Style Dictionary.

Style Dictionary translates raw JSON data into a platform-specific format. It is available as a CLI through NPM, but can also be used like any normal node module if you want to extend its functionality. It can generate different output formats like variables for the common CSS preprocessors like Sass, Stylus, and Less. But it also generates an XML version for Android or a JSON version for iOS (which you don’t get by using only the Figma Tokens plugin).

For example, you will use Style Dictionary, when you want to translate values from RGB in .css (web) to RGBA in .json (iOS) to 8-digit Hex AARRGGBB as .xml (Android).

Style Dictionary translates raw JSON data into a platform-specific format. It is available as a CLI through NPM, but can also be used like any normal node module if you want to extend its functionality. It can generate different output formats like variables for the common CSS preprocessors like Sass, Stylus, and Less. But it also generates an XML version for Android or a JSON version for iOS (which you don’t get by using only the Figma Tokens plugin).

For example, you will use Style Dictionary, when you want to translate values from RGB in .css (web) to RGBA in .json (iOS) to 8-digit Hex AARRGGBB as .xml (Android).

Style Dictionary translates raw JSON data into a platform-specific format. It is available as a CLI through NPM, but can also be used like any normal node module if you want to extend its functionality. It can generate different output formats like variables for the common CSS preprocessors like Sass, Stylus, and Less. But it also generates an XML version for Android or a JSON version for iOS (which you don’t get by using only the Figma Tokens plugin).

For example, you will use Style Dictionary, when you want to translate values from RGB in .css (web) to RGBA in .json (iOS) to 8-digit Hex AARRGGBB as .xml (Android).

Visualizing token structure

Visualizing token structure

If you have difficulty understanding the hierarchical structure of your design tokens from .json, you can use this tool to see the connections (even if you are entirely non-technical.)

How to do it?

1 Open jsoncrack.com

2 Copy your .json file to the editor.

3 Voilà, you can see the whole structure.

If you have difficulty understanding the hierarchical structure of your design tokens from .json, you can use this tool to see the connections (even if you are entirely non-technical.)

How to do it?

1 Open jsoncrack.com

2 Copy your .json file to the editor.

3 Voilà, you can see the whole structure.

If you have difficulty understanding the hierarchical structure of your design tokens from .json, you can use this tool to see the connections (even if you are entirely non-technical.)

How to do it?

1 Open jsoncrack.com

2 Copy your .json file to the editor.

3 Voilà, you can see the whole structure.

Enjoy the design tokens magic.
Don’t overcomplicate.

Enjoy the design tokens magic.
Don’t overcomplicate.

The Design System Tools

The Design System Tools

The Design System Tools

Explore the list of design system tools

Explore the list of design system tools

Explore the list of design system tools

About me

The Design System Guide Newsletter

Get new tips in your inbox every week about design systems & strategy.

© 2022 - 2024 The Design System Guide by Romina Kavcic

About me

The Design System Guide Newsletter

Get new tips in your inbox every week about design systems & strategy.

© 2022 - 2024 The Design System Guide by Romina Kavcic

About me

The Design System Guide Newsletter

Get new tips in your inbox every week about design systems & strategy.

© 2022 - 2024 The Design System Guide by Romina Kavcic