# Design tokens: what it is and how it works · Zorraquino
> Design tokens represent design decisions through named values, such as colours, spacing or typography.
URL: https://www.zorraquino.com/en/dictionary/design-tokens

# Design tokens

Design tokens represent design decisions through named values, such as colours, spacing or typography

What it means, how it is used and where it comes up, with its related concepts.

[The whole glossary](https://www.zorraquino.com/en/dictionary)

## What it is and how it works

They make it possible to share and update criteria between tools and code. Their structure can include semantic levels, such as a colour for error states. Their usefulness depends on clear names, documentation and a consistent maintenance process.

Topics

[Experience and service design](https://www.zorraquino.com/en/dictionary/category/experiencia-y-diseno-de-servicios)

## Variants and linked concepts

- **Error colour.** A semantic error token identifies a use, not just a colour. Error information also needs cues other than colour.
- **Background colour.** Background colour can be represented by a semantic token to maintain consistency and make theme changes easier.
- **Surface colour.** Surface colour identifies layers or containers. Their relationships should maintain contrast and hierarchy.
- **Primary colour.** The primary colour has a defined role in the system. Its meaning should be documented rather than assumed to be universal.
- **Secondary colour.** Secondary colours complement the palette with specific functions and should be checked in combination with other elements.
- **'On' colours.** Colours for content on surfaces need sufficient contrast. A token name can express that relationship of use.
- **Alternative colours.** Colour variants should correspond to documented states or contexts, avoiding a proliferation of values with no clear function.

## Related concepts

- [Design system](https://www.zorraquino.com/en/dictionary/digital-marketing/design-system.html)
- [Atomic design](https://www.zorraquino.com/en/dictionary/branding/atomic-design.html)
- [Responsive design](https://www.zorraquino.com/en/dictionary/digital-marketing/responsive-design.html)