Building a Token System for Design System

Jesslin Lee
3 min readFeb 28, 2023

--

Photo by Balázs Kétyi on Unsplash

What is a token?

A token in general is an object that represents something else.

What is a system?

In general, a system is a collection of elements that are working together following a set of rules for a common purpose.

Now, let’s combine these 2 words.

Token + System = Token System

To create a design we need to have various elements, from color, typography, border-radius, spacing, etc. All of these elements contain a value. For example:

Color: #ff0090

Border-radius: 8px

Spacing: 2px

Typography Size: 16px

All of these values can be converted into tokens. For example:

Color: background/primary

Border-radius: radius/type-1

Spacing: spacing/type-1

Typography: body/m

Before using the token system the design team needs to pass raw values like color #ff0090 to the developer. It is doable for one color, but if there are 10 colors in the design it will be hard, humans are prone to make mistakes. That’s why using tokens will benefit the design system.

The Benefit of Using a Token System

  • Increase communication and collaboration between design and dev. With a token designer can share a human-readable format with the developer.
  • The token will help maintain consistency between design and development. For example, if buttons in design have the same token name in both design and development. It means there are no discrepancies between both sides.
  • Platform agnostic format, This means the token should work for any platform desktop, tablet, or mobile.
  • Suitable for codes in development.
  • Help the design system become scalable, Tokens will help the theming process across the design and dev.

How do we create a token?

There is various method of creating a token, for example:

A. Global Tokens

In this method, the token names are created with content-agnostic names. For example:

Color Value: #ff0090

Color Token: flamingo

The downside of using this naming method is the naming is too generic. It’s not clear where we can use this token.

B. Alias Tokens

Alias token names represent a specific purpose of the token. For example:

Color Value: #ff0090

Color Token: primary-brand-background

This type of token can be used in multiple places. It’s not too generic and too specific. Just right in the middle.

C. Component-Specific Tokens

The token names are created based on their usage in the component. For example:

Color Value: #ff0090

Color Token: button-primary-brand-background

This type of token naming will be hard to use. Because it is created specifically for the primary button component. it doesn’t give us the flexibility to use this token in other places. In the end, more tokens will be needed to cover all of the components.

Tokens are used repetitively across the design. I suggest creating the token based on its purpose using the alias method. Only add new tokens if there is a new purpose needed.

Make it generic enough so it can be reused across various places. Tokens that are too specific can only be used 1 or 2 times. This will make a big list of tokens since you are adding the tokens for a lot of use cases. More tokens more maintenance.

The example above mostly covered color tokens. For other types of token styles such as border-radius, typography, sizing, spacing, etc. The treatment will be a little bit different. I will cover this topic deeper in the upcoming article. Stay tuned. Take care :)

--

--