Colors

Every solid background includes a fallback: theme colors use --on-*, semantic surfaces use --text-color or --text-inverse, and fixed colors use black/white foregrounds. SVG fill follows the text color. Browsers with contrast-color() select black or white dynamically. See the browser support policy.

Keep --on-* and surface text tokens in sync when customizing background tokens. Gray fallbacks are selected at Sass compilation time; runtime changes to gray or black/white tokens need a contrast check and, if necessary, an explicit .text-* override.

Interactive foregrounds

Filled primary surfaces and interactive foregrounds can use different colors. Links, navigation, menus, lists, tabs, pagination hover states, expansion-panel actions and primary text or outline buttons and interactive chips use the semantic action tokens. Solid primary buttons and chips, passive primary chips and current pagination items continue to use their theme-color tokens. The global focus color follows the action color by default and remains independently overridable.

:root {
	--primary: #d9ccff;
	--primary-hover: #cabbff;
	--primary-active: #b9a7ff;
	--on-primary: #24183f;

	--action-color: #5b21b6;
	--action-color-hover: #4c1d95;
	--action-color-active: #3b1673;
	--focus-outline-color: var(--action-color);
}

Theme colors

Theme colors adapt between light and dark mode. Use them to communicate hierarchy, actions and semantic states without embedding fixed color values in markup.

<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-warning">Warning</div>
<div class="bg-error">Error</div>

Every .bg-* utility automatically chooses black or white text and SVG fill with the strongest contrast against its rendered background. Add a later .text-* utility only when a deliberate, tested override is needed.

Semantic surfaces

Surface utilities follow the current theme and are useful for page layers, containers, hover previews and selected regions.

<div class="bg-body">Body</div>
<div class="bg-surface">Surface</div>
<div class="bg-inverse">Inverse</div>
<div class="bg-surface-hover">Surface hover</div>
<div class="bg-highlight">Highlight</div>
<div class="bg-active">Active</div>

Background opacity

Combine any background utility with .bg-opacity-10, .bg-opacity-25, .bg-opacity-50 or .bg-opacity-75. This includes theme colors, semantic surfaces such as .bg-highlight, white, black and every gray step. In browsers with contrast-color(), the color is composited against the inherited backdrop before its foreground is selected. Without that feature, these backgrounds remain opaque and use their authored foreground colors, including when nested. This keeps fallback text readable.

<div class="bg-primary">100%</div>
<div class="bg-primary bg-opacity-75">75%</div>
<div class="bg-primary bg-opacity-50">50%</div>
<div class="bg-primary bg-opacity-25">25%</div>
<div class="bg-primary bg-opacity-10">10%</div>
<div class="bg-highlight bg-opacity-50">Highlight at 50%</div>

Layered backgrounds

An opacity utility affects only the element that carries it. A nested .bg-* starts opaque again unless it has its own opacity class. Directly nested translucent backgrounds include the rendered parent composite in their contrast calculation.

<div class="bg-inverse p-3">
	<div class="bg-primary bg-opacity-50 p-3">Readable on inverse</div>
</div>

<div class="bg-primary bg-opacity-25 p-3">
	<div class="bg-error p-3">Opaque error background</div>
	<div class="bg-error bg-opacity-50 p-3">Error background at 50%</div>
</div>

The page body and every shipped background utility publish their solid or rendered color through --bg-opacity-backdrop. Application-specific solid surfaces should publish that token in their stylesheet. For gradients, images or other varying backdrops, choose and test an explicit text color.

Background gray scale

Gray backgrounds remain fixed across themes. Their foreground is still selected automatically, making every step legible as a reference swatch.

<div class="bg-gray-50">bg-gray-50</div>
<div class="bg-gray-100">bg-gray-100</div>
<div class="bg-gray-150">bg-gray-150</div>
<div class="bg-gray-200">bg-gray-200</div>
<div class="bg-gray-250">bg-gray-250</div>
<div class="bg-gray-300">bg-gray-300</div>
<div class="bg-gray-350">bg-gray-350</div>
<div class="bg-gray-400">bg-gray-400</div>
<div class="bg-gray-450">bg-gray-450</div>
<div class="bg-gray-500">bg-gray-500</div>
<div class="bg-gray-550">bg-gray-550</div>
<div class="bg-gray-600">bg-gray-600</div>
<div class="bg-gray-650">bg-gray-650</div>
<div class="bg-gray-700">bg-gray-700</div>
<div class="bg-gray-750">bg-gray-750</div>
<div class="bg-gray-800">bg-gray-800</div>
<div class="bg-gray-850">bg-gray-850</div>
<div class="bg-gray-900">bg-gray-900</div>
<div class="bg-gray-950">bg-gray-950</div>

Theme text colors

Text utilities apply the corresponding theme token directly. They do not choose a contrast color, so verify them against every background on which they appear.

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-warning">Warning text</p>
<p class="text-error">Error text</p>

Theme underline colors

Use .text-underline-* to add an offset underline in a theme color without changing the text color itself.

<a class="text-underline-primary" href="/">Primary underline</a>
<span class="text-underline-success">Success underline</span>
<span class="text-underline-error">Error underline</span>

Semantic text

Use semantic text colors for normal copy, supporting information and known inverse surfaces.

<p class="text-body">Body text</p>
<p class="text-muted">Muted supporting text</p>
<p class="text-subtle">Subtle metadata</p>
<div class="bg-inverse"><p class="text-inverse">Inverse text</p></div>
<div class="bg-primary"><p class="text-inherit">Inherited foreground</p></div>

Text gray scale

Raw gray text utilities are fixed values. The light half of the scale is previewed on black and the dark half on white so the class names remain readable in either site theme.

<span class="text-gray-50">text-gray-50</span>
<span class="text-gray-100">text-gray-100</span>
<span class="text-gray-150">text-gray-150</span>
<span class="text-gray-200">text-gray-200</span>
<span class="text-gray-250">text-gray-250</span>
<span class="text-gray-300">text-gray-300</span>
<span class="text-gray-350">text-gray-350</span>
<span class="text-gray-400">text-gray-400</span>
<span class="text-gray-450">text-gray-450</span>
<span class="text-gray-500">text-gray-500</span>
<span class="text-gray-550">text-gray-550</span>
<span class="text-gray-600">text-gray-600</span>
<span class="text-gray-650">text-gray-650</span>
<span class="text-gray-700">text-gray-700</span>
<span class="text-gray-750">text-gray-750</span>
<span class="text-gray-800">text-gray-800</span>
<span class="text-gray-850">text-gray-850</span>
<span class="text-gray-900">text-gray-900</span>
<span class="text-gray-950">text-gray-950</span>

Explicit black and white

Use raw black and white utilities only when the backdrop is known. Unlike theme colors, these values do not change between light and dark mode.

<div class="bg-white text-black">Black on white</div>
<div class="bg-black text-white">White on black</div>