Design token
A named variable that stores a design decision — like a color, spacing value, or font size — so it can be reused consistently and changed in one place.
What it is
Design tokens are the atoms of a design system. Instead of hardcoding `#8d4b00` everywhere, you define a token called `color-primary` and use that name throughout your code and design files. When the brand color changes, you update one token and every component that references it updates automatically. Tokens can represent colors, spacing, border radius, shadows, font sizes, and more. Tools like Style Dictionary or Figma Variables manage token definitions.
When you would use it
Any time you want design decisions to be consistent, maintainable, and easy to change across a product.
Common operations
- Defining a `spacing-md` token as `16px` and using it for all medium-spaced elements.
- Theming a product by swapping a set of tokens.
- Syncing tokens from Figma to code automatically.
Related terms
Where this is taught
No learning path uses this term yet. Browse the Learning Atlas for guided sequences through related ideas.