Tokens

What are design tokens?

Design tokens are pairs of names and values that define specific, reusable design decisions. These decisions can represent various types of attributes like colors, font styles, spacing units, or motion animations, tailored to fulfil specific requirements.

For instance, rather than manually selecting from a range of turquoise shades for an icon, design tokens enable the usage of a consistent choice throughout our products. We simply utilize a design token such as a foreground color (color.fg.brand) to ensure uniformity across similar use cases.

Why use tokens?

Design tokens require a shift in thinking and working, as they represent a new way of organizing and using design elements. The traditional workflow involves a constant manual process of updating and passing off design decisions from designers to developers. A process recognized to be prone to errors and decisions getting lost in communication.

Design tokens provide a systematic and centralised approach to managing and maintaining design consistency across various platforms and channels. Rather than hard-coding design decisions directly into design files and code, design tokens separate the design-related information from the implementation, making it easier to update, reuse, and share across platforms.

 

Using design tokens enables:

• Cross platform single source of truth, making global updates much faster.
• Brand consistency across products
• Global theming such as light, dark and contrast themes.
• Design and development efficiency by using explicitly named tokens for colors, typography, spacing etc.
• A common language between designers, developers and stakeholders.

 

Token hierarchy

Our tokens are split into in 3 tiers or “layers”:

1. Core tokens: The most basic and lowest level tokens in the system - e.g. palette colors, sizes, etc. Core tokens are context-agnostic; they are not aware of the context in which they will be used.
2. Semantic tokens: Semantic tokens are design-system aware. They represent the intent of the design system. Some examples include, primary and secondary colors, typography and elevation. The semantic tokens are crucial for theming. In the light and dark theme, the semantic token-names are identical, but point to different core tokens to create the color changes.
3. Component tokens: Component-specific tokens are an exhaustive representation of every value associated with a component. Component tokens are used when engineers need to override the default semantic values in a UI component.
   
   Tokens can reference other tokens by “pointing” to them. Following rules apply when referencing between token tiers:

 

Token names

Understanding the naming used for the tokens, makes it much easier to locate the right token for a specific use-case:

Design token names describe how they should be used, and each part of the naming hierarchy communicates one piece of its usage.

1. Base: The type of visual design attribute or foundational style, such as color, text, space. “core” is reserved for core tokens only.
2. Property: The UI element the token is being applied to, such as a border, background, shadow, or other property.
3. Modifier: Additional details about the token’s purpose, such as its color role, emphasis, or interaction state.