Color

Palette primitives, semantic color, and backdrop tokens.


Palette

Palette tokens
NameUnderlying Value
palette-blue_wave-025
themeVars.palette['blue_wave-025']
#f5fcff
palette-blue_wave-050
themeVars.palette['blue_wave-050']
#f0fbff
palette-blue_wave-100
themeVars.palette['blue_wave-100']
#d8f3fd
palette-blue_wave-200
themeVars.palette['blue_wave-200']
#bbe8fb
palette-blue_wave-250
themeVars.palette['blue_wave-250']
#a3dcfa
palette-blue_wave-300
themeVars.palette['blue_wave-300']
#8bd0f9
palette-blue_wave-350
themeVars.palette['blue_wave-350']
#68bcf7
palette-blue_wave-400
themeVars.palette['blue_wave-400']
#47a4f5
palette-blue_wave-450
themeVars.palette['blue_wave-450']
#207ef5
palette-blue_wave-500
themeVars.palette['blue_wave-500']
#1d66f3
palette-blue_wave-600
themeVars.palette['blue_wave-600']
#004dd6
palette-blue_wave-700
themeVars.palette['blue_wave-700']
#0039a6
palette-blue_wave-800
themeVars.palette['blue_wave-800']
#002470
palette-blue_wave-900
themeVars.palette['blue_wave-900']
#000f38
palette-blue_wave-950
themeVars.palette['blue_wave-950']
#000419
palette-blue-050
themeVars.palette['blue-050']
#f4faff
palette-blue-100
themeVars.palette['blue-100']
#e6f3ff
palette-blue-200
themeVars.palette['blue-200']
#abdaff
palette-blue-300
themeVars.palette['blue-300']
#5cbbff
palette-blue-400
themeVars.palette['blue-400']
#0a95ff
palette-blue-500
themeVars.palette['blue-500']
#006ff5
palette-blue-600
themeVars.palette['blue-600']
#0057c4
palette-blue-700
themeVars.palette['blue-700']
#0046a0
palette-blue-800
themeVars.palette['blue-800']
#003780
palette-blue-900
themeVars.palette['blue-900']
#002861
palette-brand-forest
themeVars.palette['brand-forest']
#0b353b
palette-brand-forest-dark
themeVars.palette['brand-forest-dark']
#08272b
palette-brand-forest-light
themeVars.palette['brand-forest-light']
#0e464d
palette-green_verdant-015
themeVars.palette['green_verdant-015']
#f0fff0
palette-green_verdant-025
themeVars.palette['green_verdant-025']
#e0ffe1
palette-green_verdant-050
themeVars.palette['green_verdant-050']
#d1ffd2
palette-green_verdant-100
themeVars.palette['green_verdant-100']
#c2ffc3
palette-green_verdant-200
themeVars.palette['green_verdant-200']
#abffae
palette-green_verdant-300
themeVars.palette['green_verdant-300']
#81fa8b
palette-green_verdant-400
themeVars.palette['green_verdant-400']
#4fec6c
palette-green_verdant-500
themeVars.palette['green_verdant-500']
#0bd552
palette-green_verdant-550
themeVars.palette['green_verdant-550']
#0ac44b
palette-green_verdant-600
themeVars.palette['green_verdant-600']
#00ab3f
palette-green_verdant-700
themeVars.palette['green_verdant-700']
#078031
palette-green_verdant-800
themeVars.palette['green_verdant-800']
#04481c
palette-green_verdant-850
themeVars.palette['green_verdant-850']
#033314
palette-green_verdant-900
themeVars.palette['green_verdant-900']
#021d0b
palette-green_verdant-950
themeVars.palette['green_verdant-950']
#000602
palette-green-050
themeVars.palette['green-050']
#f4ffeb
palette-green-100
themeVars.palette['green-100']
#e4ffce
palette-green-200
themeVars.palette['green-200']
#b8ff99
palette-green-300
themeVars.palette['green-300']
#3dcc00
palette-green-400
themeVars.palette['green-400']
#22a800
palette-green-500
themeVars.palette['green-500']
#00882b
palette-green-600
themeVars.palette['green-600']
#006c20
palette-green-700
themeVars.palette['green-700']
#005719
palette-green-800
themeVars.palette['green-800']
#004511
palette-green-900
themeVars.palette['green-900']
#00320a
palette-grey_charcoal-015
themeVars.palette['grey_charcoal-015']
#fafafa
palette-grey_charcoal-025
themeVars.palette['grey_charcoal-025']
#f5f5f5
palette-grey_charcoal-050
themeVars.palette['grey_charcoal-050']
#ededed
palette-grey_charcoal-100
themeVars.palette['grey_charcoal-100']
#e0e0e0
palette-grey_charcoal-200
themeVars.palette['grey_charcoal-200']
#cccccc
palette-grey_charcoal-250
themeVars.palette['grey_charcoal-250']
#bcbcbc
palette-grey_charcoal-300
themeVars.palette['grey_charcoal-300']
#ababab
palette-grey_charcoal-350
themeVars.palette['grey_charcoal-350']
#9b9b9b
palette-grey_charcoal-400
themeVars.palette['grey_charcoal-400']
#8a8a8a
palette-grey_charcoal-500
themeVars.palette['grey_charcoal-500']
#666666
palette-grey_charcoal-600
themeVars.palette['grey_charcoal-600']
#474747
palette-grey_charcoal-650
themeVars.palette['grey_charcoal-650']
#3d3d3d
palette-grey_charcoal-700
themeVars.palette['grey_charcoal-700']
#333333
palette-grey_charcoal-750
themeVars.palette['grey_charcoal-750']
#2a2a2a
palette-grey_charcoal-775
themeVars.palette['grey_charcoal-775']
#262626
palette-grey_charcoal-800
themeVars.palette['grey_charcoal-800']
#212121
palette-grey_charcoal-850
themeVars.palette['grey_charcoal-850']
#1a1a1a
palette-grey_charcoal-900
themeVars.palette['grey_charcoal-900']
#151515
palette-grey_charcoal-black
themeVars.palette['grey_charcoal-black']
#000000
palette-grey_charcoal-white
themeVars.palette['grey_charcoal-white']
#ffffff
palette-grey_warm_charcoal-015
themeVars.palette['grey_warm_charcoal-015']
#fafaf9
palette-grey_warm_charcoal-025
themeVars.palette['grey_warm_charcoal-025']
#f6f5f4
palette-grey_warm_charcoal-050
themeVars.palette['grey_warm_charcoal-050']
#efedeb
palette-grey_warm_charcoal-100
themeVars.palette['grey_warm_charcoal-100']
#e4e0dd
palette-grey_warm_charcoal-200
themeVars.palette['grey_warm_charcoal-200']
#d1ccc7
palette-grey_warm_charcoal-300
themeVars.palette['grey_warm_charcoal-300']
#afaba7
palette-grey_warm_charcoal-400
themeVars.palette['grey_warm_charcoal-400']
#8d8a86
palette-grey_warm_charcoal-500
themeVars.palette['grey_warm_charcoal-500']
#686664
palette-grey_warm_charcoal-600
themeVars.palette['grey_warm_charcoal-600']
#494846
palette-grey_warm_charcoal-700
themeVars.palette['grey_warm_charcoal-700']
#343332
palette-grey_warm_charcoal-800
themeVars.palette['grey_warm_charcoal-800']
#212121
palette-grey_warm_charcoal-900
themeVars.palette['grey_warm_charcoal-900']
#151515
palette-grey_warm_charcoal-black
themeVars.palette['grey_warm_charcoal-black']
#000000
palette-grey_warm_charcoal-white
themeVars.palette['grey_warm_charcoal-white']
#ffffff
palette-grey-050
themeVars.palette['grey-050']
#f8f9f9
palette-grey-100
themeVars.palette['grey-100']
#ebf0f1
palette-grey-200
themeVars.palette['grey-200']
#cad6d8
palette-grey-300
themeVars.palette['grey-300']
#a4b4b6
palette-grey-400
themeVars.palette['grey-400']
#849699
palette-grey-500
themeVars.palette['grey-500']
#66787a
palette-grey-600
themeVars.palette['grey-600']
#515f61
palette-grey-700
themeVars.palette['grey-700']
#3f4e50
palette-grey-800
themeVars.palette['grey-800']
#313d3f
palette-grey-900
themeVars.palette['grey-900']
#202c2d
palette-grey-black
themeVars.palette['grey-black']
#000000
palette-grey-white
themeVars.palette['grey-white']
#ffffff
palette-orange_zest-025
themeVars.palette['orange_zest-025']
#fff9f5
palette-orange_zest-050
themeVars.palette['orange_zest-050']
#fff6f0
palette-orange_zest-100
themeVars.palette['orange_zest-100']
#fde2d3
palette-orange_zest-200
themeVars.palette['orange_zest-200']
#fbcdb2
palette-orange_zest-250
themeVars.palette['orange_zest-250']
#fabc98
palette-orange_zest-300
themeVars.palette['orange_zest-300']
#f8aa7d
palette-orange_zest-350
themeVars.palette['orange_zest-350']
#f79963
palette-orange_zest-400
themeVars.palette['orange_zest-400']
#f58747
palette-orange_zest-500
themeVars.palette['orange_zest-500']
#f36a1b
palette-orange_zest-600
themeVars.palette['orange_zest-600']
#d24d00
palette-orange_zest-700
themeVars.palette['orange_zest-700']
#973800
palette-orange_zest-800
themeVars.palette['orange_zest-800']
#5d2200
palette-orange_zest-900
themeVars.palette['orange_zest-900']
#2e1100
palette-orange_zest-950
themeVars.palette['orange_zest-950']
#150500
palette-orange-050
themeVars.palette['orange-050']
#fff8f3
palette-orange-100
themeVars.palette['orange-100']
#ffedea
palette-orange-200
themeVars.palette['orange-200']
#fec8bd
palette-orange-300
themeVars.palette['orange-300']
#fd987c
palette-orange-400
themeVars.palette['orange-400']
#f36615
palette-orange-500
themeVars.palette['orange-500']
#c6510f
palette-orange-600
themeVars.palette['orange-600']
#9e3f09
palette-orange-700
themeVars.palette['orange-700']
#813206
palette-orange-800
themeVars.palette['orange-800']
#662604
palette-orange-900
themeVars.palette['orange-900']
#4d1b02
palette-pink_blush-025
themeVars.palette['pink_blush-025']
#fffafd
palette-pink_blush-050
themeVars.palette['pink_blush-050']
#fff5fb
palette-pink_blush-100
themeVars.palette['pink_blush-100']
#fde2f2
palette-pink_blush-125
themeVars.palette['pink_blush-125']
#fde3f3
palette-pink_blush-150
themeVars.palette['pink_blush-150']
#fcd0ea
palette-pink_blush-200
themeVars.palette['pink_blush-200']
#fbbbe2
palette-pink_blush-250
themeVars.palette['pink_blush-250']
#faa4d8
palette-pink_blush-300
themeVars.palette['pink_blush-300']
#f98bcd
palette-pink_blush-350
themeVars.palette['pink_blush-350']
#f871c2
palette-pink_blush-400
themeVars.palette['pink_blush-400']
#f651b4
palette-pink_blush-500
themeVars.palette['pink_blush-500']
#bc0a74
palette-pink_blush-600
themeVars.palette['pink_blush-600']
#99005b
palette-pink_blush-700
themeVars.palette['pink_blush-700']
#700042
palette-pink_blush-800
themeVars.palette['pink_blush-800']
#470028
palette-pink_blush-900
themeVars.palette['pink_blush-900']
#2e0018
palette-pink_blush-950
themeVars.palette['pink_blush-950']
#1f000e
palette-plum-100
themeVars.palette['plum-100']
#f5f0ff
palette-plum-300
themeVars.palette['plum-300']
#e1c9ff
palette-plum-400
themeVars.palette['plum-400']
#c497ff
palette-plum-500
themeVars.palette['plum-500']
#af64ff
palette-plum-600
themeVars.palette['plum-600']
#9a50e3
palette-plum-700
themeVars.palette['plum-700']
#843cc7
palette-plum-800
themeVars.palette['plum-800']
#702dab
palette-plum-900
themeVars.palette['plum-900']
#5c1e8f
palette-plum-950
themeVars.palette['plum-950']
#521781
palette-purple_nova-025
themeVars.palette['purple_nova-025']
#fbfaff
palette-purple_nova-050
themeVars.palette['purple_nova-050']
#f6f4ff
palette-purple_nova-100
themeVars.palette['purple_nova-100']
#ece7fe
palette-purple_nova-125
themeVars.palette['purple_nova-125']
#e4dcfe
palette-purple_nova-150
themeVars.palette['purple_nova-150']
#dbd1fd
palette-purple_nova-200
themeVars.palette['purple_nova-200']
#c9bbfb
palette-purple_nova-250
themeVars.palette['purple_nova-250']
#b7a5fa
palette-purple_nova-300
themeVars.palette['purple_nova-300']
#a38bf9
palette-purple_nova-350
themeVars.palette['purple_nova-350']
#8567f7
palette-purple_nova-400
themeVars.palette['purple_nova-400']
#7451f6
palette-purple_nova-500
themeVars.palette['purple_nova-500']
#7129ff
palette-purple_nova-600
themeVars.palette['purple_nova-600']
#4b00e2
palette-purple_nova-700
themeVars.palette['purple_nova-700']
#3900ab
palette-purple_nova-750
themeVars.palette['purple_nova-750']
#2c0084
palette-purple_nova-800
themeVars.palette['purple_nova-800']
#1f005c
palette-purple_nova-900
themeVars.palette['purple_nova-900']
#110033
palette-purple_nova-950
themeVars.palette['purple_nova-950']
#07001d
palette-purple-050
themeVars.palette['purple-050']
#f9f8fe
palette-purple-100
themeVars.palette['purple-100']
#f1f0fc
palette-purple-200
themeVars.palette['purple-200']
#d3d0f5
palette-purple-300
themeVars.palette['purple-300']
#b1abed
palette-purple-400
themeVars.palette['purple-400']
#8f86e5
palette-purple-500
themeVars.palette['purple-500']
#7265dc
palette-purple-600
themeVars.palette['purple-600']
#5845d0
palette-purple-700
themeVars.palette['purple-700']
#4632b7
palette-purple-800
themeVars.palette['purple-800']
#362692
palette-purple-900
themeVars.palette['purple-900']
#271a6f
palette-raspberry-050
themeVars.palette['raspberry-050']
#fff7fa
palette-raspberry-100
themeVars.palette['raspberry-100']
#feecf3
palette-raspberry-200
themeVars.palette['raspberry-200']
#fdc1da
palette-raspberry-300
themeVars.palette['raspberry-300']
#fc91c2
palette-raspberry-400
themeVars.palette['raspberry-400']
#fa4daa
palette-raspberry-500
themeVars.palette['raspberry-500']
#dc1a8e
palette-raspberry-600
themeVars.palette['raspberry-600']
#b01371
palette-raspberry-700
themeVars.palette['raspberry-700']
#900d5b
palette-raspberry-800
themeVars.palette['raspberry-800']
#720848
palette-raspberry-900
themeVars.palette['raspberry-900']
#560537
palette-red_flame-025
themeVars.palette['red_flame-025']
#fffafa
palette-red_flame-050
themeVars.palette['red_flame-050']
#fff0f0
palette-red_flame-075
themeVars.palette['red_flame-075']
#feddde
palette-red_flame-100
themeVars.palette['red_flame-100']
#fccacb
palette-red_flame-150
themeVars.palette['red_flame-150']
#febabc
palette-red_flame-200
themeVars.palette['red_flame-200']
#ff9fa1
palette-red_flame-250
themeVars.palette['red_flame-250']
#f58184
palette-red_flame-300
themeVars.palette['red_flame-300']
#e95e62
palette-red_flame-400
themeVars.palette['red_flame-400']
#e43a3f
palette-red_flame-500
themeVars.palette['red_flame-500']
#c50122
palette-red_flame-600
themeVars.palette['red_flame-600']
#99001a
palette-red_flame-700
themeVars.palette['red_flame-700']
#700013
palette-red_flame-800
themeVars.palette['red_flame-800']
#47000c
palette-red_flame-900
themeVars.palette['red_flame-900']
#2e0008
palette-red_flame-950
themeVars.palette['red_flame-950']
#1f0004
palette-red-050
themeVars.palette['red-050']
#fef7f7
palette-red-100
themeVars.palette['red-100']
#fdeded
palette-red-200
themeVars.palette['red-200']
#fac8c8
palette-red-300
themeVars.palette['red-300']
#f79999
palette-red-400
themeVars.palette['red-400']
#f56060
palette-red-500
themeVars.palette['red-500']
#e22828
palette-red-600
themeVars.palette['red-600']
#b51e1e
palette-red-700
themeVars.palette['red-700']
#941616
palette-red-800
themeVars.palette['red-800']
#761010
palette-red-900
themeVars.palette['red-900']
#590909
palette-teal_spruce-015
themeVars.palette['teal_spruce-015']
#f0f9f9
palette-teal_spruce-025
themeVars.palette['teal_spruce-025']
#daf0f1
palette-teal_spruce-050
themeVars.palette['teal_spruce-050']
#bbe3e7
palette-teal_spruce-075
themeVars.palette['teal_spruce-075']
#a7dade
palette-teal_spruce-100
themeVars.palette['teal_spruce-100']
#91cfd4
palette-teal_spruce-200
themeVars.palette['teal_spruce-200']
#67b8c0
palette-teal_spruce-250
themeVars.palette['teal_spruce-250']
#4ba7b2
palette-teal_spruce-300
themeVars.palette['teal_spruce-300']
#2f9aa7
palette-teal_spruce-400
themeVars.palette['teal_spruce-400']
#1e7b87
palette-teal_spruce-500
themeVars.palette['teal_spruce-500']
#135e67
palette-teal_spruce-600
themeVars.palette['teal_spruce-600']
#0f4a52
palette-teal_spruce-700
themeVars.palette['teal_spruce-700']
#0b363b
palette-teal_spruce-800
themeVars.palette['teal_spruce-800']
#08272b
palette-teal_spruce-900
themeVars.palette['teal_spruce-900']
#041316
palette-teal_spruce-950
themeVars.palette['teal_spruce-950']
#010809
palette-teal-050
themeVars.palette['teal-050']
#eefcfd
palette-teal-100
themeVars.palette['teal-100']
#d5f8fa
palette-teal-200
themeVars.palette['teal-200']
#86e3e8
palette-teal-300
themeVars.palette['teal-300']
#70bfc4
palette-teal-400
themeVars.palette['teal-400']
#5b9ca0
palette-teal-500
themeVars.palette['teal-500']
#487e81
palette-teal-600
themeVars.palette['teal-600']
#386466
palette-teal-700
themeVars.palette['teal-700']
#2c5053
palette-teal-800
themeVars.palette['teal-800']
#213f41
palette-teal-900
themeVars.palette['teal-900']
#172e2f
palette-yellow_mustard-025
themeVars.palette['yellow_mustard-025']
#fffcf5
palette-yellow_mustard-050
themeVars.palette['yellow_mustard-050']
#fffbf0
palette-yellow_mustard-100
themeVars.palette['yellow_mustard-100']
#fdf2d3
palette-yellow_mustard-200
themeVars.palette['yellow_mustard-200']
#fbeabb
palette-yellow_mustard-300
themeVars.palette['yellow_mustard-300']
#f9dc8b
palette-yellow_mustard-400
themeVars.palette['yellow_mustard-400']
#f6ca51
palette-yellow_mustard-500
themeVars.palette['yellow_mustard-500']
#f2b50d
palette-yellow_mustard-525
themeVars.palette['yellow_mustard-525']
#e5ab0a
palette-yellow_mustard-550
themeVars.palette['yellow_mustard-550']
#d79f06
palette-yellow_mustard-600
themeVars.palette['yellow_mustard-600']
#bd8a00
palette-yellow_mustard-650
themeVars.palette['yellow_mustard-650']
#a07600
palette-yellow_mustard-700
themeVars.palette['yellow_mustard-700']
#856200
palette-yellow_mustard-800
themeVars.palette['yellow_mustard-800']
#4d3800
palette-yellow_mustard-900
themeVars.palette['yellow_mustard-900']
#241a00
palette-yellow_mustard-950
themeVars.palette['yellow_mustard-950']
#0e0800
palette-yellow-050
themeVars.palette['yellow-050']
#fff9e2
palette-yellow-100
themeVars.palette['yellow-100']
#fff2b3
palette-yellow-200
themeVars.palette['yellow-200']
#edd500
palette-yellow-300
themeVars.palette['yellow-300']
#ccb100
palette-yellow-400
themeVars.palette['yellow-400']
#b28f00
palette-yellow-500
themeVars.palette['yellow-500']
#947023
palette-yellow-600
themeVars.palette['yellow-600']
#75581a
palette-yellow-700
themeVars.palette['yellow-700']
#5f4713
palette-yellow-800
themeVars.palette['yellow-800']
#4b370d
palette-yellow-900
themeVars.palette['yellow-900']
#302b00

