Roles

--color-bg
#FFFFFF
Page ground
--color-surface
#F7F9FC
Raised surface
--color-text
#111827
Body ink
--color-accent
#2563EB
Action
--color-accent-2
#0891B2
Secondary accent
--color-divider
color-mix(in srgb, #182030 12%, transparent)
Hairline

Neutral — the workhorse. Near-white at 100, cool ink at 900

100
200
300
400
500
600
700
800
900

Accent — the only colour that carries an action

100
200
300
400
500
600
700
800
900

Reserved

accent-2 data series only — never a second button colour success tint · border · base · hover · pressedwarning tint · border · base · hover · presseddanger tint · border · base · hover · pressed

Contrast on the page ground

17.74:1--color-text — body text7.63:1--color-neutral-700 — body text3.17:1--color-neutral-500 — large text and chrome only5.17:1--color-accent — body text8.02:1--color-accent-700 — body text5.33:1--color-danger — body text

Chroma stays low outside the accent. Neutral chroma rises toward the dark end, so shadows read cool and highlights stay near-white — the greys are tinted, never flat. Prefer a ramp step over an ad-hoc color-mix().