Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Design Tokens Overview

Follow

As digital transformation accelerates, companies face the challenge of scaling design across an increasing number of screens, tech stacks, and product teams. As the product footprint grows, propagating even simple design decisions (such as a color change) can take weeks to accomplish.

To address this challenge, the design system team at Salesforce established a new data layer and a practice that helps scale design across multiple platforms and teams. They named it “design tokens." By using design tokens, it can take minutes—instead of weeks—to implement design decisions across platforms.

What are 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

These tokens are often called alias tokens.

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.


Was this article helpful?

Still have a question?

Contact Us