Color

Surface

Surface base

Surface color tokens
NameUnderlying Value
color-surface-active
themeVars.color['surface-active']
palette-grey_charcoal-050
#ededed
color-surface-active-disabled
themeVars.color['surface-active-disabled']
palette-grey_charcoal-050
#ededed
color-surface-active-hover
themeVars.color['surface-active-hover']
palette-grey_charcoal-100
#e0e0e0
color-surface-base
themeVars.color['surface-base']
palette-grey_charcoal-white
#ffffff
color-surface-base-disabled
themeVars.color['surface-base-disabled']
palette-grey_charcoal-200
#cccccc
color-surface-base-hover
themeVars.color['surface-base-hover']
palette-grey_charcoal-015
#fafafa
color-surface-bold
themeVars.color['surface-bold']
palette-grey_charcoal-100
#e0e0e0
color-surface-bold-hover
themeVars.color['surface-bold-hover']
palette-grey_charcoal-200
#cccccc
color-surface-invert
themeVars.color['surface-invert']
palette-teal_spruce-700
#0b363b
color-surface-invert-bold
themeVars.color['surface-invert-bold']
palette-teal_spruce-800
#08272b
color-surface-invert-bold-hover
themeVars.color['surface-invert-bold-hover']
palette-teal_spruce-700
#0b363b
color-surface-invert-hover
themeVars.color['surface-invert-hover']
palette-teal_spruce-600
#0f4a52
color-surface-invert-subtle
themeVars.color['surface-invert-subtle']
palette-grey_charcoal-500
#666666
color-surface-subtle
themeVars.color['surface-subtle']
palette-grey_charcoal-025
#f5f5f5
color-surface-subtle-disabled
themeVars.color['surface-subtle-disabled']
palette-grey_charcoal-025
#f5f5f5
color-surface-subtle-hover
themeVars.color['surface-subtle-hover']
palette-grey_charcoal-050
#ededed

Surface Accent

Accent surface color tokens
NameUnderlying Value
color-surface-accent
themeVars.color['surface-accent']
palette-teal_spruce-400
#1e7b87
color-surface-accent-disabled
themeVars.color['surface-accent-disabled']
palette-grey_charcoal-200
#cccccc
color-surface-accent-hover
themeVars.color['surface-accent-hover']
palette-teal_spruce-500
#135e67
color-surface-accent-minimal
themeVars.color['surface-accent-minimal']
palette-teal_spruce-100
#91cfd4
color-surface-accent-subtle
themeVars.color['surface-accent-subtle']
palette-teal_spruce-200
#67b8c0

Surface Caution

