Color

Field 1

Primitive tokens

Primitive color tokens are raw HEX reference values. They define palettes only; components and layouts should normally consume semantic color tokens instead of these primitives directly.

Base utility values

Shared primitive color utilities used by semantic aliases and accent contrast decisions.

Token

Sample

Value

--color-transparent

transparent

--color-on-accent

var(--color-neutral-0)

Neutral palette

Achromatic scale from pure white to near black.

Token

Sample

Value

--color-neutral-0

#ffffff

--color-neutral-50

#fafafa

--color-neutral-100

#f5f5f5

--color-neutral-200

#e5e5e5

--color-neutral-300

#d4d4d4

--color-neutral-400

#a1a1a1

--color-neutral-500

#737373

--color-neutral-600

#525252

--color-neutral-700

#404040

--color-neutral-800

#262626

--color-neutral-900

#171717

--color-neutral-950

#0a0a0a

Accent palette

Default brand and interaction emphasis scale.

Token

Sample

Value

--color-accent-50

#fffcfc

--color-accent-100

#fff7f6

--color-accent-150

#ffebe8

--color-accent-200

#ffdad5

--color-accent-250

#ffd1cb

--color-accent-300

#ffccc5

--color-accent-350

#ffbbb3

--color-accent-400

#faa79e

--color-accent-450

#ff8f85

--color-accent-500

#f28882

--color-accent-550

#eb5151

--color-accent-600

#e2292f

--color-accent-650

#d51a26

--color-accent-700

#bd3f3b

--color-accent-750

#bb3e3a

--color-accent-800

#912f2b

--color-accent-850

#771e1d

--color-accent-900

#671515

--color-accent-950

#651011

--color-accent-1000

#54090b

--color-accent-1050

#3d100f

--color-accent-1100

#201311

--color-accent-1150

#170f0e

Status palettes

Raw positive, warning, destructive and informational color scales.

Success

Positive status and validation scale.

Token

Sample

Value

--color-success-50

#f0fdf4

--color-success-100

#dcfce7

--color-success-200

#b9f8cf

--color-success-300

#7bf1a8

--color-success-400

#05df72

--color-success-500

#00c950

--color-success-600

#00a63e

--color-success-700

#008236

--color-success-800

#016630

--color-success-900

#0d542b

--color-success-950

#032e15

Warning

Caution and attention status scale.

Token

Sample

Value

--color-warning-50

#fffbeb

--color-warning-100

#fef3c6

--color-warning-200

#fee685

--color-warning-300

#ffd230

--color-warning-400

#ffb900

--color-warning-500

#fe9a00

--color-warning-600

#e17100

--color-warning-700

#bb4d00

--color-warning-800

#973c00

--color-warning-900

#7b3306

--color-warning-950

#461901

Error

Destructive action and invalid-state scale.

Token

Sample

Value

--color-error-50

#fef2f2

--color-error-100

#ffe2e2

--color-error-200

#ffc9c9

--color-error-300

#ffa2a2

--color-error-400

#ff6467

--color-error-500

#fb2c36

--color-error-600

#e7000b

--color-error-700

#c10007

--color-error-800

#9f0712

--color-error-900

#82181a

--color-error-950

#460809

Info

Informational and neutral-notice status scale.

Token

Sample

Value

--color-info-50

#f0f9ff

--color-info-100

#dff2fe

--color-info-200

#b8e6fe

--color-info-300

#74d4ff

--color-info-400

#00bcff

--color-info-500

#00a6f4

--color-info-600

#0084d1

--color-info-700

#0069a8

--color-info-800

#00598a

--color-info-900

#024a70

--color-info-950

#052f4a

Semantic tokens

Semantic color tokens translate primitive palettes into UI intent. They are theme-aware and should be the default layer for page, layout and generic UI styling.

Global

Global semantic tokens describe reusable UI roles such as backgrounds, text, borders and icons. Use these when the decision is about role, not a specific component.

Backgrounds

