Design tokens

A design token is nothing more than a name and a value, which together communicate a design choice. The diagram below shows an example of a design token that defines a colour, but any design choice that you can represent as a concrete value can be codified as a design token.

In relation to atomic design, design tokens are subatomic: they represent even smaller design choices than atoms. Importantly, design tokens are a source of truth: they represent distilled design thinking in an unambiguous way that is both machine- and human-readable.

If you're not familiar with the topic, here's a good design tokens primer. For a deeper dive into the terms and taxonomies to describe visual style, see Naming Tokens in Design Systems. While these articles will help you understand some of the foundational ideas, there's also a more specific article describing how we're using design tokens in UDS.