Colors
All colors are defined in OKLCH, giving perceptually-even scales across hues. The product palette has 10 hues × 10 shades; semantic aliases point at specific rungs so components stay in sync with Chakra's theme tokens.
#
10 hues, 50→900. 600 is the canonical base rung for every hue (buttons, icons, links); 300 is the border; 50 is the background tint; 700 is the text-on-light pairing.
#
Primary
text.primary
gray.800
Secondary
text.secondary
gray.700
Tertiary
text.tertiary
gray.600
Disabled
text.disabled
gray.500
#
Surface
white
Light background
base.lightBackground
gray.50
Background
base.background
gray.100
Border
base.border
gray.300
#
Every state uses a matched background, border, and text color. These map directly to the component variants (Alert, Badge, IconBox, etc.).
Primary · Info
teal.50 · teal.300 · teal.700
Success
green.50 · green.300 · green.700
Warning
yellow.50 · yellow.300 · yellow.700
Danger
red.50 · red.200 · red.700
Upsell
purple.50 · purple.300 · purple.700
Subtle / Neutral
gray.100 · gray.300 · gray.700
#
Eight reserved series hues (charts.*). base (400 rung) is the series color; light (200) is the comparison or previous period.
Blue
charts.blue.base
charts.blue.light
Yellow
charts.yellow.base
charts.yellow.light
Purple
charts.purple.base
charts.purple.light
Green
charts.green.base
charts.green.light
Orange
charts.orange.base
charts.orange.light
Brown
charts.brown.base
charts.brown.light
Pink
charts.pink.base
charts.pink.light
Red
charts.red.base
charts.red.light
Metric
Metric
Metric
Metric
#
Marketing surfaces use the Hightouch brand black and accent green. App surfaces stay on teal.