Caution surface color tokens
NameUnderlying Value
color-surface-caution
themeVars.color['surface-caution']
palette-yellow_mustard-500
#f2b50d
color-surface-caution-bold
themeVars.color['surface-caution-bold']
palette-yellow_mustard-600
#bd8a00
color-surface-caution-disabled
themeVars.color['surface-caution-disabled']
palette-yellow_mustard-300
#f9dc8b
color-surface-caution-hover
themeVars.color['surface-caution-hover']
palette-yellow_mustard-700
#856200
color-surface-caution-minimal
themeVars.color['surface-caution-minimal']
palette-yellow_mustard-100
#fdf2d3
color-surface-caution-subtle
themeVars.color['surface-caution-subtle']
palette-yellow_mustard-200
#fbeabb
color-surface-caution-subtle-hover
themeVars.color['surface-caution-subtle-hover']
palette-yellow_mustard-300
#f9dc8b

Surface Critical

Critical surface color tokens
NameUnderlying Value
color-surface-critical
themeVars.color['surface-critical']
palette-red_flame-500
#c50122
color-surface-critical-bold
themeVars.color['surface-critical-bold']
palette-red_flame-700
#700013
color-surface-critical-disabled
themeVars.color['surface-critical-disabled']
palette-red_flame-200
#ff9fa1
color-surface-critical-hover
themeVars.color['surface-critical-hover']
palette-red_flame-600
#99001a
color-surface-critical-minimal
themeVars.color['surface-critical-minimal']
palette-red_flame-050
#fff0f0
color-surface-critical-subtle
themeVars.color['surface-critical-subtle']
palette-red_flame-100
#fccacb
color-surface-critical-subtle-hover
themeVars.color['surface-critical-subtle-hover']
palette-red_flame-200
#ff9fa1

Surface Information

Information surface color tokens
NameUnderlying Value
color-surface-information
themeVars.color['surface-information']
palette-blue_wave-500
#1d66f3
color-surface-information-bold
themeVars.color['surface-information-bold']
palette-blue_wave-700
#0039a6
color-surface-information-disabled
themeVars.color['surface-information-disabled']
palette-blue_wave-200
#bbe8fb
color-surface-information-hover
themeVars.color['surface-information-hover']
palette-blue_wave-800
#002470
color-surface-information-minimal
themeVars.color['surface-information-minimal']
palette-blue_wave-100
#d8f3fd
color-surface-information-subtle
themeVars.color['surface-information-subtle']
palette-blue_wave-200
#bbe8fb
color-surface-information-subtle-hover
themeVars.color['surface-information-subtle-hover']
palette-blue_wave-300
#8bd0f9

Surface Minimal

Minimal surface color tokens
NameUnderlying Value
color-surface-minimal
themeVars.color['surface-minimal']
palette-grey_charcoal-015
#fafafa

Surface Overlay

Overlay surface color tokens
NameUnderlying Value
color-surface-overlay
themeVars.color['surface-overlay']
color-surface-base
#ffffff
color-surface-overlay-active
themeVars.color['surface-overlay-active']
color-surface-active
#ededed
color-surface-overlay-active-hover
themeVars.color['surface-overlay-active-hover']
color-surface-base-hover
#fafafa
color-surface-overlay-hover
themeVars.color['surface-overlay-hover']
color-surface-base-hover
#fafafa

Surface Success

Success surface color tokens
NameUnderlying Value
color-surface-success
themeVars.color['surface-success']
palette-green_verdant-700
#078031
color-surface-success-bold
themeVars.color['surface-success-bold']
palette-green_verdant-800
#04481c
color-surface-success-disabled
themeVars.color['surface-success-disabled']
palette-green_verdant-100
#c2ffc3
color-surface-success-hover
themeVars.color['surface-success-hover']
palette-green_verdant-900
#021d0b
color-surface-success-minimal
themeVars.color['surface-success-minimal']
palette-green_verdant-050
#d1ffd2
color-surface-success-subtle
themeVars.color['surface-success-subtle']
palette-green_verdant-200
#abffae
color-surface-success-subtle-hover
themeVars.color['surface-success-subtle-hover']
palette-green_verdant-300
#81fa8b

Surface Workflow

Workflow surface color tokens
NameUnderlying Value
color-surface-workflow-data
themeVars.color['surface-workflow-data']
palette-pink_blush-400
#f651b4
color-surface-workflow-delays
themeVars.color['surface-workflow-delays']
palette-orange_zest-500
#f36a1b
color-surface-workflow-flowcontrol
themeVars.color['surface-workflow-flowcontrol']
palette-teal_spruce-300
#2f9aa7
color-surface-workflow-messages
themeVars.color['surface-workflow-messages']
palette-purple_nova-300
#a38bf9

Border

Border base

Border color tokens
NameUnderlying Value
color-border-active
themeVars.color['border-active']
palette-grey_charcoal-400
#8a8a8a
color-border-active-hover
themeVars.color['border-active-hover']
palette-grey_charcoal-500
#666666
color-border-base
themeVars.color['border-base']
palette-grey_charcoal-050
#ededed
color-border-base-hover
themeVars.color['border-base-hover']
palette-grey_charcoal-100
#e0e0e0
color-border-bold
themeVars.color['border-bold']
palette-grey_charcoal-300
#ababab
color-border-bold-hover
themeVars.color['border-bold-hover']
palette-grey_charcoal-400
#8a8a8a
color-border-focus
themeVars.color['border-focus']
palette-blue_wave-500
#1d66f3
color-border-invert
themeVars.color['border-invert']
palette-grey_charcoal-white
#ffffff
color-border-minimal
themeVars.color['border-minimal']
palette-grey_charcoal-050
#ededed
color-border-minimal-hover
themeVars.color['border-minimal-hover']
palette-grey_charcoal-100
#e0e0e0

Border Accent

Accent border color tokens
NameUnderlying Value
color-border-accent
themeVars.color['border-accent']
palette-teal_spruce-400
#1e7b87
color-border-accent-disabled
themeVars.color['border-accent-disabled']
palette-grey_charcoal-200
#cccccc
color-border-accent-hover
themeVars.color['border-accent-hover']
palette-teal_spruce-500
#135e67
color-border-accent-minimal
themeVars.color['border-accent-minimal']
palette-grey_charcoal-050
#ededed
color-border-accent-subtle
themeVars.color['border-accent-subtle']
palette-teal_spruce-700
#0b363b
color-border-accent-subtle-hover
themeVars.color['border-accent-subtle-hover']
palette-teal_spruce-800
#08272b

Border Caution

Caution border color tokens
NameUnderlying Value
color-border-caution
themeVars.color['border-caution']
palette-yellow_mustard-600
#bd8a00
color-border-caution-disabled
themeVars.color['border-caution-disabled']
palette-yellow_mustard-500
#f2b50d
color-border-caution-hover
themeVars.color['border-caution-hover']
palette-yellow_mustard-700
#856200
color-border-caution-minimal
themeVars.color['border-caution-minimal']
palette-yellow_mustard-200
#fbeabb
color-border-caution-subtle
themeVars.color['border-caution-subtle']
palette-yellow_mustard-500
#f2b50d
color-border-caution-subtle-hover
themeVars.color['border-caution-subtle-hover']
palette-yellow_mustard-500
#f2b50d

Border Critical

Critical border color tokens
NameUnderlying Value
color-border-critical
themeVars.color['border-critical']
palette-red_flame-400
#e43a3f
color-border-critical-disabled
themeVars.color['border-critical-disabled']
palette-red_flame-200
#ff9fa1
color-border-critical-hover
themeVars.color['border-critical-hover']
palette-red_flame-600
#99001a
color-border-critical-minimal
themeVars.color['border-critical-minimal']
palette-red_flame-050
#fff0f0
color-border-critical-subtle
themeVars.color['border-critical-subtle']
palette-red_flame-200
#ff9fa1
color-border-critical-subtle-hover
themeVars.color['border-critical-subtle-hover']
palette-red_flame-400
#e43a3f

Border Dropdown

Dropdown border color tokens
NameUnderlying Value
color-border-dropdown
themeVars.color['border-dropdown']
palette-grey_charcoal-050
#ededed

Border Feature

Feature border color tokens
NameUnderlying Value
color-border-feature-border-information
themeVars.color['border-feature-border-information']
palette-purple_nova-600
#4b00e2
color-border-feature-border-information-disabled
themeVars.color['border-feature-border-information-disabled']
palette-purple_nova-300
#a38bf9
color-border-feature-border-information-hover
themeVars.color['border-feature-border-information-hover']
palette-purple_nova-700
#3900ab
color-border-feature-border-information-minimal
themeVars.color['border-feature-border-information-minimal']
palette-purple_nova-100
#ece7fe
color-border-feature-border-information-subtle
themeVars.color['border-feature-border-information-subtle']
palette-purple_nova-300
#a38bf9
color-border-feature-border-information-subtle-hover
themeVars.color['border-feature-border-information-subtle-hover']
palette-purple_nova-400
#7451f6

Border Information

Information border color tokens
NameUnderlying Value
color-border-information
themeVars.color['border-information']
palette-blue_wave-700
#0039a6
color-border-information-disabled
themeVars.color['border-information-disabled']
palette-blue_wave-300
#8bd0f9
color-border-information-hover
themeVars.color['border-information-hover']
palette-blue_wave-800
#002470
color-border-information-minimal
themeVars.color['border-information-minimal']
palette-blue_wave-100
#d8f3fd
color-border-information-subtle
themeVars.color['border-information-subtle']
palette-blue_wave-200
#bbe8fb
color-border-information-subtle-hover
themeVars.color['border-information-subtle-hover']
palette-blue_wave-300
#8bd0f9

Border Success

Success border color tokens
NameUnderlying Value
color-border-success
themeVars.color['border-success']
palette-green_verdant-700
#078031
color-border-success-disabled
themeVars.color['border-success-disabled']
palette-green_verdant-300
#81fa8b
color-border-success-hover
themeVars.color['border-success-hover']
palette-green_verdant-800
#04481c
color-border-success-minimal
themeVars.color['border-success-minimal']
palette-green_verdant-050
#d1ffd2
color-border-success-subtle
themeVars.color['border-success-subtle']
palette-green_verdant-200
#abffae
color-border-success-subtle-hover
themeVars.color['border-success-subtle-hover']
palette-green_verdant-300
#81fa8b

Text

Text base

Text color tokens
NameUnderlying Value
color-text-active
themeVars.color['text-active']
palette-grey_charcoal-black
#000000
color-text-base
themeVars.color['text-base']
palette-grey_charcoal-800
#212121
color-text-base-disabled
themeVars.color['text-base-disabled']
palette-grey_charcoal-300
#ababab
color-text-base-hover
themeVars.color['text-base-hover']
palette-grey_charcoal-600
#474747
color-text-black
themeVars.color['text-black']
palette-grey_charcoal-black
#000000
color-text-bold
themeVars.color['text-bold']
palette-grey_charcoal-black
#000000
color-text-bold-hover
themeVars.color['text-bold-hover']
palette-grey_charcoal-800
#212121
color-text-code
themeVars.color['text-code']
palette-pink_blush-700
#700042
color-text-invert
themeVars.color['text-invert']
palette-grey_charcoal-white
#ffffff
color-text-minimal
themeVars.color['text-minimal']
palette-grey_charcoal-200
#cccccc
color-text-placeholder
themeVars.color['text-placeholder']
palette-grey_charcoal-400
#8a8a8a
color-text-subtle
themeVars.color['text-subtle']
palette-grey_charcoal-500
#666666
color-text-white
themeVars.color['text-white']
palette-grey_charcoal-white
#ffffff

Text on surfaces

The text color to use when text sits on the matching surface token. Most of these resolve to white, so they are shown on their paired surface rather than as a flat swatch.

