Skip to content

Color draft v3.0.0

The palettes the system draws from and the mapped color roles every component paints with, in every mode: the Figma library's colors, as they are.

The color tokens are the Figma library's three color collections, recreated with the same paths (made valid), values and aliases: Colors / Base, the raw palettes; Colors / Palette Switch, the neutral ramp the roles read (ash today); Colors / Mapped, the roles, in a light and a dark mode. Nobody paints with a palette step directly: components alias the mapped roles (global.bg, global.text, global.icon, global.border), so dark mode, and later another neutral palette, change in one place. The Figma library's errors and limitations are kept on purpose, as the starting point the system evolves from; the few colors the design system adds live apart, in tokens/additions/.

Tokens

Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/color.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.

Token Type Value Resolved CSS
global.bg.level.0.default color {global.bg.base.neutral.1}
light #FDFDFD
dark #191919
--global-bg-level-0-default
global.bg.level.0.hover color {global.bg.base.neutral.2}
light #F7F6F6
dark #212121
--global-bg-level-0-hover
global.bg.level.0.active color {global.bg.base.neutral.3}
light #ECE8E9
dark #282828
--global-bg-level-0-active
global.bg.level.1.default color {global.bg.base.neutral.2}
light #F7F6F6
dark #212121
--global-bg-level-1-default
global.bg.level.1.hover color {global.bg.base.neutral.3}
light #ECE8E9
dark #282828
--global-bg-level-1-hover
global.bg.level.1.active color {global.bg.base.neutral.4}
light #DFDBDC
dark #303030
--global-bg-level-1-active
global.bg.level.2.default color {global.bg.base.neutral.1}
light #FDFDFD
dark #282828
--global-bg-level-2-default
global.bg.level.2.hover color {global.bg.base.neutral.2}
light #F7F6F6
dark #303030
--global-bg-level-2-hover
global.bg.level.2.active color {global.bg.base.neutral.3}
light #ECE8E9
dark #363636
--global-bg-level-2-active
global.bg.level.3.default color {global.bg.base.neutral.2}
light #F7F6F6
dark #303030
--global-bg-level-3-default
global.bg.level.sunken.default color {global.bg.base.neutral.2}
light #F7F6F6
dark #141414
--global-bg-level-sunken-default
global.bg.level.sunken.hover color {global.bg.base.neutral.3}
light #ECE8E9
dark #191919
--global-bg-level-sunken-hover
global.bg.base.neutral.1 color {light-switch.base.25}
light #FDFDFD
dark #191919
--global-bg-base-neutral-1
global.bg.base.neutral.2 color {light-switch.base.50}
light #F7F6F6
dark #212121
--global-bg-base-neutral-2
global.bg.base.neutral.3 color {light-switch.base.100}
light #ECE8E9
dark #282828
--global-bg-base-neutral-3
global.bg.base.neutral.4 color {light-switch.base.200}
light #DFDBDC
dark #303030
--global-bg-base-neutral-4
global.bg.base.neutral.5 color {light-switch.base.300}
light #D7D3D4
dark #363636
--global-bg-base-neutral-5
global.bg.accent.neutral.default color {light-switch.base.900}
light #201E1F
dark #E8E3E4
--global-bg-accent-neutral-default
global.bg.accent.neutral.hover color {light-switch.base.800}
light #323031
dark #D2CECF
--global-bg-accent-neutral-hover
global.bg.accent.neutral.active color {light-switch.base.700}
light #4C4A4A
dark #B9B7B7
--global-bg-accent-neutral-active
global.bg.accent.brand.default color {brand.light.600}
light #175DD6
dark #9EE7FA
--global-bg-accent-brand-default
global.bg.accent.brand.hover color {brand.light.700}
light #1148A9
dark #53D6F2
--global-bg-accent-brand-hover
global.bg.accent.brand.active color {brand.light.800}
light #0B2A69
dark #41B9D3
--global-bg-accent-brand-active
global.bg.accent.functional.success.default color {functional.success.600}
light #0B7742
dark #11C772
--global-bg-accent-functional-success-default
global.bg.accent.functional.success.hover color {functional.success.700}
light #075D33
dark #16AE64
--global-bg-accent-functional-success-hover
global.bg.accent.functional.success.active color {functional.success.800}
light #023A1E
dark #129957
--global-bg-accent-functional-success-active
global.bg.accent.functional.warning.default color {functional.warning.300}
#FFC61C
--global-bg-accent-functional-warning-default
global.bg.accent.functional.warning.hover color {functional.warning.400}
#DFA700
--global-bg-accent-functional-warning-hover
global.bg.accent.functional.warning.active color {functional.warning.500}
#C38401
--global-bg-accent-functional-warning-active
global.bg.accent.functional.severe.default color {functional.severe.300}
#FE8400
--global-bg-accent-functional-severe-default
global.bg.accent.functional.severe.hover color {functional.severe.400}
#DE7B27
--global-bg-accent-functional-severe-hover
global.bg.accent.functional.severe.active color {functional.severe.500}
#CC6B0B
--global-bg-accent-functional-severe-active
global.bg.accent.functional.error.default color {functional.error.500}
#E12A23
--global-bg-accent-functional-error-default
global.bg.accent.functional.error.hover color {functional.error.600}
#C01619
--global-bg-accent-functional-error-hover
global.bg.accent.functional.error.active color {functional.error.700}
#940E11
--global-bg-accent-functional-error-active
global.bg.accent.functional.info.default color {functional.info.600}
light #2B68E0
dark #94B6F4
--global-bg-accent-functional-info-default
global.bg.accent.functional.info.hover color {functional.info.700}
light #1A4CAD
dark #709DF1
--global-bg-accent-functional-info-hover
global.bg.accent.functional.info.active color {functional.info.800}
light #0C2A68
dark #5085EA
--global-bg-accent-functional-info-active
global.bg.accent.extended.lavender.default color {extended.lavender.700}
light #7534A9
dark #B87BF5
--global-bg-accent-extended-lavender-default
global.bg.accent.extended.lavender.hover color {extended.lavender.600}
light #8D3BCD
dark #CA9EFA
--global-bg-accent-extended-lavender-hover
global.bg.accent.extended.lavender.active color {extended.lavender.800}
light #3F1A5C
dark #A653EA
--global-bg-accent-extended-lavender-active
global.bg.accent.extended.lime.default color {extended.lime.300}
light #D7F100
dark #CAE200
--global-bg-accent-extended-lime-default
global.bg.accent.extended.lime.hover color {extended.lime.200}
light #E2FC00
dark #D7F100
--global-bg-accent-extended-lime-hover
global.bg.accent.extended.lime.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.lime.400}
light #CAE200
dark #B8CD06
--global-bg-accent-extended-lime-active
global.bg.accent.extended.coral.default color {extended.coral.400}
#FD8C67
--global-bg-accent-extended-coral-default
global.bg.accent.extended.coral.hover color {extended.coral.300}
#FEA78B
--global-bg-accent-extended-coral-hover
global.bg.accent.extended.coral.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.coral.500}
#E75F2E
--global-bg-accent-extended-coral-active
global.bg.accent.extended.forest.default color {extended.forest.800}
light #0A382D
dark #68BBA1
--global-bg-accent-extended-forest-default
global.bg.accent.extended.forest.hover color {extended.forest.700}
light #18614E
dark #82D3B9
--global-bg-accent-extended-forest-hover
global.bg.accent.extended.forest.active color {extended.forest.900}
light #052A20
dark #4FA189
--global-bg-accent-extended-forest-active
global.bg.accent.extended.azure.default color {extended.azure.700}
light #266280
dark #5BB8E7
--global-bg-accent-extended-azure-default
global.bg.accent.extended.azure.hover color {extended.azure.600}
light #2C7A9F
dark #8ACAED
--global-bg-accent-extended-azure-hover
global.bg.accent.extended.azure.active color {extended.azure.800}
light #153443
dark #379BCA
--global-bg-accent-extended-azure-active
global.bg.accent.extended.orchid.default color {extended.orchid.700}
light #923D78
dark #F283CD
--global-bg-accent-extended-orchid-default
global.bg.accent.extended.orchid.hover color {extended.orchid.600}
light #B74A96
dark #F5A1D7
--global-bg-accent-extended-orchid-hover
global.bg.accent.extended.orchid.active color {extended.orchid.700}
light #923D78
dark #D956B1
--global-bg-accent-extended-orchid-active
global.bg.accent.extended.sand.default color {extended.sand.800}
light #353019
dark #DFD465
--global-bg-accent-extended-sand-default
global.bg.accent.extended.sand.hover color {extended.sand.700}
light #68642C
dark #F2E76F
--global-bg-accent-extended-sand-hover
global.bg.accent.extended.sand.active color {extended.sand.900}
light #272316
dark #C8BC5A
--global-bg-accent-extended-sand-active
global.bg.accent.extended.amber.default color {extended.amber.300}
#FAC138
--global-bg-accent-extended-amber-default
global.bg.accent.extended.amber.hover color {extended.amber.200}
#FEDC97
--global-bg-accent-extended-amber-hover
global.bg.accent.extended.amber.active color {extended.amber.400}
#EEB836
--global-bg-accent-extended-amber-active
global.bg.accent.extended.purple.default color {branded-extended.purple.600}
#8636CA
--global-bg-accent-extended-purple-default
global.bg.accent.extended.purple.hover color {branded-extended.purple.700}
#6B0DAC
--global-bg-accent-extended-purple-hover
global.bg.accent.extended.purple.active color {branded-extended.purple.800}
#410B6A
--global-bg-accent-extended-purple-active
global.bg.accent.extended.yellow.default color {branded-extended.yellow.100}
#EBF479
--global-bg-accent-extended-yellow-default
global.bg.accent.extended.yellow.hover color {branded-extended.yellow.200}
#D8DE58
--global-bg-accent-extended-yellow-hover
global.bg.accent.extended.yellow.active color {branded-extended.yellow.300}
#C1C546
--global-bg-accent-extended-yellow-active
global.bg.accent.extended.green.default color {branded-extended.green.200}
#A8EF5A
--global-bg-accent-extended-green-default
global.bg.accent.extended.green.hover color {branded-extended.green.300}
#91D643
--global-bg-accent-extended-green-hover
global.bg.accent.extended.green.active color {branded-extended.green.400}
#7BBA36
--global-bg-accent-extended-green-active
global.bg.accent.extended.beige.default color {branded-extended.beige.200}
#E9C39E
--global-bg-accent-extended-beige-default
global.bg.accent.extended.beige.hover color {branded-extended.beige.300}
#E2A261
--global-bg-accent-extended-beige-hover
global.bg.accent.extended.beige.active color {branded-extended.beige.400}
#C28548
--global-bg-accent-extended-beige-active
global.bg.subtle.neutral.default
light-switch.base.400 at opacity.10: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.7138650417327881,0.7059080004692078,0.7059076428413391],"alpha":0.10000000149011612,"hex":"#B6B4B4"}
light #B6B4B41a
dark #7676761a
--global-bg-subtle-neutral-default
global.bg.subtle.neutral.hover
light-switch.base.400 at opacity.15: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.7138650417327881,0.7059080004692078,0.7059076428413391],"alpha":0.15000000596046448,"hex":"#B6B4B4"}
light #B6B4B426
dark #7676764d
--global-bg-subtle-neutral-hover
global.bg.subtle.neutral.active
light-switch.base.400 at opacity.20: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.7138650417327881,0.7059080004692078,0.7059076428413391],"alpha":0.20000000298023224,"hex":"#B6B4B4"}
light #B6B4B433
dark #76767680
--global-bg-subtle-neutral-active
global.bg.subtle.brand.default color {brand.light.50}
light #EEF1F7
dark #09191D
--global-bg-subtle-brand-default
global.bg.subtle.brand.hover color {brand.light.100}
light #DDE6F5
dark #0D272E
--global-bg-subtle-brand-hover
global.bg.subtle.brand.active color {brand.light.200}
light #BFD1F1
dark #10363E
--global-bg-subtle-brand-active
global.bg.subtle.functional.success.default color {functional.success.50}
light #DBFAE6
dark #011C16
--global-bg-subtle-functional-success-default
global.bg.subtle.functional.success.hover color {functional.success.100}
light #AEF6C9
dark #022A23
--global-bg-subtle-functional-success-hover
global.bg.subtle.functional.success.active color {functional.success.200}
light #30F498
dark #023A1E
--global-bg-subtle-functional-success-active
global.bg.subtle.functional.warning.default color {functional.warning.50}
light #FFF1C7
dark #1F1504
--global-bg-subtle-functional-warning-default
global.bg.subtle.functional.warning.hover color {functional.warning.100}
light #FFE495
dark #2D2107
--global-bg-subtle-functional-warning-hover
global.bg.subtle.functional.warning.active color {functional.warning.200}
light #FFD654
dark #3E2D0C
--global-bg-subtle-functional-warning-active
global.bg.subtle.functional.severe.default color {functional.severe.50}
light #FFEDE2
dark #271001
--global-bg-subtle-functional-severe-default
global.bg.subtle.functional.severe.hover color {functional.severe.100}
light #FFDFCB
dark #381A02
--global-bg-subtle-functional-severe-hover
global.bg.subtle.functional.severe.active color {functional.severe.200}
light #FFCAA8
dark #4A2506
--global-bg-subtle-functional-severe-active
global.bg.subtle.functional.error.default color {functional.error.50}
light #FEECEA
dark #2B0B08
--global-bg-subtle-functional-error-default
global.bg.subtle.functional.error.hover color {functional.error.100}
light #FCCDC6
dark #3E130F
--global-bg-subtle-functional-error-hover
global.bg.subtle.functional.error.active color {functional.error.200}
light #FAA79D
dark #531A16
--global-bg-subtle-functional-error-active
global.bg.subtle.functional.info.default color {functional.info.50}
light #EDF1F9
dark #09162F
--global-bg-subtle-functional-info-default
global.bg.subtle.functional.info.hover color {functional.info.100}
light #DEE7F6
dark #0B204B
--global-bg-subtle-functional-info-hover
global.bg.subtle.functional.info.active color {functional.info.200}
light #BBCFF3
dark #0C2A68
--global-bg-subtle-functional-info-active
global.bg.subtle.extended.lavender.default color {extended.lavender.50}
light #F4EBFE
dark #2D1543
--global-bg-subtle-extended-lavender-default
global.bg.subtle.extended.lavender.hover color {extended.lavender.100}
light #E6D2FE
dark #3F1A5C
--global-bg-subtle-extended-lavender-hover
global.bg.subtle.extended.lavender.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.lavender.200}
light #DABCFD
dark #1D0E2C
--global-bg-subtle-extended-lavender-active
global.bg.subtle.extended.lime.default color {extended.lime.50}
light #F4FECD
dark #22260E
--global-bg-subtle-extended-lime-default
global.bg.subtle.extended.lime.hover color {extended.lime.100}
light #EAFE8C
dark #2E340B
--global-bg-subtle-extended-lime-hover
global.bg.subtle.extended.lime.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.lime.200}
light #E2FC00
dark #657216
--global-bg-subtle-extended-lime-active
global.bg.subtle.extended.coral.default color {extended.coral.50}
light #FFEDE7
dark #361A12
--global-bg-subtle-extended-coral-default
global.bg.subtle.extended.coral.hover color {extended.coral.100}
light #FFDFD5
dark #4D2112
--global-bg-subtle-extended-coral-hover
global.bg.subtle.extended.coral.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.coral.200}
light #FEC8B6
dark #1F1411
--global-bg-subtle-extended-coral-active
global.bg.subtle.extended.forest.default color {extended.forest.50}
light #E6F6F0
dark #052A20
--global-bg-subtle-extended-forest-default
global.bg.subtle.extended.forest.hover color {extended.forest.100}
light #CBF1E3
dark #0A382D
--global-bg-subtle-extended-forest-hover
global.bg.subtle.extended.forest.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.forest.200}
light #9EE8CF
dark #031C15
--global-bg-subtle-extended-forest-active
global.bg.subtle.extended.azure.default color {extended.azure.50}
light #E7F4FB
dark #14262E
--global-bg-subtle-extended-azure-default
global.bg.subtle.extended.azure.hover color {extended.azure.100}
light #D4EBF8
dark #153443
--global-bg-subtle-extended-azure-hover
global.bg.subtle.extended.azure.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.azure.200}
light #B5DDF3
dark #12181B
--global-bg-subtle-extended-azure-active
global.bg.subtle.extended.orchid.default color {extended.orchid.50}
light #FDECF6
dark #33182A
--global-bg-subtle-extended-orchid-default
global.bg.subtle.extended.orchid.hover color {extended.orchid.100}
light #FBDDEF
dark #491E3B
--global-bg-subtle-extended-orchid-hover
global.bg.subtle.extended.orchid.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.orchid.200}
light #F8C4E4
dark #1D1419
--global-bg-subtle-extended-orchid-active
global.bg.subtle.extended.sand.default color {extended.sand.50}
light #FDFBD2
dark #272316
--global-bg-subtle-extended-sand-default
global.bg.subtle.extended.sand.hover color {extended.sand.100}
light #FBF6AB
dark #353019
--global-bg-subtle-extended-sand-hover
global.bg.subtle.extended.sand.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.sand.200}
light #F2E76F
dark #181710
--global-bg-subtle-extended-sand-active
global.bg.subtle.extended.amber.default color {extended.amber.50}
light #FFF5E1
dark #2A2212
--global-bg-subtle-extended-amber-default
global.bg.subtle.extended.amber.hover color {extended.amber.100}
light #FFEBC4
dark #3B2D12
--global-bg-subtle-extended-amber-hover
global.bg.subtle.extended.amber.active
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.amber.200}
light #FEDC97
dark #1A1611
--global-bg-subtle-extended-amber-active
global.bg.subtle.extended.purple.default color {branded-extended.purple.50}
light #F5F0FA
dark #1C0E2E
--global-bg-subtle-extended-purple-default
global.bg.subtle.extended.purple.hover color {branded-extended.purple.100}
light #EEE4FB
dark #310056
--global-bg-subtle-extended-purple-hover
global.bg.subtle.extended.purple.active color {branded-extended.purple.200}
light #E2CBFD
dark #410B6A
--global-bg-subtle-extended-purple-active
global.bg.subtle.extended.yellow.default color {branded-extended.yellow.50}
light #F4FE9B
dark #18180D
--global-bg-subtle-extended-yellow-default
global.bg.subtle.extended.yellow.hover color {branded-extended.yellow.100}
light #EBF479
dark #25240F
--global-bg-subtle-extended-yellow-hover
global.bg.subtle.extended.yellow.active color {branded-extended.yellow.200}
light #D8DE58
dark #323212
--global-bg-subtle-extended-yellow-active
global.bg.subtle.extended.green.default color {branded-extended.green.50}
light #EAF9DE
dark #101A0B
--global-bg-subtle-extended-green-default
global.bg.subtle.extended.green.hover color {branded-extended.green.100}
light #CEFCA4
dark #152A03
--global-bg-subtle-extended-green-hover
global.bg.subtle.extended.green.active color {branded-extended.green.200}
light #A8EF5A
dark #20370B
--global-bg-subtle-extended-green-active
global.bg.subtle.extended.beige.default color {branded-extended.beige.50}
light #F6ECE2
dark #1E150C
--global-bg-subtle-extended-beige-default
global.bg.subtle.extended.beige.hover color {branded-extended.beige.100}
light #EFDFCF
dark #301F10
--global-bg-subtle-extended-beige-hover
global.bg.subtle.extended.beige.active color {branded-extended.beige.200}
light #E9C39E
dark #412A13
--global-bg-subtle-extended-beige-active
global.bg.sunken.brand.default color {brand.light.100}
light #DDE6F5
dark #09191D
--global-bg-sunken-brand-default
global.bg.sunken.functional.success.default color {functional.success.100}
light #AEF6C9
dark #011C16
--global-bg-sunken-functional-success-default
global.bg.sunken.functional.warning.default color {functional.warning.100}
light #FFE495
dark #1F1504
--global-bg-sunken-functional-warning-default
global.bg.sunken.functional.severe.default color {functional.severe.50}
light #FFEDE2
dark #271001
--global-bg-sunken-functional-severe-default
global.bg.sunken.functional.error.default color {functional.error.100}
light #FCCDC6
dark #2B0B08
--global-bg-sunken-functional-error-default
global.bg.sunken.functional.info.default color {functional.info.100}
light #DEE7F6
dark #09162F
--global-bg-sunken-functional-info-default
global.bg.sunken.extended.lavender.default color {extended.lavender.100}
light #E6D2FE
dark #1D0E2C
--global-bg-sunken-extended-lavender-default
global.bg.sunken.extended.lime.default color {extended.lime.100}
light #EAFE8C
dark #171811
--global-bg-sunken-extended-lime-default
global.bg.sunken.extended.coral.default color {extended.coral.100}
light #FFDFD5
dark #1F1411
--global-bg-sunken-extended-coral-default
global.bg.sunken.extended.forest.default color {extended.forest.100}
light #CBF1E3
dark #031C15
--global-bg-sunken-extended-forest-default
global.bg.sunken.extended.azure.default color {extended.azure.100}
light #D4EBF8
dark #12181B
--global-bg-sunken-extended-azure-default
global.bg.sunken.extended.orchid.default color {extended.orchid.100}
light #FBDDEF
dark #1D1419
--global-bg-sunken-extended-orchid-default
global.bg.sunken.extended.sand.default color {extended.sand.100}
light #FBF6AB
dark #181710
--global-bg-sunken-extended-sand-default
global.bg.sunken.extended.amber.default color {extended.amber.100}
light #FFEBC4
dark #1A1611
--global-bg-sunken-extended-amber-default
global.bg.sunken.extended.purple.default color {branded-extended.purple.100}
light #EEE4FB
dark #1C0E2E
--global-bg-sunken-extended-purple-default
global.bg.sunken.extended.purple.hover color {branded-extended.purple.200}
light #E2CBFD
dark #310056
--global-bg-sunken-extended-purple-hover
global.bg.sunken.extended.purple.active color {branded-extended.purple.300}
light #D5AEFF
dark #410B6A
--global-bg-sunken-extended-purple-active
global.bg.sunken.extended.yellow.default color {branded-extended.yellow.100}
light #EBF479
dark #18180D
--global-bg-sunken-extended-yellow-default
global.bg.sunken.extended.yellow.hover color {branded-extended.yellow.200}
light #D8DE58
dark #25240F
--global-bg-sunken-extended-yellow-hover
global.bg.sunken.extended.yellow.active color {branded-extended.yellow.300}
light #C1C546
dark #323212
--global-bg-sunken-extended-yellow-active
global.bg.sunken.extended.green.default color {branded-extended.green.100}
light #CEFCA4
dark #101A0B
--global-bg-sunken-extended-green-default
global.bg.sunken.extended.green.hover color {branded-extended.green.200}
light #A8EF5A
dark #152A03
--global-bg-sunken-extended-green-hover
global.bg.sunken.extended.green.active color {branded-extended.green.300}
light #91D643
dark #20370B
--global-bg-sunken-extended-green-active
global.bg.sunken.extended.beige.default color {branded-extended.beige.100}
light #EFDFCF
dark #1E150C
--global-bg-sunken-extended-beige-default
global.bg.sunken.extended.beige.hover color {branded-extended.beige.200}
light #E9C39E
dark #301F10
--global-bg-sunken-extended-beige-hover
global.bg.sunken.extended.beige.active color {branded-extended.beige.300}
light #E2A261
dark #412A13
--global-bg-sunken-extended-beige-active
global.bg.transparency.fade.none
light-switch.base.100 at opacity.0: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.9254804849624634,0.9098302721977234,0.9137433171272278],"alpha":0,"hex":"#ECE8E9"}
light #ECE8E900
dark #19191900
--global-bg-transparency-fade-none
global.bg.transparency.fade.thin
light-switch.base.100 at opacity.10: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.9254804849624634,0.9098302721977234,0.9137433171272278],"alpha":0.10000000149011612,"hex":"#ECE8E9"}
light #ECE8E91a
dark #1919191a
--global-bg-transparency-fade-thin
global.bg.transparency.fade.light
light-switch.base.100 at opacity.20: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.9254804849624634,0.9098302721977234,0.9137433171272278],"alpha":0.20000000298023224,"hex":"#ECE8E9"}
light #ECE8E933
dark #19191933
--global-bg-transparency-fade-light
global.bg.transparency.fade.default
light-switch.base.100 at opacity.30: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.9254804849624634,0.9098302721977234,0.9137433171272278],"alpha":0.30000001192092896,"hex":"#ECE8E9"}
light #ECE8E94d
dark #1919194d
--global-bg-transparency-fade-default
global.bg.transparency.fade.strong
light-switch.base.100 at opacity.50: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.9254804849624634,0.9098302721977234,0.9137433171272278],"alpha":0.5,"hex":"#ECE8E9"}
light #ECE8E980
dark #19191980
--global-bg-transparency-fade-strong
global.bg.transparency.fade.blackout
light-switch.base.100 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.9254804849624634,0.9098302721977234,0.9137433171272278],"alpha":0.699999988079071,"hex":"#ECE8E9"}
light #ECE8E9b2
dark #191919b2
--global-bg-transparency-fade-blackout
global.bg.transparency.overlay.none
light-switch.base.800 at opacity.0: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.19601257145404816,0.18823795020580292,0.1921250820159912],"alpha":0,"hex":"#323031"}
light #32303100
dark #19191900
--global-bg-transparency-overlay-none
global.bg.transparency.overlay.thin
light-switch.base.800 at opacity.10: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.19601257145404816,0.18823795020580292,0.1921250820159912],"alpha":0.10000000149011612,"hex":"#323031"}
light #3230311a
dark #1919194d
--global-bg-transparency-overlay-thin
global.bg.transparency.overlay.light
light-switch.base.800 at opacity.20: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.19601257145404816,0.18823795020580292,0.1921250820159912],"alpha":0.20000000298023224,"hex":"#323031"}
light #32303133
dark #19191980
--global-bg-transparency-overlay-light
global.bg.transparency.overlay.default
light-switch.base.800 at opacity.30: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.19601257145404816,0.18823795020580292,0.1921250820159912],"alpha":0.30000001192092896,"hex":"#323031"}
light #3230314d
dark #19191999
--global-bg-transparency-overlay-default
global.bg.transparency.overlay.strong
light-switch.base.800 at opacity.50: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.19601257145404816,0.18823795020580292,0.1921250820159912],"alpha":0.5,"hex":"#323031"}
light #32303180
dark #191919b2
--global-bg-transparency-overlay-strong
global.bg.transparency.overlay.blackout
light-switch.base.800 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.19601257145404816,0.18823795020580292,0.1921250820159912],"alpha":0.699999988079071,"hex":"#323031"}
light #323031b2
dark #191919cc
--global-bg-transparency-overlay-blackout
global.bg.state.skeleton.default
light-switch.base.200 at opacity.40: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.8746619820594788,0.8588387966156006,0.8627949357032776],"alpha":0.4000000059604645,"hex":"#DFDBDC"}
light #DFDBDC66
dark #303030b2
--global-bg-state-skeleton-default
global.bg.state.disabled.default
light-switch.base.400 at opacity.10: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.7138650417327881,0.7059080004692078,0.7059076428413391],"alpha":0.10000000149011612,"hex":"#B6B4B4"}
light #B6B4B41a
dark #7676764d
--global-bg-state-disabled-default
global.bg.code.highlighted
A line the author points out.
 color {global.bg.subtle.brand.default}
