Skip to main content
Design & UX

Design Tokens

Portrait of Robert Klimant, co-founder of Roelu Studio
Robert KlimantCo-founder

What is Design Tokens?

Design tokens are named variables that store the small visual decisions in a design system — color values, spacing units, font sizes, border radii, animation timings. Instead of hardcoding "#0F172A" into every button, the token "color-text-primary" points to that value. Designers reference tokens in Figma. Engineers reference the same tokens in code. Change the token once, every place it's used updates automatically.

Why it matters

Hardcoded values are how brands rot. A new shade of blue ships, someone forgets a checkout page, and six months later your site has nine versions of "the" brand color. Design tokens make that impossible. The token is the source of truth. Everyone — Figma, the website, the iOS app, the email templates — pulls from the same place. When marketing decides to warm up the palette or tighten the spacing scale, it's one change, not a forty-ticket migration. This is also how you ship dark mode without rebuilding the site.

How it works

Tokens are defined in a single source file, often JSON or a Figma variables panel. They come in tiers: primitives ("blue-500: #2563EB"), semantic tokens ("color-action-primary: blue-500"), and component tokens ("button-bg-primary: color-action-primary"). Designers bind Figma styles to tokens so a swap updates every artboard. Developers consume the same tokens through a build tool like Style Dictionary, which spits out CSS variables, Tailwind config, or platform-specific code for iOS and Android. New brand direction? Edit the primitives. Dark mode? Swap the semantic layer. The components don't move — only the values behind them do, which is why a token-based system can absorb a rebrand in a sprint instead of a quarter.

Related terms

  • Design System

    Design & UX

    A shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…

  • Component Library

    Design & UX

    A reusable set of pre-built UI pieces — buttons, forms, cards, modals, navigation — that designers and developers pull from instead of building each one fresh…

  • Color System

    Design & UX

    A defined palette of brand and UI colors — with rules for when and how to use each one — so a product stays visually consistent over time and doesn't quietly…

  • Typography

    Design & UX

    The craft of choosing and arranging type on a website — fonts, sizes, weights, line height, letter spacing, line lengths — to make content readable, scannable,…

  • Dark Mode

    Design & UX

    An alternate color theme that uses dark backgrounds and light text — easier on the eyes in low light, increasingly expected by users, and impossible to add…

  • Visual Identity

    Design & UX

    The visual half of a brand — logo, typography, color, imagery, iconography, motion — the parts of the brand you can actually see, designed as a coherent system…

  • User Interface

    Design & UX

    The visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…