Token system

Monochrome, no brand color. Two layers: primitives (constants, invariant across modes) and semantic tokens (alias primitives, flip between light and dark). Toggle the theme — every semantic swatch inverts at runtime, because the utilities point at CSS variables, not baked values.

Primitives — warm neutral scale

#FFFFFF

n50

#F6F5F2

n100

#EDEBE6

n200

#DEDBD3

n400

#A3A099

n600

#6B6862

n700

#3A3835

n800

#2A2926

n900

#1C1B18

n975

#0C0C0B

Primitives — state (error / success / warning)

red-600

#B4443C

red-400

#D98A82

green-600

#4A7A56

green-400

#8FB89A

amber-600

#B4863C

amber-400

#D9B37F

Semantic — surfaces

Semantic	Utility	Light	Dark
surface/page	bg-page	n50	n975
surface/panel	bg-panel	n0	n900
surface/sub	bg-sub	n100	n800
surface/input	bg-field	n50	n800

Semantic — text

Preview	Semantic	Utility	Light	Dark
Aa	text/primary	text-ink	n900	n50
Aa	text/secondary	text-ink-2	n600	n400
Aa	text/tertiary	text-ink-3	n400	n600
Aa	text/error	text-error	red-600	red-400
Aa	text/success	text-success	green-600	green-400
Aa	text/warning	text-warning	amber-600	amber-400

Semantic — interactive & borders

Semantic	Utility	Light	Dark
interactive/primary	bg-action	n900	n0
border/default	border-line	n200	n700
border/strong	border-line-strong	n400	n600