light #EEF1F7
dark #09191D
--global-bg-code-highlighted
global.bg.code.inserted
A line an example adds.
 color {global.bg.subtle.functional.success.default}
light #DBFAE6
dark #011C16
--global-bg-code-inserted
global.bg.code.deleted
A line an example removes.
 color {global.bg.subtle.functional.error.default}
light #FEECEA
dark #2B0B08
--global-bg-code-deleted
global.bg.code.error
A line in error.
 color {global.bg.subtle.functional.error.default}
light #FEECEA
dark #2B0B08
--global-bg-code-error
global.bg.code.warning
A line with a warning.
 color {global.bg.subtle.functional.warning.default}
light #FFF1C7
dark #1F1504
--global-bg-code-warning
global.text.on-base.neutral.primary color {light-switch.base.950}
light #0E0D0D
dark #D2CECF
--global-text-on-base-neutral-primary
global.text.on-base.neutral.secondary color {light-switch.base.800}
light #323031
dark #B9B7B7
--global-text-on-base-neutral-secondary
global.text.on-base.neutral.tertiary color {light-switch.base.600}
light #616161
dark #9D9B9C
--global-text-on-base-neutral-tertiary
global.text.on-base.brand.default
Only use with natural bg
 color {brand.light.600}
light #175DD6
dark #9EE7FA
--global-text-on-base-brand-default
global.text.on-base.functional.success.default color {functional.success.700}
light #075D33
dark #16AE64
--global-text-on-base-functional-success-default
global.text.on-base.functional.warning.default color {functional.warning.800}
light #3E2D0C
dark #644B16
--global-text-on-base-functional-warning-default
global.text.on-base.functional.severe.default color {functional.severe.700}
light #764016
dark #CC6B0B
--global-text-on-base-functional-severe-default
global.text.on-base.functional.error.default
Only use with natural bg
 color {functional.error.500}
light #E12A23
dark #EE5248
--global-text-on-base-functional-error-default
global.text.on-base.functional.info.default color {functional.info.600}
light #2B68E0
dark #94B6F4
--global-text-on-base-functional-info-default
global.text.on-base.extended.lavender.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.lavender.700}
light #7534A9
dark #B87BF5
--global-text-on-base-extended-lavender-default
global.text.on-base.extended.lime.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.lime.800}
light #2E340B
dark #A0B316
--global-text-on-base-extended-lime-default
global.text.on-base.extended.coral.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.coral.700}
light #9C4324
dark #FD8C67
--global-text-on-base-extended-coral-default
global.text.on-base.extended.forest.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.forest.700}
light #18614E
dark #68BBA1
--global-text-on-base-extended-forest-default
global.text.on-base.extended.azure.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.azure.800}
light #153443
dark #5BB8E7
--global-text-on-base-extended-azure-default
global.text.on-base.extended.orchid.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.orchid.700}
light #923D78
dark #F283CD
--global-text-on-base-extended-orchid-default
global.text.on-base.extended.sand.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.sand.800}
light #353019
dark #ABA04B
--global-text-on-base-extended-sand-default
global.text.on-base.extended.amber.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {extended.amber.800}
light #3B2D12
dark #DDAB35
--global-text-on-base-extended-amber-default
global.text.on-accent.neutral.primary color {light-switch.base.25}
light #FDFDFD
dark #191919
--global-text-on-accent-neutral-primary
global.text.on-accent.neutral.secondary color {light-switch.base.100}
light #ECE8E9
dark #282828
--global-text-on-accent-neutral-secondary
global.text.on-accent.neutral.tertiary color {light-switch.base.300}
light #D7D3D4
dark #303030
--global-text-on-accent-neutral-tertiary
global.text.on-accent.brand.default color {brand.light.25}
light #FBFCFD
dark #09191D
--global-text-on-accent-brand-default
global.text.on-accent.functional.success.default color {functional.success.25}
light #F8FEFA
dark #011C16
--global-text-on-accent-functional-success-default
global.text.on-accent.functional.warning.default color {functional.warning.950}
#1F1504
--global-text-on-accent-functional-warning-default
global.text.on-accent.functional.severe.default color {functional.severe.950}
#271001
--global-text-on-accent-functional-severe-default
global.text.on-accent.functional.error.default color {functional.error.25}
#FEFBFA
--global-text-on-accent-functional-error-default
global.text.on-accent.functional.info.default color {functional.info.25}
light #FBFCFD
dark #09162F
--global-text-on-accent-functional-info-default
global.text.on-accent.extended.lavender.default color {extended.lavender.25}
light #FDFBFF
dark #1D0E2C
--global-text-on-accent-extended-lavender-default
global.text.on-accent.extended.lime.default color {extended.lime.950}
#171811
--global-text-on-accent-extended-lime-default
global.text.on-accent.extended.coral.default color {extended.coral.950}
#1F1411
--global-text-on-accent-extended-coral-default
global.text.on-accent.extended.forest.default color {extended.forest.25}
light #FAFDFC
dark #031C15
--global-text-on-accent-extended-forest-default
global.text.on-accent.extended.azure.default color {extended.azure.25}
light #FAFCFE
dark #12181B
--global-text-on-accent-extended-azure-default
global.text.on-accent.extended.orchid.default color {extended.orchid.25}
light #FEFBFD
dark #1D1419
--global-text-on-accent-extended-orchid-default
global.text.on-accent.extended.sand.default color {extended.sand.25}
light #FEFDEC
dark #181710
--global-text-on-accent-extended-sand-default
global.text.on-accent.extended.amber.default color {extended.amber.950}
#1A1611
--global-text-on-accent-extended-amber-default
global.text.on-accent.extended.purple.default color {branded-extended.purple.25}
#FCFCFD
--global-text-on-accent-extended-purple-default
global.text.on-accent.extended.yellow.default color {branded-extended.yellow.950}
#18180D
--global-text-on-accent-extended-yellow-default
global.text.on-accent.extended.green.default color {branded-extended.green.950}
#101A0B
--global-text-on-accent-extended-green-default
global.text.on-accent.extended.beige.default color {branded-extended.beige.950}
#1E150C
--global-text-on-accent-extended-beige-default
global.text.on-subtle.neutral.default color {global.text.on-base.neutral.secondary}
light #323031
dark #E3DDDE
--global-text-on-subtle-neutral-default
global.text.on-subtle.brand.default color {brand.light.700}
light #1148A9
dark #9EE7FA
--global-text-on-subtle-brand-default
global.text.on-subtle.functional.success.default color {functional.success.700}
light #075D33
dark #30F498
--global-text-on-subtle-functional-success-default
global.text.on-subtle.functional.warning.default color {functional.warning.700}
light #644B16
dark #FFD654
--global-text-on-subtle-functional-warning-default
global.text.on-subtle.functional.severe.default color {functional.severe.700}
light #764016
dark #FFCAA8
--global-text-on-subtle-functional-severe-default
global.text.on-subtle.functional.error.default color {functional.error.600}
light #C01619
dark #FAA79D
--global-text-on-subtle-functional-error-default
global.text.on-subtle.functional.info.default color {functional.info.700}
light #1A4CAD
dark #BBCFF3
--global-text-on-subtle-functional-info-default
global.text.on-subtle.extended.lavender.default color {extended.lavender.800}
light #3F1A5C
dark #CA9EFA
--global-text-on-subtle-extended-lavender-default
global.text.on-subtle.extended.lime.default color {extended.lime.800}
light #2E340B
dark #E2FC00
--global-text-on-subtle-extended-lime-default
global.text.on-subtle.extended.coral.default color {extended.coral.800}
light #4D2112
dark #FEA78B
--global-text-on-subtle-extended-coral-default
global.text.on-subtle.extended.forest.default color {extended.forest.700}
light #18614E
dark #82D3B9
--global-text-on-subtle-extended-forest-default
global.text.on-subtle.extended.azure.default color {extended.azure.800}
light #153443
dark #8ACAED
--global-text-on-subtle-extended-azure-default
global.text.on-subtle.extended.orchid.default color {extended.orchid.800}
light #491E3B
dark #F5A1D7
--global-text-on-subtle-extended-orchid-default
global.text.on-subtle.extended.sand.default color {extended.sand.700}
light #68642C
dark #C8BC5A
--global-text-on-subtle-extended-sand-default
global.text.on-subtle.extended.amber.default color {extended.amber.800}
light #3B2D12
dark #DDAB35
--global-text-on-subtle-extended-amber-default
global.text.on-subtle.extended.purple.default color {branded-extended.purple.700}
light #6B0DAC
dark #E2CBFD
--global-text-on-subtle-extended-purple-default
global.text.on-subtle.extended.yellow.default color {branded-extended.yellow.700}
light #5B5A21
dark #D8DE58
--global-text-on-subtle-extended-yellow-default
global.text.on-subtle.extended.green.default color {branded-extended.green.700}
light #3F6717
dark #A8EF5A
--global-text-on-subtle-extended-green-default
global.text.on-subtle.extended.beige.default color {branded-extended.beige.700}
light #67431E
dark #E9C39E
--global-text-on-subtle-extended-beige-default
global.text.on-sunken.brand.default color {brand.light.800}
light #0B2A69
dark #53D6F2
--global-text-on-sunken-brand-default
global.text.on-sunken.functional.success.default color {functional.success.700}
light #075D33
dark #129957
--global-text-on-sunken-functional-success-default
global.text.on-sunken.functional.warning.default color {functional.warning.900}
light #2D2107
dark #C38401
--global-text-on-sunken-functional-warning-default
global.text.on-sunken.functional.severe.default color {functional.severe.700}
light #764016
dark #CC6B0B
--global-text-on-sunken-functional-severe-default
global.text.on-sunken.functional.error.default color {functional.error.600}
light #C01619
dark #EE5248
--global-text-on-sunken-functional-error-default
global.text.on-sunken.functional.info.default color {functional.info.800}
light #0C2A68
dark #94B6F4
--global-text-on-sunken-functional-info-default
global.text.on-sunken.extended.lavender.default color {extended.lavender.700}
light #7534A9
dark #A653EA
--global-text-on-sunken-extended-lavender-default
global.text.on-sunken.extended.lime.default color {extended.lime.800}
light #2E340B
dark #B8CD06
--global-text-on-sunken-extended-lime-default
global.text.on-sunken.extended.coral.default color {extended.coral.800}
light #4D2112
dark #E75F2E
--global-text-on-sunken-extended-coral-default
global.text.on-sunken.extended.forest.default color {extended.forest.800}
light #0A382D
dark #68BBA1
--global-text-on-sunken-extended-forest-default
global.text.on-sunken.extended.azure.default color {extended.azure.800}
light #153443
dark #379BCA
--global-text-on-sunken-extended-azure-default
global.text.on-sunken.extended.orchid.default color {extended.orchid.800}
light #491E3B
dark #D956B1
--global-text-on-sunken-extended-orchid-default
global.text.on-sunken.extended.sand.default color {extended.sand.800}
light #353019
dark #ABA04B
--global-text-on-sunken-extended-sand-default
global.text.on-sunken.extended.amber.default color {extended.amber.800}
light #3B2D12
dark #DDAB35
--global-text-on-sunken-extended-amber-default
global.text.code.keyword color {extended.lavender.700}
light #7534A9
dark #B87BF5
--global-text-code-keyword
global.text.code.variable color {extended.orchid.700}
light #923D78
dark #F283CD
--global-text-code-variable
global.text.code.function color {extended.azure.700}
light #266280
dark #5BB8E7
--global-text-code-function
global.text.code.class-and-type
Decision code-colors-contrast (Code foundation): the Figma library extended.amber.500 is 1.96:1 on global.bg.level.1.default, under the 4.5:1 of WCAG 1.4.3.
 color {extended.amber.700}