Reusable surface and overlay roles for canvases, sections, panels and media overlays.

Token

Light mode

Dark mode

--color-background-canvas

var(--color-neutral-0)

var(--color-neutral-950)

--color-background-surface

var(--color-neutral-50)

var(--color-neutral-900)

--color-background-subtle

var(--color-neutral-100)

var(--color-neutral-800)

--color-background-muted

var(--color-neutral-200)

var(--color-neutral-700)

--color-background-inverse

var(--color-neutral-950)

var(--color-neutral-0)

--color-background-accent

var(--color-accent-600)

--color-background-overlay

oklch(14.5% 0 0 / 22%)

oklch(0% 0 0 / 50%)

--color-background-media-overlay

oklch(14.5% 0 0 / 78%)

oklch(0% 0 0 / 78%)

Text

Text hierarchy and contrast roles for regular content, inverse surfaces and accent text.

Token

Light mode

Dark mode

--color-text-primary

Aavar(--color-neutral-950)

Aavar(--color-neutral-0)

--color-text-secondary

Aavar(--color-neutral-700)

Aavar(--color-neutral-300)

--color-text-tertiary

Aavar(--color-neutral-500)

Aavar(--color-neutral-400)

--color-text-inverse

Aavar(--color-neutral-0)

Aavar(--color-neutral-950)

--color-text-accent

Aavar(--color-accent-700)

--color-text-on-accent

Aavar(--color-on-accent)

Border

Boundary strength and contrast roles for dividers, outlines, media overlays and accent borders.

Token

Light mode

Dark mode

--color-border-subtle

var(--color-neutral-200)

var(--color-neutral-800)

--color-border-default

var(--color-neutral-300)

var(--color-neutral-700)

--color-border-strong

var(--color-neutral-500)

--color-border-inverse

var(--color-neutral-700)

var(--color-neutral-300)

--color-border-accent

var(--color-accent-600)

--color-border-on-media

oklch(100% 0 0 / 35%)

Icon

Icon hierarchy roles aligned with text contrast, but kept as a separate contract.

Token

Light mode

Dark mode

--color-icon-primary

Iconvar(--color-neutral-950)

Iconvar(--color-neutral-0)

--color-icon-secondary

Iconvar(--color-neutral-700)

Iconvar(--color-neutral-300)

--color-icon-tertiary

Iconvar(--color-neutral-500)

Iconvar(--color-neutral-400)

--color-icon-inverse

Iconvar(--color-neutral-0)

Iconvar(--color-neutral-950)

--color-icon-accent

Iconvar(--color-accent-700)

--color-icon-on-accent

Iconvar(--color-on-accent)

--color-content-on-media

Aavar(--color-neutral-0)

Status and state

Status tokens describe feedback meaning. State tokens describe shared interaction states such as disabled and focus.

Status

Complete background, border, text and icon contracts for success, warning, error and info.

Token

Light mode

Dark mode

--color-status-success-background

var(--color-success-50)

var(--color-success-950)

--color-status-success-border

var(--color-success-200)

var(--color-success-800)

--color-status-success-text

Aavar(--color-success-800)

Aavar(--color-success-200)

--color-status-success-icon

Iconvar(--color-success-600)

Iconvar(--color-success-400)

--color-status-warning-background

var(--color-warning-50)

var(--color-warning-950)

--color-status-warning-border

var(--color-warning-200)

var(--color-warning-800)

--color-status-warning-text

Aavar(--color-warning-800)

Aavar(--color-warning-200)

--color-status-warning-icon

Iconvar(--color-warning-600)

Iconvar(--color-warning-400)

--color-status-error-background

var(--color-error-50)

var(--color-error-950)

--color-status-error-border

var(--color-error-200)

var(--color-error-800)

--color-status-error-text

Aavar(--color-error-800)

Aavar(--color-error-200)

--color-status-error-icon

Iconvar(--color-error-600)

Iconvar(--color-error-400)

--color-status-info-background

var(--color-info-50)

var(--color-info-950)

--color-status-info-border

var(--color-info-200)

var(--color-info-800)

--color-status-info-text

Aavar(--color-info-800)

Aavar(--color-info-200)

--color-status-info-icon

Iconvar(--color-info-600)

Iconvar(--color-info-400)

State

Shared disabled and keyboard focus contracts consumed by component-level tokens.

Token

Light mode

Dark mode

--color-state-disabled-background

var(--color-neutral-100)

var(--color-neutral-900)

--color-state-disabled-border

var(--color-neutral-200)

var(--color-neutral-800)

--color-state-disabled-text

Aavar(--color-neutral-400)

Aavar(--color-neutral-600)

--color-state-disabled-icon

Iconvar(--color-neutral-400)

Iconvar(--color-neutral-600)

--color-state-focus-ring

var(--color-accent-500)

--color-state-focus-ring-offset

var(--color-neutral-0)

var(--color-neutral-950)

Color component tokens

Component-based color tokens are stable contracts for repeated UI components. Each documented component keeps its own color contract instead of sharing a generic bucket.

Buttons

Button color contracts cover primary, secondary and tertiary actions. They resolve through semantic color roles and include state-specific aliases.

Button primary

High-emphasis action using the accent surface.

Token

Light mode

Dark mode

--button-primary-background-default

var(--color-background-accent)

--button-primary-background-hover

var(--color-accent-700)

--button-primary-background-pressed

var(--color-accent-800)

--button-primary-background-disabled

var(--color-state-disabled-background)

--button-primary-border-default

var(--button-primary-background-default)

--button-primary-border-hover

var(--button-primary-background-hover)

--button-primary-border-pressed

var(--button-primary-background-pressed)

--button-primary-border-disabled

var(--color-state-disabled-border)

--button-primary-text-default

Aavar(--color-text-on-accent)

--button-primary-text-disabled

Aavar(--color-state-disabled-text)

--button-primary-icon-default

Iconvar(--color-icon-on-accent)

--button-primary-icon-disabled

Iconvar(--color-state-disabled-icon)

Button secondary

Medium-emphasis action using neutral surfaces.

Token

Sample

Value

--button-secondary-background-default

var(--color-background-subtle)

--button-secondary-background-hover

var(--color-background-subtle)

--button-secondary-background-pressed

var(--color-background-muted)

--button-secondary-background-disabled

var(--color-state-disabled-background)

--button-secondary-border-default

var(--button-secondary-background-default)

--button-secondary-border-hover

var(--button-secondary-background-hover)

--button-secondary-border-pressed

var(--button-secondary-background-pressed)

--button-secondary-border-disabled

var(--color-state-disabled-border)

--button-secondary-text-default

var(--color-text-primary)

--button-secondary-text-disabled

var(--color-state-disabled-text)

--button-secondary-icon-default

Icon

var(--color-icon-primary)

--button-secondary-icon-disabled

Icon

var(--color-state-disabled-icon)

Button tertiary

Low-emphasis action without a persistent container.

Token

Light mode

Dark mode

--button-tertiary-background-default

var(--color-transparent)

--button-tertiary-background-hover

var(--color-accent-50)

--button-tertiary-background-pressed

var(--color-accent-100)

--button-tertiary-border-default

var(--button-tertiary-background-default)

--button-tertiary-border-hover

var(--button-tertiary-background-hover)

--button-tertiary-border-pressed

var(--button-tertiary-background-pressed)

--button-tertiary-text-default

Aavar(--color-text-accent)

--button-tertiary-text-hover

Aavar(--color-accent-800)

--button-tertiary-text-pressed

Aavar(--color-accent-900)

--button-tertiary-icon-default

Iconvar(--color-icon-accent)

--button-tertiary-icon-disabled

Iconvar(--color-state-disabled-icon)

Input

Input color contracts cover default, hover, focus, disabled and validation states.

Token

Sample

Value

--input-background-default

var(--color-background-canvas)

--input-background-hover

