All tokens are listed below but for more detailed guidance see the individual type's foundation page.
background
foreground
border
stroke-color
background-active
color-focus
foreground-active
color-border-focused
color-primary
color-secondary
outline-focus
color-background
color-foreground
color-background-active
background-readonly
border-focused
border-error
border-error-focused
foreground-readonly
background-pressed
border-checked
color-active
core / color
#ffffff
white
core / color / tag / slategray
#f8f8f8
100
#eeeef0
200
#c6c6cd
300
#aeaeb7
400
#878895
500
#6e6e7f
600
#5c5d6f
700
#4e4f63
800
#404154
900
#20212a
1000
core / color / tag / lavender
#faf7ff
100
#f3ecfe
200
#d3bbfc
300
#c09efb
400
#9979cf
500
#7c62a8
600
#69538e
700
#5a477a
800
#4a3b64
900
#251e33
1000
core / color / tag / teal
#e8fbf8
100
#ccf7ef
200
#2edebe
300
#23c4a6
400
#1b9a83
500
#167d6b
600
#13695a
700
#105b4d
800
#0d4b40
900
#072621
1000
core / color / tag / pink
#fbf6f8
100
#f8ecf1
200
#e5bbca
300
#da9eb5
400
#c76c8f
500
#b84772
600
#9c3c60
700
#b84772
800
#6f2a44
900
#391623
1000
core / color / tag / tealblue
#f1f9fb
100
#e0f2f5
200
#8fd1dd
300
#5ebcce
400
#1a95ad
500
#157a8d
600
#126777
700
#0f5866
800
#0d4954
900
#07252b
1000
core / color / tag / skyblue
#f0f9fe
100
#ddf2fe
200
#83cffb
300
#46b8f9
400
#2591ce
500
#1e75a7
600
#1a638e
700
#16557a
800
#124664
900
#092433
1000
core / color / tag / purple
#faf6fb
100
#f5ebf6
200
#debce0
300
#cf9fd2
400
#b76ebc
500
#a54bab
600
#8d3d93
700
#7a347f
800
#652b68
900
#341635
1000
core / color / tag / blue
#f6f8fe
100
#eaedfd
200
#bac4f7
300
#9cabf4
400
#6b81ee
500
#5668c5
600
#4958a6
700
#3e4b8f
800
#343f76
900
#1a1f3b
1000
core / color / tag / yellow
#fff6ea
100
#feecd3
200
#fdb95b
300
#e2a24a
400
#b17f3a
500
#90672f
600
#7a5728
700
#684b22
800
#563e1c
900
#2c1f0e
1000
core / color / tag / gray
#f7f7f7
100
#efefef
200
#c6c6c6
300
#aeaeae
400
#898989
500
#6f6f6f
600
#5d5d5d
700
#505050
800
#424242
900
#212121
1000
core / color / tag / red
#fff6f6
100
#ffebeb
200
#feb3b3
300
#fe8f8f
400
#f54b4b
500
#c83e3e
600
#a93434
700
#922d2d
800
#782525
900
#3e1313
1000
core / color / tag / olive
#f8f9f1
100
#eff1e0
200
#c6cb90
300
#acb560
400
#859019
500
#6c7515
600
#5b6212
700
#4e5410
800
#40460d
900
#212306
1000
core / color / tag / orange
#fbf6f2
100
#f8ede5
200
#e6bfa5
300
#dba37d
400
#c9733a
500
#ba4e06
600
#9f4101
700
#893701
800
#722e01
900
#3a1800
1000
core / color / gray
#f7f8f8
50
#f3f5f5
75
#e8eaea
100
#d8dada
200
#afb4b4
300
#888f8f
400
#667070
500
#565f5f
600
#4a5151
700
#3d4343
800
#242727
900
rgba(216,218,218,0.6)
200-60
rgba(232,234,234,0.6)
100-60
rgba(175,180,180,0.4)
300-40
rgba(216,218,218,0.4)
200-40
core / color / green
#f8fbf5
50
#ecf7e5
75
#dbf0ce
100
#bde5a7
200
#76c651
300
#38a203
400
#1c7f00
500
#176d00
600
#165d00
700
#164d00
800
#142c06
900
rgba(118,198,81,0.6)
300-60
rgba(118,198,81,0.4)
300-40
core / color / teal
#f2fcf8
50
#dff9f2
75
#c1f5e7
100
#8febd5
200
#1cc9ab
300
#00a085
400
#007c68
500
#006a59
600
#025b4c
700
#0b4b3f
800
#102b25
900
core / color / blue
#f8fafe
50
#eff3fe
75
#e2e9ff
100
#cbd9ff
200
#8eb2fd
300
#4e8de9
400
#256ec3
500
#1b5ea9
600
#195091
700
#194277
800
#172641
900
rgba(142,178,253,0.4)
300-40
rgba(142,178,253,0.6)
300-60
core / color / beige
#fbf9f6
50
#f5f2ef
75
#eee8e3
100
#dad3ca
200
#b6aea5
300
#938c84
400
#736c64
500
#625d56
600
#544f49
700
#46413c
800
#2a2623
900
rgba(218,211,202,0.6)
200-60
rgba(238,232,227,0.6)
100-60
rgba(218,211,202,0.4)
200-40
rgba(218,211,202,0.8)
200-80
rgba(182,174,165,0.8)
300-40
core / color / red
#fefaf8
50
#fff1ed
75
#ffe5de
100
#ffcfc3
200
#ff9681
300
#f35a47
400
#c9392d
500
#ae2f25
600
#96281f
700
#7b231a
800
#451812
900
rgba(255,150,129,0.4)
300-40
rgba(255,150,129,0.6)
300-60
core / color / yellow
#fefbea
50
#fff6ba
75
#ffec73
100
#ffd625
200
#e2aa00
300
#bd8200
400
#9a6200
500
#865200
600
#754504
700
#623807
800
#3c2003
900
rgba(255,214,37,0.6)
200-60
rgba(255,214,37,0.8)
200-80
semantic / color / background
primary
raised
inset
rgba(255,255,255,0)
action-default
rgba(203,217,255,0)
action-info
rgba(255,207,195,0)
action-danger
rgba(255,236,115,0)
action-warning
hover
active
neutral
placeholder
highlight
rgba(37,40,40,0.5)
backdrop
inverted
inverted-hover
inverted-active
accent
accent-hover
accent-active
accent-inverted
accent-inverted-hover
accent-inverted-active
form-accent
info
info-hover
info-active
info-inverted
success
success-hover
success-active
success-inverted
warning
warning-hover
warning-active
warning-inverted
danger
danger-hover
danger-active
danger-inverted
danger-inverted-hover
danger-inverted-active
rgba(189,229,167,0)
action-success
primary
highlight
accent
form-accent
info
success
warning
danger
raised
inset
rgba(255,255,255,0)
action-default
rgba(203,217,255,0)
action-info
rgba(189,229,167,0)
action-success
rgba(255,207,195,0)
action-danger
rgba(255,236,115,0)
action-warning
active
neutral
placeholder
rgba(37,40,40,0.5)
backdrop
inverted
inverted-active
accent-active
accent-inverted
accent-inverted-active
info-active
info-inverted
success-active
success-inverted
warning-active
warning-inverted
danger-active
danger-inverted
danger-inverted-active
muted
Info-inverted
semantic / color / tag / background
#878895
slategray-decorative
#c6c6c6
gray
#6f6f6f
gray-inverted
#898989
gray-decorative
#c6c6cd
slategray
#6e6e7f
slategray-inverted
#e5bbca
pink
#b84772
pink-inverted
#c76c8f
pink-decorative
#feb3b3
red
#f54b4b
red-decorative
#e6bfa5
orange
#ba4e06
orange-inverted
#c9733a
orange-decorative
#b17f3a
yellow-decorative
#c6cb90
olive
#6c7515
olive-inverted
#859019
olive-decorative
#2edebe
teal
#167d6b
teal-inverted
#1b9a83
teal-decorative
#8fd1dd
tealblue
#157a8d
tealblue-inverted
#1a95ad
tealblue-decorative
#83cffb
skyblue
#1e75a7
skyblue-inverted
#2591ce
skyblue-decorative
#bac4f7
blue
#5668c5
blue-inverted
#6b81ee
blue-decorative
#d3bbfc
lavender
#7c62a8
lavender-inverted
#9979cf
lavender-decorative
#debce0
purple
#a54bab
purple-inverted
#b76ebc
purple-decorative
#c83e3e
red-inverted
#fdb95b
yellow
#90672f
yellow-inverted
#c6c6c6
gray
#6f6f6f
gray-inverted
#898989
gray-decorative
#c6c6cd
slategray
#6e6e7f
slategray-inverted
#878895
slategray-decorative
#e5bbca
pink
#b84772
pink-inverted
#c76c8f
pink-decorative
#feb3b3
red
#c83e3e
red-inverted
#f54b4b
red-decorative
#e6bfa5
orange
#ba4e06
orange-inverted
#c9733a
orange-decorative
#fdb95b
yellow
#90672f
yellow-inverted
#b17f3a
yellow-decorative
#c6cb90
olive
#6c7515
olive-inverted
#859019
olive-decorative
#2edebe
teal
#167d6b
teal-inverted
#1b9a83
teal-decorative
#8fd1dd
tealblue
#157a8d
tealblue-inverted
#1a95ad
tealblue-decorative
#83cffb
skyblue
#1e75a7
skyblue-inverted
#2591ce
skyblue-decorative
#bac4f7
blue
#5668c5
blue-inverted
#6b81ee
blue-decorative
#d3bbfc
lavender
#7c62a8
lavender-inverted
#9979cf
lavender-decorative
#debce0
purple
#a54bab
purple-inverted
#b76ebc
purple-decorative
semantic / color / tag / foreground
#f7f7f7
gray-inverted
#424242
gray
#f8f8f8
slategray-inverted
#6f2a44
pink
#fbf6f8
pink-inverted
#782525
red
#722e01
orange
#fbf6f2
orange-inverted
#563e1c
yellow
#40460d
olive
#0d4b40
teal
#e8fbf8
teal-inverted
#0d4954
tealblue
#f1f9fb
tealblue-inverted
#124664
skyblue
#f0f9fe
skyblue-inverted
#f6f8fe
blue-inverted
#4a3b64
lavender
#faf7ff
lavender-inverted
#652b68
purple
#faf6fb
purple-inverted
#404154
slategray
#fff6f6
red-inverted
#fff6ea
yellow-inverted
#f8f9f1
olive-inverted
#343f76
blue
#424242
gray
#f7f7f7
gray-inverted
#404154
slategray
#f8f8f8
slategray-inverted
#6f2a44
pink
#fbf6f8
pink-inverted
#782525
red
#fff6f6
red-inverted
#722e01
orange
#fbf6f2
orange-inverted
#563e1c
yellow
#fff6ea
yellow-inverted
#40460d
olive
#f8f9f1
olive-inverted
#0d4b40
teal
#e8fbf8
teal-inverted
#0d4954
tealblue
#f1f9fb
tealblue-inverted
#124664
skyblue
#f0f9fe
skyblue-inverted
#343f76
blue
#f6f8fe
blue-inverted
#4a3b64
lavender
#faf7ff
lavender-inverted
#652b68
purple
#faf6fb
purple-inverted
semantic / color / border
primary
primary-hover
highlight
accent
form-accent
info
success
warning
danger
secondary
primary
#e8eaea
secondary
highlight
accent
form-accent
info
success
warning
danger
semantic / color / foreground
primary
secondary
muted
inverted
accent
info
info-inverted
success-inverted
warning
danger-inverted
accent-inverted
success
danger
primary
secondary
inverted
accent
accent-inverted
info
success
success-inverted
warning
danger
danger-inverted
components / divider
color-primary
color-secondary
components / dropdown / group / heading
color-foreground
components / dropdown / popout
color-background
components / dropdown / item
color-background
color-background-hover
color-background-active
color-foreground
color-foreground-hover
color-foreground-active
color-border-mobile
outline-focus
components / filter / trigger
color-background
color-background-hover
color-foreground
color-border
color-outline-focus
separator-color
components / filter / trigger / icon
color-foreground
color-background-hover
components / filter / select
color-foreground
color-background-hover
color-outline-focus
components / filter / backdrop
color-background
components / filter / popout
color-background
components / filter / popout / footer
color-background
components / filter / popout / header / label
color-foreground
components / filter / popout / content / item
background-hover
components / step-indicator / label
color-foreground
components / table
rgba(255,255,255,0.8)
overlay-color-background
components / table / td
color-border
color-border-sticky
color-background-sticky
components / table / tr
color-background-hover
color-background-active
components / table / icon
color-default
color-active
components / table / th
color-foreground
color-border
color-background-sticky
sticky-scroll-divider-color-background
components / tile
outline-focus
components / tile / clickable / color
background
background-pressed
background-hover
background
background-pressed
components / tile / clickable / accent / color
background
background-hover
background-pressed
components / tile / selectable / color
background
background-hover
background-pressed
border
components / tile / selectable / accent / color
border
border-selected
components / action-bar
color-background
color-background-hover
color-background-active
color-foreground
components / calendar / weekdays
color-foreground
components / calendar / day
color-outline-focus
color-background-hover
color-foreground-hover
components / calendar / day / today / color
border
foreground
components / calendar / day / selected / color
background
foreground
components / calendar / day / highlighted / color
background
foreground
components / calendar / day / blocked / color
foreground
components / calendar / day / default
color-foreground
components / calendar / day / muted / color
foreground
components / calendar / select
color-foreground
color-background-hover
color-outline-focus
components / card / primary
color-background
color-border
components / card / primary / color
background
border
components / card / secondary
color-background
color-border
components / card / secondary / color
background
border
components / datepicker / backdrop
color-background
components / datepicker / popout
color-background
components / datepicker / popout / icon-button
rgba(255,255,255,0)
_color-background
components / fieldset / label
color-foreground
components / fieldset / hint
color-foreground
components / fieldset / error
color-foreground
components / input
color-background
color-background-readonly
color-border-hover
color-border-focused
color-border-error-focused
color-border
color-border-error
color-foreground
color-foreground-readonly
components / input / placeholder
color-foreground
components / input / placeholder / color
foreground
components / input / error
color-foreground
components / input / error / color
foreground
components / input / affix
color-foreground
components / input / affix / color
foreground
components / input / hint
color-foreground
components / input / hint / color
foreground
components / input / color
background
border
foreground
components / nav-list / heading
color
components / nav-list / item
color-border-focus
color-background-hover
color-background-active
color-background-selected
color-foreground
components / nav-list / indicator
background
components / radio
icon-color
color-background
color-border-checked
color-border
color-background-checked
outline-focus
outline-focus
components / radio / error
color
color
components / radio / label
color-foreground
components / radio / label / color
foreground
components / radio / disabled
color-foreground
color-background
components / radio / disabled / color
foreground
background
components / radio / hint
color
color
components / radio / color
border
background
background-checked
components / radio / icon
color
components / skeleton
color-background
components / skeleton / ai
color-background
components / tabs
color-border
rgba(255,255,255,0)
_color-background
components / tabs / item
color-border-focus
#aaaaaa
color-border
color-border-active
color-background-hover
rgba(255,255,255,0)
color-background
color-foreground-default