light #7F6426
dark #EEB836
--global-text-code-class-and-type
global.text.code.string
Decision code-colors-contrast (Code foundation): the Figma library extended.forest.600 is 3.80:1 on global.bg.level.1.default.
 color {extended.forest.700}
light #18614E
dark #68BBA1
--global-text-code-string
global.text.code.number
Decision code-colors-contrast (Code foundation): the Figma library extended.coral.500 is 3.21:1 on global.bg.level.1.default, coral 600 still 4.30:1.
 color {extended.coral.700}
light #9C4324
dark #FD8C67
--global-text-code-number
global.text.code.comment color {light-switch.base.700}
light #4C4A4A
dark #9D9B9C
--global-text-code-comment
global.text.code.inserted
Lines a diff adds. The on-base success text step.
 color {functional.success.700}
light #075D33
dark #11C772
--global-text-code-inserted
global.text.code.deleted
Lines a diff removes. The step of error text on tinted fills: on-base error (error 500) is 4.26:1 on level 1.
 color {functional.error.600}
light #C01619
dark #FAA79D
--global-text-code-deleted
global.text.code.changed
Lines a context diff changes. The on-base severe text step.
 color {functional.severe.700}
light #764016
dark #FE8400
--global-text-code-changed
global.text.code.invalid
Code a grammar marks invalid or deprecated. Same step as deleted.
 color {functional.error.600}
light #C01619
dark #FAA79D
--global-text-code-invalid
global.text.code.link
URLs and links in code and markup. The on-base brand text step.
 color {brand.light.600}
light #175DD6
dark #9EE7FA
--global-text-code-link
global.text.state.skeleton.default color {light-switch.base.300}
light #D7D3D4
dark #282828
--global-text-state-skeleton-default
global.text.state.disabled.default color {light-switch.base.500}
light #8C8C8C
dark #9D9B9Cb2
--global-text-state-disabled-default
global.icon.on-base.neutral.primary color {global.text.on-base.neutral.primary}
light #0E0D0D
dark #D2CECF
--global-icon-on-base-neutral-primary
global.icon.on-base.neutral.secondary color {global.text.on-base.neutral.secondary}
light #323031
dark #B9B7B7
--global-icon-on-base-neutral-secondary
global.icon.on-base.neutral.tertiary color {global.text.on-base.neutral.tertiary}
light #616161
dark #9D9B9C
--global-icon-on-base-neutral-tertiary
global.icon.on-base.brand.default color {global.text.on-base.brand.default}
light #175DD6
dark #9EE7FA
--global-icon-on-base-brand-default
global.icon.on-base.functional.success.default color {global.text.on-base.functional.success.default}
light #075D33
dark #16AE64
--global-icon-on-base-functional-success-default
global.icon.on-base.functional.warning.default color {functional.warning.800}
light #3E2D0C
dark #644B16
--global-icon-on-base-functional-warning-default
global.icon.on-base.functional.severe.default color {global.text.on-base.functional.severe.default}
light #764016
dark #CC6B0B
--global-icon-on-base-functional-severe-default
global.icon.on-base.functional.error.default color {global.text.on-base.functional.error.default}
light #E12A23
dark #EE5248
--global-icon-on-base-functional-error-default
global.icon.on-base.functional.info.default color {global.text.on-base.functional.info.default}
light #2B68E0
dark #94B6F4
--global-icon-on-base-functional-info-default
global.icon.on-base.extended.lavender.default color {global.text.on-base.extended.lavender.default}
light #7534A9
dark #B87BF5
--global-icon-on-base-extended-lavender-default
global.icon.on-base.extended.lime.default color {global.text.on-base.extended.lime.default}
light #2E340B
dark #A0B316
--global-icon-on-base-extended-lime-default
global.icon.on-base.extended.coral.default color {global.text.on-base.extended.coral.default}
light #9C4324
dark #FD8C67
--global-icon-on-base-extended-coral-default
global.icon.on-base.extended.forest.default color {global.text.on-base.extended.forest.default}
light #18614E
dark #68BBA1
--global-icon-on-base-extended-forest-default
global.icon.on-base.extended.azure.default color {global.text.on-base.extended.azure.default}
light #153443
dark #5BB8E7
--global-icon-on-base-extended-azure-default
global.icon.on-base.extended.orchid.default color {global.text.on-base.extended.orchid.default}
light #923D78
dark #F283CD
--global-icon-on-base-extended-orchid-default
global.icon.on-base.extended.sand.default color {global.text.on-base.extended.sand.default}
light #353019
dark #ABA04B
--global-icon-on-base-extended-sand-default
global.icon.on-base.extended.amber.default color {global.text.on-base.extended.amber.default}
light #3B2D12
dark #DDAB35
--global-icon-on-base-extended-amber-default
global.icon.on-accent.neutral.primary color {global.text.on-accent.neutral.primary}
light #FDFDFD
dark #191919
--global-icon-on-accent-neutral-primary
global.icon.on-accent.neutral.secondary color {global.text.on-accent.neutral.secondary}
light #ECE8E9
dark #282828
--global-icon-on-accent-neutral-secondary
global.icon.on-accent.neutral.tertiary color {global.text.on-accent.neutral.tertiary}
light #D7D3D4
dark #303030
--global-icon-on-accent-neutral-tertiary
global.icon.on-accent.brand.default color {global.text.on-accent.brand.default}
light #FBFCFD
dark #09191D
--global-icon-on-accent-brand-default
global.icon.on-accent.functional.success.default color {global.text.on-accent.functional.success.default}
light #F8FEFA
dark #011C16
--global-icon-on-accent-functional-success-default
global.icon.on-accent.functional.warning.default color {functional.warning.950}
#1F1504
--global-icon-on-accent-functional-warning-default
global.icon.on-accent.functional.severe.default color {global.text.on-accent.functional.severe.default}
#271001
--global-icon-on-accent-functional-severe-default
global.icon.on-accent.functional.error.default color {global.text.on-accent.functional.error.default}
#FEFBFA
--global-icon-on-accent-functional-error-default
global.icon.on-accent.functional.info.default color {global.text.on-accent.functional.info.default}
light #FBFCFD
dark #09162F
--global-icon-on-accent-functional-info-default
global.icon.on-accent.extended.lavender.default color {global.text.on-accent.extended.lavender.default}
light #FDFBFF
dark #1D0E2C
--global-icon-on-accent-extended-lavender-default
global.icon.on-accent.extended.lime.default color {global.text.on-accent.extended.lime.default}
#171811
--global-icon-on-accent-extended-lime-default
global.icon.on-accent.extended.coral.default color {global.text.on-accent.extended.coral.default}
#1F1411
--global-icon-on-accent-extended-coral-default
global.icon.on-accent.extended.forest.default color {global.text.on-accent.extended.forest.default}
light #FAFDFC
dark #031C15
--global-icon-on-accent-extended-forest-default
global.icon.on-accent.extended.azure.default color {global.text.on-accent.extended.azure.default}
light #FAFCFE
dark #12181B
--global-icon-on-accent-extended-azure-default
global.icon.on-accent.extended.orchid.default color {global.text.on-accent.extended.orchid.default}
light #FEFBFD
dark #1D1419
--global-icon-on-accent-extended-orchid-default
global.icon.on-accent.extended.sand.default color {global.text.on-accent.extended.sand.default}
light #FEFDEC
dark #181710
--global-icon-on-accent-extended-sand-default
global.icon.on-accent.extended.amber.default color {global.text.on-accent.extended.amber.default}
#1A1611
--global-icon-on-accent-extended-amber-default
global.icon.on-accent.extended.purple.default color {global.text.on-accent.extended.purple.default}
#FCFCFD
--global-icon-on-accent-extended-purple-default
global.icon.on-accent.extended.yellow.default color {global.text.on-accent.extended.yellow.default}
#18180D
--global-icon-on-accent-extended-yellow-default
global.icon.on-accent.extended.green.default color {global.text.on-accent.extended.green.default}
#101A0B
--global-icon-on-accent-extended-green-default
global.icon.on-accent.extended.beige.default color {global.text.on-accent.extended.beige.default}
#1E150C
--global-icon-on-accent-extended-beige-default
global.icon.on-subtle.neutral.default color {global.text.on-subtle.neutral.default}
light #323031
dark #E3DDDE
--global-icon-on-subtle-neutral-default
global.icon.on-subtle.brand.default color {global.text.on-subtle.brand.default}
light #1148A9
dark #9EE7FA
--global-icon-on-subtle-brand-default
global.icon.on-subtle.functional.success.default color {global.text.on-subtle.functional.success.default}
light #075D33
dark #30F498
--global-icon-on-subtle-functional-success-default
global.icon.on-subtle.functional.warning.default color {functional.warning.800}
light #3E2D0C
dark #DFA700
--global-icon-on-subtle-functional-warning-default
global.icon.on-subtle.functional.severe.default color {global.text.on-subtle.functional.severe.default}
light #764016
dark #FFCAA8
--global-icon-on-subtle-functional-severe-default
global.icon.on-subtle.functional.error.default color {global.text.on-subtle.functional.error.default}
light #C01619
dark #FAA79D
--global-icon-on-subtle-functional-error-default
global.icon.on-subtle.functional.info.default color {global.text.on-subtle.functional.info.default}
light #1A4CAD
dark #BBCFF3
--global-icon-on-subtle-functional-info-default
global.icon.on-subtle.extended.lavender.default color {global.text.on-subtle.extended.lavender.default}
light #3F1A5C
dark #CA9EFA
--global-icon-on-subtle-extended-lavender-default
global.icon.on-subtle.extended.lime.default color {global.text.on-subtle.extended.lime.default}
light #2E340B
dark #E2FC00
--global-icon-on-subtle-extended-lime-default
global.icon.on-subtle.extended.coral.default color {global.text.on-subtle.extended.coral.default}
light #4D2112
dark #FEA78B
--global-icon-on-subtle-extended-coral-default
global.icon.on-subtle.extended.forest.default color {global.text.on-subtle.extended.forest.default}
light #18614E
dark #82D3B9
--global-icon-on-subtle-extended-forest-default
global.icon.on-subtle.extended.azure.default color {global.text.on-subtle.extended.azure.default}
light #153443
dark #8ACAED
--global-icon-on-subtle-extended-azure-default
global.icon.on-subtle.extended.orchid.default color {global.text.on-subtle.extended.orchid.default}
light #491E3B
dark #F5A1D7
--global-icon-on-subtle-extended-orchid-default
global.icon.on-subtle.extended.sand.default color {global.text.on-subtle.extended.sand.default}
light #68642C
dark #C8BC5A
--global-icon-on-subtle-extended-sand-default
global.icon.on-subtle.extended.amber.default color {global.text.on-subtle.extended.amber.default}
light #3B2D12
dark #DDAB35
--global-icon-on-subtle-extended-amber-default
global.icon.on-subtle.extended.purple.default color {global.text.on-subtle.extended.purple.default}
light #6B0DAC
dark #E2CBFD
--global-icon-on-subtle-extended-purple-default
global.icon.on-subtle.extended.yellow.default color {global.text.on-subtle.extended.yellow.default}
light #5B5A21
dark #D8DE58
--global-icon-on-subtle-extended-yellow-default
global.icon.on-subtle.extended.green.default color {global.text.on-subtle.extended.green.default}
light #3F6717
dark #A8EF5A
--global-icon-on-subtle-extended-green-default
global.icon.on-subtle.extended.beige.default color {global.text.on-subtle.extended.beige.default}
light #67431E
dark #E9C39E
--global-icon-on-subtle-extended-beige-default
global.icon.on-sunken.brand.default color {global.text.on-sunken.brand.default}
light #0B2A69
dark #53D6F2
--global-icon-on-sunken-brand-default
global.icon.on-sunken.functional.success.default color {global.text.on-sunken.functional.success.default}
light #075D33
dark #129957
--global-icon-on-sunken-functional-success-default
global.icon.on-sunken.functional.warning.default color {global.icon.on-base.functional.warning.default}
light #3E2D0C
dark #C38401
--global-icon-on-sunken-functional-warning-default
global.icon.on-sunken.functional.severe.default color {global.text.on-sunken.functional.severe.default}
light #764016
dark #CC6B0B
--global-icon-on-sunken-functional-severe-default
global.icon.on-sunken.functional.error.default color {global.text.on-sunken.functional.error.default}
light #C01619
dark #EE5248
--global-icon-on-sunken-functional-error-default
global.icon.on-sunken.functional.info.default
Created by the POC2 migration. Value not set. Remove -RET once assigned.
 color {global.text.on-sunken.functional.info.default}
light #0C2A68
dark #94B6F4
--global-icon-on-sunken-functional-info-default
global.icon.on-sunken.extended.lavender.default color {global.text.on-sunken.extended.lavender.default}
light #7534A9
dark #A653EA
--global-icon-on-sunken-extended-lavender-default
global.icon.on-sunken.extended.lime.default color {global.text.on-sunken.extended.lime.default}
light #2E340B
dark #B8CD06
--global-icon-on-sunken-extended-lime-default
global.icon.on-sunken.extended.coral.default color {global.text.on-sunken.extended.coral.default}
light #4D2112
dark #E75F2E
--global-icon-on-sunken-extended-coral-default
global.icon.on-sunken.extended.forest.default color {global.text.on-sunken.extended.forest.default}
light #0A382D
dark #68BBA1
--global-icon-on-sunken-extended-forest-default
global.icon.on-sunken.extended.azure.default color {global.text.on-sunken.extended.azure.default}
light #153443
dark #379BCA
--global-icon-on-sunken-extended-azure-default
global.icon.on-sunken.extended.orchid.default color {global.text.on-sunken.extended.orchid.default}
light #491E3B
dark #D956B1
--global-icon-on-sunken-extended-orchid-default
global.icon.on-sunken.extended.sand.default color {global.text.on-sunken.extended.sand.default}
light #353019
dark #ABA04B
--global-icon-on-sunken-extended-sand-default
global.icon.on-sunken.extended.amber.default color {global.text.on-sunken.extended.amber.default}
light #3B2D12
dark #DDAB35
--global-icon-on-sunken-extended-amber-default
global.icon.state.disabled.default color {global.text.state.disabled.default}
light #8C8C8C
dark #9D9B9Cb2
--global-icon-state-disabled-default
global.icon.state.skeleton.default color {global.text.state.skeleton.default}
light #D7D3D4
dark #282828
--global-icon-state-skeleton-default
global.border.level.edge.sunken.default color {light-switch.base.300}
light #D7D3D4
dark #282828
--global-border-level-edge-sunken-default
global.border.level.edge.level.0 color {light-switch.base.200}
light #DFDBDC
dark #212121
--global-border-level-edge-level-0
global.border.level.edge.level.1 color {light-switch.base.300}
light #D7D3D4
dark #282828
--global-border-level-edge-level-1
global.border.level.edge.level.2 color {light-switch.base.200}
light #DFDBDC
dark #303030
--global-border-level-edge-level-2
global.border.level.edge.level.3 color {light-switch.base.300}
light #D7D3D4
dark #363636
--global-border-level-edge-level-3
global.border.level.edge.state.hover color {light-switch.base.500}
light #8C8C8C
dark #363636
--global-border-level-edge-state-hover
global.border.level.edge.state.active color {light-switch.base.900}
light #201E1F
dark #D2CECF
--global-border-level-edge-state-active
global.border.level.on-level.0 color {light-switch.base.100}
light #ECE8E9
dark #303030
--global-border-level-on-level-0
global.border.level.on-level.1 color {light-switch.base.200}
light #DFDBDC
dark #363636
--global-border-level-on-level-1
global.border.level.on-level.2 color {light-switch.base.100}
light #ECE8E9
dark #767676
--global-border-level-on-level-2
global.border.level.on-level.3 color {light-switch.base.200}
light #DFDBDC
dark #9D9B9C
--global-border-level-on-level-3
global.border.level.blend.0 color {global.bg.level.0.default}
light #FDFDFD
dark #191919
--global-border-level-blend-0
global.border.level.blend.1 color {global.bg.level.1.default}
light #F7F6F6
dark #212121
--global-border-level-blend-1
global.border.level.blend.2 color {global.bg.level.2.default}
light #FDFDFD
dark #282828
--global-border-level-blend-2
global.border.level.blend.3 color {global.bg.level.3.default}
light #F7F6F6
dark #303030
--global-border-level-blend-3
global.border.base.neutral.1 color {light-switch.base.100}
light #ECE8E9
dark #212121
--global-border-base-neutral-1
global.border.base.neutral.2 color {light-switch.base.200}
light #DFDBDC
dark #282828
--global-border-base-neutral-2
global.border.base.neutral.3 color {light-switch.base.300}
light #D7D3D4
dark #303030
--global-border-base-neutral-3
global.border.base.neutral.4 color {light-switch.base.400}
light #B6B4B4
dark #363636
--global-border-base-neutral-4
global.border.base.neutral.5 color {light-switch.base.500}
light #8C8C8C
dark #303030
--global-border-base-neutral-5
global.border.base.brand.default color {brand.light.500}
light #497EDE
dark #53D6F2
--global-border-base-brand-default
global.border.base.functional.success.default color {functional.success.500}
light #129957
dark #16AE64
--global-border-base-functional-success-default
global.border.base.functional.warning.default color {functional.warning.400}
light #DFA700
dark #C38401
--global-border-base-functional-warning-default
global.border.base.functional.severe.default color {functional.severe.400}
light #DE7B27
dark #CC6B0B
--global-border-base-functional-severe-default
global.border.base.functional.error.default
Highlight of a form, of a shape that need to be seen more than just a regular border.
 color {functional.error.600}
