Design Token
A design token is a named design value such as a color, spacing unit, font size, or border radius that can be reused across design and code.
Design tokens turn raw visual decisions into shared, reusable system variables.
What it does
Design tokens provide a consistent way to represent design values.
It is commonly used to:
- Standardize color, spacing, type, and sizing values
- Share visual decisions across design and development
- Support theming and scalable UI systems
- Reduce hardcoded values in styles
- Help a design system stay consistent
Core concepts
Named design values
A token gives a design value a stable, reusable name.
That matters because names such as color-primary or spacing-md scale better than repeating raw values everywhere.
Bridge between design and code
Design tokens are often one of the clearest links between design tooling and implementation.
They help teams keep visual decisions aligned across systems.
System-level reuse
Tokens are not limited to one component.
They are meant to be reused throughout a design system or product layer.
Common use cases
- Color palettes
- Spacing scales
- Typography systems
- Border radius and shadow systems
- Theme and brand variable management
Practical notes
- Tokens are more useful when they describe purpose, not just raw values.
- Good token naming improves maintainability and theming flexibility.
- Tokens are often implemented through CSS custom properties, JSON structures, or framework-specific variable systems.
- In practice, tokens are one of the foundations of a scalable design system.
Sources Used
Frequently Asked Questions
Is a design token just a CSS variable?
Not exactly. A CSS variable can implement a token, but the token is the broader design-system concept.
Are design tokens only for colors?
No. They can also represent spacing, typography, sizes, radii, shadows, and other reusable design values.
Why are design tokens important?
Because they make a design system easier to scale and keep consistent.