The complete color system — primitives, brand palettes, and semantic mappings.
All color primitives available in the system, organized by family. Each row shows the full ramp from lightest to darkest.
Generated from dist/tokens/tokens.yaml.
Color Primitives
Raw color values from the Core layer. These are referenced by semantic and brand tokens — never used directly in components.
Neutral
Name
Token
Contrast :1
Hex
Neutral 0
--color-neutral-000
1.00
#FFFFFF
Neutral 100
--color-neutral-100
1.25
#E6E6E6
Neutral 200
--color-neutral-200
1.61
#CCCCCC
Neutral 300
--color-neutral-300
2.10
#B3B3B3
Neutral 400
--color-neutral-400
3.95
#808080
Neutral 500
--color-neutral-500
3.95
#808080
Neutral 600
--color-neutral-600
5.74
#666666
Neutral 700
--color-neutral-700
8.45
#4D4D4D
Neutral 800
--color-neutral-800
12.63
#333333
Neutral 900
--color-neutral-900
17.40
#1A1A1A
Neutral 1000
--color-neutral-1000
21.00
#000000
Neutral / Alpha
Name
Token
Contrast :1
Hex
Neutral / Alpha 0
--color-neutral-alpha-000
NaN
rgba(0 0 0 / 0)
Neutral / Alpha 100
--color-neutral-alpha-100
NaN
rgba(0 0 0 / 0.1)
Neutral / Alpha 200
--color-neutral-alpha-200
NaN
rgba(0 0 0 / 0.2)
Neutral / Alpha 300
--color-neutral-alpha-300
NaN
rgba(0 0 0 / 0.3)
Neutral / Alpha 400
--color-neutral-alpha-400
NaN
rgba(0 0 0 / 0.4)
Neutral / Alpha 500
--color-neutral-alpha-500
NaN
rgba(0 0 0 / 0.5)
Neutral / Alpha 600
--color-neutral-alpha-600
NaN
rgba(0 0 0 / 0.6)
Neutral / Alpha 700
--color-neutral-alpha-700
NaN
rgba(0 0 0 / 0.7)
Neutral / Alpha 800
--color-neutral-alpha-800
NaN
rgba(0 0 0 / 0.8)
Neutral / Alpha 900
--color-neutral-alpha-900
NaN
rgba(0 0 0 / 0.9)
Neutral / Alpha Inverse
Name
Token
Contrast :1
Hex
Neutral / Alpha Inverse 0
--color-neutral-alpha-inverse-000
NaN
rgba(255 255 255 / 0)
Neutral / Alpha Inverse 100
--color-neutral-alpha-inverse-100
NaN
rgba(255 255 255 / 0.1)
Neutral / Alpha Inverse 200
--color-neutral-alpha-inverse-200
NaN
rgba(255 255 255 / 0.2)
Neutral / Alpha Inverse 300
--color-neutral-alpha-inverse-300
NaN
rgba(255 255 255 / 0.3)
Neutral / Alpha Inverse 400
--color-neutral-alpha-inverse-400
NaN
rgba(255 255 255 / 0.4)
Neutral / Alpha Inverse 500
--color-neutral-alpha-inverse-500
NaN
rgba(255 255 255 / 0.5)
Neutral / Alpha Inverse 600
--color-neutral-alpha-inverse-600
NaN
rgba(255 255 255 / 0.6)
Neutral / Alpha Inverse 700
--color-neutral-alpha-inverse-700
NaN
rgba(255 255 255 / 0.7)
Neutral / Alpha Inverse 800
--color-neutral-alpha-inverse-800
NaN
rgba(255 255 255 / 0.8)
Neutral / Alpha Inverse 900
--color-neutral-alpha-inverse-900
NaN
rgba(255 255 255 / 0.9)
Brand A / Green
Name
Token
Contrast :1
Hex
Brand A / Green 100
--color-brand-a-green-100
1.10
#F3F6E9
Brand A / Green 200
--color-brand-a-green-200
1.28
#DFE7C5
Brand A / Green 300
--color-brand-a-green-300
1.46
#CFDBA9
Brand A / Green 400
--color-brand-a-green-400
1.68
#BFCF8C
Brand A / Green 500
--color-brand-a-green-500
1.93
#AFC36F
Brand A / Green 600
--color-brand-a-green-600
2.24
#9FB752
Brand A / Green 700
--color-brand-a-green-700
2.99
#899E42
Brand A / Green 800
--color-brand-a-green-800
4.30
#708136
Brand A / Green 900
--color-brand-a-green-900
7.13
#515D27
Brand A / Red
Name
Token
Contrast :1
Hex
Brand A / Red 100
--color-brand-a-red-100
1.03
#FEFBFB
Brand A / Red 200
--color-brand-a-red-200
1.24
#FAE0E6
Brand A / Red 300
--color-brand-a-red-300
1.74
#F4B3C3
Brand A / Red 400
--color-brand-a-red-400
2.44
#EE87A0
Brand A / Red 500
--color-brand-a-red-500
3.41
#E75A7C
Brand A / Red 600
--color-brand-a-red-600
4.43
#E12E59
Brand A / Red 700
--color-brand-a-red-700
6.07
#BF1C43
Brand A / Red 800
--color-brand-a-red-800
8.76
#931534
Brand A / Red 900
--color-brand-a-red-900
12.66
#660F24
Brand A / Sand
Name
Token
Contrast :1
Hex
Brand A / Sand 100
--color-brand-a-sand-100
1.15
#F0F0E5
Brand A / Sand 200
--color-brand-a-sand-200
1.37
#DDDEC5
Brand A / Sand 300
--color-brand-a-sand-300
1.83
#C0C1AC
Brand A / Sand 400
--color-brand-a-sand-400
2.51
#A4A593
Brand A / Sand 500
--color-brand-a-sand-500
3.56
#88897A
Brand A / Sand 600
--color-brand-a-sand-600
5.25
#6C6D61
Brand A / Sand 700
--color-brand-a-sand-700
8.04
#505148
Brand A / Sand 800
--color-brand-a-sand-800
12.51
#34342F
Brand A / Sand 900
--color-brand-a-sand-900
17.78
#181816
Brand B / Blue
Name
Token
Contrast :1
Hex
Brand B / Blue 100
--color-brand-b-blue-100
1.38
#CEDBFD
Brand B / Blue 200
--color-brand-b-blue-200
1.98
#9EB7FA
Brand B / Blue 300
--color-brand-b-blue-300
2.93
#6D93F8
Brand B / Blue 400
--color-brand-b-blue-400
4.38
#3D6FF5
Brand B / Blue 500
--color-brand-b-blue-500
6.33
#0C4BF3
Brand B / Blue 600
--color-brand-b-blue-600
8.61
#0A3CC2
Brand B / Blue 700
--color-brand-b-blue-700
11.67
#072D92
Brand B / Blue 800
--color-brand-b-blue-800
15.39
#051E61
Brand B / Blue 900
--color-brand-b-blue-900
18.83
#020F31
Brand B / Green
Name
Token
Contrast :1
Hex
Brand B / Green 100
--color-brand-b-green-100
1.03
#F6FEFA
Brand B / Green 200
--color-brand-b-green-200
1.16
#C8F9DF
Brand B / Green 300
--color-brand-b-green-300
1.30
#9AF4C4
Brand B / Green 400
--color-brand-b-green-400
1.44
#6CEFAA
Brand B / Green 500
--color-brand-b-green-500
1.57
#3EEA8F
Brand B / Green 600
--color-brand-b-green-600
2.90
#13AE5C
Brand B / Green 700
--color-brand-b-green-700
4.95
#0E8144
Brand B / Green 800
--color-brand-b-green-800
11.13
#084524
Brand B / Green 900
--color-brand-b-green-900
16.42
#042513
Brand B / Purple
Name
Token
Contrast :1
Hex
Brand B / Purple 200
--color-brand-b-purple-200
1.60
#DEC0FF
Brand B / Purple 300
--color-brand-b-purple-300
2.41
#C48FFF
Brand B / Purple 600
--color-brand-b-purple-600
4.51
#9747FF
Brand B / Purple 700
--color-brand-b-purple-700
6.23
#7A14FF
Brand B / Purple 800
--color-brand-b-purple-800
11.01
#551A8B
Brand B / Purple 900
--color-brand-b-purple-900
14.67
#3A125F
Brand B / Red
Name
Token
Contrast :1
Hex
Brand B / Red 100
--color-brand-b-red-100
1.00
#FFFFFF
Brand B / Red 200
--color-brand-b-red-200
1.42
#FFCCCC
Brand B / Red 300
--color-brand-b-red-300
2.05
#FF9999
Brand B / Red 400
--color-brand-b-red-400
2.86
#FF6666
Brand B / Red 500
--color-brand-b-red-500
3.64
#FF3333
Brand B / Red 600
--color-brand-b-red-600
4.00
#FF0000
Brand B / Red 700
--color-brand-b-red-700
8.92
#990000
Brand B / Red 800
--color-brand-b-red-800
13.42
#660000
Brand B / Red 900
--color-brand-b-red-900
18.41
#330000
Brand C / Blue
Name
Token
Contrast :1
Hex
Brand C / Blue 100
--color-brand-c-blue-100
1.29
#D8E2FD
Brand C / Blue 200
--color-brand-c-blue-200
1.66
#B6C8FC
Brand C / Blue 300
--color-brand-c-blue-300
2.13
#94B0FA
Brand C / Blue 400
--color-brand-c-blue-400
2.93
#6D93F8
Brand C / Blue 500
--color-brand-c-blue-500
4.75
#3567F6
Brand C / Blue 600
--color-brand-c-blue-600
6.33
#0C4BF3
Brand C / Blue 700
--color-brand-c-blue-700
8.61
#0A3CC2
Brand C / Blue 800
--color-brand-c-blue-800
11.67
#072D92
Brand C / Blue 900
--color-brand-c-blue-900
16.39
#1B115C
Brand C / Coolblue
Name
Token
Contrast :1
Hex
Brand C / Coolblue 100
--color-brand-c-coolblue-100
1.13
#E2F4FD
Brand C / Coolblue 200
--color-brand-c-coolblue-200
1.27
#C6EAFB
Brand C / Coolblue 300
--color-brand-c-coolblue-300
1.44
#A9DFF8
Brand C / Coolblue 400
--color-brand-c-coolblue-400
1.82
#70CBF4
Brand C / Coolblue 500
--color-brand-c-coolblue-500
2.23
#38B9F5
Brand C / Coolblue 600
--color-brand-c-coolblue-600
2.61
#0CAAF3
Brand C / Coolblue 700
--color-brand-c-coolblue-700
3.95
#0A88C2
Brand C / Coolblue 800
--color-brand-c-coolblue-800
6.32
#076692
Brand C / Coolblue 900
--color-brand-c-coolblue-900
10.47
#054461
Brand C / Green
Name
Token
Contrast :1
Hex
Brand C / Green 100
--color-brand-c-green-100
1.06
#EFFBF5
Brand C / Green 200
--color-brand-c-green-200
1.13
#DFF6EB
Brand C / Green 300
--color-brand-c-green-300
1.37
#C5E4CD
Brand C / Green 400
--color-brand-c-green-400
1.49
#A9E0BF
Brand C / Green 500
--color-brand-c-green-500
1.78
#87D2A6
Brand C / Green 600
--color-brand-c-green-600
2.15
#61C48D
Brand C / Green 700
--color-brand-c-green-700
2.60
#30B675
Brand C / Green 800
--color-brand-c-green-800
3.28
#2BA168
Brand C / Green 900
--color-brand-c-green-900
6.10
#246F49
Brand C / Green 1000
--color-brand-c-green-1000
11.33
#05423D
Brand C / Orange
Name
Token
Contrast :1
Hex
Brand C / Orange 100
--color-brand-c-orange-100
1.06
#FFF7EB
Brand C / Orange 200
--color-brand-c-orange-200
1.13
#FFEFD6
Brand C / Orange 300
--color-brand-c-orange-300
1.27
#FFE0B2
Brand C / Orange 400
--color-brand-c-orange-400
1.41
#FFD28F
Brand C / Orange 500
--color-brand-c-orange-500
1.60
#FFC266
Brand C / Orange 600
--color-brand-c-orange-600
1.89
#FFAB2E
Brand C / Orange 700
--color-brand-c-orange-700
2.14
#FF9900
Brand C / Orange 800
--color-brand-c-orange-800
3.31
#CC7A00
Brand C / Orange 900
--color-brand-c-orange-900
5.40
#995C00
Brand C / Orange 1000
--color-brand-c-orange-1000
9.41
#663D00
Brand C / Purple
Name
Token
Contrast :1
Hex
Brand C / Purple 100
--color-brand-c-purple-100
1.15
#F5ECFE
Brand C / Purple 200
--color-brand-c-purple-200
1.33
#ECD8FD
Brand C / Purple 300
--color-brand-c-purple-300
1.73
#DBB6FC
Brand C / Purple 400
--color-brand-c-purple-400
2.30
#CA94FA
Brand C / Purple 500
--color-brand-c-purple-500
3.20
#B76DF8
Brand C / Purple 600
--color-brand-c-purple-600
4.94
#9C35F6
Brand C / Purple 700
--color-brand-c-purple-700
6.22
#870CF3
Brand C / Purple 800
--color-brand-c-purple-800
8.54
#6C0AC2
Brand C / Purple 900
--color-brand-c-purple-900
11.70
#510792
Brand C / Purple 1000
--color-brand-c-purple-1000
14.91
#39115C
Brand C / Red
Name
Token
Contrast :1
Hex
Brand C / Red 100
--color-brand-c-red-100
1.14
#FEECEC
Brand C / Red 200
--color-brand-c-red-200
1.22
#FDE2E3
Brand C / Red 300
--color-brand-c-red-300
1.67
#FAB7B9
Brand C / Red 400
--color-brand-c-red-400
2.14
#F89699
Brand C / Red 500
--color-brand-c-red-500
2.82
#F66F74
Brand C / Red 600
--color-brand-c-red-600
3.85
#F23A41
Brand C / Red 700
--color-brand-c-red-700
4.39
#F00F17
Brand C / Red 800
--color-brand-c-red-800
6.36
#C00C12
Brand C / Red 900
--color-brand-c-red-900
9.41
#90090E
Brand C / Red 1000
--color-brand-c-red-1000
13.75
#600609
Brand Color Mapping
Each brand maps the same semantic keys to different primitives. Switch brands to compare.
Brand A
Role
Token
Resolved Value
accent
--brand-color-accent
var(--color-neutral-600)
accent-dark
--brand-color-accent-dark
var(--color-neutral-800)
functional-base
--brand-color-functional-base
var(--color-neutral-900)
functional-base-dark
--brand-color-functional-base-dark
var(--color-neutral-1000)
functional-danger
--brand-color-functional-danger
var(--color-neutral-900)
functional-success
--brand-color-functional-success
var(--color-neutral-800)
primary
--brand-color-primary
var(--color-neutral-1000)
primary-dark
--brand-color-primary-dark
var(--color-neutral-1000)
subtle
--brand-color-subtle
var(--color-neutral-500)
subtle-dark
--brand-color-subtle-dark
var(--color-neutral-800)
subtle-light
--brand-color-subtle-light
var(--color-neutral-200)
Brand B
Role
Token
Resolved Value
accent
--brand-color-accent
var(--color-brand-b-green-400)
accent-dark
--brand-color-accent-dark
var(--color-brand-b-green-800)
functional-base
--brand-color-functional-base
var(--color-brand-b-purple-700)
functional-base-dark
--brand-color-functional-base-dark
var(--color-brand-b-purple-900)
functional-danger
--brand-color-functional-danger
var(--color-brand-b-red-600)
functional-success
--brand-color-functional-success
var(--color-brand-b-green-600)
primary
--brand-color-primary
var(--color-brand-b-purple-600)
primary-dark
--brand-color-primary-dark
var(--color-brand-b-purple-800)
subtle
--brand-color-subtle
var(--color-neutral-500)
subtle-dark
--brand-color-subtle-dark
var(--color-neutral-800)
subtle-light
--brand-color-subtle-light
var(--color-neutral-200)
Brand C
Role
Token
Resolved Value
accent
--brand-color-accent
var(--color-brand-c-coolblue-400)
accent-dark
--brand-color-accent-dark
var(--color-brand-c-coolblue-900)
functional-base
--brand-color-functional-base
var(--color-brand-c-blue-600)
functional-base-dark
--brand-color-functional-base-dark
var(--color-brand-b-blue-900)
functional-danger
--brand-color-functional-danger
var(--color-brand-c-red-800)
functional-success
--brand-color-functional-success
var(--color-brand-c-green-800)
primary
--brand-color-primary
var(--color-brand-c-blue-600)
primary-dark
--brand-color-primary-dark
var(--color-brand-c-blue-900)
subtle
--brand-color-subtle
var(--color-neutral-500)
subtle-dark
--brand-color-subtle-dark
var(--color-neutral-800)
subtle-light
--brand-color-subtle-light
var(--color-neutral-200)
Semantic Mapping — Light
Intent-based tokens for the light appearance mode. These resolve to primitives and adapt per brand.