Design System · Color

base palette

Grays

gray-900 #222222

gray-700 #444444

gray-500 #888888

gray-400 #aaaaaa

gray-200 #e0e0e0

gray-50 #f8f8f8

white #ffffff

semantic roles

Color Roles

Role	Token	Value
background	gray-50	`#f8f8f8`
surface	white	`#ffffff`
border	gray-200	`#e0e0e0`
text-primary	gray-900	`#222222`
text-muted	gray-400	`#aaaaaa`
text-secondary	gray-500	`#888888`
interactive	gray-900	`#222222`

contrast

Text on Background

primary on white

Body text renders clearly on a white surface.

#222 on #fff

white on dark

Reversed contrast for dark surfaces and code blocks.

#fff on #222

muted on bg

Decorative labels only — sub-AA contrast.

#aaa on #f8f8f8