A design token is a named value that represents a single design decision. Instead of scattering #4f46e5 across your codebase, you create a token called --color-primary that holds that value. The token carries meaning (this is our primary brand color), portability (it works in CSS, Figma, iOS, Android), and maintainability (change it once, update everywhere).
Tokens vs. Variables
CSS custom properties are one implementation of design tokens. But the concept is broader. A design token system typically has multiple layers: primitive tokens (raw values like --blue-600: #2563eb), PaletteRx Palette">semantic tokens (purpose-based like --color-primary: var(--blue-600)), and component tokens (scoped like --button-bg: var(--color-primary)).
Why Tokens Matter for Color
Without tokens, color decisions are scattered across hundreds of files. A rebrand means finding and replacing hex values in CSS, Figma, email templates, and documentation. With tokens, a rebrand means changing one value in one place. Every reference updates automatically because they all point to the token, not the raw value.
How PaletteRx Creates Tokens
PaletteRx's CSS Variables export is a token file. Each exported variable (--color-primary, --color-supporting, --color-light-base) is a semantic design token. The platform-specific exports (Bricks JSON, ACSS format, theme.json) translate these tokens into the format each platform expects.
Getting Started
If your project currently uses hardcoded hex values, migrating to tokens is straightforward. Build your palette in PaletteRx, export as CSS Variables, replace every hex reference with the corresponding variable, and you have a token-based color system.
:root. Start replacing hardcoded hex values with var(--color-name) references. Each replacement is one step toward a maintainable system.