Text on surfaces color tokens
NamePaired surfaceUnderlying Value
Aa
color-text-on-accent
themeVars.color['text-on-accent']
color-surface-accentcolor-text-white
#ffffff
Aa
color-text-on-bold
themeVars.color['text-on-bold']
color-surface-boldcolor-text-black
#000000
Aa
color-text-on-caution
themeVars.color['text-on-caution']
color-surface-cautioncolor-text-bold
#000000
Aa
color-text-on-caution-bold
themeVars.color['text-on-caution-bold']
color-surface-caution-boldcolor-text-black
#000000
Aa
color-text-on-critical
themeVars.color['text-on-critical']
color-surface-criticalcolor-text-white
#ffffff
Aa
color-text-on-critical-bold
themeVars.color['text-on-critical-bold']
color-surface-critical-boldcolor-text-white
#ffffff
Aa
color-text-on-information
themeVars.color['text-on-information']
color-surface-informationcolor-text-invert
#ffffff
Aa
color-text-on-information-bold
themeVars.color['text-on-information-bold']
color-surface-information-boldcolor-text-white
#ffffff
Aa
color-text-on-invert
themeVars.color['text-on-invert']
color-surface-invertcolor-text-white
#ffffff
Aa
color-text-on-invert-bold
themeVars.color['text-on-invert-bold']
color-surface-invert-boldcolor-text-white
#ffffff
Aa
color-text-on-invert-subtle
themeVars.color['text-on-invert-subtle']
color-surface-invert-subtlecolor-text-white
#ffffff
Aa
color-text-on-navigation
themeVars.color['text-on-navigation']
color-navigation-backgroundcolor-text-black
#000000
Aa
color-text-on-overlay
themeVars.color['text-on-overlay']
color-surface-overlaycolor-text-base
#212121
Aa
color-text-on-success
themeVars.color['text-on-success']
color-surface-successcolor-text-white
#ffffff
Aa
color-text-on-success-bold
themeVars.color['text-on-success-bold']
color-surface-success-boldcolor-text-white
#ffffff

Text Accent

Accent text color tokens
NameUnderlying Value
color-text-accent
themeVars.color['text-accent']
palette-teal_spruce-400
#1e7b87
color-text-accent-bold
themeVars.color['text-accent-bold']
palette-teal_spruce-800
#08272b
color-text-accent-disabled
themeVars.color['text-accent-disabled']
palette-teal_spruce-300
#2f9aa7
color-text-accent-hover
themeVars.color['text-accent-hover']
palette-teal_spruce-500
#135e67
color-text-accent-invert-disabled
themeVars.color['text-accent-invert-disabled']
palette-grey_charcoal-white
#ffffff

Text Caution

Caution text color tokens
NameUnderlying Value
color-text-caution
themeVars.color['text-caution']
palette-yellow_mustard-600
#bd8a00
color-text-caution-bold
themeVars.color['text-caution-bold']
palette-yellow_mustard-700
#856200
color-text-caution-disabled
themeVars.color['text-caution-disabled']
palette-yellow_mustard-200
#fbeabb
color-text-caution-hover
themeVars.color['text-caution-hover']
palette-yellow_mustard-700
#856200
color-text-caution-subtle
themeVars.color['text-caution-subtle']
palette-yellow_mustard-500
#f2b50d

Text Critical

Critical text color tokens
NameUnderlying Value
color-text-critical
themeVars.color['text-critical']
palette-red_flame-400
#e43a3f
color-text-critical-bold
themeVars.color['text-critical-bold']
palette-red_flame-700
#700013
color-text-critical-disabled
themeVars.color['text-critical-disabled']
palette-red_flame-200
#ff9fa1
color-text-critical-hover
themeVars.color['text-critical-hover']
palette-red_flame-600
#99001a
color-text-critical-invert-disabled
themeVars.color['text-critical-invert-disabled']
palette-red_flame-100
#fccacb
color-text-critical-subtle
themeVars.color['text-critical-subtle']
palette-red_flame-300
#e95e62

Text Information

Information text color tokens
NameUnderlying Value
color-text-information
themeVars.color['text-information']
palette-blue_wave-500
#1d66f3
color-text-information-bold
themeVars.color['text-information-bold']
palette-blue_wave-800
#002470
color-text-information-disabled
themeVars.color['text-information-disabled']
palette-blue_wave-200
#bbe8fb
color-text-information-hover
themeVars.color['text-information-hover']
palette-blue_wave-700
#0039a6
color-text-information-subtle
themeVars.color['text-information-subtle']
palette-blue_wave-400
#47a4f5

Text Success

Success text color tokens
NameUnderlying Value
color-text-success
themeVars.color['text-success']
palette-green_verdant-700
#078031
color-text-success-bold
themeVars.color['text-success-bold']
palette-green_verdant-800
#04481c
color-text-success-disabled
themeVars.color['text-success-disabled']
palette-green_verdant-200
#abffae
color-text-success-hover
themeVars.color['text-success-hover']
palette-green_verdant-800
#04481c
color-text-success-subtle
themeVars.color['text-success-subtle']
palette-green_verdant-600
#00ab3f

Background

Background color tokens
NameUnderlying Value
color-background-default
themeVars.color['background-default']
palette-grey_charcoal-white
#ffffff

Icon

Icon color tokens
NameUnderlying Value
color-icon-accent
themeVars.color['icon-accent']
palette-teal_spruce-400
#1e7b87
color-icon-accent-disabled
themeVars.color['icon-accent-disabled']
palette-grey_charcoal-300
#ababab
color-icon-accent-hover
themeVars.color['icon-accent-hover']
palette-teal_spruce-500
#135e67
color-icon-accent-invert-disabled
themeVars.color['icon-accent-invert-disabled']
palette-pink_blush-050
#fff5fb
color-icon-base
themeVars.color['icon-base']
palette-grey_charcoal-800
#212121
color-icon-base-disabled
themeVars.color['icon-base-disabled']
palette-grey_charcoal-300
#ababab
color-icon-base-hover
themeVars.color['icon-base-hover']
palette-grey_charcoal-900
#151515
color-icon-bold
themeVars.color['icon-bold']
palette-grey_charcoal-black
#000000
color-icon-button
themeVars.color['icon-button']
palette-grey_charcoal-800
#212121
color-icon-caution
themeVars.color['icon-caution']
palette-yellow_mustard-600
#bd8a00
color-icon-caution-disabled
themeVars.color['icon-caution-disabled']
palette-yellow_mustard-200
#fbeabb
color-icon-critical
themeVars.color['icon-critical']
palette-red_flame-400
#e43a3f
color-icon-critical-disabled
themeVars.color['icon-critical-disabled']
palette-red_flame-200
#ff9fa1
color-icon-critical-hover
themeVars.color['icon-critical-hover']
palette-red_flame-600
#99001a
color-icon-critical-invert-disabled
themeVars.color['icon-critical-invert-disabled']
palette-red_flame-050
#fff0f0
color-icon-feature
themeVars.color['icon-feature']
palette-purple_nova-500
#7129ff
color-icon-feature-disabled
themeVars.color['icon-feature-disabled']
palette-purple_nova-300
#a38bf9
color-icon-information
themeVars.color['icon-information']
palette-blue_wave-600
#004dd6
color-icon-information-disabled
themeVars.color['icon-information-disabled']
palette-blue_wave-300
#8bd0f9
color-icon-invert
themeVars.color['icon-invert']
palette-grey_charcoal-white
#ffffff
color-icon-minimal
themeVars.color['icon-minimal']
palette-grey_charcoal-050
#ededed
color-icon-navigation
themeVars.color['icon-navigation']
palette-grey_charcoal-600
#474747
color-icon-subtle
themeVars.color['icon-subtle']
palette-grey_charcoal-400
#8a8a8a
color-icon-success
themeVars.color['icon-success']
palette-green_verdant-600
#00ab3f
color-icon-success-disabled
themeVars.color['icon-success-disabled']
palette-green_verdant-100
#c2ffc3
color-icon-white
themeVars.color['icon-white']
palette-grey_charcoal-white
#ffffff

Additional colors

AI

AI color tokens
NameUnderlying Value
color-ai-fill-stop-01
themeVars.color['ai-fill-stop-01']
palette-purple_nova-100
#ece7fe
color-ai-fill-stop-02
themeVars.color['ai-fill-stop-02']
palette-orange_zest-100
#fde2d3
color-ai-fill-surface
themeVars.color['ai-fill-surface']
color-surface-base
#ffffff
color-ai-ring-fade
themeVars.color['ai-ring-fade']
transparent
color-ai-ring-gap
themeVars.color['ai-ring-gap']
transparent
color-ai-ring-stop-01
themeVars.color['ai-ring-stop-01']
palette-grey_charcoal-050
#ededed
color-ai-ring-stop-02
themeVars.color['ai-ring-stop-02']
palette-orange_zest-300
#f8aa7d
color-ai-ring-stop-03
themeVars.color['ai-ring-stop-03']
palette-purple_nova-300
#a38bf9

Backdrop

Backdrop color tokens
NameUnderlying Value
color-backdrop-base
themeVars.color['backdrop-base']
palette-grey-black
#000000

Banner

Banner color tokens
NameUnderlying Value
color-banner-caution-background
themeVars.color['banner-caution-background']
color-banner-warning-background
#fdf2d3
color-banner-caution-border
themeVars.color['banner-caution-border']
palette-yellow_mustard-300
#f9dc8b
color-banner-default-background
themeVars.color['banner-default-background']
palette-grey_charcoal-050
#ededed
color-banner-default-border
themeVars.color['banner-default-border']
palette-grey_charcoal-200
#cccccc
color-banner-error-background
themeVars.color['banner-error-background']
palette-red_flame-050
#fff0f0
color-banner-error-border
themeVars.color['banner-error-border']
palette-red_flame-300
#e95e62
color-banner-feature-background
themeVars.color['banner-feature-background']
palette-purple_nova-050
#f6f4ff
color-banner-feature-border
themeVars.color['banner-feature-border']
palette-purple_nova-400
#7451f6
color-banner-information-background
themeVars.color['banner-information-background']
palette-blue_wave-100
#d8f3fd
color-banner-information-border
themeVars.color['banner-information-border']
palette-blue_wave-200
#bbe8fb
color-banner-success-background
themeVars.color['banner-success-background']
palette-green_verdant-025
#e0ffe1
color-banner-success-border
themeVars.color['banner-success-border']
palette-green_verdant-300
#81fa8b
color-banner-warning-background
themeVars.color['banner-warning-background']
palette-yellow_mustard-100
#fdf2d3

Button

Button color tokens
NameUnderlying Value
color-button-surface-invert
themeVars.color['button-surface-invert']
color-surface-invert
#0b363b
color-button-surface-invert-hover
themeVars.color['button-surface-invert-hover']
color-surface-invert-hover
#0f4a52

Chart

Deprecated. Use the Data visualization color tokens (the color-data-viz-* group, documented under Data visualization > Colors). The chart tokens keep working unchanged and will be removed in a future major version.

Chart color tokens
NameUnderlying Value
color-chart-base-1
themeVars.color['chart-base-1']
palette-teal_spruce-600
#0f4a52
color-chart-base-2
themeVars.color['chart-base-2']
palette-teal_spruce-500
#135e67
color-chart-base-3
themeVars.color['chart-base-3']
palette-teal_spruce-400
#1e7b87
color-chart-base-4
themeVars.color['chart-base-4']
palette-teal_spruce-300
#2f9aa7
color-chart-positive-1
themeVars.color['chart-positive-1']
palette-green_verdant-800
#04481c
color-chart-positive-2
themeVars.color['chart-positive-2']
palette-green_verdant-700
#078031
color-chart-positive-3
themeVars.color['chart-positive-3']
palette-green_verdant-600
#00ab3f
color-chart-positive-4
themeVars.color['chart-positive-4']
palette-green_verdant-500
#0bd552
color-chart-secondary-1
themeVars.color['chart-secondary-1']
palette-grey_charcoal-700
#333333
color-chart-secondary-2
themeVars.color['chart-secondary-2']
palette-grey_charcoal-600
#474747
color-chart-secondary-3
themeVars.color['chart-secondary-3']
palette-grey_charcoal-500
#666666
color-chart-secondary-4
themeVars.color['chart-secondary-4']
palette-grey_charcoal-400
#8a8a8a

Data visualization

