Shape
Design Tokens
Named, reusable values for design decisions like color, spacing and type, shared by design and code.
What is Design Tokens?
Named, reusable values for design decisions like color, spacing and type, shared by design and code.
What you learn
Components should use tokens named for their purpose, which point to the palette values.
When it helps
design values drift between tools and code, or themes need to change consistently.
Use it at work
- List the values your designs repeat.
- Keep palette values, then name component tokens by purpose, like color-text-error, and point them to the palette.
- Store the tokens in one source that design and code both use.
- Change values in the source, never in copies.
Your output
Check that components use purpose names, such as color-action-primary, not palette names.
Watch for
Using palette tokens like 'blue-500' directly in components.
Related practices
Sources
Enable JavaScript to try the interactive activity.