Design tokens

Tokens are the only source of truth for reusable reference in a design system

What is a Token ?

A token is reusable reference in a design system. They are build after design decision, but also on the basis of internal audits carried out on our products. Using tokens, allows use to replace most of "hard-coded" values such as hex for colors or pixels for spacing.

Components structure

Some of the components of our design system are built on the basis of so-called "master" components. For many of them, those components gather all the possible variations in terms of structure that our components can have.

In this way, if one of our components needs to evolve, it's possible to update them all by only modifying the master component.

 

Master components

--> Foundation of a component.

 

Component

--> Component use inside our prototypes. They are variations of the master component.

 

What should I use inside my template ?

By default, only used components will be exported to the design system for use in prototypes.

To ensure that our components are not modified by mistake, we always use components that do not include the "❌" and "master" symbols in their names.