An overview-first guide to the color token families, how companion tones are derived, and where each group belongs in the component layer.
How to use this page
Start with the family, then expand only what you need.
Use the overview numbers to understand system size at a glance.
Open the anatomy section only when you need to understand how companion tones are derived.
Open a family accordion when you need the exact token names, swatches, defaults, and formulas.
At a glance
Read the system without opening every token group
20Editable base families across brand, layout, utility, state, and palette.
45Generated companions that stay in sync when the base or mix amounts change.
2Global mix controls that tune the strength of border and alt companions system-wide.
10Optional palette slots reserved for project, campaign, or seasonal accents.
Use the base token when you need to choose a family, use the contrast token when content sits on top of it, and let the generated companions handle borders, hover fills, and subtle surface states.
Token anatomy
The derivation rules are available when you need them
A stronger mix used for outlines, dividers, and hover states where the color shift must remain visible against the base.
A fixed readability pattern used by layout families so secondary text keeps a consistent relationship to the surface.
contrastsurfacecontrast-muted
color-mix(in srgb, contrast 67.5%, base)
Primary and secondary interaction families.
Brand Colors
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))
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))
Background and surface layers.
Layout Colors
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))
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))
Cross-cutting utility colors.
UI Colors
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.
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))
Semantic feedback families.
State Colors
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))
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))
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))
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))
Optional accent slots
Brand Palette
The ten palette slots are intentionally empty by default. Fill them when a project needs campaign, department, or seasonal accent families without redefining the core brand colors.
--color--palette-1Palette 1 · transparent by default
Palette slots stay invisible until you assign them. Once filled, any component that supports a palette family can consume the slot with the same companion-token rules as the built-in brand families.
Editing rules
Guidance stays available without taking over the page
--color--border-mix-amount controls how clearly hover, outlines, and border companions stand apart from the base family.
--color--alt-mix-amount controls how subtle or visible the softer companion fills feel across the whole system.
Because these are global controls, changing one amount rebalances every generated companion of that type at once.
Change a base token when you want a new family identity. The generated companions will follow automatically.
Change a contrast token when readability on top of the base surface needs adjustment.
Use palette slots when you need extra accent families without touching the primary brand colors.
