# Design tokens

URL: https://xodia.ai/glossary/design-tokens
Description: Design tokens explained: what it is, why it matters and how Xodia uses it, with links to the Xodia features and guides that cover it.
Last updated: 2026-11-08

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 November 8, 2026

## 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

- [The visual editor](https://xodia.ai/product/visual-editor)
- [Plan with AI](https://xodia.ai/product/plan)

## Related terms

- [Tailwind v4 theme tokens Tailwind 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.](https://xodia.ai/glossary/tailwind-theme-tokens)
- [Fluid type Fluid 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.](https://xodia.ai/glossary/fluid-type)
- [Contrast ratio Contrast 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.](https://xodia.ai/glossary/contrast-ratio)

[See every term in the glossary](https://xodia.ai/glossary)

Glossary