Tokens

All design systems are powered by design tokens. They are variables that hold a design decision and enable a design system to have a single source of truth for designers and developers.

This is standard and very well implemented in any system, for example:

There are 3 tiers of tokens from more broad to more specific design decisions: option tokens, semantic tokens, and component tokens.

Option Tokens represent all cases that could ever be useful in a Design System. They point to a static value. They are also called global tokens or reference tokens.

Semantic Tokens are the decisions that systematize the design language for a specific theme or context. They define the purpose that an option token serves in the UI. They are also called alias tokens or system tokens.

Component tokens represent the elements and values that comprise a component. They used to point to a semantic tokens.

Option tokens by themselves are not flexible enough to scale to more than one brand.

Problems such as legibility and page layout begin to break down as you switch between brands that have different brand languages—especially with color and typography.

We need to add the semantic token layer to tackle certain design decisions without affecting others.

In doing so we can switch between any number of brand decisions and maintain the integrity of the design, including dark and light mode.