Design tokens
Design tokens are the named values a design system is built from, such as brand colours, font families, text sizes and spacing steps, kept in one place and used everywhere.
Updated
On this page
What it is
Instead of writing #c2410c in fifty places, a site names it once, for example primary, and every button and link refers to that name. Changing the token changes the whole site. Tokens also make a design explainable: a reviewer can see that a heading uses the display font at the 4xl step.
On the web, tokens usually live as CSS custom properties, Tailwind theme variables or Sass variables.
In Xodia
Xodia shows a site's tokens in the Variables panel and offers them first in the Style panel. In the Plan tab's Style view you set colours with roles (background, surface, text, muted, primary, border) and fonts, and Apply to theme writes them as your site's tokens.
Xodia's design system and extract tokens skills tell your AI to use tokens and to collect stray values into a small named set.
Read more
Related terms
- Tailwind v4 theme tokensTailwind v4 theme tokens are CSS variables declared in an @theme block that define a site's colours, fonts, sizes and spacing, and that Tailwind turns into utility classes.
- Fluid typeFluid type is text whose size grows smoothly with the width of the screen between a minimum and a maximum, usually written with the CSS clamp() function.
- Contrast ratioContrast ratio measures how much text stands out from its background, from 1:1 (no difference) to 21:1 (black on white); WCAG asks for at least 4.5:1 for body text.