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


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.


Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

InVision Design System Manager gives you one centralized place to maintain all of your brand and UX components across design and code–providing the speed and confidence to power design at scale.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo