Colors

Always use the token, never the raw value. Every pair meets WCAG AA contrast in both themes.

Brand palette

Aa
--ez-palette-night-900

Night · 60% base

Aa
--ez-palette-night-800

Night · 60% surface

Aa
--ez-palette-purple-500

Brand purple · 30%

Aa
--ez-palette-night-700

Derived — pending designer approval

Aa
--ez-palette-night-600

Derived — pending designer approval

Aa
--ez-palette-purple-300

Derived — pending designer approval

Aa
--ez-palette-grey-400

Lavender grey · 30%

Aa
--ez-palette-lilac-200

Lilac · 10% accent

Aa
--ez-palette-paper-100

Paper · light background

Semantic tokens · dark

Aa
--ez-bg

Page background

Aa
--ez-surface

Card / sheet surface

Aa
--ez-surface-raised

Raised surface

Aa
--ez-glass

Glass fill

Aa
--ez-primary

Primary action

Aa
--ez-primary-soft

Selected / hover tint

Aa
--ez-text

Primary text

Aa
--ez-text-muted

Secondary text

Aa
--ez-text-subtle

Tertiary text

Aa
--ez-text-accent

Accent text / links

Aa
--ez-border

Hairline border

Aa
--ez-border-strong

Glowing card edge

Status

success
--ez-success / --ez-success-soft

success text on soft fill

warning
--ez-warning / --ez-warning-soft

warning text on soft fill

error
--ez-error / --ez-error-soft

error text on soft fill

info
--ez-info / --ez-info-soft

info text on soft fill

Semantic tokens · light

Aa
--ez-bg

Page background

Aa
--ez-surface

Card / sheet surface

Aa
--ez-surface-raised

Raised surface

Aa
--ez-glass

Glass fill

Aa
--ez-primary

Primary action

Aa
--ez-primary-soft

Selected / hover tint

Aa
--ez-text

Primary text

Aa
--ez-text-muted

Secondary text

Aa
--ez-text-subtle

Tertiary text

Aa
--ez-text-accent

Accent text / links

Aa
--ez-border

Hairline border

Aa
--ez-border-strong

Glowing card edge

Status

success
--ez-success / --ez-success-soft

success text on soft fill

warning
--ez-warning / --ez-warning-soft

warning text on soft fill

error
--ez-error / --ez-error-soft

error text on soft fill

info
--ez-info / --ez-info-soft

info text on soft fill