Skip to content
Vy logo
Fundamentals

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

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

Design token example

An example of how design tokens are used to define the values for the primary button. Here are some values that are not listed, such as spacing tokens and sizes.

et eksempel på design tokens