Design Tokens

What are Design Tokens?

At their core, design tokens are the control center for digital product design. They define fundamental values that are then used in websites and apps. Their purpose: to ensure consistent visual and functional design, thereby enabling a uniform experience across different platforms and devices.

You can think of them as a layer of abstraction that sits above the actual design values. While we often use CSS variables on the web to define and reuse colors, font sizes, or spacing, design tokens go one step further. They are the single source of truth for these values, regardless of the specific implementation technology. For example, a single token can become a CSS variable for the website, a constant in a native iOS app, and an XML value for Android. This ensures that the brand looks identical across all channels and prevents design deviations during the design development handover.

Design tokens often describe visual attributes that are essential in areas such as user interface (UI) design and front-end development. These attributes include:

• Colors
• Typography
• Spacing (margin, padding, and gap)
• Sizes (e.g., icons)
• Shape properties (e.g., rounded corners)
• Contours
• Shadows
• Animations

The Value of Design Tokens

Many initially underestimate the value of design tokens. "Why not just use CSS variables and Figma styles?" is a common question. The answer lies in the real pain points that design tokens solve:

Single Source of Truth

Tokens are the unambiguous authority for all design values. They eliminate manual transfer errors and prevent designers and developers from working with different sets of values. Everyone accesses the same foundation.

Efficiency

Adjusting design values becomes a breeze with tokens. Instead of making laborious manual changes across platforms (Web, iOS, Android, email templates), a single centralized update is enough. Automated translation processes ensure consistent application and automatically update all affected components. This is a game-changer for efficient maintenance and design evolution.

A Common Language for Everyone

Design tokens build a bridge between design and development by offering a shared semantic language. Designers talk about $spacing-md or $button-primary-text, and developers know exactly what is meant — no need to argue over pixel values. This reduces misunderstandings and accelerates communication.

Tighter Design Constraints

This may sound limiting — but it’s actually a huge benefit! Design tokens give designers and developers a defined set of values to work with. This not only promotes consistency but also channels creativity in the right direction. Instead of starting from scratch, everyone builds on the same solid foundation. This avoids chaos and ensures the product always remains within the brand guidelines.

Structure of Design Tokens

Understanding the hierarchical structure of design tokens is crucial for leveraging their full potential in design systems. This model enables flexible and maintainable management of design properties and typically includes the following categories:

Reference Tokens (Primitives)

At the core of this model are reference tokens, also called primitives. They are like a digital color palette or a box of basic building blocks. Primitives define the fundamental, unchangeable values taken directly from the brand guidelines — specific color values like #FFFFFF or #007BFF, exact font sizes like 16px or 24px, or fixed spacing values like 8px or 16px. They are the absolute single source of truth at the lowest level and represent the foundation of all visual expression.

Example: 

--color-blue-600: #0365D9; 

Alias Tokens (Semantic)

Built upon this foundation is another, even more important layer: alias tokens, also called semantic tokens. These describe the specific usage of reference tokens based on their purpose or context. Instead of using #007BFF directly, for example, we define an alias token $color-primary that refers to this primitive. Or, for spacing, we use $spacing-md instead of 16px. Alias tokens make the design system semantic and understandable. They allow design decisions to be made in context — the meaning of an element remains the same even if the underlying primitive value changes.

Example: 

--color-surface-primary: var(--color-blue-600); 

Component Tokens (Mapped)

Mapped tokens, also called component tokens, represent the highest level of abstraction and are often used directly in individual UI components. These optional tokens serve as a bridge between semantic alias tokens and the specific properties of a component. They allow the design of a component to be defined independently of its implementation.

Example: 

--button-primary-surface: var(color-surface-primary); 

Design Tokens in Practice

Design tokens aren’t just invaluable for large projects — they can also unleash their full potential in smaller ones. In one of our recent projects, we faced the challenge of a limited budget. Our usual workflow, where we design each component individually to ensure a custom, detailed implementation of our client’s brand identity, would have been too time-consuming.

So, we chose an alternative approach: we first designed the client's homepage and derived the necessary design tokens from it.

Our developer Lukas then used the resulting component tokens to implement the homepage elements exactly as designed. For all other elements that weren’t yet finalized, he relied on alias tokens. This allowed him to choose from three available surface color tokens, for instance, to efficiently style additional elements.

The biggest advantage of this approach becomes evident with future changes: if the client’s brand guidelines change in a few years, we can update the underlying primitive tokens in our single source of truth. This change will automatically roll out to all components — saving us enormous time and effort.

Conclusion

Design tokens are a powerful tool for creating consistent, efficient, and scalable design systems. They serve as a central source for design values and enable a unified design across different platforms. Through their hierarchical structure from primitives to semantic alias tokens to component tokens, they establish a clear separation between base values and their application. This reduces communication errors, accelerates the development process, and simplifies future adjustments. Design tokens therefore offer tremendous added value not only for large projects but also for smaller ones, especially when efficiency and consistency are required.