concept

Design token

Design tokens are the named, abstracted values that capture design decisions (colors, spacing, typography, radii) in code-agnostic format — letting designers + engineers share a single source of truth across platforms.

Hardcoded values (`#3b82f6`, `padding: 16px`) drift across screens; design tokens centralize them (`primary-500`, `space-4`). The tokens live in a single source (JSON, YAML, Figma Tokens plugin) and compile out to CSS variables, Tailwind config, Swift / Kotlin themes, etc. Production benefits: dark mode is just a token swap, brand updates touch one file, designer ↔ engineer parity. Tools: Style Dictionary (Amazon), Token Studio (Figma plugin), Tailwind Config, CSS custom properties. By 2026 every serious design system uses tokens — without them, scaling design across web + iOS + Android + brand updates becomes a nightmare of search-and-replace.

When to use design token

Any non-trivial product UI.
Multi-platform apps sharing a brand.

Common mistakes

Too few tokens — engineers still hardcode; too many — paralysis by tokens.
Skipping documentation — token names that aren't self-explanatory get misused.

FAQ

What is design token?

When should I use design token?

Any non-trivial product UI. Multi-platform apps sharing a brand.

What are the most common mistakes with design token?

Too few tokens — engineers still hardcode; too many — paralysis by tokens. Skipping documentation — token names that aren't self-explanatory get misused.

Headless UI — Headless UI is the React (or framework) pattern of unstyled, accessible component primitives that handle behavior (state, keyboard nav, ARIA) but leave visual styling to the consumer. Radix UI, React Aria, Headless UI by Tailwind Labs are 2026 leaders.

Last updated: 2026-06-01. Raw markdown: https://promtable.com/glossary/design-token.md.