Data visualization color tokens
NameUnderlying Value
color-data-viz-categorical-1
themeVars.color['data-viz-categorical-1']
palette-teal_spruce-300
#2f9aa7
color-data-viz-categorical-1-hover
themeVars.color['data-viz-categorical-1-hover']
palette-teal_spruce-400
#1e7b87
color-data-viz-categorical-10
themeVars.color['data-viz-categorical-10']
palette-grey_charcoal-400
#8a8a8a
color-data-viz-categorical-10-hover
themeVars.color['data-viz-categorical-10-hover']
palette-grey_charcoal-500
#666666
color-data-viz-categorical-2
themeVars.color['data-viz-categorical-2']
palette-orange_zest-500
#f36a1b
color-data-viz-categorical-2-hover
themeVars.color['data-viz-categorical-2-hover']
palette-orange_zest-600
#d24d00
color-data-viz-categorical-3
themeVars.color['data-viz-categorical-3']
palette-blue_wave-450
#207ef5
color-data-viz-categorical-3-hover
themeVars.color['data-viz-categorical-3-hover']
palette-blue_wave-500
#1d66f3
color-data-viz-categorical-4
themeVars.color['data-viz-categorical-4']
palette-pink_blush-400
#f651b4
color-data-viz-categorical-4-hover
themeVars.color['data-viz-categorical-4-hover']
palette-pink_blush-500
#bc0a74
color-data-viz-categorical-5
themeVars.color['data-viz-categorical-5']
palette-yellow_mustard-500
#f2b50d
color-data-viz-categorical-5-hover
themeVars.color['data-viz-categorical-5-hover']
palette-yellow_mustard-525
#e5ab0a
color-data-viz-categorical-6
themeVars.color['data-viz-categorical-6']
palette-purple_nova-350
#8567f7
color-data-viz-categorical-6-hover
themeVars.color['data-viz-categorical-6-hover']
palette-purple_nova-400
#7451f6
color-data-viz-categorical-7
themeVars.color['data-viz-categorical-7']
palette-green_verdant-600
#00ab3f
color-data-viz-categorical-7-hover
themeVars.color['data-viz-categorical-7-hover']
palette-green_verdant-700
#078031
color-data-viz-categorical-8
themeVars.color['data-viz-categorical-8']
palette-plum-400
#c497ff
color-data-viz-categorical-8-hover
themeVars.color['data-viz-categorical-8-hover']
palette-plum-500
#af64ff
color-data-viz-categorical-9
themeVars.color['data-viz-categorical-9']
palette-red_flame-300
#e95e62
color-data-viz-categorical-9-hover
themeVars.color['data-viz-categorical-9-hover']
palette-red_flame-400
#e43a3f
color-data-viz-diverging-cool-1
themeVars.color['data-viz-diverging-cool-1']
palette-teal_spruce-500
#135e67
color-data-viz-diverging-cool-1-hover
themeVars.color['data-viz-diverging-cool-1-hover']
palette-teal_spruce-600
#0f4a52
color-data-viz-diverging-cool-10
themeVars.color['data-viz-diverging-cool-10']
palette-purple_nova-600
#4b00e2
color-data-viz-diverging-cool-10-hover
themeVars.color['data-viz-diverging-cool-10-hover']
palette-purple_nova-700
#3900ab
color-data-viz-diverging-cool-11
themeVars.color['data-viz-diverging-cool-11']
palette-purple_nova-700
#3900ab
color-data-viz-diverging-cool-11-hover
themeVars.color['data-viz-diverging-cool-11-hover']
palette-purple_nova-800
#1f005c
color-data-viz-diverging-cool-2
themeVars.color['data-viz-diverging-cool-2']
palette-teal_spruce-400
#1e7b87
color-data-viz-diverging-cool-2-hover
themeVars.color['data-viz-diverging-cool-2-hover']
palette-teal_spruce-500
#135e67
color-data-viz-diverging-cool-3
themeVars.color['data-viz-diverging-cool-3']
palette-teal_spruce-300
#2f9aa7
color-data-viz-diverging-cool-3-hover
themeVars.color['data-viz-diverging-cool-3-hover']
palette-teal_spruce-400
#1e7b87
color-data-viz-diverging-cool-4
themeVars.color['data-viz-diverging-cool-4']
palette-teal_spruce-200
#67b8c0
color-data-viz-diverging-cool-4-hover
themeVars.color['data-viz-diverging-cool-4-hover']
palette-teal_spruce-300
#2f9aa7
color-data-viz-diverging-cool-5
themeVars.color['data-viz-diverging-cool-5']
palette-teal_spruce-100
#91cfd4
color-data-viz-diverging-cool-5-hover
themeVars.color['data-viz-diverging-cool-5-hover']
palette-teal_spruce-200
#67b8c0
color-data-viz-diverging-cool-6
themeVars.color['data-viz-diverging-cool-6']
palette-blue_wave-100
#d8f3fd
color-data-viz-diverging-cool-6-hover
themeVars.color['data-viz-diverging-cool-6-hover']
palette-blue_wave-200
#bbe8fb
color-data-viz-diverging-cool-7
themeVars.color['data-viz-diverging-cool-7']
palette-purple_nova-200
#c9bbfb
color-data-viz-diverging-cool-7-hover
themeVars.color['data-viz-diverging-cool-7-hover']
palette-purple_nova-300
#a38bf9
color-data-viz-diverging-cool-8
themeVars.color['data-viz-diverging-cool-8']
palette-purple_nova-300
#a38bf9
color-data-viz-diverging-cool-8-hover
themeVars.color['data-viz-diverging-cool-8-hover']
palette-purple_nova-400
#7451f6
color-data-viz-diverging-cool-9
themeVars.color['data-viz-diverging-cool-9']
palette-purple_nova-400
#7451f6
color-data-viz-diverging-cool-9-hover
themeVars.color['data-viz-diverging-cool-9-hover']
palette-purple_nova-500
#7129ff
color-data-viz-diverging-neutral-1
themeVars.color['data-viz-diverging-neutral-1']
palette-orange_zest-700
#973800
color-data-viz-diverging-neutral-1-hover
themeVars.color['data-viz-diverging-neutral-1-hover']
palette-orange_zest-800
#5d2200
color-data-viz-diverging-neutral-10
themeVars.color['data-viz-diverging-neutral-10']
palette-purple_nova-600
#4b00e2
color-data-viz-diverging-neutral-10-hover
themeVars.color['data-viz-diverging-neutral-10-hover']
palette-purple_nova-700
#3900ab
color-data-viz-diverging-neutral-11
themeVars.color['data-viz-diverging-neutral-11']
palette-purple_nova-700
#3900ab
color-data-viz-diverging-neutral-11-hover
themeVars.color['data-viz-diverging-neutral-11-hover']
palette-purple_nova-800
#1f005c
color-data-viz-diverging-neutral-2
themeVars.color['data-viz-diverging-neutral-2']
palette-orange_zest-600
#d24d00
color-data-viz-diverging-neutral-2-hover
themeVars.color['data-viz-diverging-neutral-2-hover']
palette-orange_zest-700
#973800
color-data-viz-diverging-neutral-3
themeVars.color['data-viz-diverging-neutral-3']
palette-orange_zest-500
#f36a1b
color-data-viz-diverging-neutral-3-hover
themeVars.color['data-viz-diverging-neutral-3-hover']
palette-orange_zest-600
#d24d00
color-data-viz-diverging-neutral-4
themeVars.color['data-viz-diverging-neutral-4']
palette-orange_zest-400
#f58747
color-data-viz-diverging-neutral-4-hover
themeVars.color['data-viz-diverging-neutral-4-hover']
palette-orange_zest-500
#f36a1b
color-data-viz-diverging-neutral-5
themeVars.color['data-viz-diverging-neutral-5']
palette-orange_zest-300
#f8aa7d
color-data-viz-diverging-neutral-5-hover
themeVars.color['data-viz-diverging-neutral-5-hover']
palette-orange_zest-400
#f58747
color-data-viz-diverging-neutral-6
themeVars.color['data-viz-diverging-neutral-6']
palette-pink_blush-050
#fff5fb
color-data-viz-diverging-neutral-6-hover
themeVars.color['data-viz-diverging-neutral-6-hover']
palette-pink_blush-100
#fde2f2
color-data-viz-diverging-neutral-7
themeVars.color['data-viz-diverging-neutral-7']
palette-purple_nova-200
#c9bbfb
color-data-viz-diverging-neutral-7-hover
themeVars.color['data-viz-diverging-neutral-7-hover']
palette-purple_nova-300
#a38bf9
color-data-viz-diverging-neutral-8
themeVars.color['data-viz-diverging-neutral-8']
palette-purple_nova-300
#a38bf9
color-data-viz-diverging-neutral-8-hover
themeVars.color['data-viz-diverging-neutral-8-hover']
palette-purple_nova-400
#7451f6
color-data-viz-diverging-neutral-9
themeVars.color['data-viz-diverging-neutral-9']
palette-purple_nova-400
#7451f6
color-data-viz-diverging-neutral-9-hover
themeVars.color['data-viz-diverging-neutral-9-hover']
palette-purple_nova-500
#7129ff
color-data-viz-diverging-temperature-1
themeVars.color['data-viz-diverging-temperature-1']
palette-red_flame-700
#700013
color-data-viz-diverging-temperature-1-hover
themeVars.color['data-viz-diverging-temperature-1-hover']
palette-red_flame-800
#47000c
color-data-viz-diverging-temperature-10
themeVars.color['data-viz-diverging-temperature-10']
palette-blue_wave-600
#004dd6
color-data-viz-diverging-temperature-10-hover
themeVars.color['data-viz-diverging-temperature-10-hover']
palette-blue_wave-700
#0039a6
color-data-viz-diverging-temperature-11
themeVars.color['data-viz-diverging-temperature-11']
palette-blue_wave-700
#0039a6
color-data-viz-diverging-temperature-11-hover
themeVars.color['data-viz-diverging-temperature-11-hover']
palette-blue_wave-800
#002470
color-data-viz-diverging-temperature-2
themeVars.color['data-viz-diverging-temperature-2']
palette-red_flame-600
#99001a
color-data-viz-diverging-temperature-2-hover
themeVars.color['data-viz-diverging-temperature-2-hover']
palette-red_flame-700
#700013
color-data-viz-diverging-temperature-3
themeVars.color['data-viz-diverging-temperature-3']
palette-red_flame-500
#c50122
color-data-viz-diverging-temperature-3-hover
themeVars.color['data-viz-diverging-temperature-3-hover']
palette-red_flame-600
#99001a
color-data-viz-diverging-temperature-4
themeVars.color['data-viz-diverging-temperature-4']
palette-red_flame-300
#e95e62
color-data-viz-diverging-temperature-4-hover
themeVars.color['data-viz-diverging-temperature-4-hover']
palette-red_flame-400
#e43a3f
color-data-viz-diverging-temperature-5
themeVars.color['data-viz-diverging-temperature-5']
palette-red_flame-200
#ff9fa1
color-data-viz-diverging-temperature-5-hover
themeVars.color['data-viz-diverging-temperature-5-hover']
palette-red_flame-300
#e95e62
color-data-viz-diverging-temperature-6
themeVars.color['data-viz-diverging-temperature-6']
palette-yellow_mustard-100
#fdf2d3
color-data-viz-diverging-temperature-6-hover
themeVars.color['data-viz-diverging-temperature-6-hover']
palette-yellow_mustard-200
#fbeabb
color-data-viz-diverging-temperature-7
themeVars.color['data-viz-diverging-temperature-7']
palette-blue_wave-300
#8bd0f9
color-data-viz-diverging-temperature-7-hover
themeVars.color['data-viz-diverging-temperature-7-hover']
palette-blue_wave-400
#47a4f5
color-data-viz-diverging-temperature-8
themeVars.color['data-viz-diverging-temperature-8']
palette-blue_wave-400
#47a4f5
color-data-viz-diverging-temperature-8-hover
themeVars.color['data-viz-diverging-temperature-8-hover']
palette-blue_wave-500
#1d66f3
color-data-viz-diverging-temperature-9
themeVars.color['data-viz-diverging-temperature-9']
palette-blue_wave-500
#1d66f3
color-data-viz-diverging-temperature-9-hover
themeVars.color['data-viz-diverging-temperature-9-hover']
palette-blue_wave-600
#004dd6
color-data-viz-semantic-caution-1
themeVars.color['data-viz-semantic-caution-1']
color-data-viz-sequential-yellow-1
#f9dc8b
color-data-viz-semantic-caution-1-hover
themeVars.color['data-viz-semantic-caution-1-hover']
color-data-viz-sequential-yellow-1-hover
#f6ca51
color-data-viz-semantic-caution-2
themeVars.color['data-viz-semantic-caution-2']
color-data-viz-sequential-yellow-2
#f6ca51
color-data-viz-semantic-caution-2-hover
themeVars.color['data-viz-semantic-caution-2-hover']
color-data-viz-sequential-yellow-2-hover
#f2b50d
color-data-viz-semantic-caution-3
themeVars.color['data-viz-semantic-caution-3']
color-data-viz-sequential-yellow-3
#f2b50d
color-data-viz-semantic-caution-3-hover
themeVars.color['data-viz-semantic-caution-3-hover']
color-data-viz-sequential-yellow-3-hover
#e5ab0a
color-data-viz-semantic-caution-4
themeVars.color['data-viz-semantic-caution-4']
color-data-viz-sequential-yellow-4
#d79f06
color-data-viz-semantic-caution-4-hover
themeVars.color['data-viz-semantic-caution-4-hover']
color-data-viz-sequential-yellow-4-hover
#bd8a00
color-data-viz-semantic-caution-5
themeVars.color['data-viz-semantic-caution-5']
color-data-viz-sequential-yellow-5
#bd8a00
color-data-viz-semantic-caution-5-hover
themeVars.color['data-viz-semantic-caution-5-hover']
color-data-viz-sequential-yellow-5-hover
#a07600
color-data-viz-semantic-caution-6
themeVars.color['data-viz-semantic-caution-6']
color-data-viz-sequential-yellow-6
#856200
color-data-viz-semantic-caution-6-hover
themeVars.color['data-viz-semantic-caution-6-hover']
color-data-viz-sequential-yellow-6-hover
#4d3800
color-data-viz-semantic-caution-7
themeVars.color['data-viz-semantic-caution-7']
color-data-viz-sequential-yellow-7
#4d3800
color-data-viz-semantic-caution-7-hover
themeVars.color['data-viz-semantic-caution-7-hover']
color-data-viz-sequential-yellow-7-hover
#241a00
color-data-viz-semantic-critical-1
themeVars.color['data-viz-semantic-critical-1']
color-data-viz-sequential-red-1
#feddde
color-data-viz-semantic-critical-1-hover
themeVars.color['data-viz-semantic-critical-1-hover']
color-data-viz-sequential-red-1-hover
#fccacb
color-data-viz-semantic-critical-2
themeVars.color['data-viz-semantic-critical-2']
color-data-viz-sequential-red-2
#ff9fa1
color-data-viz-semantic-critical-2-hover
themeVars.color['data-viz-semantic-critical-2-hover']
color-data-viz-sequential-red-2-hover
#f58184
color-data-viz-semantic-critical-3
themeVars.color['data-viz-semantic-critical-3']
color-data-viz-sequential-red-3
#e95e62
color-data-viz-semantic-critical-3-hover
themeVars.color['data-viz-semantic-critical-3-hover']
color-data-viz-sequential-red-3-hover
#e43a3f
color-data-viz-semantic-critical-4
themeVars.color['data-viz-semantic-critical-4']
color-data-viz-sequential-red-4
#e43a3f
color-data-viz-semantic-critical-4-hover
themeVars.color['data-viz-semantic-critical-4-hover']
color-data-viz-sequential-red-4-hover
#c50122
color-data-viz-semantic-critical-5
themeVars.color['data-viz-semantic-critical-5']
color-data-viz-sequential-red-5
#c50122
color-data-viz-semantic-critical-5-hover
themeVars.color['data-viz-semantic-critical-5-hover']
color-data-viz-sequential-red-5-hover
#99001a
color-data-viz-semantic-critical-6
themeVars.color['data-viz-semantic-critical-6']
color-data-viz-sequential-red-6
#700013
color-data-viz-semantic-critical-6-hover
themeVars.color['data-viz-semantic-critical-6-hover']
color-data-viz-sequential-red-6-hover
#47000c
color-data-viz-semantic-critical-7
themeVars.color['data-viz-semantic-critical-7']
color-data-viz-sequential-red-7
#47000c
color-data-viz-semantic-critical-7-hover
themeVars.color['data-viz-semantic-critical-7-hover']
color-data-viz-sequential-red-7-hover
#2e0008
color-data-viz-semantic-information-1
themeVars.color['data-viz-semantic-information-1']
color-data-viz-sequential-blue-1
#bbe8fb
color-data-viz-semantic-information-1-hover
themeVars.color['data-viz-semantic-information-1-hover']
color-data-viz-sequential-blue-1-hover
#a3dcfa
color-data-viz-semantic-information-2
themeVars.color['data-viz-semantic-information-2']
color-data-viz-sequential-blue-2
#68bcf7
color-data-viz-semantic-information-2-hover
themeVars.color['data-viz-semantic-information-2-hover']
color-data-viz-sequential-blue-2-hover
#47a4f5
color-data-viz-semantic-information-3
themeVars.color['data-viz-semantic-information-3']
color-data-viz-sequential-blue-3
#207ef5
color-data-viz-semantic-information-3-hover
themeVars.color['data-viz-semantic-information-3-hover']
color-data-viz-sequential-blue-3-hover
#1d66f3
color-data-viz-semantic-information-4
themeVars.color['data-viz-semantic-information-4']
color-data-viz-sequential-blue-4
#1d66f3
color-data-viz-semantic-information-4-hover
themeVars.color['data-viz-semantic-information-4-hover']
color-data-viz-sequential-blue-4-hover
#004dd6
color-data-viz-semantic-information-5
themeVars.color['data-viz-semantic-information-5']
color-data-viz-sequential-blue-5
#004dd6
color-data-viz-semantic-information-5-hover
themeVars.color['data-viz-semantic-information-5-hover']
color-data-viz-sequential-blue-5-hover
#0039a6
color-data-viz-semantic-information-6
themeVars.color['data-viz-semantic-information-6']
color-data-viz-sequential-blue-6
#0039a6
color-data-viz-semantic-information-6-hover
themeVars.color['data-viz-semantic-information-6-hover']
color-data-viz-sequential-blue-6-hover
#002470
color-data-viz-semantic-information-7
themeVars.color['data-viz-semantic-information-7']
color-data-viz-sequential-blue-7
#002470
color-data-viz-semantic-information-7-hover
themeVars.color['data-viz-semantic-information-7-hover']
color-data-viz-sequential-blue-7-hover
#000f38
color-data-viz-semantic-neutral-1
themeVars.color['data-viz-semantic-neutral-1']
color-data-viz-sequential-grey-1
#e0e0e0
color-data-viz-semantic-neutral-1-hover
themeVars.color['data-viz-semantic-neutral-1-hover']
color-data-viz-sequential-grey-1-hover
#cccccc
color-data-viz-semantic-neutral-2
themeVars.color['data-viz-semantic-neutral-2']
color-data-viz-sequential-grey-2
#bcbcbc
color-data-viz-semantic-neutral-2-hover
themeVars.color['data-viz-semantic-neutral-2-hover']
color-data-viz-sequential-grey-2-hover
#ababab
color-data-viz-semantic-neutral-3
themeVars.color['data-viz-semantic-neutral-3']
color-data-viz-sequential-grey-3
#8a8a8a
color-data-viz-semantic-neutral-3-hover
themeVars.color['data-viz-semantic-neutral-3-hover']
color-data-viz-sequential-grey-3-hover
#666666
color-data-viz-semantic-neutral-4
themeVars.color['data-viz-semantic-neutral-4']
color-data-viz-sequential-grey-4
#666666
color-data-viz-semantic-neutral-4-hover
themeVars.color['data-viz-semantic-neutral-4-hover']
color-data-viz-sequential-grey-4-hover
#474747
color-data-viz-semantic-neutral-5
themeVars.color['data-viz-semantic-neutral-5']
color-data-viz-sequential-grey-5
#474747
color-data-viz-semantic-neutral-5-hover
themeVars.color['data-viz-semantic-neutral-5-hover']
color-data-viz-sequential-grey-5-hover
#3d3d3d
color-data-viz-semantic-neutral-6
themeVars.color['data-viz-semantic-neutral-6']
color-data-viz-sequential-grey-6
#3d3d3d
color-data-viz-semantic-neutral-6-hover
themeVars.color['data-viz-semantic-neutral-6-hover']
color-data-viz-sequential-grey-6-hover
#333333
color-data-viz-semantic-neutral-7
themeVars.color['data-viz-semantic-neutral-7']
color-data-viz-sequential-grey-7
#212121
color-data-viz-semantic-neutral-7-hover
themeVars.color['data-viz-semantic-neutral-7-hover']
color-data-viz-sequential-grey-7-hover
#1a1a1a
color-data-viz-semantic-success-1
themeVars.color['data-viz-semantic-success-1']
color-data-viz-sequential-green-1
#81fa8b
color-data-viz-semantic-success-1-hover
themeVars.color['data-viz-semantic-success-1-hover']
color-data-viz-sequential-green-1-hover
#4fec6c
color-data-viz-semantic-success-2
themeVars.color['data-viz-semantic-success-2']
color-data-viz-sequential-green-2
#0bd552
color-data-viz-semantic-success-2-hover
themeVars.color['data-viz-semantic-success-2-hover']
color-data-viz-sequential-green-2-hover
#0ac44b
color-data-viz-semantic-success-3
themeVars.color['data-viz-semantic-success-3']
color-data-viz-sequential-green-3
#00ab3f
color-data-viz-semantic-success-3-hover
themeVars.color['data-viz-semantic-success-3-hover']
color-data-viz-sequential-green-3-hover
#078031
color-data-viz-semantic-success-4
themeVars.color['data-viz-semantic-success-4']
color-data-viz-sequential-green-4
#078031
color-data-viz-semantic-success-4-hover
themeVars.color['data-viz-semantic-success-4-hover']
color-data-viz-sequential-green-4-hover
#04481c
color-data-viz-semantic-success-5
themeVars.color['data-viz-semantic-success-5']
color-data-viz-sequential-green-5
#04481c
color-data-viz-semantic-success-5-hover
themeVars.color['data-viz-semantic-success-5-hover']
color-data-viz-sequential-green-5-hover
#033314
color-data-viz-semantic-success-6
themeVars.color['data-viz-semantic-success-6']
color-data-viz-sequential-green-6
#033314
color-data-viz-semantic-success-6-hover
themeVars.color['data-viz-semantic-success-6-hover']
color-data-viz-sequential-green-6-hover
#021d0b
color-data-viz-semantic-success-7
themeVars.color['data-viz-semantic-success-7']
color-data-viz-sequential-green-7
#021d0b
color-data-viz-semantic-success-7-hover
themeVars.color['data-viz-semantic-success-7-hover']
color-data-viz-sequential-green-7-hover
#000602
color-data-viz-sequential-blue-1
themeVars.color['data-viz-sequential-blue-1']
palette-blue_wave-200
#bbe8fb
color-data-viz-sequential-blue-1-hover
themeVars.color['data-viz-sequential-blue-1-hover']
palette-blue_wave-250
#a3dcfa
color-data-viz-sequential-blue-2
themeVars.color['data-viz-sequential-blue-2']
palette-blue_wave-350
#68bcf7
color-data-viz-sequential-blue-2-hover
themeVars.color['data-viz-sequential-blue-2-hover']
palette-blue_wave-400
#47a4f5
color-data-viz-sequential-blue-3
themeVars.color['data-viz-sequential-blue-3']
palette-blue_wave-450
#207ef5
color-data-viz-sequential-blue-3-hover
themeVars.color['data-viz-sequential-blue-3-hover']
palette-blue_wave-500
#1d66f3
color-data-viz-sequential-blue-4
themeVars.color['data-viz-sequential-blue-4']
palette-blue_wave-500
#1d66f3
color-data-viz-sequential-blue-4-hover
themeVars.color['data-viz-sequential-blue-4-hover']
palette-blue_wave-600
#004dd6
color-data-viz-sequential-blue-5
themeVars.color['data-viz-sequential-blue-5']
palette-blue_wave-600
#004dd6
color-data-viz-sequential-blue-5-hover
themeVars.color['data-viz-sequential-blue-5-hover']
palette-blue_wave-700
#0039a6
color-data-viz-sequential-blue-6
themeVars.color['data-viz-sequential-blue-6']
palette-blue_wave-700
#0039a6
color-data-viz-sequential-blue-6-hover
themeVars.color['data-viz-sequential-blue-6-hover']
palette-blue_wave-800
#002470
color-data-viz-sequential-blue-7
themeVars.color['data-viz-sequential-blue-7']
palette-blue_wave-800
#002470
color-data-viz-sequential-blue-7-hover
themeVars.color['data-viz-sequential-blue-7-hover']
palette-blue_wave-900
#000f38
color-data-viz-sequential-green-1
themeVars.color['data-viz-sequential-green-1']
palette-green_verdant-300
#81fa8b
color-data-viz-sequential-green-1-hover
themeVars.color['data-viz-sequential-green-1-hover']
palette-green_verdant-400
#4fec6c
color-data-viz-sequential-green-2
themeVars.color['data-viz-sequential-green-2']
palette-green_verdant-500
#0bd552
color-data-viz-sequential-green-2-hover
themeVars.color['data-viz-sequential-green-2-hover']
palette-green_verdant-550
#0ac44b
color-data-viz-sequential-green-3
themeVars.color['data-viz-sequential-green-3']
palette-green_verdant-600
#00ab3f
color-data-viz-sequential-green-3-hover
themeVars.color['data-viz-sequential-green-3-hover']
palette-green_verdant-700
#078031
color-data-viz-sequential-green-4
themeVars.color['data-viz-sequential-green-4']
palette-green_verdant-700
#078031
color-data-viz-sequential-green-4-hover
themeVars.color['data-viz-sequential-green-4-hover']
palette-green_verdant-800
#04481c
color-data-viz-sequential-green-5
themeVars.color['data-viz-sequential-green-5']
palette-green_verdant-800
#04481c
color-data-viz-sequential-green-5-hover
themeVars.color['data-viz-sequential-green-5-hover']
palette-green_verdant-850
#033314
color-data-viz-sequential-green-6
themeVars.color['data-viz-sequential-green-6']
palette-green_verdant-850
#033314
color-data-viz-sequential-green-6-hover
themeVars.color['data-viz-sequential-green-6-hover']
palette-green_verdant-900
#021d0b
color-data-viz-sequential-green-7
themeVars.color['data-viz-sequential-green-7']
palette-green_verdant-900
#021d0b
color-data-viz-sequential-green-7-hover
themeVars.color['data-viz-sequential-green-7-hover']
palette-green_verdant-950
#000602
color-data-viz-sequential-grey-1
themeVars.color['data-viz-sequential-grey-1']
palette-grey_charcoal-100
#e0e0e0
color-data-viz-sequential-grey-1-hover
themeVars.color['data-viz-sequential-grey-1-hover']
palette-grey_charcoal-200
#cccccc
color-data-viz-sequential-grey-2
themeVars.color['data-viz-sequential-grey-2']
palette-grey_charcoal-250
#bcbcbc
color-data-viz-sequential-grey-2-hover
themeVars.color['data-viz-sequential-grey-2-hover']
palette-grey_charcoal-300
#ababab
color-data-viz-sequential-grey-3
themeVars.color['data-viz-sequential-grey-3']
palette-grey_charcoal-400
#8a8a8a
color-data-viz-sequential-grey-3-hover
themeVars.color['data-viz-sequential-grey-3-hover']
palette-grey_charcoal-500
#666666
color-data-viz-sequential-grey-4
themeVars.color['data-viz-sequential-grey-4']
palette-grey_charcoal-500
#666666
color-data-viz-sequential-grey-4-hover
themeVars.color['data-viz-sequential-grey-4-hover']
palette-grey_charcoal-600
#474747
color-data-viz-sequential-grey-5
themeVars.color['data-viz-sequential-grey-5']
palette-grey_charcoal-600
#474747
color-data-viz-sequential-grey-5-hover
themeVars.color['data-viz-sequential-grey-5-hover']
palette-grey_charcoal-650
#3d3d3d
color-data-viz-sequential-grey-6
themeVars.color['data-viz-sequential-grey-6']
palette-grey_charcoal-650
#3d3d3d
color-data-viz-sequential-grey-6-hover
themeVars.color['data-viz-sequential-grey-6-hover']
palette-grey_charcoal-700
#333333
color-data-viz-sequential-grey-7
themeVars.color['data-viz-sequential-grey-7']
palette-grey_charcoal-800
#212121
color-data-viz-sequential-grey-7-hover
themeVars.color['data-viz-sequential-grey-7-hover']
palette-grey_charcoal-850
#1a1a1a
color-data-viz-sequential-orange-1
themeVars.color['data-viz-sequential-orange-1']
palette-orange_zest-100
#fde2d3
color-data-viz-sequential-orange-1-hover
themeVars.color['data-viz-sequential-orange-1-hover']
palette-orange_zest-200
#fbcdb2
color-data-viz-sequential-orange-2
themeVars.color['data-viz-sequential-orange-2']
palette-orange_zest-300
#f8aa7d
color-data-viz-sequential-orange-2-hover
themeVars.color['data-viz-sequential-orange-2-hover']
palette-orange_zest-350
#f79963
color-data-viz-sequential-orange-3
themeVars.color['data-viz-sequential-orange-3']
palette-orange_zest-500
#f36a1b
color-data-viz-sequential-orange-3-hover
themeVars.color['data-viz-sequential-orange-3-hover']
palette-orange_zest-600
#d24d00
color-data-viz-sequential-orange-4
themeVars.color['data-viz-sequential-orange-4']
palette-orange_zest-600
#d24d00
color-data-viz-sequential-orange-4-hover
themeVars.color['data-viz-sequential-orange-4-hover']
palette-orange_zest-700
#973800
color-data-viz-sequential-orange-5
themeVars.color['data-viz-sequential-orange-5']
palette-orange_zest-700
#973800
color-data-viz-sequential-orange-5-hover
themeVars.color['data-viz-sequential-orange-5-hover']
palette-orange_zest-800
#5d2200
color-data-viz-sequential-orange-6
themeVars.color['data-viz-sequential-orange-6']
palette-orange_zest-800
#5d2200
color-data-viz-sequential-orange-6-hover
themeVars.color['data-viz-sequential-orange-6-hover']
palette-orange_zest-900
#2e1100
color-data-viz-sequential-orange-7
themeVars.color['data-viz-sequential-orange-7']
palette-orange_zest-900
#2e1100
color-data-viz-sequential-orange-7-hover
themeVars.color['data-viz-sequential-orange-7-hover']
palette-orange_zest-950
#150500
color-data-viz-sequential-pink-1
themeVars.color['data-viz-sequential-pink-1']
palette-pink_blush-150
#fcd0ea
color-data-viz-sequential-pink-1-hover
themeVars.color['data-viz-sequential-pink-1-hover']
palette-pink_blush-200
#fbbbe2
color-data-viz-sequential-pink-2
themeVars.color['data-viz-sequential-pink-2']
palette-pink_blush-250
#faa4d8
color-data-viz-sequential-pink-2-hover
themeVars.color['data-viz-sequential-pink-2-hover']
palette-pink_blush-300
#f98bcd
color-data-viz-sequential-pink-3
themeVars.color['data-viz-sequential-pink-3']
palette-pink_blush-400
#f651b4
color-data-viz-sequential-pink-3-hover
themeVars.color['data-viz-sequential-pink-3-hover']
palette-pink_blush-500
#bc0a74
color-data-viz-sequential-pink-4
themeVars.color['data-viz-sequential-pink-4']
palette-pink_blush-500
#bc0a74
color-data-viz-sequential-pink-4-hover
themeVars.color['data-viz-sequential-pink-4-hover']
palette-pink_blush-600
#99005b
color-data-viz-sequential-pink-5
themeVars.color['data-viz-sequential-pink-5']
palette-pink_blush-600
#99005b
color-data-viz-sequential-pink-5-hover
themeVars.color['data-viz-sequential-pink-5-hover']
palette-pink_blush-700
#700042
color-data-viz-sequential-pink-6
themeVars.color['data-viz-sequential-pink-6']
palette-pink_blush-700
#700042
color-data-viz-sequential-pink-6-hover
themeVars.color['data-viz-sequential-pink-6-hover']
palette-pink_blush-800
#470028
color-data-viz-sequential-pink-7
themeVars.color['data-viz-sequential-pink-7']
palette-pink_blush-800
#470028
color-data-viz-sequential-pink-7-hover
themeVars.color['data-viz-sequential-pink-7-hover']
palette-pink_blush-900
#2e0018
color-data-viz-sequential-purple-1
themeVars.color['data-viz-sequential-purple-1']
palette-purple_nova-125
#e4dcfe
color-data-viz-sequential-purple-1-hover
themeVars.color['data-viz-sequential-purple-1-hover']
palette-purple_nova-150
#dbd1fd
color-data-viz-sequential-purple-2
themeVars.color['data-viz-sequential-purple-2']
palette-purple_nova-250
#b7a5fa
color-data-viz-sequential-purple-2-hover
themeVars.color['data-viz-sequential-purple-2-hover']
palette-purple_nova-300
#a38bf9
color-data-viz-sequential-purple-3
themeVars.color['data-viz-sequential-purple-3']
palette-purple_nova-350
#8567f7
color-data-viz-sequential-purple-3-hover
themeVars.color['data-viz-sequential-purple-3-hover']
palette-purple_nova-400
#7451f6
color-data-viz-sequential-purple-4
themeVars.color['data-viz-sequential-purple-4']
palette-purple_nova-400
#7451f6
color-data-viz-sequential-purple-4-hover
themeVars.color['data-viz-sequential-purple-4-hover']
palette-purple_nova-500
#7129ff
color-data-viz-sequential-purple-5
themeVars.color['data-viz-sequential-purple-5']
palette-purple_nova-500
#7129ff
color-data-viz-sequential-purple-5-hover
themeVars.color['data-viz-sequential-purple-5-hover']
palette-purple_nova-600
#4b00e2
color-data-viz-sequential-purple-6
themeVars.color['data-viz-sequential-purple-6']
palette-purple_nova-700
#3900ab
color-data-viz-sequential-purple-6-hover
themeVars.color['data-viz-sequential-purple-6-hover']
palette-purple_nova-750
#2c0084
color-data-viz-sequential-purple-7
themeVars.color['data-viz-sequential-purple-7']
palette-purple_nova-800
#1f005c
color-data-viz-sequential-purple-7-hover
themeVars.color['data-viz-sequential-purple-7-hover']
palette-purple_nova-900
#110033
color-data-viz-sequential-red-1
themeVars.color['data-viz-sequential-red-1']
palette-red_flame-075
#feddde
color-data-viz-sequential-red-1-hover
themeVars.color['data-viz-sequential-red-1-hover']
palette-red_flame-100
#fccacb
color-data-viz-sequential-red-2
themeVars.color['data-viz-sequential-red-2']
palette-red_flame-200
#ff9fa1
color-data-viz-sequential-red-2-hover
themeVars.color['data-viz-sequential-red-2-hover']
palette-red_flame-250
#f58184
color-data-viz-sequential-red-3
themeVars.color['data-viz-sequential-red-3']
palette-red_flame-300
#e95e62
color-data-viz-sequential-red-3-hover
themeVars.color['data-viz-sequential-red-3-hover']
palette-red_flame-400
#e43a3f
color-data-viz-sequential-red-4
themeVars.color['data-viz-sequential-red-4']
palette-red_flame-400
#e43a3f
color-data-viz-sequential-red-4-hover
themeVars.color['data-viz-sequential-red-4-hover']
palette-red_flame-500
#c50122
color-data-viz-sequential-red-5
themeVars.color['data-viz-sequential-red-5']
palette-red_flame-500
#c50122
color-data-viz-sequential-red-5-hover
themeVars.color['data-viz-sequential-red-5-hover']
palette-red_flame-600
#99001a
color-data-viz-sequential-red-6
themeVars.color['data-viz-sequential-red-6']
palette-red_flame-700
#700013
color-data-viz-sequential-red-6-hover
themeVars.color['data-viz-sequential-red-6-hover']
palette-red_flame-800
#47000c
color-data-viz-sequential-red-7
themeVars.color['data-viz-sequential-red-7']
palette-red_flame-800
#47000c
color-data-viz-sequential-red-7-hover
themeVars.color['data-viz-sequential-red-7-hover']
palette-red_flame-900
#2e0008
color-data-viz-sequential-teal-1
themeVars.color['data-viz-sequential-teal-1']
palette-teal_spruce-050
#bbe3e7
color-data-viz-sequential-teal-1-hover
themeVars.color['data-viz-sequential-teal-1-hover']
palette-teal_spruce-075
#a7dade
color-data-viz-sequential-teal-2
themeVars.color['data-viz-sequential-teal-2']
palette-teal_spruce-100
#91cfd4
color-data-viz-sequential-teal-2-hover
themeVars.color['data-viz-sequential-teal-2-hover']
palette-teal_spruce-200
#67b8c0
color-data-viz-sequential-teal-3
themeVars.color['data-viz-sequential-teal-3']
palette-teal_spruce-300
#2f9aa7
color-data-viz-sequential-teal-3-hover
themeVars.color['data-viz-sequential-teal-3-hover']
palette-teal_spruce-400
#1e7b87
color-data-viz-sequential-teal-4
themeVars.color['data-viz-sequential-teal-4']
palette-teal_spruce-400
#1e7b87
color-data-viz-sequential-teal-4-hover
themeVars.color['data-viz-sequential-teal-4-hover']
palette-teal_spruce-500
#135e67
color-data-viz-sequential-teal-5
themeVars.color['data-viz-sequential-teal-5']
palette-teal_spruce-500
#135e67
color-data-viz-sequential-teal-5-hover
themeVars.color['data-viz-sequential-teal-5-hover']
palette-teal_spruce-600
#0f4a52
color-data-viz-sequential-teal-6
themeVars.color['data-viz-sequential-teal-6']
palette-teal_spruce-600
#0f4a52
color-data-viz-sequential-teal-6-hover
themeVars.color['data-viz-sequential-teal-6-hover']
palette-teal_spruce-700
#0b363b
color-data-viz-sequential-teal-7
themeVars.color['data-viz-sequential-teal-7']
palette-teal_spruce-800
#08272b
color-data-viz-sequential-teal-7-hover
themeVars.color['data-viz-sequential-teal-7-hover']
palette-teal_spruce-900
#041316
color-data-viz-sequential-yellow-1
themeVars.color['data-viz-sequential-yellow-1']
palette-yellow_mustard-300
#f9dc8b
color-data-viz-sequential-yellow-1-hover
themeVars.color['data-viz-sequential-yellow-1-hover']
palette-yellow_mustard-400
#f6ca51
color-data-viz-sequential-yellow-2
themeVars.color['data-viz-sequential-yellow-2']
palette-yellow_mustard-400
#f6ca51
color-data-viz-sequential-yellow-2-hover
themeVars.color['data-viz-sequential-yellow-2-hover']
palette-yellow_mustard-500
#f2b50d
color-data-viz-sequential-yellow-3
themeVars.color['data-viz-sequential-yellow-3']
palette-yellow_mustard-500
#f2b50d
color-data-viz-sequential-yellow-3-hover
themeVars.color['data-viz-sequential-yellow-3-hover']
palette-yellow_mustard-525
#e5ab0a
color-data-viz-sequential-yellow-4
themeVars.color['data-viz-sequential-yellow-4']
palette-yellow_mustard-550
#d79f06
color-data-viz-sequential-yellow-4-hover
themeVars.color['data-viz-sequential-yellow-4-hover']
palette-yellow_mustard-600
#bd8a00
color-data-viz-sequential-yellow-5
themeVars.color['data-viz-sequential-yellow-5']
palette-yellow_mustard-600
#bd8a00
color-data-viz-sequential-yellow-5-hover
themeVars.color['data-viz-sequential-yellow-5-hover']
palette-yellow_mustard-650
#a07600
color-data-viz-sequential-yellow-6
themeVars.color['data-viz-sequential-yellow-6']
palette-yellow_mustard-700
#856200
color-data-viz-sequential-yellow-6-hover
themeVars.color['data-viz-sequential-yellow-6-hover']
palette-yellow_mustard-800
#4d3800
color-data-viz-sequential-yellow-7
themeVars.color['data-viz-sequential-yellow-7']
palette-yellow_mustard-800
#4d3800
color-data-viz-sequential-yellow-7-hover
themeVars.color['data-viz-sequential-yellow-7-hover']
palette-yellow_mustard-900
#241a00

