Colors

Primary page background. Use for main content areas, card interiors, modal content. Do NOT use for navigation chrome (use color.bg.emphasis).

Secondary background with subtle tint. Use for table headers, empty states, disabled inputs, secondary panels. Do NOT use for primary content areas.

Tertiary background for structural chrome. Use for topbar, sidebar, nav backgrounds. Do NOT use for content areas or cards.

Inverted background for high-contrast elements. Use for tooltips, inverted badges. Do NOT use for large content surfaces.

Modal/dialog overlay scrim. Use only behind modals and drawers. Apply to a full-viewport fixed element.

Hover state background for interactive elements (list items, table rows, nav items). Do NOT use as a static background.

Selected/active state background. Use for active nav items, selected table rows, toggled states. Always pair with color.text.interactive-active for foreground.

Solid primary brand background. Use for primary CTA buttons, primary badges (strong variant). Always pair with color.text.on-primary for foreground.

Hover state for solid primary backgrounds. Use only on elements that have color.bg.primary as their default.

Pressed/active state for solid primary backgrounds.

Subtle primary-tinted background. Use for primary badges (subtle variant), selected states, focus highlights. Pair with color.text.primary for foreground.

Hover state for subtle primary-tinted backgrounds. Use on secondary/confirm button hover (subtle variant), hover on selected/focus-highlighted rows. Only use on elements whose resting background is color.bg.primary-subtle.

Resting background for interactive elements placed on a brand-colored surface (topbar, hero, indigo banner). Semi-transparent white reads against brand backgrounds where a solid fill would compete with the surface. Use for primary/onBrand buttons. Do NOT use on standard white or muted surfaces.

Hover state for on-brand backgrounds. Use only on elements whose resting background is color.bg.on-brand.

Solid secondary brand background (cyan). Use sparingly for secondary accent elements. Pair with color.text.on-secondary (black) — do NOT pair with on-primary (white), which fails WCAG contrast on cyan.

Solid destructive/error background. Use for destructive CTA buttons only. Pair with color.text.on-primary. Do NOT use for error messages (use color.bg.error-subtle).

Hover state for destructive backgrounds.

Pressed state for destructive backgrounds.

Solid success background. Use for strong success badges and success confirmation CTAs. Pair with color.text.on-success (white). Do NOT use for success alerts or inline success messages (use color.bg.success-subtle).

Hover state for solid success backgrounds.

Subtle success background. Use for success alerts, success badges, success callouts. Pair with color.text.success for foreground.

Solid warning background. Use for strong warning badges and high-emphasis warning affordances. Pair with color.text.on-warning (black — orange-500 fails WCAG with white). Do NOT use for warning alerts or inline warnings (use color.bg.warning-subtle).

Hover state for solid warning backgrounds.

Subtle warning background. Use for warning alerts, warning badges. Pair with color.text.warning for foreground.

Subtle error background. Use for error alerts, validation error containers. Pair with color.text.error for foreground.

Solid info background. Use for strong info badges and info-variant CTAs. Pair with color.text.on-info (white). Do NOT use for info alerts or inline info messages (use color.bg.info-subtle).

Hover state for solid info backgrounds.

Subtle info background. Use for info alerts, info badges. Pair with color.text.info for foreground.

Default body text. Use for all primary readable content, headings, paragraph text. Do NOT use for secondary/helper text.

Secondary text. Use for labels, descriptions, sidebar nav text. Do NOT use for disabled states (use color.text.disabled).

Tertiary text. Use for captions, helper text, timestamps, metadata. Do NOT use for primary readable content.

Disabled text and placeholder text. Use when an element is non-interactive. Do NOT use for readable content.

Text on solid primary and destructive backgrounds. Always white in light mode. Do NOT use on subtle/tinted backgrounds. Do NOT use on color.bg.secondary (use color.text.on-secondary), color.bg.warning (use color.text.on-warning), color.bg.success/info (use color.text.on-success / on-info for clarity, though both resolve to white).

Text on solid secondary (cyan) backgrounds. Black because cyan-500 is too light for white text — white-on-cyan fails WCAG contrast (~1.5:1) while black-on-cyan passes AAA (~12.5:1).

Text on solid success (green-500) backgrounds. White passes WCAG AA. Use on color.bg.success.

Text on solid warning (orange-500) backgrounds. Black because orange-500 is too light for white text — white-on-orange-500 fails WCAG AA (~2.6:1) while black-on-orange-500 passes AA (~8:1). Use on color.bg.warning.

Text on solid info (blue-500) backgrounds. White passes WCAG AA. Use on color.bg.info.

Text on inverse (dark) backgrounds like tooltips.

Hyperlink text and ghost button text. Use for all clickable text links. Do NOT use for non-interactive colored text. Do NOT use on color.bg.primary — both resolve to indigo-500 (zero contrast).

Hover state for links.

Text on interactive-active backgrounds. Use for active nav item text, selected row text. Always pair with color.bg.interactive-active.

Brand-colored text for emphasis. Use for outline button text, inline accents on neutral/surface/muted backgrounds. Do NOT use for body copy. Do NOT use on color.bg.primary — both resolve to indigo-500 (zero contrast). On solid primary backgrounds, use color.text.on-primary instead.

Success status text. Use on success-subtle backgrounds. Do NOT use for body text.

Warning status text. Use on warning-subtle backgrounds.

Error/destructive status text. Use for validation messages, error alerts. Use on error-subtle backgrounds.

Informational status text. Use on info-subtle backgrounds.

Default border. Use for cards, inputs, table cells, separators. The most common border in the system.

Subtle border. Use for cards on secondary backgrounds, light dividers within components.

Emphasized border. Use for hover states on bordered elements, emphasized separators.

Focus ring border. Applied when an element receives keyboard focus. Always pair with shadow.focus-ring.

Error state border. Use on inputs with validation errors. Always pair with shadow.focus-ring-error when focused.

Success accent border. Use for left-border accents on success alerts.

Warning accent border. Use for left-border accents on warning alerts.

Info accent border. Use for left-border accents on info alerts.

Primary brand border. Use for outline buttons, selected/active borders.

Destructive border. Use for outline-danger buttons.

Default icon color for non-interactive icons.

Interactive icon color. Use for clickable standalone icons.

Success status icon.

Warning status icon.

Error status icon.

Info status icon.

Primary chart series. Brand indigo.

Second chart series. Brand cyan.

Third chart series.

Fourth chart series.

Fifth chart series.

Sixth chart series.