light #C01619
dark #E12A23
--global-border-base-functional-error-default
global.border.base.functional.info.default color {functional.info.500}
light #5085EA
dark #709DF1
--global-border-base-functional-info-default
global.border.base.extended.lavender.default color {extended.lavender.600}
light #8D3BCD
dark #B87BF5
--global-border-base-extended-lavender-default
global.border.base.extended.lime.default color {extended.lime.500}
light #B8CD06
dark #CAE200
--global-border-base-extended-lime-default
global.border.base.extended.coral.default color {extended.coral.600}
light #C35129
dark #FD8C67
--global-border-base-extended-coral-default
global.border.base.extended.forest.default color {extended.forest.600}
light #318C73
dark #68BBA1
--global-border-base-extended-forest-default
global.border.base.extended.azure.default color {extended.azure.600}
light #2C7A9F
dark #5BB8E7
--global-border-base-extended-azure-default
global.border.base.extended.orchid.default color {extended.orchid.600}
light #B74A96
dark #F283CD
--global-border-base-extended-orchid-default
global.border.base.extended.sand.default color {extended.sand.600}
light #857B38
dark #C8BC5A
--global-border-base-extended-sand-default
global.border.base.extended.amber.default color {extended.amber.600}
light #B58D31
dark #EEB836
--global-border-base-extended-amber-default
global.border.accent.neutral.default color {light-switch.base.800}
light #323031
dark #B9B7B7
--global-border-accent-neutral-default
global.border.accent.neutral.hover color {light-switch.base.700}
light #4C4A4A
dark #B9B7B7
--global-border-accent-neutral-hover
global.border.accent.neutral.active color {light-switch.base.600}
light #616161
dark #9D9B9C
--global-border-accent-neutral-active
global.border.accent.brand.default color {brand.light.700}
light #1148A9
dark #53D6F2
--global-border-accent-brand-default
global.border.accent.brand.hover color {brand.light.800}
light #0B2A69
dark #41B9D3
--global-border-accent-brand-hover
global.border.accent.brand.active color {brand.light.900}
light #0B204D
dark #3499AF
--global-border-accent-brand-active
global.border.accent.functional.success.default color {functional.success.700}
light #075D33
dark #16AE64
--global-border-accent-functional-success-default
global.border.accent.functional.success.hover color {functional.success.800}
light #023A1E
dark #129957
--global-border-accent-functional-success-hover
global.border.accent.functional.success.active color {functional.success.900}
light #022A23
dark #0B7742
--global-border-accent-functional-success-active
global.border.accent.functional.warning.default color {functional.warning.400}
#DFA700
--global-border-accent-functional-warning-default
global.border.accent.functional.warning.hover color {functional.warning.500}
#C38401
--global-border-accent-functional-warning-hover
global.border.accent.functional.warning.active color {functional.warning.600}
#765818
--global-border-accent-functional-warning-active
global.border.accent.functional.severe.default color {functional.severe.400}
#DE7B27
--global-border-accent-functional-severe-default
global.border.accent.functional.severe.hover color {functional.severe.500}
#CC6B0B
--global-border-accent-functional-severe-hover
global.border.accent.functional.severe.active color {functional.severe.600}
#894C1A
--global-border-accent-functional-severe-active
global.border.accent.functional.error.default color {functional.error.600}
#C01619
--global-border-accent-functional-error-default
global.border.accent.functional.error.hover color {functional.error.700}
#940E11
--global-border-accent-functional-error-hover
global.border.accent.functional.error.active color {functional.error.800}
#531A16
--global-border-accent-functional-error-active
global.border.accent.functional.info.default color {functional.info.700}
light #1A4CAD
dark #709DF1
--global-border-accent-functional-info-default
global.border.accent.functional.info.hover color {functional.info.800}
light #0C2A68
dark #5085EA
--global-border-accent-functional-info-hover
global.border.accent.functional.info.active color {functional.info.900}
light #0B204B
dark #2B68E0
--global-border-accent-functional-info-active
global.border.accent.extended.lavender.default color {extended.lavender.600}
light #8D3BCD
dark #A653EA
--global-border-accent-extended-lavender-default
global.border.accent.extended.lime.default color {extended.lime.300}
#D7F100
--global-border-accent-extended-lime-default
global.border.accent.extended.coral.default color {extended.coral.600}
light #C35129
dark #E75F2E
--global-border-accent-extended-coral-default
global.border.accent.extended.forest.default color {extended.forest.700}
light #18614E
dark #318C73
--global-border-accent-extended-forest-default
global.border.accent.extended.azure.default color {extended.azure.700}
light #266280
dark #379BCA
--global-border-accent-extended-azure-default
global.border.accent.extended.orchid.default color {extended.orchid.700}
light #923D78
dark #D956B1
--global-border-accent-extended-orchid-default
global.border.accent.extended.sand.default color {extended.sand.500}
#ABA04B
--global-border-accent-extended-sand-default
global.border.accent.extended.amber.default color {extended.amber.400}
light #EEB836
dark #DDAB35
--global-border-accent-extended-amber-default
global.border.accent.extended.purple.default color {branded-extended.purple.700}
#6B0DAC
--global-border-accent-extended-purple-default
global.border.accent.extended.purple.hover color {branded-extended.purple.800}
#410B6A
--global-border-accent-extended-purple-hover
global.border.accent.extended.purple.active color {branded-extended.purple.900}
#310056
--global-border-accent-extended-purple-active
global.border.accent.extended.yellow.default color {branded-extended.yellow.200}
#D8DE58
--global-border-accent-extended-yellow-default
global.border.accent.extended.yellow.hover color {branded-extended.yellow.300}
#C1C546
--global-border-accent-extended-yellow-hover
global.border.accent.extended.yellow.active color {branded-extended.yellow.400}
#A7A93E
--global-border-accent-extended-yellow-active
global.border.accent.extended.green.default color {branded-extended.green.300}
#91D643
--global-border-accent-extended-green-default
global.border.accent.extended.green.hover color {branded-extended.green.400}
#7BBA36
--global-border-accent-extended-green-hover
global.border.accent.extended.green.active color {branded-extended.green.500}
#659C2A
--global-border-accent-extended-green-active
global.border.accent.extended.beige.default color {branded-extended.beige.300}
#E2A261
--global-border-accent-extended-beige-default
global.border.accent.extended.beige.hover color {branded-extended.beige.400}
#C28548
--global-border-accent-extended-beige-hover
global.border.accent.extended.beige.active color {branded-extended.beige.500}
#A06931
--global-border-accent-extended-beige-active
global.border.subtle.neutral.default color {light-switch.base.200}
light #DFDBDC
dark #36363680
--global-border-subtle-neutral-default
global.border.subtle.neutral.hover color {light-switch.base.300}
light #D7D3D4
dark #363636
--global-border-subtle-neutral-hover
global.border.subtle.neutral.active color {light-switch.base.400}
light #B6B4B4
dark #767676
--global-border-subtle-neutral-active
global.border.subtle.brand.default color {brand.light.100}
light #DDE6F5
dark #0D272E
--global-border-subtle-brand-default
global.border.subtle.brand.hover color {brand.light.200}
light #BFD1F1
dark #10363E
--global-border-subtle-brand-hover
global.border.subtle.brand.active color {brand.light.300}
light #9BB9EC
dark #1F606E
--global-border-subtle-brand-active
global.border.subtle.functional.success.default color {functional.success.100}
light #AEF6C9
dark #022A23
--global-border-subtle-functional-success-default
global.border.subtle.functional.success.hover color {functional.success.200}
light #30F498
dark #023A1E
--global-border-subtle-functional-success-hover
global.border.subtle.functional.success.active color {functional.success.300}
light #11C772
dark #075D33
--global-border-subtle-functional-success-active
global.border.subtle.functional.warning.default color {functional.warning.100}
light #FFE495
dark #2D2107
--global-border-subtle-functional-warning-default
global.border.subtle.functional.warning.hover color {functional.warning.200}
light #FFD654
dark #3E2D0C
--global-border-subtle-functional-warning-hover
global.border.subtle.functional.warning.active color {functional.warning.300}
light #FFC61C
dark #644B16
--global-border-subtle-functional-warning-active
global.border.subtle.functional.severe.default color {functional.severe.100}
light #FFDFCB
dark #381A02
--global-border-subtle-functional-severe-default
global.border.subtle.functional.severe.hover color {functional.severe.200}
light #FFCAA8
dark #4A2506
--global-border-subtle-functional-severe-hover
global.border.subtle.functional.severe.active color {functional.severe.300}
light #FE8400
dark #764016
--global-border-subtle-functional-severe-active
global.border.subtle.functional.error.default color {functional.error.100}
light #FCCDC6
dark #3E130F
--global-border-subtle-functional-error-default
global.border.subtle.functional.error.hover color {functional.error.200}
light #FAA79D
dark #531A16
--global-border-subtle-functional-error-hover
global.border.subtle.functional.error.active color {functional.error.300}
light #F88275
dark #940E11
--global-border-subtle-functional-error-active
global.border.subtle.functional.info.default color {functional.info.100}
light #DEE7F6
dark #0B204B
--global-border-subtle-functional-info-default
global.border.subtle.functional.info.hover color {functional.info.200}
light #BBCFF3
dark #0C2A68
--global-border-subtle-functional-info-hover
global.border.subtle.functional.info.active color {functional.info.300}
light #94B6F4
dark #1A4CAD
--global-border-subtle-functional-info-active
global.border.subtle.extended.lavender.default color {extended.lavender.200}
light #DABCFD
dark #3F1A5C
--global-border-subtle-extended-lavender-default
global.border.subtle.extended.lime.default color {extended.lime.100}
light #EAFE8C
dark #2E340B
--global-border-subtle-extended-lime-default
global.border.subtle.extended.coral.default color {extended.coral.200}
light #FEC8B6
dark #4D2112
--global-border-subtle-extended-coral-default
global.border.subtle.extended.forest.default color {extended.forest.200}
light #9EE8CF
dark #0A382D
--global-border-subtle-extended-forest-default
global.border.subtle.extended.azure.default color {extended.azure.200}
light #B5DDF3
dark #153443
--global-border-subtle-extended-azure-default
global.border.subtle.extended.orchid.default color {extended.orchid.200}
light #F8C4E4
dark #491E3B
--global-border-subtle-extended-orchid-default
global.border.subtle.extended.sand.default color {extended.sand.200}
light #F2E76F
dark #353019
--global-border-subtle-extended-sand-default
global.border.subtle.extended.amber.default color {extended.amber.200}
light #FEDC97
dark #3B2D12
--global-border-subtle-extended-amber-default
global.border.subtle.extended.purple.default color {branded-extended.purple.100}
light #EEE4FB
dark #310056
--global-border-subtle-extended-purple-default
global.border.subtle.extended.purple.hover color {branded-extended.purple.200}
light #E2CBFD
dark #410B6A
--global-border-subtle-extended-purple-hover
global.border.subtle.extended.purple.active color {branded-extended.purple.300}
light #D5AEFF
dark #6B0DAC
--global-border-subtle-extended-purple-active
global.border.subtle.extended.yellow.default color {branded-extended.yellow.100}
light #EBF479
dark #25240F
--global-border-subtle-extended-yellow-default
global.border.subtle.extended.yellow.hover color {branded-extended.yellow.200}
light #D8DE58
dark #323212
--global-border-subtle-extended-yellow-hover
global.border.subtle.extended.yellow.active color {branded-extended.yellow.300}
light #C1C546
dark #5B5A21
--global-border-subtle-extended-yellow-active
global.border.subtle.extended.green.default color {branded-extended.green.100}
light #CEFCA4
dark #152A03
--global-border-subtle-extended-green-default
global.border.subtle.extended.green.hover color {branded-extended.green.200}
light #A8EF5A
dark #20370B
--global-border-subtle-extended-green-hover
global.border.subtle.extended.green.active color {branded-extended.green.300}
light #91D643
dark #3F6717
--global-border-subtle-extended-green-active
global.border.subtle.extended.beige.default color {branded-extended.beige.100}
light #EFDFCF
dark #301F10
--global-border-subtle-extended-beige-default
global.border.subtle.extended.beige.hover color {branded-extended.beige.200}
light #E9C39E
dark #412A13
--global-border-subtle-extended-beige-hover
global.border.subtle.extended.beige.active color {branded-extended.beige.300}
light #E2A261
dark #67431E
--global-border-subtle-extended-beige-active
global.border.state.disabled.default
light-switch.base.400 at opacity.40: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.7138650417327881,0.7059080004692078,0.7059076428413391],"alpha":0.4000000059604645,"hex":"#B6B4B4"}
light #B6B4B466
dark #363636b2
--global-border-state-disabled-default
brand-identity.marine-blue color {brand.identity-base.marine-blue}
light #242A75
dark #FFFFFF
--brand-identity-marine-blue
brand-identity.light-blue color {brand.identity-base.light-blue}
#00BBDD
--brand-identity-light-blue
dataviz.role.brand.bg.accent.brand-1 color {brand.light.800}
light #0B2A69
dark #9EE7FA
--dataviz-role-brand-bg-accent-brand-1
dataviz.role.brand.bg.accent.brand-2 color {brand.light.700}
light #1148A9
dark #53D6F2
--dataviz-role-brand-bg-accent-brand-2
dataviz.role.brand.bg.accent.brand-3 color {brand.light.600}
light #175DD6
dark #41B9D3
--dataviz-role-brand-bg-accent-brand-3
dataviz.role.brand.bg.accent.brand-4 color {brand.light.500}
light #497EDE
dark #3499AF
--dataviz-role-brand-bg-accent-brand-4
dataviz.role.brand.bg.accent.brand-5 color {brand.light.400}
light #749DE5
dark #297B8C
--dataviz-role-brand-bg-accent-brand-5
dataviz.role.brand.bg.subtile.brand-1 color {brand.light.400}
light #749DE5
dark #53D6F2
--dataviz-role-brand-bg-subtile-brand-1
dataviz.role.brand.bg.subtile.brand-2 color {brand.light.300}
light #9BB9EC
dark #41B9D3
--dataviz-role-brand-bg-subtile-brand-2
dataviz.role.brand.bg.subtile.brand-3 color {brand.light.200}
light #BFD1F1
dark #3499AF
--dataviz-role-brand-bg-subtile-brand-3
dataviz.role.brand.bg.subtile.brand-4 color {brand.light.100}
light #DDE6F5
dark #297B8C
--dataviz-role-brand-bg-subtile-brand-4
dataviz.role.brand.bg.subtile.brand-5 color {brand.light.50}
light #EEF1F7
dark #1F606E
--dataviz-role-brand-bg-subtile-brand-5
dataviz.role.brand.bg.area.brand-1 color {brand.light.50}
light #EEF1F7
dark #09191D
--dataviz-role-brand-bg-area-brand-1
dataviz.role.brand.bg.area.brand-2 color {brand.light.50}
light #EEF1F7
dark #09191D
--dataviz-role-brand-bg-area-brand-2
dataviz.role.brand.bg.area.brand-3 color {brand.light.50}
light #EEF1F7
dark #09191D
--dataviz-role-brand-bg-area-brand-3
dataviz.role.brand.bg.area.brand-4 color {brand.light.50}
light #EEF1F7
dark #09191D
--dataviz-role-brand-bg-area-brand-4
dataviz.role.brand.bg.area.brand-5 color {brand.light.50}
light #EEF1F7
dark #09191D
--dataviz-role-brand-bg-area-brand-5
dataviz.role.brand.text.base.brand-1 color {brand.light.700}
light #1148A9
dark #53D6F2
--dataviz-role-brand-text-base-brand-1
dataviz.role.brand.text.base.brand-2 color {brand.light.700}
light #1148A9
dark #53D6F2
--dataviz-role-brand-text-base-brand-2
dataviz.role.brand.text.base.brand-3 color {brand.light.700}
light #1148A9
dark #53D6F2
--dataviz-role-brand-text-base-brand-3
dataviz.role.brand.text.base.brand-4 color {brand.light.700}
light #1148A9
dark #53D6F2
--dataviz-role-brand-text-base-brand-4
dataviz.role.brand.text.base.brand-5 color {brand.light.700}
light #1148A9
dark #53D6F2
--dataviz-role-brand-text-base-brand-5
dataviz.role.brand.text.on-accent.brand-1 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-text-on-accent-brand-1
dataviz.role.brand.text.on-accent.brand-2 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-text-on-accent-brand-2
dataviz.role.brand.text.on-accent.brand-3 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-text-on-accent-brand-3
dataviz.role.brand.text.on-accent.brand-4 color {brand.light.950}
light #05133A
dark #E4F7FC
--dataviz-role-brand-text-on-accent-brand-4
dataviz.role.brand.text.on-accent.brand-5 color {brand.light.950}
light #05133A
dark #E4F7FC
--dataviz-role-brand-text-on-accent-brand-5
dataviz.role.brand.text.on-subtile.brand-1 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-text-on-subtile-brand-1
dataviz.role.brand.text.on-subtile.brand-2 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-text-on-subtile-brand-2
dataviz.role.brand.text.on-subtile.brand-3 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-text-on-subtile-brand-3
dataviz.role.brand.text.on-subtile.brand-4 color {brand.light.950}
light #05133A
dark #E4F7FC
--dataviz-role-brand-text-on-subtile-brand-4
dataviz.role.brand.text.on-subtile.brand-5 color {brand.light.950}
light #05133A
dark #E4F7FC
--dataviz-role-brand-text-on-subtile-brand-5
dataviz.role.brand.icon.brand-1 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-icon-brand-1
dataviz.role.brand.icon.brand-2 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-icon-brand-2
dataviz.role.brand.icon.brand-3 color {brand.light.25}
light #FBFCFD
dark #09191D
--dataviz-role-brand-icon-brand-3
dataviz.role.brand.icon.brand-4 color {brand.light.950}
light #05133A
dark #E4F7FC
--dataviz-role-brand-icon-brand-4
dataviz.role.brand.icon.brand-5 color {brand.light.950}
light #05133A
dark #E4F7FC
--dataviz-role-brand-icon-brand-5
dataviz.role.brand.border.base.brand-1 color {brand.light.800}
light #0B2A69
dark #9EE7FA
--dataviz-role-brand-border-base-brand-1
dataviz.role.brand.border.base.brand-2 color {brand.light.600}
light #175DD6
dark #41B9D3
--dataviz-role-brand-border-base-brand-2
dataviz.role.brand.border.base.brand-3 color {brand.light.400}
light #749DE5
dark #1F606E
--dataviz-role-brand-border-base-brand-3
dataviz.role.brand.border.base.brand-4 color {brand.light.200}
light #BFD1F1
dark #10363E
--dataviz-role-brand-border-base-brand-4
dataviz.role.brand.border.base.brand-5 color {brand.light.200}
light #BFD1F1
dark #0D272E
--dataviz-role-brand-border-base-brand-5
dataviz.role.brand.border.on-accent.brand-1 color {brand.light.800}
light #0B2A69
dark #9EE7FA
--dataviz-role-brand-border-on-accent-brand-1
dataviz.role.brand.border.on-accent.brand-2 color {brand.light.600}
light #175DD6
dark #53D6F2
--dataviz-role-brand-border-on-accent-brand-2
dataviz.role.brand.border.on-accent.brand-3 color {brand.light.500}
light #497EDE
dark #41B9D3
--dataviz-role-brand-border-on-accent-brand-3
dataviz.role.brand.border.on-accent.brand-4 color {brand.light.400}
light #749DE5
dark #3499AF
--dataviz-role-brand-border-on-accent-brand-4
dataviz.role.brand.border.on-accent.brand-5 color {brand.light.300}
light #9BB9EC
dark #297B8C
--dataviz-role-brand-border-on-accent-brand-5
dataviz.role.brand.border.separator.brand-1 color {brand.light.100}
light #DDE6F5
dark #9EE7FA
--dataviz-role-brand-border-separator-brand-1
dataviz.role.brand.border.separator.brand-2 color {brand.light.600}
light #175DD6
dark #53D6F2
--dataviz-role-brand-border-separator-brand-2
dataviz.role.brand.border.separator.brand-3 color {brand.light.500}
light #497EDE
dark #41B9D3
--dataviz-role-brand-border-separator-brand-3
dataviz.role.brand.border.separator.brand-4 color {brand.light.400}
light #749DE5
dark #3499AF
--dataviz-role-brand-border-separator-brand-4
dataviz.role.brand.border.separator.brand-5 color {brand.light.300}
light #9BB9EC
dark #297B8C
--dataviz-role-brand-border-separator-brand-5
dataviz.role.functionnal.bg.accent.error-accent color {functional.error.600}
light #C01619
dark #D3392A
--dataviz-role-functionnal-bg-accent-error-accent
dataviz.role.functionnal.bg.accent.success-accent
The Figma library aliases Colors / Mapped: bg/functionnal/success/success-primary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.10196078568696976,0.5921568870544434,0.3490196168422699],"alpha":1,"hex":"#1A9759"}
#1A9759
--dataviz-role-functionnal-bg-accent-success-accent
dataviz.role.functionnal.bg.accent.warning-accent
The Figma library aliases Colors / Alias: function/warning/400, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[1,0.7764706015586853,0.10980392247438431],"alpha":1,"hex":"#FFC61C"}
#FFC61C
--dataviz-role-functionnal-bg-accent-warning-accent
dataviz.role.functionnal.bg.subtile.error-subtile
The Figma library aliases Colors / Mapped: bg/functionnal/error/error-secondary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9921568632125854,0.9529411792755127,0.9490196108818054],"alpha":1,"hex":"#FDF3F2"}
light #FDF3F2
dark #2B0B08
--dataviz-role-functionnal-bg-subtile-error-subtile
dataviz.role.functionnal.bg.subtile.success-subtile
The Figma library aliases Colors / Mapped: bg/functionnal/success/success-secondary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.929411768913269,0.9921568632125854,0.9529411792755127],"alpha":1,"hex":"#EDFDF3"}
light #EDFDF3
dark #011C16
--dataviz-role-functionnal-bg-subtile-success-subtile
dataviz.role.functionnal.bg.subtile.warning-subtile color {functional.warning.50}
light #FFF1C7
dark #1F1504
--dataviz-role-functionnal-bg-subtile-warning-subtile
dataviz.role.functionnal.text.on-accent.error-accent color {global.text.on-accent.functional.error.default}
#FEFBFA
--dataviz-role-functionnal-text-on-accent-error-accent
dataviz.role.functionnal.text.on-accent.success-accent color {global.text.on-accent.functional.success.default}
light #F8FEFA
dark #011C16
--dataviz-role-functionnal-text-on-accent-success-accent
dataviz.role.functionnal.text.on-accent.warning-accent color {global.text.on-accent.functional.warning.default}
#1F1504
--dataviz-role-functionnal-text-on-accent-warning-accent
dataviz.role.functionnal.text.on-subtile.error-subtile color {global.text.on-subtle.functional.error.default}
light #C01619
dark #FAA79D
--dataviz-role-functionnal-text-on-subtile-error-subtile
dataviz.role.functionnal.text.on-subtile.success-subtile color {global.text.on-subtle.functional.success.default}
light #075D33
dark #30F498
--dataviz-role-functionnal-text-on-subtile-success-subtile
dataviz.role.functionnal.text.on-subtile.warning-subtile color {global.text.on-subtle.functional.warning.default}
light #644B16
dark #FFD654
--dataviz-role-functionnal-text-on-subtile-warning-subtile
dataviz.role.functionnal.text.base.error-base color {global.text.on-base.functional.error.default}
light #E12A23
dark #EE5248
--dataviz-role-functionnal-text-base-error-base
dataviz.role.functionnal.text.base.success-base color {global.text.on-base.functional.success.default}
light #075D33
dark #16AE64
--dataviz-role-functionnal-text-base-success-base
dataviz.role.functionnal.text.base.warning-base color {global.text.on-base.functional.warning.default}
light #3E2D0C
dark #644B16
--dataviz-role-functionnal-text-base-warning-base
dataviz.role.functionnal.icon.on-accent.error-accent color {global.text.on-accent.functional.error.default}
#FEFBFA
--dataviz-role-functionnal-icon-on-accent-error-accent
dataviz.role.functionnal.icon.on-accent.success-accent color {global.text.on-accent.functional.success.default}
light #F8FEFA
dark #011C16
--dataviz-role-functionnal-icon-on-accent-success-accent
dataviz.role.functionnal.icon.on-accent.warning-accent color {global.text.on-accent.functional.warning.default}
#1F1504
--dataviz-role-functionnal-icon-on-accent-warning-accent
dataviz.role.functionnal.icon.on-subtile.error-subtile color {global.text.on-subtle.functional.error.default}
light #C01619
dark #FAA79D
--dataviz-role-functionnal-icon-on-subtile-error-subtile
dataviz.role.functionnal.icon.on-subtile.success-subtile color {global.text.on-subtle.functional.success.default}
light #075D33
dark #30F498
--dataviz-role-functionnal-icon-on-subtile-success-subtile
dataviz.role.functionnal.icon.on-subtile.warning-subtile color {global.text.on-subtle.functional.warning.default}
light #644B16
dark #FFD654
--dataviz-role-functionnal-icon-on-subtile-warning-subtile
dataviz.role.functionnal.icon.base.error-base color {global.text.on-base.functional.error.default}
light #E12A23
dark #EE5248
--dataviz-role-functionnal-icon-base-error-base
dataviz.role.functionnal.icon.base.success-base color {global.text.on-base.functional.success.default}
light #075D33
dark #16AE64
--dataviz-role-functionnal-icon-base-success-base
dataviz.role.functionnal.icon.base.warning-base color {global.text.on-base.functional.warning.default}
light #3E2D0C
dark #644B16
--dataviz-role-functionnal-icon-base-warning-base
dataviz.role.functionnal.border.base.error-base color {global.border.base.functional.error.default}
light #C01619
dark #E12A23
--dataviz-role-functionnal-border-base-error-base
dataviz.role.functionnal.border.base.success-base color {global.border.base.functional.success.default}
light #129957
dark #16AE64
--dataviz-role-functionnal-border-base-success-base
dataviz.role.functionnal.border.base.warning-base color {global.border.base.functional.warning.default}
light #DFA700
dark #C38401
--dataviz-role-functionnal-border-base-warning-base
dataviz.role.functionnal.border.on-accent.error-accent color {global.border.accent.functional.error.default}
#C01619
--dataviz-role-functionnal-border-on-accent-error-accent
dataviz.role.functionnal.border.on-accent.success-accent color {global.border.accent.functional.success.default}
light #075D33
dark #16AE64
--dataviz-role-functionnal-border-on-accent-success-accent
dataviz.role.functionnal.border.on-accent.warning-accent color {global.border.accent.functional.warning.default}
#DFA700
--dataviz-role-functionnal-border-on-accent-warning-accent
dataviz.role.functionnal.border.on-subtile.error-subtile color {global.border.subtle.functional.error.default}
light #FCCDC6
dark #3E130F
--dataviz-role-functionnal-border-on-subtile-error-subtile
dataviz.role.functionnal.border.on-subtile.success-subtile color {global.border.subtle.functional.success.default}
light #AEF6C9
dark #022A23
--dataviz-role-functionnal-border-on-subtile-success-subtile
dataviz.role.functionnal.border.on-subtile.warning-subtile color {global.border.subtle.functional.warning.default}
light #FFE495
dark #2D2107
--dataviz-role-functionnal-border-on-subtile-warning-subtile
dataviz.role.extended.sand.accent.extended-1 color {extended.lavender.500}
light #A653EA
dark #8D3BCD
--dataviz-role-extended-sand-accent-extended-1
dataviz.role.extended.sand.accent.extended-2 color {extended.lime.400}
#CAE200
--dataviz-role-extended-sand-accent-extended-2
dataviz.role.extended.sand.accent.extended-3 color {extended.coral.500}
light #E75F2E
dark #C35129
--dataviz-role-extended-sand-accent-extended-3
dataviz.role.extended.sand.accent.extended-4 color {extended.forest.600}
light #318C73
dark #1B8E76
--dataviz-role-extended-sand-accent-extended-4
dataviz.role.extended.sand.accent.extended-5
The Figma library aliases Colors / Base: extended/archive/royal-blue/400, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.4833069145679474,0.5213414430618286,0.9993811845779419],"alpha":1,"hex":"#7B85FF"}
#7B85FF
--dataviz-role-extended-sand-accent-extended-5
dataviz.role.extended.sand.accent.extended-6 color {extended.orchid.400}
light #F283CD
dark #E18FD1
--dataviz-role-extended-sand-accent-extended-6
dataviz.role.extended.sand.accent.extended-7 color {extended.sand.500}
light #ABA04B
dark #B38F6B
--dataviz-role-extended-sand-accent-extended-7
dataviz.role.extended.sand.accent.extended-8 color {extended.amber.500}
light #DDAB35
dark #F2AB31
--dataviz-role-extended-sand-accent-extended-8
dataviz.role.extended.sand.subtile.extended-1 color {extended.lavender.200}
light #DABCFD
dark #3F1A5C
--dataviz-role-extended-sand-subtile-extended-1
dataviz.role.extended.sand.subtile.extended-2
The Figma library aliases Colors / Alias: extended/mustard/100, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9254902005195618,0.9725490212440491,0.7176470756530762],"alpha":1,"hex":"#ECF8B7"}
light #ECF8B7
dark #22260E
--dataviz-role-extended-sand-subtile-extended-2
dataviz.role.extended.sand.subtile.extended-3 color {extended.coral.200}
light #FEC8B6
dark #4D2112
--dataviz-role-extended-sand-subtile-extended-3
dataviz.role.extended.sand.subtile.extended-4
The Figma library aliases Colors / Alias: extended/green/100, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.8220269680023193,0.9754130244255066,0.9238743185997009],"alpha":1,"hex":"#D2F9EC"}
light #D2F9EC
dark #052A20
--dataviz-role-extended-sand-subtile-extended-4
dataviz.role.extended.sand.subtile.extended-5
The Figma library aliases Colors / Base: extended/archive/royal-blue/200, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.8099703192710876,0.8250095248222351,0.9496342539787292],"alpha":1,"hex":"#CFD2F2"}
light #CFD2F2
dark #36398A
--dataviz-role-extended-sand-subtile-extended-5
dataviz.role.extended.sand.subtile.extended-6
The Figma library aliases Colors / Alias: extended/pink/100, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9659619927406311,0.9060277342796326,0.9579578042030334],"alpha":1,"hex":"#F6E7F4"}
light #F6E7F4
dark #33182A
--dataviz-role-extended-sand-subtile-extended-6
dataviz.role.extended.sand.subtile.extended-7 color {extended.sand.200}
light #F2E76F
dark #353019
--dataviz-role-extended-sand-subtile-extended-7
dataviz.role.extended.sand.subtile.extended-8
The Figma library aliases Colors / Alias: extended/yellow-01/100, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[1,0.9607843160629272,0.7803921699523926],"alpha":1,"hex":"#FFF5C7"}
light #FFF5C7
dark #2A2212
--dataviz-role-extended-sand-subtile-extended-8
dataviz.role.extended.amber.on-accent.extended-1
The Figma library aliases Colors / Mapped: text/extended/lila/accent-primary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9901877045631409,0.9822049736976624,0.9956985712051392],"alpha":1,"hex":"#FCFAFE"}
#FCFAFE
--dataviz-role-extended-amber-on-accent-extended-1
dataviz.role.extended.amber.on-accent.extended-2
The Figma library aliases Colors / Mapped: text/extended/yellow/yellow-primary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.30099713802337646,0.249945268034935,0],"alpha":1,"hex":"#4D4000"}
#4D4000
--dataviz-role-extended-amber-on-accent-extended-2
dataviz.role.extended.amber.on-accent.extended-3
The Figma library aliases Colors / Mapped: text/extended/orange/orange-primary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9947797060012817,0.9809467196464539,0.9634889960289001],"alpha":1,"hex":"#FEFAF6"}
#FEFAF6
--dataviz-role-extended-amber-on-accent-extended-3
dataviz.role.extended.amber.on-accent.extended-4
The Figma library aliases Colors / Mapped: text/extended/green/green-primary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9651716351509094,0.9969239234924316,0.9882001876831055],"alpha":1,"hex":"#F6FEFC"}
#F6FEFC
--dataviz-role-extended-amber-on-accent-extended-4
dataviz.role.extended.amber.on-accent.extended-5
The Figma library aliases Colors / Mapped: text/extended/blue/blue-primary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9641904234886169,0.9860293865203857,0.997016191482544],"alpha":1,"hex":"#F6FBFE"}
#F6FBFE
--dataviz-role-extended-amber-on-accent-extended-5
dataviz.role.extended.amber.on-accent.extended-6 color {extended.orchid.950}
#1D1419
--dataviz-role-extended-amber-on-accent-extended-6
dataviz.role.extended.amber.on-accent.extended-7 color {extended.sand.950}
#181710
--dataviz-role-extended-amber-on-accent-extended-7
dataviz.role.extended.amber.on-accent.extended-8 color {extended.amber.950}
#1A1611
--dataviz-role-extended-amber-on-accent-extended-8
dataviz.role.extended.amber.on-subtile.extended-1
The Figma library aliases Colors / Mapped: text/extended/lila/accent-secondary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.4947120249271393,0.27811962366104126,0.6600208282470703],"alpha":1,"hex":"#7E47A8"}
#7E47A8
--dataviz-role-extended-amber-on-subtile-extended-1
dataviz.role.extended.amber.on-subtile.extended-2
The Figma library aliases Colors / Mapped: text/extended/yellow/yellow-secondary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.42352941632270813,0.3764705955982208,0],"alpha":1,"hex":"#6C6000"}
#6C6000
--dataviz-role-extended-amber-on-subtile-extended-2
dataviz.role.extended.amber.on-subtile.extended-3
The Figma library aliases Colors / Mapped: text/extended/orange/orange-secondary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.6973934769630432,0.2545361816883087,0.14462006092071533],"alpha":1,"hex":"#B24125"}
#B24125
--dataviz-role-extended-amber-on-subtile-extended-3
dataviz.role.extended.amber.on-subtile.extended-4
The Figma library aliases Colors / Mapped: text/extended/green/green-secondary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.07863683253526688,0.4423227906227112,0.3689992427825928],"alpha":1,"hex":"#14715E"}
#14715E
--dataviz-role-extended-amber-on-subtile-extended-4
dataviz.role.extended.amber.on-subtile.extended-5
The Figma library aliases Colors / Mapped: text/extended/blue/blue-secondary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.16580039262771606,0.43041205406188965,0.5789381265640259],"alpha":1,"hex":"#2A6E94"}
#2A6E94
--dataviz-role-extended-amber-on-subtile-extended-5
dataviz.role.extended.amber.on-subtile.extended-6
The Figma library aliases Colors / Alias: extended/pink/700, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.6155281066894531,0.2807804048061371,0.503941535949707],"alpha":1,"hex":"#9D4881"}
light #9D4881
dark #B7579D
--dataviz-role-extended-amber-on-subtile-extended-6
dataviz.role.extended.amber.on-subtile.extended-7
The Figma library aliases Colors / Alias: extended/desertstorm/700, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.4723183810710907,0.33077219128608704,0.23810452222824097],"alpha":1,"hex":"#78543D"}
light #78543D
dark #241C13
--dataviz-role-extended-amber-on-subtile-extended-7
dataviz.role.extended.amber.on-subtile.extended-8
The Figma library aliases Colors / Alias: extended/yellow-01/700, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.6392157077789307,0.3529411852359772,0.10196078568696976],"alpha":1,"hex":"#A35A1A"}
light #A35A1A
dark #482006
--dataviz-role-extended-amber-on-subtile-extended-8
dataviz.role.extended.icon.on-accent.extended-1 color {dataviz.role.extended.amber.on-accent.extended-1}
#FCFAFE
--dataviz-role-extended-icon-on-accent-extended-1
dataviz.role.extended.icon.on-accent.extended-2 color {dataviz.role.extended.amber.on-accent.extended-2}
#4D4000
--dataviz-role-extended-icon-on-accent-extended-2
dataviz.role.extended.icon.on-accent.extended-3 color {dataviz.role.extended.amber.on-accent.extended-3}
#FEFAF6
--dataviz-role-extended-icon-on-accent-extended-3
dataviz.role.extended.icon.on-accent.extended-4 color {dataviz.role.extended.amber.on-accent.extended-4}
#F6FEFC
--dataviz-role-extended-icon-on-accent-extended-4
dataviz.role.extended.icon.on-accent.extended-5 color {dataviz.role.extended.amber.on-accent.extended-5}
#F6FBFE
--dataviz-role-extended-icon-on-accent-extended-5
dataviz.role.extended.icon.on-accent.extended-6 color {dataviz.role.extended.amber.on-accent.extended-6}
#1D1419
--dataviz-role-extended-icon-on-accent-extended-6
dataviz.role.extended.icon.on-accent.extended-7 color {dataviz.role.extended.amber.on-accent.extended-7}
#181710
--dataviz-role-extended-icon-on-accent-extended-7
dataviz.role.extended.icon.on-accent.extended-8 color {dataviz.role.extended.amber.on-accent.extended-8}
#1A1611
--dataviz-role-extended-icon-on-accent-extended-8
dataviz.role.extended.icon.on-subtile.extended-1 color {dataviz.role.extended.amber.on-subtile.extended-1}
#7E47A8
--dataviz-role-extended-icon-on-subtile-extended-1
dataviz.role.extended.icon.on-subtile.extended-2 color {dataviz.role.extended.amber.on-subtile.extended-2}
#6C6000
--dataviz-role-extended-icon-on-subtile-extended-2
dataviz.role.extended.icon.on-subtile.extended-3 color {dataviz.role.extended.amber.on-subtile.extended-3}
#B24125
--dataviz-role-extended-icon-on-subtile-extended-3
dataviz.role.extended.icon.on-subtile.extended-4 color {dataviz.role.extended.amber.on-subtile.extended-4}
#14715E
--dataviz-role-extended-icon-on-subtile-extended-4
dataviz.role.extended.icon.on-subtile.extended-5 color {dataviz.role.extended.amber.on-subtile.extended-5}
#2A6E94
--dataviz-role-extended-icon-on-subtile-extended-5
dataviz.role.extended.icon.on-subtile.extended-6 color {dataviz.role.extended.amber.on-subtile.extended-6}
light #9D4881
dark #B7579D
--dataviz-role-extended-icon-on-subtile-extended-6
dataviz.role.extended.icon.on-subtile.extended-7 color {dataviz.role.extended.amber.on-subtile.extended-7}
light #78543D
dark #241C13
--dataviz-role-extended-icon-on-subtile-extended-7
dataviz.role.extended.icon.on-subtile.extended-8 color {dataviz.role.extended.amber.on-subtile.extended-8}
light #A35A1A
dark #482006
--dataviz-role-extended-icon-on-subtile-extended-8
dataviz.role.extended.lavender.on-accent.extended-1 color {extended.lavender.600}
light #8D3BCD
dark #C290E7
--dataviz-role-extended-lavender-on-accent-extended-1
dataviz.role.extended.lavender.on-accent.extended-2 color {extended.lime.500}
light #B8CD06
dark #CAE200
--dataviz-role-extended-lavender-on-accent-extended-2
dataviz.role.extended.lavender.on-accent.extended-3 color {extended.coral.600}
light #C35129
dark #EC8C52
--dataviz-role-extended-lavender-on-accent-extended-3
dataviz.role.extended.lavender.on-accent.extended-4 color {extended.forest.700}
light #18614E
dark #21AF8F
--dataviz-role-extended-lavender-on-accent-extended-4
dataviz.role.extended.lavender.on-accent.extended-5
The Figma library aliases Colors / Alias: extended/royal-blue/500, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.4230889678001404,0.43091246485710144,0.9709784388542175],"alpha":1,"hex":"#6C6EF8"}
light #6C6EF8
dark #B0B6F3
--dataviz-role-extended-lavender-on-accent-extended-5
dataviz.role.extended.lavender.on-accent.extended-6
The Figma library aliases Colors / Alias: extended/pink/500, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.8122602105140686,0.41407275199890137,0.7263584733009338],"alpha":1,"hex":"#CF6AB9"}
light #CF6AB9
dark #E8AFDF
--dataviz-role-extended-lavender-on-accent-extended-6
dataviz.role.extended.lavender.on-accent.extended-7 color {extended.sand.600}
light #857B38
dark #C8BC5A
--dataviz-role-extended-lavender-on-accent-extended-7
dataviz.role.extended.lavender.on-accent.extended-8
The Figma library aliases Colors / Alias: extended/yellow-01/600, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.800000011920929,0.5058823823928833,0.12941177189350128],"alpha":1,"hex":"#CC8121"}
light #CC8121
dark #FAC138
--dataviz-role-extended-lavender-on-accent-extended-8
dataviz.role.extended.lavender.on-subtile.extended-1
The Figma library aliases Colors / Alias: extended/lila/500, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.6898306608200073,0.4473418593406677,0.8566842675209045],"alpha":1,"hex":"#B072DA"}
#B072DA
--dataviz-role-extended-lavender-on-subtile-extended-1
dataviz.role.extended.lavender.on-subtile.extended-2
The Figma library aliases Colors / Alias: extended/mustard/400, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.7254902124404907,0.800000011920929,0],"alpha":1,"hex":"#B9CC00"}
#B9CC00
--dataviz-role-extended-lavender-on-subtile-extended-2
dataviz.role.extended.lavender.on-subtile.extended-3
The Figma library aliases Colors / Alias: extended/orange/500, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9058823585510254,0.43529412150382996,0.2078431397676468],"alpha":1,"hex":"#E76F35"}
#E76F35
--dataviz-role-extended-lavender-on-subtile-extended-3
dataviz.role.extended.lavender.on-subtile.extended-4
The Figma library aliases Colors / Alias: extended/green/600, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.10602934658527374,0.5579723715782166,0.46214309334754944],"alpha":1,"hex":"#1B8E76"}
#1B8E76
--dataviz-role-extended-lavender-on-subtile-extended-4
dataviz.role.extended.lavender.on-subtile.extended-5
The Figma library aliases Colors / Alias: extended/royal-blue/400, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.4833069145679474,0.5213414430618286,0.9993811845779419],"alpha":1,"hex":"#7B85FF"}
#7B85FF
--dataviz-role-extended-lavender-on-subtile-extended-5
dataviz.role.extended.lavender.on-subtile.extended-6
The Figma library aliases Colors / Alias: extended/pink/400, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.8829138278961182,0.5609331130981445,0.8213754296302795],"alpha":1,"hex":"#E18FD1"}
#E18FD1
--dataviz-role-extended-lavender-on-subtile-extended-6
dataviz.role.extended.lavender.on-subtile.extended-7
The Figma library aliases Colors / Alias: extended/desertstorm/500, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.7024500370025635,0.5607610940933228,0.4206547141075134],"alpha":1,"hex":"#B38F6B"}
#B38F6B
--dataviz-role-extended-lavender-on-subtile-extended-7
dataviz.role.extended.lavender.on-subtile.extended-8
The Figma library aliases Colors / Alias: extended/yellow-01/500, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.9490196108818054,0.6705882549285889,0.1921568661928177],"alpha":1,"hex":"#F2AB31"}
#F2AB31
--dataviz-role-extended-lavender-on-subtile-extended-8
dataviz.role.extended.lavender.separator.extended-1
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/lila/800, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.40452882647514343,0.23253385722637177,0.5378879904747009],"alpha":1,"hex":"#673B89"}
light #673B89
dark #482461
--dataviz-role-extended-lavender-separator-extended-1
dataviz.role.extended.lavender.separator.extended-2
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/mustard/800, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.3532947301864624,0.30576956272125244,0],"alpha":1,"hex":"#5A4E00"}
light #5A4E00
dark #4D4000
--dataviz-role-extended-lavender-separator-extended-2
dataviz.role.extended.lavender.separator.extended-3
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/orange/800, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.5546866655349731,0.2100699096918106,0.13400153815746307],"alpha":1,"hex":"#8D3622"}
light #8D3622
dark #732D1E
--dataviz-role-extended-lavender-separator-extended-3
dataviz.role.extended.lavender.separator.extended-4
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/green/800, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.09537533670663834,0.3800541162490845,0.30417102575302124],"alpha":1,"hex":"#18614E"}
light #18614E
dark #064238
--dataviz-role-extended-lavender-separator-extended-4
dataviz.role.extended.lavender.separator.extended-5
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/royal-blue/700, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.2660200297832489,0.27120015025138855,0.690140426158905],"alpha":1,"hex":"#4445B0"}
light #4445B0
dark #242653
--dataviz-role-extended-lavender-separator-extended-5
dataviz.role.extended.lavender.separator.extended-6
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/pink/700, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.6155281066894531,0.2807804048061371,0.503941535949707],"alpha":1,"hex":"#9D4881"}
light #9D4881
dark #683254
--dataviz-role-extended-lavender-separator-extended-6
dataviz.role.extended.lavender.separator.extended-7
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/desertstorm/800, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.36109495162963867,0.23809245228767395,0.1775212287902832],"alpha":1,"hex":"#5C3D2D"}
light #5C3D2D
dark #3D2C21
--dataviz-role-extended-lavender-separator-extended-7
dataviz.role.extended.lavender.separator.extended-8
When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/yellow-01/800, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.5254902243614197,0.2823529541492462,0.09803921729326248],"alpha":1,"hex":"#864819"}
light #864819
dark #6E3816
--dataviz-role-extended-lavender-separator-extended-8
dataviz.role.extended.azure.separator.extended-8 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-8
dataviz.role.extended.azure.separator.extended-5 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-5
dataviz.role.extended.azure.separator.extended-4 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-4
dataviz.role.extended.azure.separator.extended-3 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-3
dataviz.role.extended.azure.separator.extended-1 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-1
dataviz.role.extended.azure.separator.extended-7 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-7
dataviz.role.extended.azure.separator.extended-2 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-2
dataviz.role.extended.azure.separator.extended-6 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-separator-extended-6
dataviz.role.extended.azure.on-subtile.extended-8 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-8
dataviz.role.extended.azure.on-subtile.extended-7 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-7
dataviz.role.extended.azure.on-subtile.extended-6 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-6
dataviz.role.extended.azure.on-subtile.extended-5 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-5
dataviz.role.extended.azure.on-subtile.extended-4 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-4
dataviz.role.extended.azure.on-subtile.extended-3 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-3
dataviz.role.extended.azure.on-subtile.extended-2 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-2
dataviz.role.extended.azure.on-subtile.extended-1 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-subtile-extended-1
dataviz.role.extended.azure.on-accent.extended-8 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-accent-extended-8
dataviz.role.extended.azure.on-accent.extended-6 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-accent-extended-6
dataviz.role.extended.azure.on-accent.extended-5 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-azure-on-accent-extended-5
dataviz.role.extended.azure.on-accent.extended-1 color {extended.azure.600}
light #2C7A9F
dark #FFFFFF
--dataviz-role-extended-azure-on-accent-extended-1
dataviz.role.extended.azure.on-accent.extended-3 color {extended.azure.600}
light #2C7A9F
dark #FFFFFF
--dataviz-role-extended-azure-on-accent-extended-3
dataviz.role.extended.azure.on-accent.extended-7 color {extended.azure.600}
light #2C7A9F
dark #5BB8E7
--dataviz-role-extended-azure-on-accent-extended-7
dataviz.role.extended.azure.on-accent.extended-2 color {extended.azure.500}
light #379BCA
dark #FFFFFF
--dataviz-role-extended-azure-on-accent-extended-2
dataviz.role.extended.azure.on-accent.extended-4 color {extended.azure.700}
light #266280
dark #FFFFFF
--dataviz-role-extended-azure-on-accent-extended-4
dataviz.role.extended.orchid.separator.extended-8 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-8
dataviz.role.extended.orchid.separator.extended-5 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-5
dataviz.role.extended.orchid.separator.extended-4 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-4
dataviz.role.extended.orchid.separator.extended-3 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-3
dataviz.role.extended.orchid.separator.extended-1 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-1
dataviz.role.extended.orchid.separator.extended-7 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-7
dataviz.role.extended.orchid.separator.extended-2 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-2
dataviz.role.extended.orchid.separator.extended-6 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-separator-extended-6
dataviz.role.extended.orchid.on-subtile.extended-8 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-8
dataviz.role.extended.orchid.on-subtile.extended-7 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-7
dataviz.role.extended.orchid.on-subtile.extended-6 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-6
dataviz.role.extended.orchid.on-subtile.extended-5 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-5
dataviz.role.extended.orchid.on-subtile.extended-4 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-4
dataviz.role.extended.orchid.on-subtile.extended-3 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-3
dataviz.role.extended.orchid.on-subtile.extended-2 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-2
dataviz.role.extended.orchid.on-subtile.extended-1 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-subtile-extended-1
dataviz.role.extended.orchid.on-accent.extended-8 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-accent-extended-8
dataviz.role.extended.orchid.on-accent.extended-6 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-accent-extended-6
dataviz.role.extended.orchid.on-accent.extended-5 color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-role-extended-orchid-on-accent-extended-5
dataviz.role.extended.orchid.on-accent.extended-1 color {extended.orchid.600}
light #B74A96
dark #FFFFFF
--dataviz-role-extended-orchid-on-accent-extended-1
dataviz.role.extended.orchid.on-accent.extended-3 color {extended.orchid.600}
light #B74A96
dark #FFFFFF
--dataviz-role-extended-orchid-on-accent-extended-3
dataviz.role.extended.orchid.on-accent.extended-7 color {extended.orchid.600}
light #B74A96
dark #F283CD
--dataviz-role-extended-orchid-on-accent-extended-7
dataviz.role.extended.orchid.on-accent.extended-2 color {extended.orchid.500}
light #D956B1
dark #FFFFFF
--dataviz-role-extended-orchid-on-accent-extended-2
dataviz.role.extended.orchid.on-accent.extended-4 color {extended.orchid.700}
light #923D78
dark #FFFFFF
--dataviz-role-extended-orchid-on-accent-extended-4
dataviz.structural.track.bg.track-primary color {global.bg.base.neutral.3}
light #ECE8E9
dark #282828
--dataviz-structural-track-bg-track-primary
dataviz.structural.track.border.track-primary color {global.border.base.neutral.3}
light #D7D3D4
dark #303030
--dataviz-structural-track-border-track-primary
dataviz.structural.axis.axis-primary
The Figma library aliases Colors / Mapped: border/neutral/base/tertiary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.8480324149131775,0.8480324149131775,0.8480324149131775],"alpha":1,"hex":"#D8D8D8"}
light #D8D8D8
dark #303030
--dataviz-structural-axis-axis-primary
dataviz.structural.axis.axis-secondary
The Figma library aliases Colors / Mapped: border/neutral/base/quartenary, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.7019608020782471,0.7019608020782471,0.7019608020782471],"alpha":1,"hex":"#B3B3B3"}
light #B3B3B3
dark #303030
--dataviz-structural-axis-axis-secondary
dataviz.structural.axis.baseline.baseline-primary color {neutral.light.ash.800}
light #323031
dark #D2CECF
--dataviz-structural-axis-baseline-baseline-primary
dataviz.structural.axis.baseline.baseline-secondary color {neutral.light.ash.600}
light #616161
dark #9D9B9C
--dataviz-structural-axis-baseline-baseline-secondary
dataviz.structural.muted.bg.muted-primary color {global.bg.base.neutral.4}
light #DFDBDC
dark #303030
--dataviz-structural-muted-bg-muted-primary
dataviz.structural.muted.border.muted-primary color {global.border.base.neutral.4}
light #B6B4B4
dark #363636
--dataviz-structural-muted-border-muted-primary
dataviz.structural.pointer.pointer-primary color {neutral.light.ash.700}
light #4C4A4A
dark #767676
--dataviz-structural-pointer-pointer-primary
dataviz.structural.grid.grid.grid-primary
The Figma library aliases Colors / Mapped: border/neutral/solid/primary-alt, which it does not contain; its literal value is kept
 color {"colorSpace":"srgb","components":[0.42352941632270813,0.42352941632270813,0.42352941632270813],"alpha":1,"hex":"#6C6C6C"}
