What Are Design Tokens?

A Design Systems Tool

xd.adobe.com/ideas/principles/design-systems/what-are-design-tokens

Justin Morales Mar 4, 2021

Most designers know that it’s not enough to just create a Illustration by Rouba Shabou
great design; it’s also important to implement that design in
the final product. Many problems can occur during the development phase as you adapt
your design to multiple platforms and devices. Product teams rely on design systems to
minimize potential front-end design problems.

In this article, we will discuss one particular part of a design system—design tokens. Here,
you will learn what design tokens are and how designers use them.

What are design tokens?

Design system tokens are the style values of UI elements such as color, typography, spacing,
shadows, etc., that are used across products and capable of being converted to a format for
any platform (web, mobile, desktop). Tokens are building blocks of the design system—
think of them as sub atoms, the smallest pieces of style values that allow designers to create
styles for a product.

1/10
 Watch Video At: https://youtu.be/wDBEc3dJJV8

The concept of design tokens was initially introduced by Jina Bolton and Jon
Levine in their talk Using Design Tokens with the Lightning Design System.
Image credit YouTube.

Differences between regular variables and tokens

Visual design properties like color can be stored as regular variables:

$blue-400 = #2680EB;

The variable $blue-400 can be used in a CSS preprocessor like SASS. While this approach
will help you structure the design options, it has one important downside—variables don’t
necessarily bridge the gap between naming and use. Designers need to know what options
they should apply in a particular context, and that’s where tokens come into play:

$button-cta-background-color = $blue-400;

The name of this token—$button-cta-background-color—makes it clear that the color $blue-

400 serves as a background color for the call-to-action button.

2/10
 Illustrating the difference between a variable (blue-400)
and a token (button-cta-background-color). Image credit
Adobe.

How tokens aid the design process

There are two ways designers can work with style values—either hardcode them in the
design or use tokens. Design language changes and evolves over time, and when a product
team relies on hard-coded values, it has to manually adjust the values every time it modifies
a design.

Updating a single style value in the design is not time consuming. However, for real
projects, attributes like brand color or typography are used in dozens of different places, and
it takes a lot of time to adjust the values manually. Plus, it’s relatively easy to forget to
change a particular value for some element (or elements) and introduce inconsistencies in
the design. In contrast to these drawbacks of hard-coded values, tokens offer various
benefits to the design process.

Tokens allow for flexible design

Tokens are used in place of hard-coded values and allow designers to create more flexible
design solutions. Design tokens provide a way for designers to maintain complete control
over the values in their design system. Designers update the value centrally (in one place),
and the new change applies automatically to all designs on every platform.

Tokens create a unified look

3/10
The ability to create a unified look across different platforms is another benefit of design
tokens. Tokens help keep your design system values in sync across all projects, and you can
format them to meet the needs of any platform. For example, when you design a web
version of your product, you can use HEX color value from CSS, but when you design iOS
applications, you can use RGBA color format.

Tokens simplify the development process

Last but not least, design tokens simplify the development process. Developers have access
to the latest design attributes via design system software. They can use design tokens in
code like npm package and receive design updates without changing code.

How to use design tokens in code. Image credit Designtokens.

Tips for managing tokens

Now that you have answers to the questions “What is a design token?” and “How are they
used?” it’s time to explore practices that will help you streamline the process of creating
tokens. The tips mentioned in this section are based on recommendations from top design
systems advocates such as Brad Frost and Nathan Curtis.

Conduct interface inventory

To create tokens, you need to deconstruct pages down to their atomic level, and interface
inventory will help you do that. Interface inventory is the process of categorizing the
components that make up your product. At the end of this process, you will have a
comprehensive collection of the large and small pieces that make up your interface, and this
information will help you create tokens.

4/10
To make inventory easier, you can rely on the CSS Stats tool to see how many style
properties you have in your style sheets. It will help you identify areas that require
optimization. For example, by analyzing the colors you use in your project, you can tell
which colors look almost identical and opt to replace them with a single color.

Image of the many unique colors Google.com has. Image credit CSS Stats.

Define criteria for creating tokens

When does a style option become a token? Having clear criteria for when to create tokens is
helpful. “X times used” criteria is a simple yet effective way to decide which options should
be tokenized. If a style is used in only one place, you probably don’t need to create a token.

Define naming conventions

5/10
A design system’s strength comes from knowing how to apply options to context. It’s
essential to ensure the correct token is used on the correct property. Different teams will
indeed name things differently. That’s why it’s crucial to define clear naming conventions
before you start working on tokens.

Here is a recommended approach for naming: [Category]-[Type]-[Item]-[State]. If you

follow this approach, you will have something like this: color-background-ctabutton-
active

When a designer needs a color for an active call-to-action button, they should be able to
look through a collection of tokens and select one that matches their needs.

Adopt meaningful scales

Scales like t-shirt sizing (XS, S, M, L, XL, XXL) or progressions (2, 4, 8, 16, 32) can be very
helpful when you need to apply tokens for different scenarios. For example, you might have
a default font size for body text and rely on t-shirt sizing when you need to adjust it to
different screen sizes.

Use JSON format to make token data reusable

JSON is an excellent format for encoding value pairs. With tokens in JSON, you can adjust
design options for multiple preprocessors—SASS, LESS, or Stylus.

6/10
 JSON format creates a bridge to different platforms. Image credit Nathan Curtis.

Have a gatekeeper role on your team

Who should review and accept tokens? It’s tempting to assign this responsibility to all team
members, but it’s better to resist this temptation because not everyone cares enough or has
time to keep tokens clean. It’s much better to select a person who will curate the tokens
suggested by all team members.

At the end of a day, you will have a flow in which anyone on a product team can propose
tokens, but a single person (gatekeeper) will review propositions and accept/decline them.
This person should strive to keep tokens clean—scan style and token files, evaluate
nominees, and use design collaboration tools to provide feedback.

Enforce accessibility

7/10
Designs you create should be accessible to all users. When you work on tokens, you should
not forget to test them for accessibility. Contrast is one of the foundational principles of
design. When you choose colors, you need to validate contrast according to WCAG 2.0
recommendations. WCAG recommends a threshold ratio of 4:5:1 for standard or small text
and 3:1 for larger text.

Product teams should run automated accessibility tests regularly. This will help you ensure
that designs are always accessible. a11y is an excellent tool that will help you conduct
accessibility audits and integrates into your build system.

Example of accessibility audit created by a11y tool. Image credit Github.

It’s also worth highlighting contrast values right in the design documentation since it
becomes a single source of truth for anyone who works on a project.

8/10
 Color contrast value in Duet design system. Image credit Duet.

Create better design systems with tokens

When design tokens are managed effectively, they simplify the process of creating a unified
look across different platforms. Design tokens help product teams apply design decisions
swiftly and with confidence. They become a single source of truth for designers and
developers so both can rely on tokens to achieve consistency and scalability in UI design
while collaborating effectively within the same design system software.

Design Systems

9/10
 Words by
Justin Morales
Justin Morales is a Senior UX designer currently working at Signify Health, a B2B
Healthtech company, based in Los Angeles. He grew up in Texas, matured in Colorado,
and spent his late 20s living in Australia, New Zealand, and Asia. His favorite medium is
photography and he is a lover of UX because it means constantly helping people.

Related Content
→

10/10