Design tokens

Design tokens are the atoms of visual design. They define, among other things, color, typography, spaces, edges, corners and shadows of a design, in the form of an entity with a specific nomenclature. These entities are absorbed through the Figma API by the development team and converted into styles usable by all technologies, such as CSS, SASS, IOs, Android, among others.

Colour

Typography

Elevations

Spacings

Cut Points

Radio and Border

Iconography

Animation

Benefits

It increases the coherence between design and development.

It speeds up changes and allows the development to be updated as the design evolves.

It allows you to create multi-brand themes or switch in hot between a light and a dark theme.

Sort and normalize all styles of the design system.

Anatomy

The token name will always start with the symbol “$” followed by category”. The necessary elements will then appear in the order shown in the “Structure” and always separated by “-”:

This modular system allows scalability and clarity in the definition of tokens, facilitating their consistent use throughout the interface.

Send an email to the Design System team at desarrollo.dintel@correo.gob.es , use our application Teams DINTEL.