Design Tokens

Today

Design tokens are becoming more ubiquitous as designers have found value in the ability to support dark mode and other needs by having control of style outside of development environments. Design tokens are putting the power into designers’ hands and shift responsibility away from developers. Now results of a color exploration can be distributed to an experience without interfering with other engineering tasks.

The community has landed on a tiered system of tokens; the most important being “semantic” tokens. These are tokens named in a specific way; to provide information about how they should be used over what value is held within the token. Other tiers of tokens can exist such as component tokens, which are more specific than the semantic tier and tied to individual components. A more common tier is the base tokens, which are often associated with a brand and are named in closer relation to the value.

The curation process for design tokens can become unwieldy depending on the number of tokens, tiers, and themes (collection of tokens-value pairs). While you could support the semantic tier alone, there are benefits to including the other tiers, especially in communicating values across teams. In other words, tokens make it easy to identify a specific color of red by a given name over reciting a hexcode or RGB values. Tools can help visualize these relationships and the increase in complexity.

After curation, tokens are then distributed to applications to inform style. In mature token systems, the values are written platform agnostically so transformations can occur for those values to be accepted into various technologies.

Tomorrow

For tokens themselves, there are a few future innovations to consider. The Design Tokens Community Group is attempting to define a specification for tokens to be shared across applications but the general concept of assigning a value to a name is not ground-breaking. Innovation can come in the curation and distribution of tokens.

The curation process could be streamlined by reducing the number of tokens that an author must choose and allowing other systems to compute or suggest sensible values. Microsoft Fluent UI theme Designer presents an interface where an author can select three colors which inform dozens of tokens automatically. This will also provide useful insights such as accessibility contrast checking and sample UI elements. Results would be assigned to existing semantic tokens.

Choosing the initial values could be inspired by images or other existing sites. There’s a future where this can go beyond color and suggest tokens for typography, spacing, rounding, and more. This sort of process will help streamline the base token curation exercise.

For experiences like the theme designer to be more available, a sharable method of computing values should exist. While the example above computes them in the UI, it might be even more powerful to encode the computations within the token files directly. In this way, we can recreate or customize computations while maintaining the same language and specifications between tools.