Design Token
A named variable that stores a design decision — like a color value, spacing unit, or font size — so it can be referenced consistently across a product.
What it means
A design token is the smallest unit of a design system's vocabulary. Instead of hard-coding `#2563EB` throughout your CSS, you define a token `--color-primary-500: #2563EB` and reference the token everywhere. If the brand color changes, you update one token and the entire product updates.
Tokens can be hierarchical: a raw token (`blue-500: #2563EB`) is referenced by a semantic token (`primary: blue-500`), which is referenced by a component token (`button-bg: primary`). This layering enables theming — dark mode, brand variants, and white-labeling all work by remapping semantic tokens to different raw tokens.
Why it matters in palette design
PerfectPalette exports palettes as design tokens in multiple formats (CSS custom properties, JSON, Tailwind config, Figma variables). Tokens are how the palette you build in PerfectPalette becomes a living system in your product. Without tokens, palette decisions are scattered across thousands of lines of CSS as hard-coded values that are impossible to maintain.
Common confusion
Design token vs. CSS variable: A CSS custom property (`--color-primary`) is one implementation of a design token. But tokens can also be Figma variables, Tailwind config values, Swift asset catalogs, or JSON files. "Design token" is the abstract concept; CSS variables are one format.
Example
PerfectPalette's export step lets you download your palette as CSS custom properties, Tailwind theme config, or raw JSON. Each format represents the same palette decisions as design tokens: `--color-primary-500: oklch(0.55 0.22 260)` in CSS, `primary: { 500: '#2563EB' }` in Tailwind, and `{ name: 'primary-500', value: '#2563EB' }` in JSON.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.