#6C6C6C
--dataviz-structural-grid-grid-grid-primary
dataviz.structural.icon.icon-primary color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-structural-icon-icon-primary
dataviz.structural.icon.primary.color color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-structural-icon-primary-color
dataviz.structural.icon.marker.color color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-structural-icon-marker-color
dataviz.structural.text.label.color color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-structural-text-label-color
dataviz.structural.text.graduations.color color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-structural-text-graduations-color
dataviz.structural.text.data.color color {"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"}
#FFFFFF
--dataviz-structural-text-data-color
ai.bg.accent.default color {global.bg.accent.brand.default}
light #175DD6
dark #9EE7FA
--ai-bg-accent-default
ai.bg.accent.hover color {global.bg.accent.brand.hover}
light #1148A9
dark #53D6F2
--ai-bg-accent-hover
ai.bg.accent.active color {global.bg.accent.brand.active}
light #0B2A69
dark #41B9D3
--ai-bg-accent-active
ai.bg.subtle.default color {global.bg.subtle.brand.default}
light #EEF1F7
dark #09191D
--ai-bg-subtle-default
ai.bg.subtle.hover color {global.bg.subtle.brand.hover}
light #DDE6F5
dark #0D272E
--ai-bg-subtle-hover
ai.bg.subtle.active color {global.bg.subtle.brand.active}
light #BFD1F1
dark #10363E
--ai-bg-subtle-active
ai.bg.gradient.avatar.start color {brand.light.200}
light #BFD1F1
dark #10363E
--ai-bg-gradient-avatar-start
ai.bg.gradient.avatar.end color {brand.light.400}
light #749DE5
dark #3499AF
--ai-bg-gradient-avatar-end
ai.bg.gradient.skeleton.start color {global.bg.level.0.default}
light #FDFDFD
dark #191919
--ai-bg-gradient-skeleton-start
ai.bg.gradient.skeleton.end color {brand.light.100}
light #DDE6F5
dark #0D272E
--ai-bg-gradient-skeleton-end
ai.bg.gradient.subtle.start color {global.bg.level.0.default}
light #FDFDFD
dark #191919
--ai-bg-gradient-subtle-start
ai.bg.gradient.subtle.end color {brand.light.50}
light #EEF1F7
dark #0D272E
--ai-bg-gradient-subtle-end
ai.bg.gradient.loading.start color {global.bg.transparency.fade.none}
light #ECE8E900
dark #19191900
--ai-bg-gradient-loading-start
ai.bg.gradient.loading.end color {ai.bg.subtle.default}
light #EEF1F7
dark #0D272E
--ai-bg-gradient-loading-end
ai.text.on-base.default
Only use with natural bg
 color {global.text.on-base.brand.default}
