Skip to content
Backtalk

Tokens

CSS custom properties generated from config. Always consume semantic tokens in components — never scale tokens directly.

// ❌ scale token — too specific, won't theme
.button { background: var(--color-primary-500); }


// ✅ semantic token — themes automatically
.button { background: var(--color-interactive); }

All Tokens

Section titled “All Tokens”

Colors

Section titled “Colors”
  • Colors — --color-* scale and semantic tokens

Typography

Section titled “Typography”
  • Typography — --font-*, --text-*, --leading-*, --tracking-*, --font-weight-*

Spacing

Section titled “Spacing”
  • Spacing — --space-* numeric, named, and semantic aliases

Motion

Section titled “Motion”
  • Motion — --duration-*, --ease-*, --transition-*

Radius

Section titled “Radius”