Colors
108 color primitives across 10 families, plus semantic tokens that resolve across 4 theme modes — Light, Dark, Gray, and Colored.
Primitives
Color Primitives
The raw color values that semantic tokens reference. Each family covers a range from light to dark.
Orange
Orange10#FEE3DC
Orange20#FDA891
Orange30#FC7753
Orange40#FB5124
Orange50#FA4616
Orange60#DC4226
Orange70#C2320C
Orange80#832107
Orange90#400F02
Teal
Teal10#CEECF0
Teal20#9DDAE1
Teal30#57C5D1
Teal40#24AFBF
Teal50#0BA2B3
Teal60#078E9E
Teal70#087885
Teal80#055159
Teal90#032E33
BrightBlue
BrightBlue10#D6F3FF
BrightBlue20#97E0FC
BrightBlue30#53BCED
BrightBlue40#2198D9
BrightBlue50#0079BF
BrightBlue60#006CA6
BrightBlue70#005E8C
BrightBlue80#004D73
BrightBlue90#003C59
Purple
Purple10#F3E4F3
Purple20#E0BEE0
Purple30#C882C7
Purple40#A94EA8
Purple50#8B288A
Purple60#6F1F6E
Purple70#541754
Purple80#3A0F3A
Purple90#1A0619
DeepBlue
DeepBlue05#F0F9FC
DeepBlue10#E4F0F5
DeepBlue15#D5E3E8
DeepBlue20#C3D3D9
DeepBlue25#B4C5CC
DeepBlue30#A3B7BF
DeepBlue35#96AAB2
DeepBlue40#8A9EA6
DeepBlue45#7D9199
DeepBlue50#73858C
DeepBlue55#667880
DeepBlue60#5C6C73
DeepBlue65#4F5F66
DeepBlue70#415259
DeepBlue75#35464D
DeepBlue80#293940
DeepBlue85#202E33
DeepBlue90#172125
Gray
Gray05#F5F6F7
Gray10#EDEFF0
Gray15#E3E5E5
Gray20#D7D8D9
Gray25#CACBCC
Gray30#BDBFBF
Gray35#B1B2B3
Gray40#A4A5A6
Gray45#979899
Gray50#7E7F80
Gray55#727273
Gray60#656666
Gray65#585959
Gray70#4C4C4D
Gray75#3F4040
Gray80#323333
Gray85#262626
Gray90#19191A
Black & White
White#FFFFFF
Black#172125
AlphaBlack base #172125
AlphaBlack1010%
AlphaBlack2020%
AlphaBlack3030%
AlphaBlack4040%
AlphaBlack5050%
AlphaBlack6060%
AlphaBlack7070%
AlphaBlack8080%
AlphaBlack9090%
AlphaWhite base #FFFFFF
AlphaWhite1010%
AlphaWhite2020%
AlphaWhite3030%
AlphaWhite4040%
AlphaWhite5050%
AlphaWhite6060%
AlphaWhite7070%
AlphaWhite8080%
AlphaWhite9090%
Feedback Red
FeedbackRed05#FFE6E7
FeedbackRed25#FFA2A8
FeedbackRed50#F5222D
FeedbackRed75#A6040A
FeedbackRed90#3D0607
Feedback Yellow
FeedbackYellow05#FFF3DB
FeedbackYellow25#FFE19E
FeedbackYellow50#FFB40E
FeedbackYellow75#9C6D08
FeedbackYellow90#3F2C03
Feedback Green
FeedbackGreen05#E0FAE8
FeedbackGreen25#74F09B
FeedbackGreen50#31D263
FeedbackGreen75#208A41
FeedbackGreen90#05361B
Tokens
Semantic Color Tokens
63 semantic tokens that resolve to different primitives across 4 theme modes. Every UI element references these tokens, never raw primitives.
Content / Text
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| content-primary | DeepBlue90 |
White |
Black |
White |
| content-secondary | DeepBlue60 |
DeepBlue30 |
DeepBlue60 |
AlphaWhite80 |
| content-tertiary | DeepBlue45 |
DeepBlue55 |
DeepBlue45 |
AlphaWhite60 |
| content-inactive | DeepBlue25 |
DeepBlue70 |
DeepBlue25 |
AlphaWhite40 |
Content / Action
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| action-primary | BrightBlue50 |
BrightBlue40 |
BrightBlue50 |
White |
| action-primary-hover | BrightBlue60 |
BrightBlue50 |
BrightBlue60 |
White |
| action-secondary | Black |
White |
Black |
AlphaBlack80 |
| action-secondary-hover | BrightBlue50 |
White |
BrightBlue50 |
White |
| action-brand | Orange50 |
Orange50 |
Orange50 |
White |
| action-brand-hover | Orange70 |
Orange70 |
Orange70 |
White |
| action-visited | BrightBlue80 |
BrightBlue70 |
BrightBlue80 |
AlphaWhite70 |
| action-disabled | DeepBlue25 |
DeepBlue65 |
Gray30 |
AlphaWhite40 |
| label-primary | White |
White |
White |
Black |
| label-secondary | White |
Black |
White |
White |
| label-tertiary | Black |
White |
Black |
White |
Content / Icon
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| icon-primary | DeepBlue90 |
White |
DeepBlue90 |
White |
| icon-accent-brand | Orange50 |
Orange40 |
Orange50 |
White |
| icon-accent-secondary | Teal50 |
Teal50 |
Teal50 |
White |
| icon-brand-tertiary | BrightBlue50 |
BrightBlue40 |
BrightBlue50 |
White |
| icon-brand-quaternary | Purple50 |
Purple50 |
Purple50 |
White |
| icon-bg-primary | DeepBlue10 |
DeepBlue75 |
DeepBlue10 |
AlphaWhite10 |
| icon-bg-secondary | Orange10 |
Orange60 @ 30% |
Orange10 |
AlphaWhite20 |
| icon-bg-primary-transparent | DeepBlue10 @ 0% |
DeepBlue75 @ 0% |
DeepBlue10 @ 0% |
Transparent |
| icon-bg-secondary-transparent | Orange10 @ 0% |
Orange60 @ 0% |
Orange10 @ 0% |
Transparent |
Content / Feedback
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| error | FeedbackRed50 |
FeedbackRed50 |
FeedbackRed50 |
FeedbackRed75 |
| warning | FeedbackYellow50 |
FeedbackYellow50 |
FeedbackYellow50 |
FeedbackYellow50 |
| success | FeedbackGreen50 |
FeedbackGreen50 |
FeedbackGreen50 |
FeedbackGreen25 |
Surface / Background
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| bg-default | White |
DeepBlue90 |
DeepBlue05 |
Orange50 |
| bg-accent | DeepBlue05 |
DeepBlue80 |
DeepBlue15 |
AlphaWhite20 |
| bg-inverted | DeepBlue90 |
White |
DeepBlue90 |
White |
| bg-brand | Orange50 |
Orange50 |
Orange50 |
White |
Surface / Selection
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| selection-bg | Teal10 |
Teal70 |
Teal10 |
AlphaWhite30 |
| selection-text | DeepBlue90 |
White |
DeepBlue90 |
White |
Surface / Button
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| button-primary | Orange50 |
Orange50 |
Orange50 |
AlphaWhite90 |
| button-primary-hover | Orange70 |
Orange70 |
Orange70 |
White |
| button-primary-pressed | Orange60 |
Orange60 |
Orange60 |
AlphaWhite70 |
| button-primary-disabled | AlphaBlack20 |
AlphaWhite20 |
AlphaBlack20 |
AlphaWhite20 |
| button-secondary | DeepBlue80 |
DeepBlue10 |
DeepBlue80 |
AlphaBlack80 |
| button-secondary-hover | DeepBlue90 |
White |
DeepBlue90 |
Black |
| button-secondary-pressed | DeepBlue75 |
DeepBlue15 |
DeepBlue75 |
AlphaBlack70 |
| button-secondary-disabled | AlphaBlack20 |
AlphaWhite20 |
AlphaBlack20 |
AlphaWhite20 |
| button-tertiary | Transparent |
Transparent |
Transparent |
Transparent |
| button-tertiary-hover | AlphaBlack20 |
AlphaWhite20 |
AlphaBlack20 |
AlphaWhite20 |
| button-tertiary-pressed | AlphaBlack10 |
AlphaWhite10 |
AlphaBlack10 |
AlphaWhite40 |
| button-tertiary-disabled | Transparent |
Transparent |
Transparent |
Transparent |
| button-tertiary-stroke | DeepBlue80 |
DeepBlue10 |
DeepBlue80 |
White |
| button-tertiary-stroke-hover | DeepBlue90 |
White |
DeepBlue90 |
White |
| button-tertiary-stroke-pressed | DeepBlue75 |
DeepBlue15 |
DeepBlue75 |
White |
| button-tertiary-stroke-disabled | AlphaBlack20 |
AlphaWhite20 |
AlphaBlack20 |
AlphaWhite20 |
Surface / Stats Component
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| stats-underline-blue | BrightBlue20 |
BrightBlue60 |
BrightBlue20 |
Orange70 |
| stats-underline-orange | Orange20 |
Orange70 |
Orange20 |
Orange70 |
| stats-underline-teal | Teal30 |
Teal60 |
Teal30 |
Orange70 |
| stats-underline-gray | DeepBlue25 |
DeepBlue70 |
DeepBlue25 |
Orange70 |
| stats-underline-purple | Purple20 |
Purple70 |
Purple20 |
Orange70 |
| stats-graphic-blue | BrightBlue10 |
BrightBlue80 |
BrightBlue10 |
Orange70 |
| stats-graphic-orange | Orange10 |
Orange80 |
Orange10 |
Orange70 |
| stats-graphic-teal | Teal10 |
Teal80 |
Teal10 |
Orange70 |
Border
| Token | Light | Dark | Gray | Colored |
|---|---|---|---|---|
| border-strong | DeepBlue85 |
DeepBlue10 |
DeepBlue85 |
White |
| border-firm | DeepBlue40 |
DeepBlue40 |
DeepBlue40 |
AlphaWhite40 |
| border-normal | DeepBlue30 |
DeepBlue60 |
DeepBlue30 |
AlphaWhite30 |
| border-subtle | DeepBlue15 |
DeepBlue70 |
DeepBlue20 |
AlphaWhite20 |
| border-faint | DeepBlue10 |
DeepBlue80 |
DeepBlue15 |
AlphaWhite10 |
| border-focus | Teal50 |
Teal40 |
Teal50 |
White |