Colors

A purpose-built palette grounded in purple primaries, semantic surfaces, and accessible contrast.

Primitive Palettes

Primary

Neutral

Error

Success

Warning

Semantic Tokens

Mapped from primitive palettes. Automatically adapts between light and dark themes.

Surface

Token	CSS Variable	Light	Dark
surface-primary		Neutral 10	Neutral 90
surface-secondary		Neutral 20	Neutral 80
surface-elevated		White	Neutral 80
surface-brand		Primary 10	Primary 90
surface-critical		Error 10	Error 90
surface-success		Success 10	Success 90
surface-warning		Warning 10	Warning 90

Fill

Token	CSS Variable	Light	Dark
fill-brand		Primary 60	Primary 60
fill-brand-hover		Primary 70	Primary 50
fill-critical		Error 50	Error 50
fill-success		Success 50	Success 50
fill-warning		Warning 50	Warning 50

Content (Text)

Token	CSS Variable	Light	Dark
content-primary		Neutral 100	Neutral 10
content-secondary		Neutral 60	Neutral 40
content-tertiary		Neutral 50	Neutral 50
content-brand		Primary 60	Primary 40
content-error		Error 60	Error 40
content-success		Success 60	Success 40

Border

Token	CSS Variable	Light	Dark
border-primary		Neutral 30	Neutral 70
border-secondary		Neutral 20	Neutral 80
border-brand		Primary 60	Primary 60
border-error		Error 50	Error 50
border-focus		Primary 60	Primary 50