Skip to content
Vy logo

What are design tokens

Design tokens represent all the recurring design choices that define the design system’s visual style. It contains all the values you need to construct and maintain a design system.

Rules and guidelines

Design tokens are the common rules and guidelines that bind everything together. What color can my component have? How should the corners look? How much distance should there be between each element?

Hardcoded values

Tokens are used instead of hardcoded values to ensure that the design is flexible, easy to update and always follows the standard set by the design system. Are you unsure if a design contains the correct color or typography? Then you can just check with design tokens if this is correct.

Hardkodede verdier vs. design tokens


Spor is built on layers of tokens. This means that some tokens are global throughout the whole design system, while others only reference the global tokens. That way we can ensure consistency, but also flexibility for our users. By changing what global token you reference you can completely change the look of Spor. Global tokens are always the reference to the original values be it the color-code or corner radius.

Illusdtration of token structure and naming


The choice to use Alias tokens has allowed us to implement theming of the design system. All our components are built around a set of styles that reference a stylesheet of global tokens. By introducing a new stylesheet you can have a completely new design system. We avoid using component specific tokens to simplify the complexity and to make sure that you need to change as few variables as possible between themes. An exception to this are components like alerts or travel-tags. They use global tokens so they stay consistent across themes.

an example of a design token

What is the purpose?

The goal of design tokens is to solve the problems that arise between design and development. And the challenges with teams working on different platforms, having different priorities, goals and ambitions. Therefore, it is important to create a common truth across.

Målet med design tokens