Date Picker

Date Picker color tokens
NameUnderlying Value
color-date_picker-background
themeVars.color['date_picker-background']
color-surface-active
#ededed
color-date_picker-background-hover
themeVars.color['date_picker-background-hover']
color-surface-accent-hover
#135e67
color-date_picker-background-selected
themeVars.color['date_picker-background-selected']
color-surface-accent
#1e7b87

Label

Label color tokens
NameUnderlying Value
color-label-blue-background
themeVars.color['label-blue-background']
palette-blue_wave-100
#d8f3fd
color-label-blue-icon
themeVars.color['label-blue-icon']
palette-blue_wave-600
#004dd6
color-label-blue-text
themeVars.color['label-blue-text']
palette-blue_wave-700
#0039a6
color-label-clementine-background
themeVars.color['label-clementine-background']
palette-orange_zest-050
#fff6f0
color-label-clementine-icon
themeVars.color['label-clementine-icon']
palette-orange_zest-600
#d24d00
color-label-clementine-text
themeVars.color['label-clementine-text']
palette-orange_zest-700
#973800
color-label-green-background
themeVars.color['label-green-background']
palette-green_verdant-025
#e0ffe1
color-label-green-icon
themeVars.color['label-green-icon']
palette-green_verdant-700
#078031
color-label-green-text
themeVars.color['label-green-text']
palette-green_verdant-800
#04481c
color-label-grey-background
themeVars.color['label-grey-background']
palette-grey_charcoal-050
#ededed
color-label-grey-icon
themeVars.color['label-grey-icon']
palette-grey_charcoal-500
#666666
color-label-grey-text
themeVars.color['label-grey-text']
palette-grey_charcoal-800
#212121
color-label-plum-background
themeVars.color['label-plum-background']
palette-plum-100
#f5f0ff
color-label-plum-icon
themeVars.color['label-plum-icon']
palette-plum-700
#843cc7
color-label-plum-text
themeVars.color['label-plum-text']
palette-plum-900
#5c1e8f
color-label-purple-background
themeVars.color['label-purple-background']
palette-purple_nova-100
#ece7fe
color-label-purple-icon
themeVars.color['label-purple-icon']
palette-purple_nova-600
#4b00e2
color-label-purple-text
themeVars.color['label-purple-text']
palette-purple_nova-700
#3900ab
color-label-raspberry-background
themeVars.color['label-raspberry-background']
palette-pink_blush-100
#fde2f2
color-label-raspberry-icon
themeVars.color['label-raspberry-icon']
palette-pink_blush-500
#bc0a74
color-label-raspberry-text
themeVars.color['label-raspberry-text']
palette-pink_blush-800
#470028
color-label-red-background
themeVars.color['label-red-background']
palette-red_flame-050
#fff0f0
color-label-red-icon
themeVars.color['label-red-icon']
palette-red_flame-600
#99001a
color-label-red-text
themeVars.color['label-red-text']
palette-red_flame-700
#700013
color-label-teal-background
themeVars.color['label-teal-background']
palette-teal_spruce-025
#daf0f1
color-label-teal-icon
themeVars.color['label-teal-icon']
palette-teal_spruce-500
#135e67
color-label-teal-text
themeVars.color['label-teal-text']
palette-teal_spruce-600
#0f4a52
color-label-yellow-background
themeVars.color['label-yellow-background']
palette-yellow_mustard-100
#fdf2d3
color-label-yellow-icon
themeVars.color['label-yellow-icon']
palette-yellow_mustard-700
#856200
color-label-yellow-text
themeVars.color['label-yellow-text']
palette-yellow_mustard-800
#4d3800

