Moderate brand-colored tint. Brand callouts, accented sections. Switches per active brand mode.

Saturated brand fill. Hero panels, prominent brand surfaces. Switches per active brand mode. Pair text with text-on-color.

Moderate danger surface — medium red tint. Error banners. Stays red across all brand modes.

Saturated success fill. Solid success badges, status pills. Stays green across all brand modes. Pair text with text-on-color.

Saturated info fill. Solid info badges, status pills. Stays blue across all brand modes. Pair text with text-on-color.

Saturated warning fill. Solid warning badges, status pills. Stays yellow across all brand modes. Pair text with text-default (dark) — yellow fails contrast with white.

Saturated danger fill. Solid error badges, destructive action backgrounds. Stays red across all brand modes. Pair text with text-on-color.

Static mid-gray (does not flip per theme). Decorative dividers, fixed accents independent of theme.

Low-emphasis neutral surface — subtle elevation, callout strips.

High-emphasis neutral surface — strong recessed sections, hover on interactive panels.

Subtle neutral surface — softest tint above default. Alternating rows, hover surfaces.

Disabled surface — gray fill for disabled controls and surfaces. Pair with text-disabled.

Subtle success surface — soft green tint. Success alert backgrounds. Stays green across all brand modes.

Subtle info surface — soft blue tint. Info alert backgrounds. Stays blue across all brand modes.

Subtle warning surface — soft yellow tint. Warning alert backgrounds. Stays yellow across all brand modes.

Subtle danger surface — soft red tint. Error alert backgrounds. Stays red across all brand modes.

Overlay surface — menus, dropdowns, tooltips. Sits above page content. Same value as raised in most themes.

Disabled brand surface — desaturated brand color for disabled brand-colored elements.

Raised surface — cards, popovers, content blocks. Sits above default surface. Pair text with text-default.

Static brand accent (mid-shade). Decorative brand element that does not flip per theme.

Brand-colored text — for brand callouts, active state labels, brand emphasis. Switches per active brand mode. Use sparingly.

Display heading text — for large prominent headings (H1, H2). Slightly different weight/contrast than body.

Long-form paragraph text — body content in articles, descriptions. Slightly muted vs text-default.

Muted paragraph text — secondary descriptions, less prominent paragraphs.

Success message text — green. Confirmation messages, success states. Stays green across all brand modes.

Info message text — blue. Informational labels, hints. Stays blue across all brand modes.

Warning message text — orange/yellow. Caution messages, warning states. Stays warm across all brand modes.

Danger/error message text — red. Error labels, validation feedback. Stays red across all brand modes.

Default text on colored brand surfaces (white). Stays white across themes. Use on primary buttons, brand-colored hero panels.

Default body text. Light: near-black. Dark: near-white. Most common text token — start here for any body content.

Disabled text — desaturated gray for disabled labels, controls.

Muted text on colored surfaces. Slightly less prominent than text-on-color.

Dark text used on warning surfaces (yellow). Always dark — yellow + white text fails WCAG AA contrast in any theme. Use this for labels and icons that sit on background-warning-strong, button-warning-* (if any), or warni

Default border — most common divider/border. Used for cards, inputs, generic separators. Theme-aware.

Muted border — softer than default. Subtle separators between related sections.

High-contrast border — emphasized dividers, focus states. Light: near-black. Dark: white.

Border that matches default surface tone — used for subtle separation against the default background.

Brand-colored border — focus rings, brand-accented dividers. Switches per active brand mode.

Subtle warning border. Light warning accents. Stays yellow across all brand modes.

Border on dark surfaces at 40% opacity. Subtle separator on dark backgrounds.

Border on a colored/brand surface at 30% opacity. Used inside primary buttons or brand panels.

Form field text when user has entered a value.

Default form field border — outline of input fields.

Select/dropdown option background on hover.

Select/dropdown option background when pressed.

