Design token
Published Updated
What is 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.
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.
How it relates to Orbit
Token conventions can live in Orbit’s per-project context, so every agent run receives them. See Context & Handoffs for details.
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.