Design Tokens

ELI5 — The Vibe Check

Design tokens are the single source of truth for your design decisions — colors, spacing, fonts — stored as variables that work everywhere. It's like having one recipe book that every chef in every restaurant follows, so the dish tastes the same no matter who cooks it.

Real Talk

Design tokens are platform-agnostic key-value pairs representing design decisions (colors, typography, spacing, shadows). They bridge design tools and code, enabling consistent multi-platform theming. Tools like Style Dictionary transform tokens into CSS variables, iOS constants, or Android resources.

Show Me The Code

// tokens.json
{
  "color": {
    "primary": { "value": "#2563eb" },
    "spacing": { "md": { "value": "16px" } }
  }
}

When You'll Hear This

"The design tokens are the source of truth — don't hardcode colors" / "When the brand colors change, we update the tokens and everything cascades"