For how to write and activate a theme that customizes these tokens, see Themes .
The 30 semantic token slots below form the complete vocabulary. Components use these token names as class names; themes supply the actual values through CSS custom properties.
Token Purpose
--color-backgroundPage/canvas background --color-surfaceComponent surface (cards, panels) --color-cardCard background (may differ from surface) --color-borderDividers, input borders, separators --color-textPrimary text --color-text-mutedSecondary/muted text, placeholders
Token Purpose
--color-primaryPrimary action color (buttons, links) --color-primary-foregroundText on primary-colored surfaces --color-secondarySecondary action / subdued UI elements --color-secondary-foregroundText on secondary-colored surfaces --color-accentAccent highlight (hover, selection) --color-destructiveDestructive actions and danger states --color-successSuccess / positive states --color-warningWarning / caution states
Token Purpose
--radius-smSmall corner radius (badges, chips) --radius-mdMedium corner radius (buttons, inputs) --radius-lgLarge corner radius (cards, modals) --radius-fullFull / pill corner radius (avatars)
Token Purpose
--shadow-smSmall elevation shadow --shadow-mdMedium elevation shadow (dropdowns) --shadow-lgLarge elevation shadow (modals)
Token Purpose
--font-sansBody / UI sans-serif font stack --font-monoMonospace font stack (code, IDs)
Token Purpose
--spacingBase spacing unit (density scale)
Token Purpose
--motion-duration-fastFast transitions (100–150 ms) --motion-duration-baseStandard transitions (200–250 ms) --motion-duration-slowSlow transitions (300–400 ms) --motion-easeDefault easing curve
All three duration tokens collapse to 0.01ms under prefers-reduced-motion: reduce.
Token Purpose
--color-ringFocus ring / outline color
Token Purpose
--font-displayDisplay/heading font (defaults to --font-sans)