Colors

Two families. Brand colors (gold, silver, bronze) carry the variant hierarchy — flat, solid fills, three steps each. Ink is the workhorse ramp — 13 stops of warm brown, from white cards and eggshell pages down to deep text. Severity tints sit on top. Flip the theme and watch the roles re-map.

Brand colors

Light (300) → main (500) → dark (700) — solid fills, straight from the brand. The brand gold is too bright to read as text, so there's a darkened --gold-aa-* set that passes WCAG.

Gold
Gold 300
--gold-300
Gold 500
--gold-500
Gold 700
--gold-700
Silver
Silver 300
--silver-300
Silver 500
--silver-500
Silver 700
--silver-700
Bronze
Bronze 300
--bronze-300
Bronze 500
--bronze-500
Bronze 700
--bronze-700

Ink

The everyday ramp — text, borders, and page surfaces. Warm brown over eggshell, 13 stops. (The token family keeps its proposed-system name, "ink"; the values are all official.)

10
25
50
100
200
300
400
500
600
700
800
900
950

Semantic roles

These are the aliases product code actually uses. They re-map under [data-theme="dark"] — flip the toggle and compare.

Page
--bg-page
Surface
--bg-surface
Surface tinted
--bg-surface-tinted
Recessed
--bg-recessed
Foreground 1
--fg-1
Foreground 2
--fg-2
Foreground 3
--fg-3
Border hairline
--border-hairline
Border metal
--border-metal
Border strong
--border-strong

Severity

Four levels. Each gets a soft tint (100) for fills and 300 / 500 / 700 for the signal itself. Color never works alone here — every severity ships with its own icon.

Affirm
Affirm 100
--affirm-100
Affirm 300
--affirm-300
Affirm 500
--affirm-500
Affirm 700
--affirm-700
Caution
Caution 100
--caution-100
Caution 300
--caution-300
Caution 500
--caution-500
Caution 700
--caution-700
Critical
Critical 100
--critical-100
Critical 300
--critical-300
Critical 500
--critical-500
Critical 700
--critical-700
Informational
Informational 100
--info-100
Informational 300
--info-300
Informational 500
--info-500
Informational 700
--info-700