Styling & CSS · Design systems
Design Token
Also called: Design tokens, Tokens, Style tokens
Design decisions like colors, font sizes, spacing, corner radius, and shadows pulled out into named variables, so design files and code on every platform share one spec.
In detail
A design token is the smallest unit of spec in a design system. Every design decision gets a name and a value, like color.primary = #2563eb, space.4 = 16px, and radius.md = 8px. Design files and code on every platform reference them, so one change syncs everywhere.
Tokens usually come in two layers. Base tokens describe "what exists," like blue-600 and gray-100. Semantic tokens describe "where it's used," like color.text.primary and color.bg.danger. Components only reference semantic tokens, so switching themes just means pointing the semantic tokens somewhere else.
The difference from CSS variables: design tokens are a technology-neutral spec. They can be stored as JSON and then turned into CSS variables, a Tailwind theme config, or mobile code. CSS variables are just one way they show up on the web.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-design-token- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026