Tokens
Colors
174 tokensTwo layers: raw color primitives (the full ramps) and semantic tokens you use in product code. Semantic tokens reference primitives via aliasing — change a primitive, every semantic that points at it follows.
Semantic#
Use these in production. Left swatch = light, right swatch = dark. CSS var on the left, hex on the right.
Text
7Text/Primary
direct
dark #f0ece6
Text/Secondary
direct
dark #b8b3ad
Text/Tertiary
direct
dark #8a847e
Text/Disabled
→ Neutral/Espresso/100
dark #4a4644
Text/Inverse
→ Neutral/Espresso/50
dark #1e1711
Text/On-Brand
→ Neutral/Espresso/500
dark #f0ece6
Text/Placeholder
→ Neutral/Espresso/100
dark #4a4644
Icon
5Icon/Primary
→ Neutral/Espresso/500
dark #f0ece6
Icon/Secondary
→ Neutral/Espresso/400
dark #b8b3ad
Icon/Tertiary
→ Neutral/Espresso/300
dark #8a847e
Icon/Disabled
→ Neutral/Espresso/100
dark #4a4644
Icon/On-Brand
→ Neutral/Espresso/50
dark #1e1711
Background
7Background/Canvas
direct
dark #100f0d
Background/Default
→ White
dark #161412
Background/Elevated
direct
dark #2f2b28
Background/Subtle
direct
dark #221f1c
Background/Sunken
direct
dark #1c1a18
Background/Overlay
→ Neutral/Espresso/500
dark #000000
Background/Brand
→ Primary/Skyline Blue/500
dark #1a2838
Border
5Border/Muted
direct
dark #2a2624
Border/Default
→ Primary/Midnight Espresso/100
dark #3a3633
Border/Strong
→ Primary/Midnight Espresso/200
dark #585350
Border/Focus
→ Primary/Skyline Blue/800
dark #9b9695
Border/Disabled
direct
dark #353331
Interactive
4Interactive/Brand Default
→ Primary/Skyline Blue/500
dark #1a2838
Interactive/Brand Hover
direct
dark #243a52
Interactive/Brand Active
direct
dark #2f4c6b
Interactive/Brand Subtle
direct
dark #141e2a
Feedback
8Feedback/Success
→ Green/Default
dark #5cbf73
Feedback/Success Subtle
→ Green/Subtle
dark #143020
Feedback/Warning
→ Amber/Default
dark #d68f3e
Feedback/Warning Subtle
→ Amber/Subtle
dark #3a2812
Feedback/Error
→ Red/Default
dark #ef5350
Feedback/Error Subtle
→ Red/Subtle
dark #3a1414
Feedback/Info
→ Indigo/Default
dark #8b80f7
Feedback/Info Subtle
→ Indigo/Subtle
dark #1f1b3a
Brand
3Brand/Sage Green
direct
dark #66b958
Brand/Sage Green Hover
direct
dark #76c968
Brand/Sage Green Pressed
direct
dark #58aa4a
Primitives#
Raw palette. Hover a swatch for hex. Avoid using directly in product code — reach for a semantic token first.