Design tokens — What are they & how will they help you?

Translating designs into products is hard! Learn how design tokens make building products easier for both designers and developers.

Note: While the main content of this article still stands, I now prefer the terms base token (instead of choice) and semantic tokens (instead of decision). Read more about token terminology.

Design tokens ease building products by improving the communication around design. They help scale your product by separating design decisions from specific platforms & technologies.

They improve communication with build-in documentation & promoting design decisions out of design files.

What are design tokens

Design tokens are a very “hot” topic at the moment. You may think it’s only a fancy name for a design related variable. While you may find them as variables in your files, this is only part of the truth. Let’s have a look at some common definitions to make sense of this confusion.

Descriptions of design tokens in the field

According to the w3c working group in design tokens, design tokens are:

Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale.

Mozilla defines design tokens like this:

A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application agnostic and once transformed and formatted can be used on any platform.

The “inventors” of the design token idea, Salesforce, define them as:

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Design tokens — a definition

Pulling from the descriptions above, this is my definition of design tokens: