Color System

An overview-first guide to the color token families, how companion tones are derived, and where each group belongs in the component layer.

Color overview

Color token families

Select a color to open its details, a description of companion tokens and how they are derived.

Primary--color--primary Secondary--color--secondary Background--color--background Surface--color--surface Focus--color--focus Alpha--color--alpha Success--color--success Warning--color--warning Danger--color--danger Info--color--info

Brand Colors

Primary details

Use these for the core branded actions and accents. They are the families most often mapped into buttons, links, tags, and emphasized UI states.

Base token--color--primaryPrimary · #2d2d2d · Editable

Main interactive color for primary buttons, active navigation, and strong highlights.

--color--primary-contrastContrast · #ffffff · EditableText and icons displayed directly on the primary surface.

--color--primary-borderBorder · Auto-generatedHover states, outlines, and dividers on primary-colored surfaces.color-mix(in srgb, var(--color--primary-contrast) var(--color--border-mix-amount), var(--color--primary))

--color--primary-altAlt · Auto-generatedSubtle selected or active fills related to the primary family.color-mix(in srgb, var(--color--primary-contrast) var(--color--alt-mix-amount), var(--color--primary))

Derivation rules

Editable base and contrast values are set directly in the design token system.
2 companion tokens are generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

Brand Colors

Secondary details

Use these for the core branded actions and accents. They are the families most often mapped into buttons, links, tags, and emphasized UI states.

Base token--color--secondarySecondary · #6e6e6e · Editable

Supporting interaction color for secondary actions and quieter highlights.

--color--secondary-contrastContrast · #ffffff · EditableText and icons displayed on secondary-colored surfaces.

--color--secondary-borderBorder · Auto-generatedHover states, outlines, and dividers on secondary-colored surfaces.color-mix(in srgb, var(--color--secondary-contrast) var(--color--border-mix-amount), var(--color--secondary))

--color--secondary-altAlt · Auto-generatedSubtle background states related to the secondary family.color-mix(in srgb, var(--color--secondary-contrast) var(--color--alt-mix-amount), var(--color--secondary))

Derivation rules

Editable base and contrast values are set directly in the design token system.
2 companion tokens are generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

Layout Colors

Background details

These families define the canvas and the raised surfaces above it. They are the foundation for readable UI structure, separators, muted text, and nested containers.

Base token--color--backgroundBackground · #f5f5f5 · Editable

The outer page canvas and the lowest visual layer.

--color--background-contrastContrast · #2d2d2d · EditablePrimary text and icons placed directly on the page background.

--color--background-contrast-mutedContrast muted · Auto-generatedReduced-emphasis text and metadata on the background layer.color-mix(in srgb, var(--color--background-contrast) 67.5%, var(--color--background))

--color--background-borderBorder · Auto-generatedSeparators and borders that live on the page background.color-mix(in srgb, var(--color--background-contrast) var(--color--border-mix-amount), var(--color--background))

--color--background-altAlt · Auto-generatedSubtle zebra rows, hover states, and inset fills on the background layer.color-mix(in srgb, var(--color--background-contrast-muted) var(--color--alt-mix-amount), var(--color--background))

Derivation rules

Editable base and contrast values are set directly in the design token system.
3 companion tokens are generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

Layout Colors

Surface details

These families define the canvas and the raised surfaces above it. They are the foundation for readable UI structure, separators, muted text, and nested containers.

Base token--color--surfaceSurface · #ffffff · Editable

Raised surfaces such as cards, drawers, dialogs, and dropdowns.

--color--surface-contrastContrast · #2d2d2d · EditablePrimary text and icons on raised surfaces.

--color--surface-contrast-mutedContrast muted · Auto-generatedSecondary text and metadata inside cards and panels.color-mix(in srgb, var(--color--surface-contrast) 67.5%, var(--color--surface))

--color--surface-borderBorder · Auto-generatedCard outlines, inputs, and internal separators on surface elements.color-mix(in srgb, var(--color--surface-contrast) var(--color--border-mix-amount), var(--color--surface))

