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.
Flexibility
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.
Themes
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.
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.
