What Are Design Tokens?

Design tokens

Design tokens are platform-agnostic variables that represent the look and feel of your brand and product. They constitute the atomic building blocks of your design system and can be used to define colors, text styles, spacing, and other property types. They provide the foundation for theming and design process automation.

We can further define design tokens as named entities that store visual attributes and are platform-agnostic:

• Named entities: Tokens consist of a name and a value.
• Store visual attributes: Tokens represent visual attributes such as color, spacing, line height, elevation, and animation time.
• Platform-agnostic: Tokens are an abstraction layer on top of platform-specific variables. They create a common language for design properties independent of the implementation framework.

For example, consider the following token:

color.blue = #276EE5

The token name is color.blue, and its value is #276EE5.

Further, a design token can reference another token. For example:

color.blue = #276EE5
color.primary = color.blue

Learn more about reference tokens here.

This enables creating a hierarchy of options and decisions and controlling the scope, or intent, of changes. For example, consider the button.border.color token below. The designer decided that the border color should be the primary brand color (color.brand.primary). If the primary brand color changes, the button border will change accordingly.

color.blue.50 = #000022
color.blue.100 = #000033
color.brand.primary = color.blue.100
button.border.color = color.brand.primary

Alternatively, the designer could have decided that the button border should be blue, and choose a brand-consistent blue color, color.blue.100.

color.blue.50 = #000022
color.blue.100 = #000033
color.brand.primary = color.blue.50
button.border.color = color.blue.100

In this case, a change to the primary color will not automatically impact the button border color, but a change in the value of the color.blue.100 will.

Additional resources

For more information on design tokens, check out the following resources.

• Tokens in Design Systems by Nathan Curtis
• Living Design System by Sönke Rohde
• Design Systems slack channel (visit #topic-design-tokens)
• Design Tokens W3C Community