Colors
Eight primitive palettes feed all semantic tokens. Always use Color Tokens in components — never reference primitives directly.
Rule: Primitives → Color Tokens → Components. Never skip a layer. Never hardcode hex values.
Color Primitives
Raw scales — for reference only.
Neutral
white
#FFFFFF
25
#FAFAFA
50
#F6F6F6
100
#E7E7E7
200
#D1D1D1
300
#B0B0B0
400
#888888
500
#6D6D6D
600
#5D5D5D
700
#4F4F4F
800
#454545
900
#3D3D3D
950
#2D2D2D
1000
#1C1C1C
black
#000000
Blue
25
#F0F5FE
50
#DDE7FC
100
#C3D6FA
200
#99BCF7
300
#6999F1
400
#4675EB
500
#3156DF
600
#2843CD
700
#2739A6
800
#243484
900
#1B2250
950
#191F4A
Gold (Brand Accent)
25
#FAF9F4
50
#F6F5F0
100
#E8E7D9
200
#D4D0B4
300
#BAB28A
400
#A69969
500
#9B8B5D
600
#826F4C
700
#69573F
800
#594A3A
900
#4E4135
950
#2C231C
Red
25
#FFFBFA
50
#FDF3F3
100
#FCE4E4
200
#FACECE
300
#F5ACAC
400
#ED7C7C
500
#E15252
600
#CD3232
700
#AD2828
800
#8F2525
900
#772525
950
#400F0F
Green
25
#F6FEF9
50
#F1FCF4
100
#DEFAE8
200
#BFF3D2
300
#8DE8AF
400
#54D485
500
#32CD6D
600
#20994F
700
#1C7940
800
#1B6036
900
#184F2F
950
#082B16
Yellow
25
#FFFDF0
50
#FFFDEA
100
#FFFAC5
200
#FFF585
300
#FFEA46
400
#FFDB1B
500
#FFC107
600
#E29500
700
#BB6902
800
#985008
900
#7C420B
950
#482200
Purple
25
#FCFAFF
50
#F9F5FF
100
#F4EBFF
200
#E9D7FE
300
#D6BBFB
400
#B692F6
500
#9E77ED
600
#7F56D9
700
#6941C6
800
#53389E
900
#42307D
950
#2C1C5F
Orange
25
#FFFBF3
50
#FEF9EE
100
#FDF2D7
200
#FAE0AE
300
#F6C97B
400
#F1A846
500
#ED8A19
600
#DF7417
700
#B95915
800
#934619
900
#773C17
950
#401D0A
Semantic Tokens
Use these in all components. Light and dark values shown.
Surface
| Token | Light | Dark |
|---|---|---|
| --color-bg | #FFFFFF | #1C1C1C |
| --color-bg-2 | #F6F6F6 | #2D2D2D |
| --color-heading | #2D2D2D | #FFFFFF |
| --color-subheading | #5D5D5D | #E7E7E7 |
| --color-border | rgba(0,0,0,0.10) | rgba(255,255,255,0.10) |
| --color-border-2 | rgba(0,0,0,0.05) | rgba(255,255,255,0.05) |
| --color-brand-accent | #9B8B5D | #9B8B5D |
Status
| Token | Light | Dark |
|---|---|---|
| --color-info-bg | rgba(49,86,223,0.10) | rgba(49,86,223,0.20) |
| --color-info-text | #2843CD | #3156DF |
| --color-success-bg | rgba(50,205,109,0.10) | rgba(50,205,109,0.20) |
| --color-success-text | #20994F | #32CD6D |
| --color-warning-bg | rgba(223,207,19,0.10) | rgba(223,207,19,0.20) |
| --color-warning-text | #E29500 | #FFC107 |
| --color-danger-bg | rgba(225,82,82,0.10) | rgba(225,82,82,0.20) |
| --color-danger-text | #CD3232 | #E15252 |
| --color-alert-bg | rgba(237,138,25,0.10) | rgba(237,138,25,0.20) |
| --color-alert-text | #DF7417 | #ED8A19 |
| --color-notice-bg | rgba(158,119,237,0.10) | rgba(158,119,237,0.20) |
| --color-notice-text | #7F56D9 | #9E77ED |
Button Tokens
| Token | Light | Dark |
|---|---|---|
| Primary | ||
| --btn-primary-bg | #2D2D2D | #FFFFFF |
| --btn-primary-text | #FFFFFF | #2D2D2D |
| --btn-primary-bg-hover | #3D3D3D | #FAFAFA |
| --btn-primary-bg-active | #454545 | #F6F6F6 |
| --btn-primary-bg-disabled | #E7E7E7 | #454545 |
| --btn-primary-text-disabled | #5D5D5D | #E7E7E7 |
| Secondary | ||
| --btn-secondary-bg | rgba(0,0,0,0.05) | rgba(255,255,255,0.05) |
| --btn-secondary-text | #2D2D2D | #FFFFFF |
| --btn-secondary-bg-hover | #F6F6F6 | #3D3D3D |
| --btn-secondary-bg-active | #E7E7E7 | #454545 |
| --btn-secondary-bg-disabled | #FAFAFA | #2D2D2D |
| --btn-secondary-text-disabled | #5D5D5D | #E7E7E7 |
| Tertiary | ||
| --btn-tertiary-bg | transparent | transparent |
| --btn-tertiary-text | #2D2D2D | #FFFFFF |
| --btn-tertiary-border | rgba(0,0,0,0.10) | rgba(255,255,255,0.10) |
| --btn-tertiary-bg-hover | #F6F6F6 | #2D2D2D |
| --btn-tertiary-bg-active | rgba(0,0,0,0.10) | rgba(255,255,255,0.10) |
| --btn-tertiary-solid-bg | rgba(0,0,0,0.05) | rgba(255,255,255,0.05) |
| --btn-tertiary-solid-border | #000000 | #FFFFFF |
| --btn-tertiary-text-disabled | #5D5D5D | #E7E7E7 |
| Ghost | ||
| --btn-ghost-bg | transparent | transparent |
| --btn-ghost-text | #2D2D2D | #FFFFFF |
| --btn-ghost-bg-hover | #F6F6F6 | #2D2D2D |
| --btn-ghost-bg-active | #E7E7E7 | #3D3D3D |
| --btn-ghost-text-disabled | #5D5D5D | #E7E7E7 |
| Danger | ||
| --btn-danger-bg | #E15252 | #E15252 |
| --btn-danger-text | #FFFFFF | #FFFFFF |
| --btn-danger-bg-hover | #CD3232 | #CD3232 |
| --btn-danger-bg-active | #AD2828 | #AD2828 |
| --btn-danger-bg-disabled | #E7E7E7 | #454545 |
| --btn-danger-text-disabled | #5D5D5D | #E7E7E7 |