light #175DD6
dark #9EE7FA
--ai-text-on-base-default
ai.text.on-subtle.default
Only use with natural bg
 color {global.text.on-subtle.brand.default}
light #1148A9
dark #9EE7FA
--ai-text-on-subtle-default
ai.text.on-accent.default
Only use with natural bg
 color {global.text.on-accent.brand.default}
light #FBFCFD
dark #09191D
--ai-text-on-accent-default
ai.text.gradient.on-base.start
Only use with natural bg
 color {brand.light.600}
light #175DD6
dark #41B9D3
--ai-text-gradient-on-base-start
ai.text.gradient.on-base.end
Only use with natural bg
 color {brand.light.400}
light #749DE5
dark #297B8C
--ai-text-gradient-on-base-end
ai.text.gradient.on-accent.start
Only use with natural bg
 color {brand.light.50}
light #EEF1F7
dark #09191D
--ai-text-gradient-on-accent-start
ai.text.gradient.on-accent.mid
Only use with natural bg
 color {brand.light.200}
light #BFD1F1
dark #297B8C
--ai-text-gradient-on-accent-mid
ai.text.gradient.on-accent.end
Only use with natural bg
 color {brand.light.950}
light #05133A
dark #297B8C
--ai-text-gradient-on-accent-end
ai.icon.on-base.default
Only use with natural bg
 color {brand.light.500}
