Default page surface. Light: white. Dark: deep neutral. Brand-tinted in active brand mode. Pair text with text-default.

Muted neutral surface — slightly recessed sections, soft separators.

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 success surface — medium green tint. Success banners. Stays green across all brand modes.

Moderate info surface — medium blue tint. Info banners. Stays blue across all brand modes.

Moderate warning surface — medium yellow tint. Warning banners. Stays yellow across all brand modes.

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.

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

Strongest emphasis neutral surface — heavy contrast against default. Use sparingly.

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.

Softest brand-colored tint. Subtle brand callouts, gentle accent backgrounds. Switches per active brand mode.

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.

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.

Softest border — minimal contrast. Internal dividers within content groups.

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

Saturated success border. Solid success indicators. Stays green across all brand modes.

Saturated info border. Solid info indicators. Stays blue across all brand modes.

Saturated warning border. Solid warning indicators. Stays yellow across all brand modes.

Saturated danger border — error states, destructive action borders. Stays red across all brand modes.

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

Stronger default border — slightly more contrast than border-default. Use when default is too subtle.

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

Subtle success border. Light success accents. Stays green across all brand modes.

Subtle info border. Light info accents. Stays blue across all brand modes.

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

Subtle danger border. Soft error indicators. Stays red 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 placeholder text — disappears on input.

Form field text when user has entered a value.

Form field helper text — supplementary instruction below the field.

Default form field background — input fill in default state.

Default form field border — outline of input fields.

Form field border for error/validation-failed state. Stays red across brand modes.

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 scale — darkest variant. Rarely needed; prefer Neutral/950 for max-contrast surfaces.

Greeen brand hero green — #166F32. Passes AA with white text/icons (6.26:1). Use as bg for CTAs, badges, highlights.

⚠ SURFACE ONLY in Greeen brand — #CDFFAD = 1.13:1 as text on white (FAIL). Text ON this surface must use Primary/900 #163300 → 12.3:1 AAA ✓

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.

Muted/tertiary text. Wise: darkened to #696969 for WCAG AA compliance on both white and Light Mint surfaces.

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.

Success icon — saturated green. Stays green across brand modes.

Info icon — saturated blue. Stays blue across brand modes.

Warning icon — saturated yellow. Stays yellow across brand modes.

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

Disabled icon — desaturated gray.

Default icon mid-tone variant.

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 — dark gray. Default body text, paragraphs. Passes AAA on white.

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

Universal neutral — near-black. Strong emphasis text.

Very dark shade — selected/pressed emphasis. Used by Brand collection.

Darkest variant. Used by Brand collection.

Very light red — alert/error backgrounds.

Light red — danger surface tint.

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

Mid-light red — danger icons on tinted backgrounds.

Mid red — danger emphasis, hover icons.

Medium red — danger primary state.

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.

Darkest red — maximum danger emphasis.

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.

Darkest warning — maximum emphasis.

Very light green — success alert backgrounds.

Mid green — success emphasis.

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

Darkest green — maximum success emphasis.

Mid-light blue — info icons on tinted backgrounds.

Mid blue — info emphasis.

Medium blue — info primary state.

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

Darkest blue — maximum info emphasis.

Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white.

Darkest variant. Used by Brand collection.

Medium-dark shade. Passes AA on white. Used by Brand collection.

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