Design tokens 101: A short and practical guide

Design tokens, as foundational elements of design systems, play a crucial role in ensuring that design elements are well-defined, synchronized, and adaptable, contributing to reliable branding and design efficiency.

“A design system isn’t a project. It’s a product serving products”, argues Nathan Curtis, the founder of UX agency EightShapes.

A design system is essentially a set of standards to make the design process easier, faster and of higher quality. Though often misunderstood with style guides, design systems are much more than that. It brings together several aspects to produce a consistent identity and visibility for products and organizations. 

Design systems bring teams together, help them communicate, collaborate and reduce margin for error. They are known for increasing operational efficiency and enhancing the business growth of companies. 

In discussions of design systems, the term design tokens often comes up. When systems are spoken of as being essential to consistency and efficiency, it is natural to wonder: where do design tokens come in, and why?

What are design tokens?

If a design system is a set, then style guides are a subset. In style guides, having tokens ensures uniformity and easier development. Here's how. 

Design tokens are the building blocks of a design system. For each value, they assign a role and provide a purpose through well-defined naming conventions. Tokens are foundational aspects of constructing a design system. A token can be made out of any element used in a design, like color, text style, spacing, or border-radius. Tokens come together to create a uniform and consistent design. 

It's Important to filter out and decide which elements can be defined as tokens in order to maintain a clean and clear design system. A good rule would be to examine the number of times an element is used. For example, if the background color of a CTA button is used 10 times in the design, it calls for consistent color usage at every point that a CTA button has been used - this is where tokens come in handy.

On the other hand, if a color is used once or twice to define a very specific element, it can be changed easily if required and need not be converted into a token.

Effective use of design tokens can significantly enhance the benefits of design systems.

Design tokens are essentially decisions. These decisions are taken by a designer. Tokens give values and variables a purpose, stating exactly where they should be used.

Using tokens

Let’s consider an example:

A color palette is created for a product; there is a range of blues, greens, and whites. Each shade has a HEX value. Each value is provided a name (eg.: blue 100, blue 90, etc.) according to its characteristics - this provides structure.

However, there is something missing.

That is the bridge between the name of the element, and the use. Here, there are no hints as to where the color will be used. There is a great risk of miscommunication, unnecessary usage for clarification, and tedious work on part of the developer to change values accordingly.

Hence, a token is created out of this variable. This color receives a purpose. It is named in such a way that this color will be used specifically for the CTA button’s background. This ensures that throughout the system, this variable, of this very color and scale/opacity is used.

Four tokens have been used to define this. It is understood that the blue is for the background, the white is for the body text, and the font is like so, with a specific border-radius. If at any point these values are changed, the developer would not have to go about changing them in the code. The values would change automatically.

Reading tokens

Tokens are typically named in a manner that makes their role clear. The structure of the name can vary among design systems, but the intention is clear: to bridge the gap between the name and the purpose, as mentioned earlier.

The following are some examples of token names from some of the best design systems :

The advantages of design tokens

1. Synchronization

The biggest advantage of tokens, besides how they bridge gaps in naming and communication, is that the design stays in sync. It ensures consistency, reliability, and aids good branding.

2. Flexibility and easier development

It ensures flexible design by replacing hard-coded values leading to a lot of time savings. When a designer changes a color value in the Figma file that's being used for the design system, the new change applies everywhere the token is used when the data source is updated. Hence, automatic updates are received by the developer where the token is used for the changed element.

Summing up

Tokens are essentially values and styles that are given a purpose and assigned roles though uniquely identifiable names. They ensure consistency as:

•  It is well-defined through the roles assigned in the token name which specifies where each token is used and why (bridging the gap between use and name).
• The values automatically update wherever the respective token is used (eliminating the need for hard-coded values).

When tokens come together, they create design elements that stay consistent throughout the product. They continue to establish themselves as key drivers of reliable branding and efficiency in design.