var(--color-background-surface)

--input-background-focus

var(--color-background-canvas)

--input-background-disabled

var(--color-state-disabled-background)

--input-border-default

var(--color-border-default)

--input-border-hover

var(--color-border-strong)

--input-border-focus

var(--color-border-accent)

--input-border-invalid

var(--color-status-error-border)

--input-border-valid

var(--color-status-success-border)

--input-text-default

var(--color-text-primary)

--input-placeholder-default

var(--color-text-tertiary)

--input-helper-default

var(--color-text-secondary)

--input-helper-invalid

var(--color-status-error-text)

--input-helper-valid

var(--color-status-success-text)

Tab

Tab color contracts cover default, hover, selected and disabled states.

Token

Sample

Value

--tab-background-default

var(--color-transparent)

--tab-background-hover

var(--color-background-subtle)

--tab-background-selected

var(--color-background-inverse)

--tab-background-disabled

var(--color-transparent)

--tab-border-default

var(--color-transparent)

--tab-border-hover

var(--color-border-subtle)

--tab-border-selected

var(--color-background-inverse)

--tab-border-disabled

var(--color-transparent)

--tab-text-default

var(--color-text-secondary)

--tab-text-hover

var(--color-text-primary)

--tab-text-selected

var(--color-text-inverse)

--tab-text-disabled

var(--color-state-disabled-text)

--tab-icon-default

Icon

var(--color-icon-secondary)

--tab-icon-hover

Icon

var(--color-icon-primary)

--tab-icon-selected

Icon

var(--color-icon-inverse)

--tab-icon-disabled

Icon

var(--color-state-disabled-icon)

Tag

Tag color contracts cover compact metadata and filter states.

Token

Sample

Value

--tag-background-default

var(--color-background-subtle)

--tag-background-hover

var(--color-background-muted)

--tag-background-selected

var(--color-background-inverse)

--tag-border-default

var(--color-border-subtle)

--tag-border-hover

var(--color-border-default)

--tag-border-selected

var(--color-background-inverse)

--tag-text-default

var(--color-text-secondary)

--tag-text-hover

var(--color-text-primary)

--tag-text-selected

var(--color-text-inverse)

Card

Card color contracts define reusable content surfaces and their emphasis states.

Token

Sample

Value

--card-background-default

var(--color-background-surface)

--card-background-hover

var(--color-background-subtle)

--card-background-selected

var(--color-background-surface)

--card-border-default

var(--color-border-subtle)

--card-border-hover

var(--color-border-default)

--card-border-selected

var(--color-border-accent)

Link

Link color contracts cover text action states and underline color.

Token

Light mode

Dark mode

--link-text-default

Aavar(--color-text-accent)

--link-text-hover

Aavar(--color-accent-800)

--link-text-visited

Aavar(--color-accent-900)

--link-underline-default

var(--color-border-accent)

--link-underline-hover

var(--color-accent-800)

Icon button

Icon button color contracts cover compact standalone controls.

Token

Sample

Value

--icon-button-background-default

var(--color-background-surface)

--icon-button-background-hover

var(--color-background-subtle)

--icon-button-border-default

var(--color-border-default)

--icon-button-border-hover

var(--color-border-strong)

--icon-button-icon-default

Icon

var(--color-icon-primary)

--icon-button-icon-hover

Icon

var(--color-icon-primary)

Eyebrow

Eyebrow color contracts define repeated section labels and their marker.

Token

Sample

Value

--eyebrow-text-default

var(--color-text-accent)

--eyebrow-marker-default

var(--color-border-accent)

Label

Label color contracts define compact metadata and field-label text.

Token

Sample

Value

--label-metric-text-default

var(--color-text-tertiary)

--label-field-text-default

var(--color-text-secondary)

Focus

Focus color contracts define the shared keyboard focus treatment used by interactive components.

Token

Sample

Value

--component-focus-ring

var(--color-state-focus-ring)

--component-focus-ring-offset

var(--color-state-focus-ring-offset)