# Design token

**Source:** https://promtable.com/glossary/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.

---
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

- 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.

## Related terms

- [headless-ui](https://promtable.com/glossary/headless-ui)

*Last updated: 2026-06-01*
---

Original page: https://promtable.com/glossary/design-token
Maintained by Promtable (https://promtable.com). Content: CC BY 4.0. Cite as "Promtable — https://promtable.com/glossary/design-token".
Contact: info@vibecodingturkey.com.