light #497EDE
dark #41B9D3
--ai-icon-on-base-default
ai.icon.on-subtle.default
Only use with natural bg
 color {brand.light.500}
light #497EDE
dark #41B9D3
--ai-icon-on-subtle-default
ai.icon.on-accent.default
Only use with natural bg
 color {brand.light.50}
light #EEF1F7
dark #0D272E
--ai-icon-on-accent-default
ai.border.base.default color {global.border.base.brand.default}
light #497EDE
dark #53D6F2
--ai-border-base-default
ai.border.subtle.default color {global.border.subtle.brand.default}
light #DDE6F5
dark #0D272E
--ai-border-subtle-default
ai.border.accent.default color {global.border.accent.brand.default}
light #1148A9
dark #53D6F2
--ai-border-accent-default
ai.border.gradient.avatar.start color {brand.light.400}
light #749DE5
dark #3499AF
--ai-border-gradient-avatar-start
ai.border.gradient.avatar.end color {brand.light.200}
light #BFD1F1
dark #10363E
--ai-border-gradient-avatar-end
ai.border.gradient.default.start color {brand.light.25}
light #FBFCFD
dark #09191D
--ai-border-gradient-default-start
ai.border.gradient.default.end color {brand.light.300}
light #9BB9EC
dark #1F606E
--ai-border-gradient-default-end
ai.border.gradient.focus.start color {brand.light.200}
light #BFD1F1
dark #0D272E
--ai-border-gradient-focus-start
ai.border.gradient.focus.end color {brand.light.600}
light #175DD6
dark #41B9D3
--ai-border-gradient-focus-end
color.transparent
Fully transparent. Used for invisible borders and backgrounds.
 color {"colorSpace":"srgb","components":[0,0,0],"alpha":0}
color(srgb 0 0 0 / 0)
--color-transparent

Components following it

Derived from the component tokens aliasing the foundation's tokens.

ComponentComponent tokens aliasing the foundation
Accordion
  • accordion.item.border-color → {global.border.level.on-level.0}
  • accordion.trigger.background.default → {color.transparent}
  • accordion.trigger.background.hover → {global.bg.subtle.neutral.default}
  • accordion.trigger.background.active → {global.bg.subtle.neutral.hover}
  • accordion.title.color → {global.text.on-base.neutral.primary}
  • accordion.panel.color → {global.text.on-base.neutral.secondary}
Alert
  • alert.container.background.info → {global.bg.subtle.functional.info.default}
  • alert.container.background.success → {global.bg.subtle.functional.success.default}
  • alert.container.background.warning → {global.bg.subtle.functional.warning.default}
  • alert.container.background.error → {global.bg.subtle.functional.error.default}
  • alert.container.border-color.info → {global.border.accent.functional.info.default}
  • alert.container.border-color.success → {global.border.accent.functional.success.default}
  • alert.container.border-color.warning → {global.border.accent.functional.warning.default}
  • alert.container.border-color.error → {global.border.accent.functional.error.default}
  • alert.icon.color.info → {global.icon.on-subtle.functional.info.default}
  • alert.icon.color.success → {global.icon.on-subtle.functional.success.default}
  • alert.icon.color.warning → {global.icon.on-subtle.functional.warning.default}
  • alert.icon.color.error → {global.icon.on-subtle.functional.error.default}
  • alert.title.color.info → {global.text.on-subtle.functional.info.default}
  • alert.title.color.success → {global.text.on-subtle.functional.success.default}
  • alert.title.color.warning → {global.text.on-subtle.functional.warning.default}
  • alert.title.color.error → {global.text.on-subtle.functional.error.default}
  • alert.message.color → {global.text.on-base.neutral.primary}
Avatar
  • avatar.container.background → {global.bg.subtle.brand.default}
  • avatar.container.border-color → {global.border.level.edge.level.1}
  • avatar.initials.color → {global.text.on-subtle.brand.default}
Badge
  • badge.container.background.accent.neutral → {global.bg.accent.neutral.default}
  • badge.container.background.accent.brand → {global.bg.accent.brand.default}
  • badge.container.background.accent.success → {global.bg.accent.functional.success.default}
  • badge.container.background.accent.warning → {global.bg.accent.functional.warning.default}
  • badge.container.background.accent.error → {global.bg.accent.functional.error.default}
  • badge.container.background.accent.info → {global.bg.accent.functional.info.default}
  • badge.container.background.subtle.neutral → {global.bg.subtle.neutral.default}
  • badge.container.background.subtle.brand → {global.bg.subtle.brand.default}
  • badge.container.background.subtle.success → {global.bg.subtle.functional.success.default}
  • badge.container.background.subtle.warning → {global.bg.subtle.functional.warning.default}
  • badge.container.background.subtle.error → {global.bg.subtle.functional.error.default}
  • badge.container.background.subtle.info → {global.bg.subtle.functional.info.default}
  • badge.container.border-color.accent.neutral → {global.border.accent.neutral.default}
  • badge.container.border-color.accent.brand → {global.border.accent.brand.default}
  • badge.container.border-color.accent.success → {global.border.accent.functional.success.default}
  • badge.container.border-color.accent.warning → {global.border.accent.functional.warning.default}
  • badge.container.border-color.accent.error → {global.border.accent.functional.error.default}
  • badge.container.border-color.accent.info → {global.border.accent.functional.info.default}
  • badge.container.border-color.subtle.neutral → {global.border.subtle.neutral.default}
  • badge.container.border-color.subtle.brand → {global.border.subtle.brand.default}
  • badge.container.border-color.subtle.success → {global.border.subtle.functional.success.default}
  • badge.container.border-color.subtle.warning → {global.border.subtle.functional.warning.default}
  • badge.container.border-color.subtle.error → {global.border.subtle.functional.error.default}
  • badge.container.border-color.subtle.info → {global.border.subtle.functional.info.default}
  • badge.label.color.accent.neutral → {global.text.on-accent.neutral.primary}
  • badge.label.color.accent.brand → {global.text.on-accent.brand.default}
  • badge.label.color.accent.success → {global.text.on-accent.functional.success.default}
  • badge.label.color.accent.warning → {global.text.on-accent.functional.warning.default}
  • badge.label.color.accent.error → {global.text.on-accent.functional.error.default}
  • badge.label.color.accent.info → {global.text.on-accent.functional.info.default}
  • badge.label.color.subtle.neutral → {global.text.on-subtle.neutral.default}
  • badge.label.color.subtle.brand → {global.text.on-subtle.brand.default}
  • badge.label.color.subtle.success → {global.text.on-subtle.functional.success.default}
  • badge.label.color.subtle.warning → {global.text.on-subtle.functional.warning.default}
  • badge.label.color.subtle.error → {global.text.on-subtle.functional.error.default}
  • badge.label.color.subtle.info → {global.text.on-subtle.functional.info.default}
Breadcrumb
  • breadcrumb.link.color.default → {global.text.on-base.neutral.secondary}
  • breadcrumb.link.color.hover → {global.text.on-base.neutral.primary}
  • breadcrumb.link.color.current → {global.text.on-base.neutral.primary}
  • breadcrumb.separator.color → {global.icon.on-base.neutral.tertiary}
Button
  • button.container.background.accent.neutral.default → {global.bg.accent.neutral.default}
  • button.container.background.accent.neutral.hover → {global.bg.accent.neutral.hover}
  • button.container.background.accent.neutral.active → {global.bg.accent.neutral.active}
  • button.container.background.accent.brand.default → {global.bg.accent.brand.default}
  • button.container.background.accent.brand.hover → {global.bg.accent.brand.hover}
  • button.container.background.accent.brand.active → {global.bg.accent.brand.active}
  • button.container.background.accent.error.default → {global.bg.accent.functional.error.default}
  • button.container.background.accent.error.hover → {global.bg.accent.functional.error.hover}
  • button.container.background.accent.error.active → {global.bg.accent.functional.error.active}
  • button.container.background.accent.disabled → {global.bg.state.disabled.default}
  • button.container.background.subtle.neutral.default → {global.bg.subtle.neutral.default}
  • button.container.background.subtle.neutral.hover → {global.bg.subtle.neutral.hover}
  • button.container.background.subtle.neutral.active → {global.bg.subtle.neutral.active}
  • button.container.background.subtle.brand.default → {global.bg.subtle.brand.default}
  • button.container.background.subtle.brand.hover → {global.bg.subtle.brand.hover}
  • button.container.background.subtle.brand.active → {global.bg.subtle.brand.active}
  • button.container.background.subtle.error.default → {global.bg.subtle.functional.error.default}
  • button.container.background.subtle.error.hover → {global.bg.subtle.functional.error.hover}
  • button.container.background.subtle.error.active → {global.bg.subtle.functional.error.active}
  • button.container.background.subtle.disabled → {global.bg.state.disabled.default}
  • button.container.background.ghost.neutral.default → {color.transparent}
  • button.container.background.ghost.neutral.hover → {global.bg.subtle.neutral.default}
  • button.container.background.ghost.neutral.active → {global.bg.subtle.neutral.hover}
  • button.container.background.ghost.brand.default → {color.transparent}
  • button.container.background.ghost.brand.hover → {global.bg.subtle.brand.default}
  • button.container.background.ghost.brand.active → {global.bg.subtle.brand.hover}
  • button.container.background.ghost.error.default → {color.transparent}
  • button.container.background.ghost.error.hover → {global.bg.subtle.functional.error.default}
  • button.container.background.ghost.error.active → {global.bg.subtle.functional.error.hover}
  • button.container.background.ghost.disabled → {global.bg.state.disabled.default}
  • button.container.border-color.accent.neutral.default → {global.border.accent.neutral.default}
  • button.container.border-color.accent.neutral.hover → {global.border.accent.neutral.hover}
  • button.container.border-color.accent.neutral.active → {global.border.accent.neutral.active}
  • button.container.border-color.accent.brand.default → {global.border.accent.brand.default}
  • button.container.border-color.accent.brand.hover → {global.border.accent.brand.hover}
  • button.container.border-color.accent.brand.active → {global.border.accent.brand.active}
  • button.container.border-color.accent.error.default → {global.border.accent.functional.error.default}
  • button.container.border-color.accent.error.hover → {global.border.accent.functional.error.hover}
  • button.container.border-color.accent.error.active → {global.border.accent.functional.error.active}
  • button.container.border-color.accent.disabled → {global.border.state.disabled.default}
  • button.container.border-color.subtle.neutral.default → {global.border.subtle.neutral.default}
  • button.container.border-color.subtle.neutral.hover → {global.border.subtle.neutral.hover}
  • button.container.border-color.subtle.neutral.active → {global.border.subtle.neutral.active}
  • button.container.border-color.subtle.brand.default → {global.border.subtle.brand.default}
  • button.container.border-color.subtle.brand.hover → {global.border.subtle.brand.hover}
  • button.container.border-color.subtle.brand.active → {global.border.subtle.brand.active}
  • button.container.border-color.subtle.error.default → {global.border.subtle.functional.error.default}
  • button.container.border-color.subtle.error.hover → {global.border.subtle.functional.error.hover}
  • button.container.border-color.subtle.error.active → {global.border.subtle.functional.error.active}
  • button.container.border-color.subtle.disabled → {global.border.state.disabled.default}
  • button.container.border-color.ghost.neutral.default → {color.transparent}
  • button.container.border-color.ghost.neutral.hover → {global.border.subtle.neutral.default}
  • button.container.border-color.ghost.neutral.active → {global.border.subtle.neutral.hover}
  • button.container.border-color.ghost.brand.default → {color.transparent}
  • button.container.border-color.ghost.brand.hover → {global.border.subtle.brand.default}
  • button.container.border-color.ghost.brand.active → {global.border.subtle.brand.hover}
  • button.container.border-color.ghost.error.default → {color.transparent}
  • button.container.border-color.ghost.error.hover → {global.border.subtle.functional.error.default}
  • button.container.border-color.ghost.error.active → {global.border.subtle.functional.error.hover}
  • button.container.border-color.ghost.disabled → {global.border.state.disabled.default}
  • button.label.color.accent.neutral.default → {global.text.on-accent.neutral.primary}
  • button.label.color.accent.neutral.hover → {global.text.on-accent.neutral.primary}
  • button.label.color.accent.neutral.active → {global.text.on-accent.neutral.primary}
  • button.label.color.accent.brand.default → {global.text.on-accent.brand.default}
  • button.label.color.accent.brand.hover → {global.text.on-accent.brand.default}
  • button.label.color.accent.brand.active → {global.text.on-accent.brand.default}
  • button.label.color.accent.error.default → {global.text.on-accent.functional.error.default}
  • button.label.color.accent.error.hover → {global.text.on-accent.functional.error.default}
  • button.label.color.accent.error.active → {global.text.on-accent.functional.error.default}
  • button.label.color.accent.disabled → {global.text.state.disabled.default}
  • button.label.color.subtle.neutral.default → {global.text.on-base.neutral.primary}
  • button.label.color.subtle.neutral.hover → {global.text.on-base.neutral.primary}
  • button.label.color.subtle.neutral.active → {global.text.on-base.neutral.primary}
  • button.label.color.subtle.brand.default → {global.text.on-subtle.brand.default}
  • button.label.color.subtle.brand.hover → {global.text.on-subtle.brand.default}
  • button.label.color.subtle.brand.active → {global.text.on-subtle.brand.default}
  • button.label.color.subtle.error.default → {global.text.on-subtle.functional.error.default}
  • button.label.color.subtle.error.hover → {global.text.on-subtle.functional.error.default}
  • button.label.color.subtle.error.active → {global.text.on-subtle.functional.error.default}
  • button.label.color.subtle.disabled → {global.text.state.disabled.default}
  • button.label.color.ghost.neutral.default → {global.text.on-base.neutral.primary}
  • button.label.color.ghost.neutral.hover → {global.text.on-base.neutral.primary}
  • button.label.color.ghost.neutral.active → {global.text.on-base.neutral.primary}
  • button.label.color.ghost.brand.default → {global.text.on-base.brand.default}
  • button.label.color.ghost.brand.hover → {global.text.on-subtle.brand.default}
  • button.label.color.ghost.brand.active → {global.text.on-subtle.brand.default}
  • button.label.color.ghost.error.default → {global.text.on-subtle.functional.error.default}
  • button.label.color.ghost.error.hover → {global.text.on-subtle.functional.error.default}
  • button.label.color.ghost.error.active → {global.text.on-subtle.functional.error.default}
  • button.label.color.ghost.disabled → {global.text.state.disabled.default}
Card
  • card.container.background.level-1 → {global.bg.level.1.default}
  • card.container.background.level-2 → {global.bg.level.2.default}
  • card.container.border-color.level-1 → {global.border.level.edge.level.1}
  • card.container.border-color.level-2 → {global.border.level.edge.level.2}
  • card.title.color → {global.text.on-base.neutral.primary}
  • card.description.color → {global.text.on-base.neutral.secondary}
Checkbox group
  • checkbox-group.legend.color.default → {global.text.on-base.neutral.primary}
  • checkbox-group.legend.color.disabled → {global.text.state.disabled.default}
  • checkbox-group.description.color.default → {global.text.on-base.neutral.secondary}
  • checkbox-group.description.color.disabled → {global.text.state.disabled.default}
  • checkbox-group.error-message.color → {global.text.on-base.functional.error.default}
  • checkbox-group.control.background.default → {global.bg.level.0.default}
  • checkbox-group.control.background.hover → {global.bg.level.0.hover}
  • checkbox-group.control.background.checked → {global.bg.accent.brand.default}
  • checkbox-group.control.background.disabled → {global.bg.state.disabled.default}
  • checkbox-group.control.border-color.default → {global.border.accent.neutral.default}
  • checkbox-group.control.border-color.hover → {global.border.accent.neutral.default}
  • checkbox-group.control.border-color.checked → {global.border.accent.brand.default}
  • checkbox-group.control.border-color.invalid → {global.border.base.functional.error.default}
  • checkbox-group.control.border-color.disabled → {global.border.state.disabled.default}
  • checkbox-group.control.color.checked → {global.icon.on-accent.brand.default}
  • checkbox-group.control.color.disabled → {global.icon.state.disabled.default}
  • checkbox-group.option-label.color.default → {global.text.on-base.neutral.primary}
  • checkbox-group.option-label.color.disabled → {global.text.state.disabled.default}
  • checkbox-group.option-description.color.default → {global.text.on-base.neutral.secondary}
  • checkbox-group.option-description.color.disabled → {global.text.state.disabled.default}
Checkbox
  • checkbox.control.background.default → {global.bg.level.0.default}
  • checkbox.control.background.hover → {global.bg.level.0.hover}
  • checkbox.control.background.checked → {global.bg.accent.brand.default}
  • checkbox.control.background.indeterminate → {global.bg.accent.brand.default}
  • checkbox.control.background.disabled → {global.bg.state.disabled.default}
  • checkbox.control.border-color.default → {global.border.accent.neutral.default}
  • checkbox.control.border-color.hover → {global.border.accent.neutral.default}
  • checkbox.control.border-color.checked → {global.border.accent.brand.default}
  • checkbox.control.border-color.indeterminate → {global.border.accent.brand.default}
  • checkbox.control.border-color.invalid → {global.border.base.functional.error.default}
  • checkbox.control.border-color.disabled → {global.border.state.disabled.default}
  • checkbox.control.color.checked → {global.icon.on-accent.brand.default}
  • checkbox.control.color.indeterminate → {global.icon.on-accent.brand.default}
  • checkbox.control.color.disabled → {global.icon.state.disabled.default}
  • checkbox.label.color.default → {global.text.on-base.neutral.primary}
  • checkbox.label.color.disabled → {global.text.state.disabled.default}
  • checkbox.description.color.default → {global.text.on-base.neutral.secondary}
  • checkbox.description.color.disabled → {global.text.state.disabled.default}
Divider
  • divider.container.color → {global.border.base.neutral.4}
Dropdown
  • dropdown.menu.background → {global.bg.level.2.default}
  • dropdown.menu.border-color → {global.border.level.edge.level.2}
  • dropdown.separator.color → {global.border.level.on-level.2}
  • dropdown.item.background.neutral.default → {color.transparent}
  • dropdown.item.background.neutral.hover → {global.bg.subtle.neutral.default}
  • dropdown.item.background.neutral.active → {global.bg.subtle.neutral.hover}
  • dropdown.item.background.error.default → {color.transparent}
  • dropdown.item.background.error.hover → {global.bg.subtle.functional.error.default}
  • dropdown.item.background.error.active → {global.bg.subtle.functional.error.hover}
  • dropdown.item.background.disabled → {color.transparent}
  • dropdown.item-label.color.neutral.default → {global.text.on-subtle.neutral.default}
  • dropdown.item-label.color.neutral.hover → {global.text.on-subtle.neutral.default}
  • dropdown.item-label.color.neutral.active → {global.text.on-subtle.neutral.default}
  • dropdown.item-label.color.error.default → {global.text.on-subtle.functional.error.default}
  • dropdown.item-label.color.error.hover → {global.text.on-subtle.functional.error.default}
  • dropdown.item-label.color.error.active → {global.text.on-subtle.functional.error.default}
  • dropdown.item-label.color.disabled → {global.text.state.disabled.default}