--color--surface-altAlt · Auto-generatedInset areas and subtle fills inside raised surfaces.color-mix(in srgb, var(--color--surface-contrast-muted) var(--color--alt-mix-amount), var(--color--surface))

Derivation rules

Editable base and contrast values are set directly in the design token system.
3 companion tokens are generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

UI Colors

Focus details

These tokens support focus indication and overlays across all components, independent of the brand families.

Base token--color--focusFocus · #4d90fe · Editable

Keyboard focus rings and other attention markers.

This token stands alone and is typically consumed directly by the component that needs it.

Derivation rules

Editable base and contrast values are set directly in the design token system.
No companion tokens in this family are generated.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

UI Colors

Alpha details

These tokens support focus indication and overlays across all components, independent of the brand families.

Base token--color--alphaAlpha · rgba(0, 0, 0, 0.55) · Editable

Scrims and overlays behind dialogs, drawers, and tooltips.

--color--alpha-contrastContrast · #ffffff · EditableReadable text and icons when something sits on the alpha overlay.

--color--alpha-borderBorder · Auto-generatedBorders and separators shown directly on overlay surfaces.color-mix(in srgb, var(--color--alpha-contrast) var(--color--border-mix-amount), var(--color--alpha))

Derivation rules

Editable base and contrast values are set directly in the design token system.
1 companion token is generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

State Colors

Success details

Use these for product meaning rather than brand meaning: success, warning, danger, and info states stay recognizable even when the theme changes.

Base token--color--successSuccess · #4caf50 · Editable

Validated, completed, or otherwise positive outcomes.

--color--success-contrastContrast · #ffffff · EditableText and icons on success surfaces.

--color--success-borderBorder · Auto-generatedOutlines and hover states for success notices and badges.color-mix(in srgb, var(--color--success-contrast) var(--color--border-mix-amount), var(--color--success))

Derivation rules

Editable base and contrast values are set directly in the design token system.
1 companion token is generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

State Colors

Warning details

Use these for product meaning rather than brand meaning: success, warning, danger, and info states stay recognizable even when the theme changes.

Base token--color--warningWarning · #ffb300 · Editable

Caution, incomplete progress, or temporary blockers.

--color--warning-contrastContrast · #2d2d2d · EditableDark text and icons on light warning surfaces.

--color--warning-borderBorder · Auto-generatedOutlines and hover states for warning surfaces.color-mix(in srgb, var(--color--warning-contrast) var(--color--border-mix-amount), var(--color--warning))

Derivation rules

Editable base and contrast values are set directly in the design token system.
1 companion token is generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

State Colors

Danger details

Use these for product meaning rather than brand meaning: success, warning, danger, and info states stay recognizable even when the theme changes.

Base token--color--dangerDanger · #e53935 · Editable

Destructive actions and error states.

--color--danger-contrastContrast · #ffffff · EditableText and icons on danger surfaces.

--color--danger-borderBorder · Auto-generatedOutlines and hover states for destructive surfaces.color-mix(in srgb, var(--color--danger-contrast) var(--color--border-mix-amount), var(--color--danger))

Derivation rules

Editable base and contrast values are set directly in the design token system.
1 companion token is generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.

State Colors

Info details

Use these for product meaning rather than brand meaning: success, warning, danger, and info states stay recognizable even when the theme changes.

Base token--color--infoInfo · #039be5 · Editable

Informational notices and neutral contextual cues.

--color--info-contrastContrast · #ffffff · EditableText and icons on info surfaces.

--color--info-borderBorder · Auto-generatedOutlines and hover states for informational surfaces.color-mix(in srgb, var(--color--info-contrast) var(--color--border-mix-amount), var(--color--info))

Derivation rules

Editable base and contrast values are set directly in the design token system.
1 companion token is generated from the base color and its contrast color.
--color--border-mix-amount controls border and hover companion strength.
--color--alt-mix-amount controls subtle fill companion strength.