Navigation

Navigation color tokens
NameUnderlying Value
color-navigation-background
themeVars.color['navigation-background']
color-surface-subtle
#f5f5f5
color-navigation-background-hover
themeVars.color['navigation-background-hover']
color-surface-subtle-hover
#ededed
color-navigation-background-selected
themeVars.color['navigation-background-selected']
color-surface-base
#ffffff
color-navigation-icon
themeVars.color['navigation-icon']
color-icon-subtle
#8a8a8a
color-navigation-icon-collapsed
themeVars.color['navigation-icon-collapsed']
color-icon-navigation
#474747
color-navigation-icon-selected
themeVars.color['navigation-icon-selected']
color-icon-accent
#1e7b87
color-navigation-text
themeVars.color['navigation-text']
color-text-base
#212121
color-navigation-text-selected
themeVars.color['navigation-text-selected']
color-text-active
#000000

Snackbar

Snackbar color tokens
NameUnderlying Value
color-snackbar-default-background
themeVars.color['snackbar-default-background']
palette-teal_spruce-800
#08272b
color-snackbar-default-close-background-hover
themeVars.color['snackbar-default-close-background-hover']
color-surface-invert-hover
#0f4a52
color-snackbar-error-background
themeVars.color['snackbar-error-background']
palette-red_flame-500
#c50122
color-snackbar-error-close-background-hover
themeVars.color['snackbar-error-close-background-hover']
palette-red_flame-400
#e43a3f
color-snackbar-success-background
themeVars.color['snackbar-success-background']
palette-green_verdant-700
#078031
color-snackbar-success-close-background-hover
themeVars.color['snackbar-success-close-background-hover']
palette-green_verdant-600
#00ab3f

