Design Token

A design token is the smallest unit of a design system — a named variable that stores one specific design decision. Instead of hard-coding #6B4C9A throughout your codebase, you store it as color-accent and reference the token everywhere. If the brand colour changes, you update the token once and the change cascades across every component, page, and platform.

Tokens typically cover colours, typography (font families, sizes, weights, line heights), spacing (margins, padding, gaps), border radii, shadows, opacity values, breakpoints, and animation durations. They’re usually structured in tiers. Global tokens define raw values (purple-600: #6B4C9A). Semantic tokens assign meaning (color-accent: purple-600). Component tokens get even more specific (button-primary-bg: color-accent). This layering lets you change decisions at any level without breaking the whole system.

The real power of design tokens is that they’re platform-agnostic. A token defined once can be transformed into CSS custom properties for the web, XML for Android, Swift constants for iOS, and JSON for design tools — all from a single source of truth. Tools like Style Dictionary, Tokens Studio, and Amazon’s Theo handle these transformations automatically.

Why it matters

Without tokens, design decisions are scattered across Figma files, CSS stylesheets, native code, and documentation. When something changes — and it always changes — you’re hunting through dozens of files hoping you didn’t miss an instance. Tokens centralise those decisions and make them maintainable.

Tokens also bridge the gap between designers and developers. When both disciplines reference the same named tokens, there’s no ambiguity about which shade of grey to use or how much padding a card should have. The token name is the specification. This dramatically reduces the “it doesn’t match the mockup” back-and-forth that plagues many teams.

In practice

• A fintech company maintained web and mobile apps with slightly different blues for their primary colour — nobody could remember which was “correct.” Introducing design tokens with a single color-primary definition eliminated the inconsistency overnight and simplified future colour theory discussions.

• A design system team created semantic spacing tokens (space-tight, space-default, space-loose) rather than using raw pixel values. When the team decided to increase overall spacing for better readability, they adjusted three tokens instead of editing hundreds of components.

• An enterprise software company used design tokens to support theming. Each client got a branded experience by swapping a small set of colour and typography tokens, while the entire component library and atomic design structure remained unchanged. What would have been weeks of custom styling became a 30-minute configuration task.