Primary brand scale — softest tint. Subtle backgrounds, hover surfaces. Used by Themes/* tokens. Switches per active brand mode.

Primary brand scale — very light tint. Soft backgrounds, gentle hover states. Used by Themes/* tokens.

Primary brand scale — light shade for tinted backgrounds, subtle dividers. Below 3:1 on white — UI/decorative only.

Primary brand scale — light shade for borders, dividers, decorative accents. Below 3:1 on white.

Primary brand scale — mid-light shade for icons on tinted backgrounds, subtle accents.

Primary brand scale — mid-light shade. Used for primary text/icons in Dark mode only. Fails AA on white.

Primary brand scale — hover/emphasis state. Darker than anchor. White text passes AAA contrast.

Primary brand scale — selected/pressed emphasis. Deep shade. White text passes AAA.

Primary brand scale — pressed state, deepest emphasis. White text passes AAA.

PRIMARY BRAND ANCHOR — main primary brand color. Use through Themes/* (e.g. background-brand, text-brand). Never bind directly to components. White text passes AA.

TERTIARY BRAND ANCHOR — main tertiary brand color. Use through Themes/* tokens. Never bind directly to components.

Brand neutral — softest tint of the active brand mode. Subtle dividers, hover backgrounds on default surfaces.

Brand neutral — light tint. Page sections, alternating rows, subtle elevation.

Brand neutral — light gray. Alternating rows, subtle dividers, soft backgrounds.

Brand neutral — light gray. Default borders, dividers, recessed surfaces.

Brand neutral — medium-light gray. Disabled controls, light borders.

Brand neutral — mid gray. Disabled text/icons, secondary placeholder content.

Brand neutral — medium gray. Secondary icons, muted UI elements.

Brand neutral — medium-dark gray. Body text on light backgrounds. Passes AA on white.

Brand neutral — dark gray. Default body text, paragraph content. Passes AAA on white.

Brand neutral — very dark gray. Display text, prominent headings. Passes AAA on white.

Brand neutral — near-black. Strong emphasis, primary headings.

Brand neutral — darkest. Maximum contrast text on light surfaces.

Brand base white. Default page surface in Light mode. Tinted per active brand (warm/cool).

Brand base black. Default page surface in Dark mode. Tinted per active brand.

White overlay at 10% — subtle hover tint on dark surfaces.

White overlay at 20% — hover tint on dark surfaces, glass effects.

White overlay at 30% — pressed tint on dark surfaces.

White overlay at 40% — selected tint on dark surfaces.

White overlay at 50% — semi-transparent white. Glass surfaces, disabled overlays.

White overlay at 60% — translucent white surfaces.

White overlay at 70% — heavy translucent white.

White overlay at 80% — near-opaque white with slight transparency.

White overlay at 90% — almost-solid white surface.

White overlay at 100% — fully opaque white.

Black overlay at 0% opacity (fully transparent).

Black overlay at 20% — light scrim, hover tint.

Black overlay at 40% — moderate scrim, disabled overlays.

Black overlay at 50% — modal scrim, dialog backdrop. Most common scrim opacity.

Black overlay at 70% — strong scrim, dark overlays.

Black overlay at 80% — very dark scrim.

Black overlay at 100% — fully opaque black.

Primary button background when pressed/active. Darker emphasis.

Primary button background, default state. Use Text/text-on-color for label. Switches per active brand mode.

Primary button background on hover. Slightly darker than default.

Primary button background in selected state.

Neutral/secondary button background, default state. Pair with Text/text-default for label.

Neutral button background on hover.

Neutral button background when pressed.

Neutral button background in selected state.

Black/inverse button — high-contrast button background. Used for prominent CTAs against light surfaces.

Black/inverse button hover state.

Black/inverse button pressed state.

Black/inverse button selected state.

Primary link color — default state. Brand-tinted, switches per active brand mode.

Icon on colored brand surface (white). Stays white across themes.

Default icon color — body-tone, neutral. Most common icon color. Pair with text-default.

Subtle brand-tinted icon — softer brand color.

Brand-colored icon — saturated brand fill. Switches per active brand mode.

Neutral icon color — gray. Pair with neutral or muted text.

Danger icon — saturated red. Stays red across brand modes.

Disabled icon — desaturated gray.

Default icon alt mid-tone variant.

Neutral chip background, default state. Subtle tag-like background. Pair with text-default.

Neutral chip background, hover state.

Neutral chip background, selected state.

Chart sequential color — first series. For line/bar/pie charts with sequential data.

Chart sequential color — second series.

Chart sequential color — third series.

Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode.

Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode.

Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode.

Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode.

Universal neutral — mid gray. Disabled text, secondary placeholders.

Universal neutral — medium-dark gray. Body text on white, passes AA.

Universal neutral — very dark gray. Display text, headings. Passes AAA on white.

Universal neutral — near-black. Strong emphasis text.

Very light red — alert/error backgrounds.

Light red — danger surface tint.

Light red — danger borders, decorative accents. Below 3:1 on white.

Mid red — danger emphasis, hover icons.

Danger anchor red — main danger color. White text passes AA.

Dark red — danger hover state. White text passes AAA.

Very dark red — danger pressed state. White text passes AAA.

Near-darkest red — strong danger emphasis.

Very light yellow — warning alert backgrounds.

Mid-light yellow — warning icons on tinted backgrounds.

Mid yellow — warning accent.

Warning anchor — main warning color. Use dark text on this — white text fails AA on yellow.

Dark yellow/orange — warning hover state.

Very light green — success alert backgrounds.

Success anchor green — main success color. White text passes AA.

Dark green — success hover state. White text passes AAA.

Very light blue — info alert backgrounds.

Mid blue — info emphasis.

Medium blue — info primary state.

Info anchor blue — main info color. White text passes AA.

Brand-tinted neutral (800) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection.