Skip to content

Tokens

Three tiers, one direction of references: component → semantic → raw. Generated CSS keeps aliases as var() chains so themes can override any layer.

semantic tokens

The tokens components and the site read. semantic/ is recreated from the Figma library: the mapped colors (Colors / Mapped, light) and the Dimension, Effect and Typography scales, which the Figma library applies directly. additions/semantic/ holds what the design system adds (line heights, letter spacing, motion, the icon font, transparent, the focus ring). References raw tokens and other semantic tokens. Platform overlays may override them; modes give them other values (modal). May reference: raw.

840 tokens

global (451)

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

effect (5)

Token Type Value Resolved CSS
effect.shadow.1
light-switch.base.900 at opacity.1: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.009999999776482582,"hex":"#201E1F"}
light #201E1F03
dark #1414144d
--effect-shadow-1
effect.shadow.2
light-switch.base.900 at opacity.2: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.019999999552965164,"hex":"#201E1F"}
light #201E1F05
dark #14141466
--effect-shadow-2
effect.shadow.3
light-switch.base.900 at opacity.3: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.029999999329447746,"hex":"#201E1F"}
light #201E1F08
dark #14141480
--effect-shadow-3
effect.shadow.4
light-switch.base.900 at opacity.4: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.03999999910593033,"hex":"#201E1F"}
light #201E1F0a
dark #141414b2
--effect-shadow-4
effect.shadow.5
light-switch.base.900 at opacity.5: the Figma library composes them, DTCG cannot, so the resulting color is written as is
 color {"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.05000000074505806,"hex":"#201E1F"}
light #201E1F0d
dark #141414cc
--effect-shadow-5

brand-identity (2)

Token Type Value Resolved CSS
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 (219)

Token Type Value Resolved CSS
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 (34)

Token Type Value Resolved CSS
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

space (30)

Token Type Value Resolved CSS
space.1 dimension {"value":1,"unit":"px"}
1px
--space-1
space.2 dimension {"value":2,"unit":"px"}
2px
--space-2
space.3 dimension {"value":3,"unit":"px"}
3px
--space-3
space.4 dimension {"value":4,"unit":"px"}
4px
--space-4
space.5 dimension {"value":5,"unit":"px"}
5px
--space-5
space.6 dimension {"value":6,"unit":"px"}
6px
--space-6
space.7 dimension {"value":7,"unit":"px"}
7px
--space-7
space.8 dimension {"value":8,"unit":"px"}
8px
--space-8
space.10 dimension {"value":10,"unit":"px"}
10px
--space-10
space.12 dimension {"value":12,"unit":"px"}
12px
--space-12
space.14 dimension {"value":14,"unit":"px"}
14px
--space-14
space.16 dimension {"value":16,"unit":"px"}
16px
--space-16
space.20 dimension {"value":20,"unit":"px"}
20px
--space-20
space.24 dimension {"value":24,"unit":"px"}
24px
--space-24
space.28 dimension {"value":28,"unit":"px"}
28px
--space-28
space.32 dimension {"value":32,"unit":"px"}
32px
--space-32
space.36 dimension {"value":36,"unit":"px"}
36px
--space-36
space.40 dimension {"value":40,"unit":"px"}
40px
--space-40
space.44 dimension {"value":44,"unit":"px"}
44px
--space-44
space.48 dimension {"value":48,"unit":"px"}
48px
--space-48
space.56 dimension {"value":56,"unit":"px"}
56px
--space-56
space.64 dimension {"value":64,"unit":"px"}
64px
--space-64
space.72 dimension {"value":72,"unit":"px"}
72px
--space-72
space.80 dimension {"value":80,"unit":"px"}
80px
--space-80
space.96 dimension {"value":96,"unit":"px"}
96px
--space-96
space.112 dimension {"value":112,"unit":"px"}
112px
--space-112
space.128 dimension {"value":128,"unit":"px"}
128px
--space-128
space.144 dimension {"value":144,"unit":"px"}
144px
--space-144
space.160 dimension {"value":160,"unit":"px"}
160px
--space-160
space.none dimension {"value":0,"unit":"px"}
0px
--space-none

size (10)

Token Type Value Resolved CSS
size.1 dimension {"value":8,"unit":"px"}
8px
--size-1
size.2 dimension {"value":16,"unit":"px"}
16px
--size-2
size.3 dimension {"value":20,"unit":"px"}
20px
--size-3
size.4 dimension {"value":24,"unit":"px"}
24px
--size-4
size.5 dimension {"value":32,"unit":"px"}
32px
--size-5
size.6 dimension {"value":40,"unit":"px"}
40px
--size-6
size.7 dimension {"value":56,"unit":"px"}
56px
--size-7
size.8 dimension {"value":64,"unit":"px"}
64px
--size-8
size.9 dimension {"value":96,"unit":"px"}
96px
--size-9
size.10 dimension {"value":128,"unit":"px"}
128px
--size-10

corner-radius (10)

Token Type Value Resolved CSS
corner-radius.none dimension {"value":0,"unit":"px"}
0px
--corner-radius-none
corner-radius.3xs dimension {"value":1,"unit":"px"}
1px
--corner-radius-3xs
corner-radius.2xs dimension {"value":2,"unit":"px"}
2px
--corner-radius-2xs
corner-radius.xs dimension {"value":4,"unit":"px"}
4px
--corner-radius-xs
corner-radius.sm dimension {"value":8,"unit":"px"}
8px
--corner-radius-sm
corner-radius.md dimension {"value":12,"unit":"px"}
12px
--corner-radius-md
corner-radius.lg dimension {"value":16,"unit":"px"}
16px
--corner-radius-lg
corner-radius.xl dimension {"value":20,"unit":"px"}
20px
--corner-radius-xl
corner-radius.2xl dimension {"value":24,"unit":"px"}
24px
--corner-radius-2xl
corner-radius.full dimension {"value":9999,"unit":"px"}
9999px
--corner-radius-full

stroke-width (4)

Token Type Value Resolved CSS
stroke-width.none dimension {"value":0,"unit":"px"}
0px
--stroke-width-none
stroke-width.sm dimension {"value":0.6,"unit":"px"}
0.6px
--stroke-width-sm
stroke-width.md dimension {"value":1.2,"unit":"px"}
1.2px
--stroke-width-md
stroke-width.lg dimension {"value":2.4,"unit":"px"}
2.4px
--stroke-width-lg

opacity (20)

Token Type Value Resolved CSS
opacity.0
0 % in the Figma library
 number 0
0
--opacity-0
opacity.1
1 % in the Figma library
 number 0.01
0.01
--opacity-1
opacity.2
2 % in the Figma library
 number 0.02
0.02
--opacity-2
opacity.3
3 % in the Figma library
 number 0.03
0.03
--opacity-3
opacity.4
4 % in the Figma library
 number 0.04
0.04
--opacity-4
opacity.5
5 % in the Figma library
 number 0.05
0.05
--opacity-5
opacity.6
6 % in the Figma library
 number 0.06
0.06
--opacity-6
opacity.7
7 % in the Figma library
 number 0.07
0.07
--opacity-7
opacity.8
8 % in the Figma library
 number 0.08
0.08
--opacity-8
opacity.9
9 % in the Figma library
 number 0.09
0.09
--opacity-9
opacity.10
10 % in the Figma library
 number 0.1
0.1
--opacity-10
opacity.15
15 % in the Figma library
 number 0.15
0.15
--opacity-15
opacity.20
20 % in the Figma library
 number 0.2
0.2
--opacity-20
opacity.30
30 % in the Figma library
 number 0.3
0.3
--opacity-30
opacity.40
40 % in the Figma library
 number 0.4
0.4
--opacity-40
opacity.50
50 % in the Figma library
 number 0.5
0.5
--opacity-50
opacity.60
60 % in the Figma library
 number 0.6
0.6
--opacity-60
opacity.70
70 % in the Figma library
 number 0.7
0.7
--opacity-70
opacity.80
80 % in the Figma library
 number 0.8
0.8
--opacity-80
opacity.90
90 % in the Figma library
 number 0.9
0.9
--opacity-90

drop-shadow (1)

Token Type Value Resolved CSS
drop-shadow.number number 0
0
--drop-shadow-number

blur (5)

Token Type Value Resolved CSS
blur.none dimension {"value":0,"unit":"px"}
0px
--blur-none
blur.xs dimension {"value":2,"unit":"px"}
2px
--blur-xs
blur.sm dimension {"value":4,"unit":"px"}
4px
--blur-sm
blur.md dimension {"value":8,"unit":"px"}
8px
--blur-md
blur.lg dimension {"value":16,"unit":"px"}
16px
--blur-lg

heading (13)

Token Type Value Resolved CSS
heading.family fontFamily Inter
Inter
--heading-family
heading.size.3xl dimension {"value":64,"unit":"px"}
64px
--heading-size-3xl
heading.size.2xl dimension {"value":64,"unit":"px"}
64px
--heading-size-2xl
heading.size.xl dimension {"value":48,"unit":"px"}
48px
--heading-size-xl
heading.size.lg dimension {"value":42,"unit":"px"}
42px
--heading-size-lg
heading.size.md dimension {"value":32,"unit":"px"}
32px
--heading-size-md
heading.size.sm dimension {"value":24,"unit":"px"}
24px
--heading-size-sm
heading.size.xs dimension {"value":20,"unit":"px"}
20px
--heading-size-xs
heading.size.2xs dimension {"value":16,"unit":"px"}
16px
--heading-size-2xs
heading.size.3xs dimension {"value":14,"unit":"px"}
14px
--heading-size-3xs
heading.size.4xs dimension {"value":12,"unit":"px"}
12px
--heading-size-4xs
heading.weight.medium fontWeight 500
500
--heading-weight-medium
heading.weight.semi-bold fontWeight 600
600
--heading-weight-semi-bold

body (9)

Token Type Value Resolved CSS
body.family fontFamily Inter
Inter
--body-family
body.size.xl dimension {"value":24,"unit":"px"}
24px
--body-size-xl
body.size.lg dimension {"value":20,"unit":"px"}
20px
--body-size-lg
body.size.md dimension {"value":16,"unit":"px"}
16px
--body-size-md
body.size.sm dimension {"value":14,"unit":"px"}
14px
--body-size-sm
body.size.xs dimension {"value":12,"unit":"px"}
12px
--body-size-xs
body.size.2xs dimension {"value":10,"unit":"px"}
10px
--body-size-2xs
body.weight.regular fontWeight 400
400
--body-weight-regular
body.weight.medium fontWeight 500
500
--body-weight-medium

mono (8)

Token Type Value Resolved CSS
mono.family fontFamily Fragment Mono
"Fragment Mono"
--mono-family
mono.size.2xl dimension {"value":40,"unit":"px"}
40px
--mono-size-2xl
mono.size.xl dimension {"value":24,"unit":"px"}
24px
--mono-size-xl
mono.size.lg dimension {"value":20,"unit":"px"}
20px
--mono-size-lg
mono.size.md dimension {"value":16,"unit":"px"}
16px
--mono-size-md
mono.size.sm dimension {"value":14,"unit":"px"}
14px
--mono-size-sm
mono.size.xs dimension {"value":12,"unit":"px"}
12px
--mono-size-xs
mono.weight.regular fontWeight 400
400
--mono-weight-regular

color (2)

Token Type Value Resolved CSS
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
color.focus.ring
Focus indicator color shared by every interactive component.
 color {brand.light.600}
light #175DD6
dark #9EE7FA
--color-focus-ring

focus (2)

Token Type Value Resolved CSS
focus.ring.width
Focus ring of every component: the strong focus of the stroke scale, thick enough for WCAG 2.4.13 Focus Appearance (AAA).
 dimension {stroke-width.lg}
2.4px
--focus-ring-width
focus.ring.offset dimension {space.4}
4px
--focus-ring-offset

duration (2)

Token Type Value Resolved CSS
duration.fast duration {"value":150,"unit":"ms"}
150ms
--duration-fast
duration.normal duration {"value":250,"unit":"ms"}
250ms
--duration-normal

easing (1)

Token Type Value Resolved CSS
easing.standard cubicBezier [0.2,0,0,1]
cubic-bezier(0.2, 0, 0, 1)
--easing-standard

font (12)

Token Type Value Resolved CSS
font.icon.family fontFamily ["Material Symbols Outlined"]
"Material Symbols Outlined"
--font-icon-family
font.icon.weight.light fontWeight 300
300
--font-icon-weight-light
font.icon.fill.off number 0
0
--font-icon-fill-off
font.icon.grade.normal number 0
0
--font-icon-grade-normal
font.icon.optical-size.20 number 20
20
--font-icon-optical-size-20
font.line-height.compact
The line box equals the font size: single-line labels set as in the Figma prototype (Button).
 number 1
1
--font-line-height-compact
font.line-height.tight number 1.2
1.2
--font-line-height-tight
font.line-height.normal number 1.5
1.5
--font-line-height-normal
font.letter-spacing.normal dimension {"value":0,"unit":"px"}
0px
--font-letter-spacing-normal
font.letter-spacing.tight.xs dimension {"value":-0.24,"unit":"px"}
-0.24px
--font-letter-spacing-tight-xs
font.letter-spacing.tight.sm dimension {"value":-0.28,"unit":"px"}
-0.28px
--font-letter-spacing-tight-sm
font.letter-spacing.tight.md dimension {"value":-0.48,"unit":"px"}
-0.48px
--font-letter-spacing-tight-md