Colors & Gradients

Color utilities map to the tonal token system, so they adapt to light and dark mode automatically.

Text color

text-{intent} where intent is primary, secondary, accent, success, warning, danger, info, muted, white, black, dark:

<p class="text-primary">Primary text</p>
<p class="text-danger">Danger text</p>
<p class="text-muted">Muted text</p>

Variants:

• text-{intent}-emphasis — higher-contrast tone.
• text-{intent}-fixed — the fixed brand tone (ignores light/dark adaptation); pairs with text-opacity-{0–100}.
• text-on-{intent} / text-on-body / text-on-body-inverse — readable foreground for a colored surface.
• text-on-{intent}-container — text on the matching bg-{intent}-container (also muted).
• text-{intent}-inverse — the color on an inverse surface such as a toast or tooltip (also muted).
• text-link (+ text-link-emphasis) — underlined link style.

Background color

bg-{intent} with the same intents, plus surfaces and effects:

<div class="bg-primary text-on-primary">Primary surface</div>
<div class="bg-success-container text-on-success-container">Tinted surface</div>
<div class="bg-surface-pane">Pane surface</div>
<div class="bg-frosted">Frosted glass</div>

• bg-{intent}-container (tinted surface, also muted), bg-{intent}-emphasis, bg-{intent}-fixed, bg-opacity-{0–100}
• bg-surface-base, bg-surface-pane, bg-body, bg-frosted, bg-frosted-dark, bg-transparent
• bg-gradient (+ angle-{degrees}), bg-color-mix, bg-relative-color, bg-bordered-gradient

Gradients

Add text-gradient, bg-gradient, or border-gradient, then pick a preset with gradient-{name}:

<h1 class="text-gradient gradient-sunset">Vivid heading</h1>
<div class="bg-gradient gradient-cyan">Cyan panel</div>

Semantic presets (gradient-primary, -secondary, -accent, -success, -warning, -danger, -info) follow your theme. Named presets: pink, magenta, emerald, cyan, rose, purple, yellow, orange, lime, amber, red, blue, gray, white, indigo, indigo-dark, violet, green, fuchsia, navy.