Status

Status color tokens
NameUnderlying Value
color-status-blue
themeVars.color['status-blue']
palette-blue_wave-600
#004dd6
color-status-green
themeVars.color['status-green']
palette-green_verdant-700
#078031
color-status-purple
themeVars.color['status-purple']
palette-purple_nova-400
#7451f6
color-status-red
themeVars.color['status-red']
palette-red_flame-400
#e43a3f
color-status-yellow
themeVars.color['status-yellow']
palette-yellow_mustard-500
#f2b50d

Toggle

Toggle color tokens
NameUnderlying Value
color-toggle-surface-active
themeVars.color['toggle-surface-active']
palette-teal_spruce-500
#135e67
color-toggle-surface-active-disabled
themeVars.color['toggle-surface-active-disabled']
palette-grey_charcoal-200
#cccccc
color-toggle-surface-active-hover
themeVars.color['toggle-surface-active-hover']
palette-teal_spruce-600
#0f4a52
color-toggle-surface-base
themeVars.color['toggle-surface-base']
palette-grey_charcoal-200
#cccccc
color-toggle-surface-base-disabled
themeVars.color['toggle-surface-base-disabled']
palette-grey_charcoal-100
#e0e0e0
color-toggle-surface-base-hover
themeVars.color['toggle-surface-base-hover']
palette-grey_charcoal-300
#ababab

Backdrop

Backdrop tokens
NameUnderlying Value
backdrop-mix-amount
themeVars.backdrop['mix-amount']
60