Icon button
  • icon-button.container.background.accent.neutral.default → {global.bg.accent.neutral.default}
  • icon-button.container.background.accent.neutral.hover → {global.bg.accent.neutral.hover}
  • icon-button.container.background.accent.neutral.active → {global.bg.accent.neutral.active}
  • icon-button.container.background.accent.brand.default → {global.bg.accent.brand.default}
  • icon-button.container.background.accent.brand.hover → {global.bg.accent.brand.hover}
  • icon-button.container.background.accent.brand.active → {global.bg.accent.brand.active}
  • icon-button.container.background.accent.error.default → {global.bg.accent.functional.error.default}
  • icon-button.container.background.accent.error.hover → {global.bg.accent.functional.error.hover}
  • icon-button.container.background.accent.error.active → {global.bg.accent.functional.error.active}
  • icon-button.container.background.accent.disabled → {global.bg.state.disabled.default}
  • icon-button.container.background.subtle.neutral.default → {global.bg.subtle.neutral.default}
  • icon-button.container.background.subtle.neutral.hover → {global.bg.subtle.neutral.hover}
  • icon-button.container.background.subtle.neutral.active → {global.bg.subtle.neutral.active}
  • icon-button.container.background.subtle.brand.default → {global.bg.subtle.brand.default}
  • icon-button.container.background.subtle.brand.hover → {global.bg.subtle.brand.hover}
  • icon-button.container.background.subtle.brand.active → {global.bg.subtle.brand.active}
  • icon-button.container.background.subtle.error.default → {global.bg.subtle.functional.error.default}
  • icon-button.container.background.subtle.error.hover → {global.bg.subtle.functional.error.hover}
  • icon-button.container.background.subtle.error.active → {global.bg.subtle.functional.error.active}
  • icon-button.container.background.subtle.disabled → {global.bg.state.disabled.default}
  • icon-button.container.background.ghost.neutral.default → {color.transparent}
  • icon-button.container.background.ghost.neutral.hover → {global.bg.subtle.neutral.default}
  • icon-button.container.background.ghost.neutral.active → {global.bg.subtle.neutral.hover}
  • icon-button.container.background.ghost.brand.default → {color.transparent}
  • icon-button.container.background.ghost.brand.hover → {global.bg.subtle.brand.default}
  • icon-button.container.background.ghost.brand.active → {global.bg.subtle.brand.hover}
  • icon-button.container.background.ghost.error.default → {color.transparent}
  • icon-button.container.background.ghost.error.hover → {global.bg.subtle.functional.error.default}
  • icon-button.container.background.ghost.error.active → {global.bg.subtle.functional.error.hover}
  • icon-button.container.background.ghost.disabled → {global.bg.state.disabled.default}
  • icon-button.container.border-color.accent.neutral.default → {global.border.accent.neutral.default}
  • icon-button.container.border-color.accent.neutral.hover → {global.border.accent.neutral.hover}
  • icon-button.container.border-color.accent.neutral.active → {global.border.accent.neutral.active}
  • icon-button.container.border-color.accent.brand.default → {global.border.accent.brand.default}
  • icon-button.container.border-color.accent.brand.hover → {global.border.accent.brand.hover}
  • icon-button.container.border-color.accent.brand.active → {global.border.accent.brand.active}
  • icon-button.container.border-color.accent.error.default → {global.border.accent.functional.error.default}
  • icon-button.container.border-color.accent.error.hover → {global.border.accent.functional.error.hover}
  • icon-button.container.border-color.accent.error.active → {global.border.accent.functional.error.active}
  • icon-button.container.border-color.accent.disabled → {global.border.state.disabled.default}
  • icon-button.container.border-color.subtle.neutral.default → {global.border.subtle.neutral.default}
  • icon-button.container.border-color.subtle.neutral.hover → {global.border.subtle.neutral.hover}
  • icon-button.container.border-color.subtle.neutral.active → {global.border.subtle.neutral.active}
  • icon-button.container.border-color.subtle.brand.default → {global.border.subtle.brand.default}
  • icon-button.container.border-color.subtle.brand.hover → {global.border.subtle.brand.hover}
  • icon-button.container.border-color.subtle.brand.active → {global.border.subtle.brand.active}
  • icon-button.container.border-color.subtle.error.default → {global.border.subtle.functional.error.default}
  • icon-button.container.border-color.subtle.error.hover → {global.border.subtle.functional.error.hover}
  • icon-button.container.border-color.subtle.error.active → {global.border.subtle.functional.error.active}
  • icon-button.container.border-color.subtle.disabled → {global.border.state.disabled.default}
  • icon-button.container.border-color.ghost.neutral.default → {color.transparent}
  • icon-button.container.border-color.ghost.neutral.hover → {global.border.subtle.neutral.default}
  • icon-button.container.border-color.ghost.neutral.active → {global.border.subtle.neutral.hover}
  • icon-button.container.border-color.ghost.brand.default → {color.transparent}
  • icon-button.container.border-color.ghost.brand.hover → {global.border.subtle.brand.default}
  • icon-button.container.border-color.ghost.brand.active → {global.border.subtle.brand.hover}
  • icon-button.container.border-color.ghost.error.default → {color.transparent}
  • icon-button.container.border-color.ghost.error.hover → {global.border.subtle.functional.error.default}
  • icon-button.container.border-color.ghost.error.active → {global.border.subtle.functional.error.hover}
  • icon-button.container.border-color.ghost.disabled → {global.border.state.disabled.default}
  • icon-button.icon.color.accent.neutral.default → {global.icon.on-accent.neutral.primary}
  • icon-button.icon.color.accent.neutral.hover → {global.icon.on-accent.neutral.primary}
  • icon-button.icon.color.accent.neutral.active → {global.icon.on-accent.neutral.primary}
  • icon-button.icon.color.accent.brand.default → {global.icon.on-accent.brand.default}
  • icon-button.icon.color.accent.brand.hover → {global.icon.on-accent.brand.default}
  • icon-button.icon.color.accent.brand.active → {global.icon.on-accent.brand.default}
  • icon-button.icon.color.accent.error.default → {global.icon.on-accent.functional.error.default}
  • icon-button.icon.color.accent.error.hover → {global.icon.on-accent.functional.error.default}
  • icon-button.icon.color.accent.error.active → {global.icon.on-accent.functional.error.default}
  • icon-button.icon.color.accent.disabled → {global.icon.state.disabled.default}
  • icon-button.icon.color.subtle.neutral.default → {global.icon.on-base.neutral.primary}
  • icon-button.icon.color.subtle.neutral.hover → {global.icon.on-base.neutral.primary}
  • icon-button.icon.color.subtle.neutral.active → {global.icon.on-base.neutral.primary}
  • icon-button.icon.color.subtle.brand.default → {global.icon.on-subtle.brand.default}
  • icon-button.icon.color.subtle.brand.hover → {global.icon.on-subtle.brand.default}
  • icon-button.icon.color.subtle.brand.active → {global.icon.on-subtle.brand.default}
  • icon-button.icon.color.subtle.error.default → {global.icon.on-subtle.functional.error.default}
  • icon-button.icon.color.subtle.error.hover → {global.icon.on-subtle.functional.error.default}
  • icon-button.icon.color.subtle.error.active → {global.icon.on-subtle.functional.error.default}
  • icon-button.icon.color.subtle.disabled → {global.icon.state.disabled.default}
  • icon-button.icon.color.ghost.neutral.default → {global.icon.on-base.neutral.primary}
  • icon-button.icon.color.ghost.neutral.hover → {global.icon.on-base.neutral.primary}
  • icon-button.icon.color.ghost.neutral.active → {global.icon.on-base.neutral.primary}
  • icon-button.icon.color.ghost.brand.default → {global.icon.on-base.brand.default}
  • icon-button.icon.color.ghost.brand.hover → {global.icon.on-subtle.brand.default}
  • icon-button.icon.color.ghost.brand.active → {global.icon.on-subtle.brand.default}
  • icon-button.icon.color.ghost.error.default → {global.icon.on-subtle.functional.error.default}
  • icon-button.icon.color.ghost.error.hover → {global.icon.on-subtle.functional.error.default}
  • icon-button.icon.color.ghost.error.active → {global.icon.on-subtle.functional.error.default}
  • icon-button.icon.color.ghost.disabled → {global.icon.state.disabled.default}
Icon
  • icon.container.color.neutral → {global.icon.on-base.neutral.secondary}
  • icon.container.color.brand → {global.icon.on-base.brand.default}
  • icon.container.color.success → {global.icon.on-base.functional.success.default}
  • icon.container.color.warning → {global.icon.on-base.functional.warning.default}
  • icon.container.color.error → {global.icon.on-base.functional.error.default}
  • icon.container.color.info → {global.icon.on-base.functional.info.default}
Number field
  • number-field.label.color.default → {global.text.on-base.neutral.primary}
  • number-field.label.color.disabled → {global.text.state.disabled.default}
  • number-field.control.background.default → {global.bg.level.0.default}
  • number-field.control.background.hover → {global.bg.level.0.hover}
  • number-field.control.background.readonly → {global.bg.level.1.default}
  • number-field.control.background.disabled → {global.bg.state.disabled.default}
  • number-field.control.border-color.default → {global.border.accent.neutral.default}
  • number-field.control.border-color.invalid → {global.border.base.functional.error.default}
  • number-field.control.border-color.disabled → {global.border.state.disabled.default}
  • number-field.control.color.default → {global.text.on-base.neutral.primary}
  • number-field.control.color.disabled → {global.text.state.disabled.default}
  • number-field.control.placeholder-color.default → {global.text.on-base.neutral.tertiary}
  • number-field.control.placeholder-color.disabled → {global.text.state.disabled.default}
  • number-field.description.color.default → {global.text.on-base.neutral.secondary}
  • number-field.description.color.disabled → {global.text.state.disabled.default}
  • number-field.error-message.color → {global.text.on-base.functional.error.default}
Pagination
  • pagination.link.background.default → {color.transparent}
  • pagination.link.background.hover → {global.bg.subtle.neutral.default}
  • pagination.link.background.active → {global.bg.subtle.neutral.hover}
  • pagination.link.background.current → {global.bg.accent.neutral.default}
  • pagination.link.background.disabled → {color.transparent}
  • pagination.link.color.default → {global.text.on-base.neutral.primary}
  • pagination.link.color.current → {global.text.on-accent.neutral.primary}
  • pagination.link.color.disabled → {global.text.state.disabled.default}
Progress bar
  • progress-bar.label.color → {global.text.on-base.neutral.primary}
  • progress-bar.value.color → {global.text.on-base.neutral.secondary}
  • progress-bar.track.background → {global.bg.base.neutral.3}
  • progress-bar.indicator.background → {global.bg.accent.brand.default}
Radio group
  • radio-group.legend.color.default → {global.text.on-base.neutral.primary}
  • radio-group.legend.color.disabled → {global.text.state.disabled.default}
  • radio-group.description.color.default → {global.text.on-base.neutral.secondary}
  • radio-group.description.color.disabled → {global.text.state.disabled.default}
  • radio-group.error-message.color → {global.text.on-base.functional.error.default}
  • radio-group.control.background.default → {global.bg.level.0.default}
  • radio-group.control.background.hover → {global.bg.level.0.hover}
  • radio-group.control.background.checked → {global.bg.accent.brand.default}
  • radio-group.control.background.disabled → {global.bg.state.disabled.default}
  • radio-group.control.border-color.default → {global.border.accent.neutral.default}
  • radio-group.control.border-color.hover → {global.border.accent.neutral.default}
  • radio-group.control.border-color.checked → {global.border.accent.brand.default}
  • radio-group.control.border-color.invalid → {global.border.base.functional.error.default}
  • radio-group.control.border-color.disabled → {global.border.state.disabled.default}
  • radio-group.control.color.checked → {global.icon.on-accent.brand.default}
  • radio-group.control.color.disabled → {global.icon.state.disabled.default}
  • radio-group.option-label.color.default → {global.text.on-base.neutral.primary}
  • radio-group.option-label.color.disabled → {global.text.state.disabled.default}
  • radio-group.option-description.color.default → {global.text.on-base.neutral.secondary}
  • radio-group.option-description.color.disabled → {global.text.state.disabled.default}
Search field
  • search-field.label.color.default → {global.text.on-base.neutral.primary}
  • search-field.label.color.disabled → {global.text.state.disabled.default}
  • search-field.control.background.default → {global.bg.level.0.default}
  • search-field.control.background.hover → {global.bg.level.0.hover}
  • search-field.control.background.disabled → {global.bg.state.disabled.default}
  • search-field.control.border-color.default → {global.border.accent.neutral.default}
  • search-field.control.border-color.disabled → {global.border.state.disabled.default}
  • search-field.control.color.default → {global.text.on-base.neutral.primary}
  • search-field.control.color.disabled → {global.text.state.disabled.default}
  • search-field.control.placeholder-color.default → {global.text.on-base.neutral.tertiary}
  • search-field.control.placeholder-color.disabled → {global.text.state.disabled.default}
  • search-field.description.color.default → {global.text.on-base.neutral.secondary}
  • search-field.description.color.disabled → {global.text.state.disabled.default}
  • search-field.icon.color.default → {global.icon.on-base.neutral.tertiary}
  • search-field.icon.color.disabled → {global.icon.state.disabled.default}
Select
  • select.label.color.default → {global.text.on-base.neutral.primary}
  • select.label.color.disabled → {global.text.state.disabled.default}
  • select.control.background.default → {global.bg.level.0.default}
  • select.control.background.hover → {global.bg.level.0.hover}
  • select.control.background.disabled → {global.bg.state.disabled.default}
  • select.control.border-color.default → {global.border.accent.neutral.default}
  • select.control.border-color.invalid → {global.border.base.functional.error.default}
  • select.control.border-color.disabled → {global.border.state.disabled.default}
  • select.control.color.default → {global.text.on-base.neutral.primary}
  • select.control.color.disabled → {global.text.state.disabled.default}
  • select.description.color.default → {global.text.on-base.neutral.secondary}
  • select.description.color.disabled → {global.text.state.disabled.default}
  • select.error-message.color → {global.text.on-base.functional.error.default}
Skeleton
  • skeleton.container.background → {global.bg.state.skeleton.default}
Slider
  • slider.label.color.default → {global.text.on-base.neutral.primary}
  • slider.label.color.disabled → {global.text.state.disabled.default}
  • slider.value.color.default → {global.text.on-base.neutral.secondary}
  • slider.value.color.disabled → {global.text.state.disabled.default}
  • slider.control.background.default → {global.bg.base.neutral.3}
  • slider.control.background.disabled → {global.bg.state.disabled.default}
  • slider.thumb.background.default → {global.bg.accent.brand.default}
  • slider.thumb.background.hover → {global.bg.accent.brand.hover}
  • slider.thumb.background.active → {global.bg.accent.brand.active}
  • slider.thumb.background.disabled → {global.icon.state.disabled.default}
  • slider.thumb.border-color.default → {global.bg.level.0.default}
  • slider.thumb.border-color.disabled → {global.bg.level.0.default}
Spinner
  • spinner.ring.border-color → {global.bg.base.neutral.3}
  • spinner.ring.color → {global.bg.accent.brand.default}
  • spinner.label.color → {global.text.on-base.neutral.secondary}
Switch
  • switch.control.background.default → {global.bg.level.0.default}
  • switch.control.background.hover → {global.bg.level.0.hover}
  • switch.control.background.checked → {global.bg.accent.brand.default}
  • switch.control.background.disabled → {global.bg.state.disabled.default}
  • switch.control.border-color.default → {global.border.accent.neutral.default}
  • switch.control.border-color.hover → {global.border.accent.neutral.default}
  • switch.control.border-color.checked → {global.border.accent.brand.default}
  • switch.control.border-color.disabled → {global.border.state.disabled.default}
  • switch.thumb.background.default → {global.bg.accent.neutral.default}
  • switch.thumb.background.checked → {global.icon.on-accent.brand.default}
  • switch.thumb.background.disabled → {global.icon.state.disabled.default}
  • switch.label.color.default → {global.text.on-base.neutral.primary}
  • switch.label.color.disabled → {global.text.state.disabled.default}
  • switch.description.color.default → {global.text.on-base.neutral.secondary}
  • switch.description.color.disabled → {global.text.state.disabled.default}
Text field
  • text-field.label.color.default → {global.text.on-base.neutral.primary}
  • text-field.label.color.disabled → {global.text.state.disabled.default}
  • text-field.control.background.default → {global.bg.level.0.default}
  • text-field.control.background.hover → {global.bg.level.0.hover}
  • text-field.control.background.readonly → {global.bg.level.1.default}
  • text-field.control.background.disabled → {global.bg.state.disabled.default}
  • text-field.control.border-color.default → {global.border.accent.neutral.default}
  • text-field.control.border-color.invalid → {global.border.base.functional.error.default}
  • text-field.control.border-color.disabled → {global.border.state.disabled.default}
  • text-field.control.color.default → {global.text.on-base.neutral.primary}
  • text-field.control.color.disabled → {global.text.state.disabled.default}
  • text-field.control.placeholder-color.default → {global.text.on-base.neutral.tertiary}
  • text-field.control.placeholder-color.disabled → {global.text.state.disabled.default}
  • text-field.description.color.default → {global.text.on-base.neutral.secondary}
  • text-field.description.color.disabled → {global.text.state.disabled.default}
  • text-field.error-message.color → {global.text.on-base.functional.error.default}
Textarea
  • textarea.label.color.default → {global.text.on-base.neutral.primary}
  • textarea.label.color.disabled → {global.text.state.disabled.default}
  • textarea.control.background.default → {global.bg.level.0.default}
  • textarea.control.background.hover → {global.bg.level.0.hover}
  • textarea.control.background.readonly → {global.bg.level.1.default}
  • textarea.control.background.disabled → {global.bg.state.disabled.default}
  • textarea.control.border-color.default → {global.border.accent.neutral.default}
  • textarea.control.border-color.invalid → {global.border.base.functional.error.default}
  • textarea.control.border-color.disabled → {global.border.state.disabled.default}
  • textarea.control.color.default → {global.text.on-base.neutral.primary}
  • textarea.control.color.disabled → {global.text.state.disabled.default}
  • textarea.control.placeholder-color.default → {global.text.on-base.neutral.tertiary}
  • textarea.control.placeholder-color.disabled → {global.text.state.disabled.default}
  • textarea.description.color.default → {global.text.on-base.neutral.secondary}
  • textarea.description.color.disabled → {global.text.state.disabled.default}
  • textarea.error-message.color → {global.text.on-base.functional.error.default}