Reference

DESIGN SYSTEM

Tokens • Type • Primitives

Every surface in this app is built from the tokens and primitives below. Import primitives from @/components/ui-kit and use semantic color utilities only — no hardcoded colors.

COLOR TOKENS

background
foreground
primary
primary-soft
primary-wash
secondary
muted
border
destructive
pos-rb
pos-wr
pos-qb
pos-te
pos-k

TYPE SCALE

display-xlAmon-Ra St. Brown
display-lgAmon-Ra St. Brown
display-mdAmon-Ra St. Brown
titleAmon-Ra St. Brown
bodyAmon-Ra St. Brown
labelAmon-Ra St. Brown
microAmon-Ra St. Brown

POSITION CHIPS

QBRBWRTEKDEF

BUTTONS

SEARCH FIELD

PANEL + DATA ROWS

PANEL HEADERSUBTITLE TEXT
1Jonathan Taylor
2Active row state

STEPPER + SEGMENTED CONTROL

2