Color draft v3.0.0

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

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

Specimens

The tokens this foundation is built from, drawn from packages/tokens/src/: raw primitives and the semantic decisions on top of them. A token added to one of these groups appears here with no site change; values that differ per mode or per platform are shown next to each other.

Neutral palette

Ash and slate, each in a light and a dark ramp.

neutral.* · 48 tokens · Swatches, one row per group (a ramp).

`neutral.light.ash`

25 #FDFDFD
50 #F7F6F6
100 #ECE8E9
200 #DFDBDC
300 #D7D3D4
400 #B6B4B4
500 #8C8C8C
600 #616161
700 #4C4A4A
800 #323031
900 #201E1F
950 #0E0D0D

`neutral.light.slate`

25 #FCFCFC
50 #F3F3F5
100 #E7E9EB
200 #DEE0E3
300 #D2D3D7
400 #ADB0B7
500 #848A97
600 #5B6373
700 #434A58
800 #2E333D
900 #1D2128
950 #0D0F14

`neutral.dark.ash`

25 #E8E3E4
50 #E3DDDE
100 #D2CECF
200 #B9B7B7
300 #9D9B9C
400 #767676
500 #363636
600 #303030
700 #282828
800 #212121
900 #191919
950 #141414

`neutral.dark.slate`

25 #E2E4EA
50 #DDDFE2
100 #CDCFD2
200 #B6B8BA
300 #9A9C9E
400 #747578
500 #4D525C
600 #2D3037
700 #26282D
800 #1E2126
900 #18191F
950 #10141B

Palette switch

The neutral ramp the roles read: ash today.

light-switch.* dark-switch.* · 24 tokens · Swatches, one row per group (a ramp).

`light-switch.base`

25 #FDFDFD
50 #F7F6F6
100 #ECE8E9
200 #DFDBDC
300 #D7D3D4
400 #B6B4B4
500 #8C8C8C
600 #616161
700 #4C4A4A
800 #323031
900 #201E1F
950 #0E0D0D

`dark-switch.base`

25 #E8E3E4
50 #E3DDDE
100 #D2CECF
200 #B9B7B7
300 #9D9B9C
400 #767676
500 #363636
600 #303030
700 #282828
800 #212121
900 #191919
950 #141414

Brand palette

Brand ramps for light and dark mode, and the brand identity colors.

brand.* · 28 tokens · Swatches, one row per group (a ramp).

`brand.light`

25 #FBFCFD
50 #EEF1F7
100 #DDE6F5
200 #BFD1F1
300 #9BB9EC
400 #749DE5
500 #497EDE
600 #175DD6
700 #1148A9
800 #0B2A69
900 #0B204D
950 #05133A

`brand.dark`

25 #F8FDFE
50 #E4F7FC
100 #CEF2FB
200 #9EE7FA
300 #53D6F2
400 #41B9D3
500 #3499AF
600 #297B8C
700 #1F606E
800 #10363E
900 #0D272E
950 #09191D

`brand.identity-base`

marine-blue #242A75
light-blue #00BBDD
true-white #FFFFFF
true-black #000000

Functional palette

Hues that carry a status: error, warning, success, info and severe.

functional.* · 60 tokens · Swatches, one row per group (a ramp).

`functional.success`

25 #F8FEFA
50 #DBFAE6
100 #AEF6C9
200 #30F498
300 #11C772
400 #16AE64
500 #129957
600 #0B7742
700 #075D33
800 #023A1E
900 #022A23
950 #011C16

`functional.warning`

25 #FFFEFC
50 #FFF1C7
100 #FFE495
200 #FFD654
300 #FFC61C
400 #DFA700
500 #C38401
600 #765818
700 #644B16
800 #3E2D0C
900 #2D2107
950 #1F1504

`functional.severe`

25 #FFFBF9
50 #FFEDE2
100 #FFDFCB
200 #FFCAA8
300 #FE8400
400 #DE7B27
500 #CC6B0B
600 #894C1A
700 #764016
800 #4A2506
900 #381A02
950 #271001

`functional.error`

25 #FEFBFA
50 #FEECEA
100 #FCCDC6
200 #FAA79D
300 #F88275
400 #EE5248
500 #E12A23
600 #C01619
700 #940E11
800 #531A16
900 #3E130F
950 #2B0B08

`functional.info`

25 #FBFCFD
50 #EDF1F9
100 #DEE7F6
200 #BBCFF3
300 #94B6F4
400 #709DF1
500 #5085EA
600 #2B68E0
700 #1A4CAD
800 #0C2A68
900 #0B204B
950 #09162F

AI palette

For features generated or assisted by AI.

ai.* · raw tier · 12 tokens · Swatches, one row per group (a ramp).

`ai`

25 #FBFCFE
50 #EBF2FB
100 #DBE8F9
200 #C3D8F5
300 #A2C3F0
400 #7CAAE9
500 #5291E2
600 #3D84DF
700 #1F60B1
800 #0F2F59
900 #0F233E
950 #12171F

Extended palette

Additional hues for categories, illustrations and data.

extended.* · 96 tokens · Swatches, one row per group (a ramp).

`extended.lavender`

25 #FDFBFF
50 #F4EBFE
100 #E6D2FE
200 #DABCFD
300 #CA9EFA
400 #B87BF5
500 #A653EA
600 #8D3BCD
700 #7534A9
800 #3F1A5C
900 #2D1543
950 #1D0E2C

`extended.lime`

25 #FAFFEC
50 #F4FECD
100 #EAFE8C
200 #E2FC00
300 #D7F100
400 #CAE200
500 #B8CD06
600 #A0B316
700 #657216
800 #2E340B
900 #22260E
950 #171811

`extended.coral`

25 #FFFBFA
50 #FFEDE7
100 #FFDFD5
200 #FEC8B6
300 #FEA78B
400 #FD8C67
500 #E75F2E
600 #C35129
700 #9C4324
800 #4D2112
900 #361A12
950 #1F1411

`extended.forest`

25 #FAFDFC
50 #E6F6F0
100 #CBF1E3
200 #9EE8CF
300 #82D3B9
400 #68BBA1
500 #4FA189
600 #318C73
700 #18614E
800 #0A382D
900 #052A20
950 #031C15

`extended.azure`

25 #FAFCFE
50 #E7F4FB
100 #D4EBF8
200 #B5DDF3
300 #8ACAED
400 #5BB8E7
500 #379BCA
600 #2C7A9F
700 #266280
800 #153443
900 #14262E
950 #12181B

`extended.orchid`

25 #FEFBFD
50 #FDECF6
100 #FBDDEF
200 #F8C4E4
300 #F5A1D7
400 #F283CD
500 #D956B1
600 #B74A96
700 #923D78
800 #491E3B
900 #33182A
950 #1D1419

`extended.sand`

25 #FEFDEC
50 #FDFBD2
100 #FBF6AB
200 #F2E76F
300 #DFD465
400 #C8BC5A
500 #ABA04B
600 #857B38
700 #68642C
800 #353019
900 #272316
950 #181710

`extended.amber`

25 #FFFCF6
50 #FFF5E1
100 #FFEBC4
200 #FEDC97
300 #FAC138
400 #EEB836
500 #DDAB35
600 #B58D31
700 #7F6426
800 #3B2D12
900 #2A2212
950 #1A1611

Branded extended palette

Brand-flavoured additional hues.

branded-extended.* · 48 tokens · Swatches, one row per group (a ramp).

`branded-extended.purple`

25 #FCFCFD
50 #F5F0FA
100 #EEE4FB
200 #E2CBFD
300 #D5AEFF
400 #C081FF
500 #A558EB
600 #8636CA
700 #6B0DAC
800 #410B6A
900 #310056
950 #1C0E2E

`branded-extended.yellow`

25 #FCFDF6
50 #F4FE9B
100 #EBF479
200 #D8DE58
300 #C1C546
400 #A7A93E
500 #8C8D34
600 #72712A
700 #5B5A21
800 #323212
900 #25240F
950 #18180D

`branded-extended.green`

25 #FBFDF9
50 #EAF9DE
100 #CEFCA4
200 #A8EF5A
300 #91D643
400 #7BBA36
500 #659C2A
600 #507F1E
700 #3F6717
800 #20370B
900 #152A03
950 #101A0B

`branded-extended.beige`

25 #FCFCFB
50 #F6ECE2
100 #EFDFCF
200 #E9C39E
300 #E2A261
400 #C28548
500 #A06931
600 #825426
700 #67431E
800 #412A13
900 #301F10
950 #1E150C

Utility

Added by the design system: fully transparent, for fills and borders that keep their space without showing.

color.transparent · 1 token · Swatches, one row per group (a ramp).

`color`

transparent color(srgb 0 0 0 / 0)

Surface levels

The levels and the sunken plane with their states, and the neutral steps they are built from.

global.bg.level.* global.bg.base.* · 17 tokens · Swatch, value and alias of each token in every mode, side by side.

Token	light	dark
`global.bg.level.0.default`	`#FDFDFD` `{global.bg.base.neutral.1}`	`#191919` `{global.bg.base.neutral.1}`
`global.bg.level.0.hover`	`#F7F6F6` `{global.bg.base.neutral.2}`	`#212121` `{global.bg.base.neutral.2}`
`global.bg.level.0.active`	`#ECE8E9` `{global.bg.base.neutral.3}`	`#282828` `{global.bg.base.neutral.3}`
`global.bg.level.1.default`	`#F7F6F6` `{global.bg.base.neutral.2}`	`#212121` `{global.bg.base.neutral.2}`
`global.bg.level.1.hover`	`#ECE8E9` `{global.bg.base.neutral.3}`	`#282828` `{global.bg.base.neutral.3}`
`global.bg.level.1.active`	`#DFDBDC` `{global.bg.base.neutral.4}`	`#303030` `{global.bg.base.neutral.4}`
`global.bg.level.2.default`	`#FDFDFD` `{global.bg.base.neutral.1}`	`#282828` `{global.bg.base.neutral.3}`
`global.bg.level.2.hover`	`#F7F6F6` `{global.bg.base.neutral.2}`	`#303030` `{global.bg.base.neutral.4}`
`global.bg.level.2.active`	`#ECE8E9` `{global.bg.base.neutral.3}`	`#363636` `{global.bg.base.neutral.5}`
`global.bg.level.3.default`	`#F7F6F6` `{global.bg.base.neutral.2}`	`#303030` `{global.bg.base.neutral.4}`
`global.bg.level.sunken.default`	`#F7F6F6` `{global.bg.base.neutral.2}`	`#141414` `{dark-switch.base.950}`
`global.bg.level.sunken.hover`	`#ECE8E9` `{global.bg.base.neutral.3}`	`#191919` `{dark-switch.base.900}`
`global.bg.base.neutral.1`	`#FDFDFD` `{light-switch.base.25}`	`#191919` `{dark-switch.base.900}`
`global.bg.base.neutral.2`	`#F7F6F6` `{light-switch.base.50}`	`#212121` `{dark-switch.base.800}`
`global.bg.base.neutral.3`	`#ECE8E9` `{light-switch.base.100}`	`#282828` `{dark-switch.base.700}`
`global.bg.base.neutral.4`	`#DFDBDC` `{light-switch.base.200}`	`#303030` `{dark-switch.base.600}`
`global.bg.base.neutral.5`	`#D7D3D4` `{light-switch.base.300}`	`#363636` `{dark-switch.base.500}`

Fills

Fills by emphasis, family and state; disabled and skeleton; transparency layers.

global.bg.accent.* global.bg.subtle.* global.bg.sunken.* global.bg.state.* global.bg.transparency.* · 154 tokens · Swatch, value and alias of each token in every mode, side by side.

Token	light	dark
`global.bg.accent.neutral.default`	`#201E1F` `{light-switch.base.900}`	`#E8E3E4` `{dark-switch.base.25}`
`global.bg.accent.neutral.hover`	`#323031` `{light-switch.base.800}`	`#D2CECF` `{dark-switch.base.100}`
`global.bg.accent.neutral.active`	`#4C4A4A` `{light-switch.base.700}`	`#B9B7B7` `{dark-switch.base.200}`
`global.bg.accent.brand.default`	`#175DD6` `{brand.light.600}`	`#9EE7FA` `{brand.dark.200}`
`global.bg.accent.brand.hover`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`global.bg.accent.brand.active`	`#0B2A69` `{brand.light.800}`	`#41B9D3` `{brand.dark.400}`
`global.bg.accent.functional.success.default`	`#0B7742` `{functional.success.600}`	`#11C772` `{functional.success.300}`
`global.bg.accent.functional.success.hover`	`#075D33` `{functional.success.700}`	`#16AE64` `{functional.success.400}`
`global.bg.accent.functional.success.active`	`#023A1E` `{functional.success.800}`	`#129957` `{functional.success.500}`
`global.bg.accent.functional.warning.default`	`#FFC61C` `{functional.warning.300}`	`#FFC61C` `{functional.warning.300}`
`global.bg.accent.functional.warning.hover`	`#DFA700` `{functional.warning.400}`	`#DFA700` `{functional.warning.400}`
`global.bg.accent.functional.warning.active`	`#C38401` `{functional.warning.500}`	`#C38401` `{functional.warning.500}`
`global.bg.accent.functional.severe.default`	`#FE8400` `{functional.severe.300}`	`#FE8400` `{functional.severe.300}`
`global.bg.accent.functional.severe.hover`	`#DE7B27` `{functional.severe.400}`	`#DE7B27` `{functional.severe.400}`
`global.bg.accent.functional.severe.active`	`#CC6B0B` `{functional.severe.500}`	`#CC6B0B` `{functional.severe.500}`
`global.bg.accent.functional.error.default`	`#E12A23` `{functional.error.500}`	`#E12A23` `{functional.error.500}`
`global.bg.accent.functional.error.hover`	`#C01619` `{functional.error.600}`	`#C01619` `{functional.error.600}`
`global.bg.accent.functional.error.active`	`#940E11` `{functional.error.700}`	`#940E11` `{functional.error.700}`
`global.bg.accent.functional.info.default`	`#2B68E0` `{functional.info.600}`	`#94B6F4` `{functional.info.300}`
`global.bg.accent.functional.info.hover`	`#1A4CAD` `{functional.info.700}`	`#709DF1` `{functional.info.400}`
`global.bg.accent.functional.info.active`	`#0C2A68` `{functional.info.800}`	`#5085EA` `{functional.info.500}`
`global.bg.accent.extended.lavender.default`	`#7534A9` `{extended.lavender.700}`	`#B87BF5` `{extended.lavender.400}`
`global.bg.accent.extended.lavender.hover`	`#8D3BCD` `{extended.lavender.600}`	`#CA9EFA` `{extended.lavender.300}`
`global.bg.accent.extended.lavender.active`	`#3F1A5C` `{extended.lavender.800}`	`#A653EA` `{extended.lavender.500}`
`global.bg.accent.extended.lime.default`	`#D7F100` `{extended.lime.300}`	`#CAE200` `{extended.lime.400}`
`global.bg.accent.extended.lime.hover`	`#E2FC00` `{extended.lime.200}`	`#D7F100` `{extended.lime.300}`
`global.bg.accent.extended.lime.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#CAE200` `{extended.lime.400}`	`#B8CD06` `{extended.lime.500}`
`global.bg.accent.extended.coral.default`	`#FD8C67` `{extended.coral.400}`	`#FD8C67` `{extended.coral.400}`
`global.bg.accent.extended.coral.hover`	`#FEA78B` `{extended.coral.300}`	`#FEA78B` `{extended.coral.300}`
`global.bg.accent.extended.coral.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#E75F2E` `{extended.coral.500}`	`#E75F2E` `{extended.coral.500}`
`global.bg.accent.extended.forest.default`	`#0A382D` `{extended.forest.800}`	`#68BBA1` `{extended.forest.400}`
`global.bg.accent.extended.forest.hover`	`#18614E` `{extended.forest.700}`	`#82D3B9` `{extended.forest.300}`
`global.bg.accent.extended.forest.active`	`#052A20` `{extended.forest.900}`	`#4FA189` `{extended.forest.500}`
`global.bg.accent.extended.azure.default`	`#266280` `{extended.azure.700}`	`#5BB8E7` `{extended.azure.400}`
`global.bg.accent.extended.azure.hover`	`#2C7A9F` `{extended.azure.600}`	`#8ACAED` `{extended.azure.300}`
`global.bg.accent.extended.azure.active`	`#153443` `{extended.azure.800}`	`#379BCA` `{extended.azure.500}`
`global.bg.accent.extended.orchid.default`	`#923D78` `{extended.orchid.700}`	`#F283CD` `{extended.orchid.400}`
`global.bg.accent.extended.orchid.hover`	`#B74A96` `{extended.orchid.600}`	`#F5A1D7` `{extended.orchid.300}`
`global.bg.accent.extended.orchid.active`	`#923D78` `{extended.orchid.700}`	`#D956B1` `{extended.orchid.500}`
`global.bg.accent.extended.sand.default`	`#353019` `{extended.sand.800}`	`#DFD465` `{extended.sand.300}`
`global.bg.accent.extended.sand.hover`	`#68642C` `{extended.sand.700}`	`#F2E76F` `{extended.sand.200}`
`global.bg.accent.extended.sand.active`	`#272316` `{extended.sand.900}`	`#C8BC5A` `{extended.sand.400}`
`global.bg.accent.extended.amber.default`	`#FAC138` `{extended.amber.300}`	`#FAC138` `{extended.amber.300}`
`global.bg.accent.extended.amber.hover`	`#FEDC97` `{extended.amber.200}`	`#FEDC97` `{extended.amber.200}`
`global.bg.accent.extended.amber.active`	`#EEB836` `{extended.amber.400}`	`#EEB836` `{extended.amber.400}`
`global.bg.accent.extended.purple.default`	`#8636CA` `{branded-extended.purple.600}`	`#8636CA` `{branded-extended.purple.600}`
`global.bg.accent.extended.purple.hover`	`#6B0DAC` `{branded-extended.purple.700}`	`#6B0DAC` `{branded-extended.purple.700}`
`global.bg.accent.extended.purple.active`	`#410B6A` `{branded-extended.purple.800}`	`#410B6A` `{branded-extended.purple.800}`
`global.bg.accent.extended.yellow.default`	`#EBF479` `{branded-extended.yellow.100}`	`#EBF479` `{branded-extended.yellow.100}`
`global.bg.accent.extended.yellow.hover`	`#D8DE58` `{branded-extended.yellow.200}`	`#D8DE58` `{branded-extended.yellow.200}`
`global.bg.accent.extended.yellow.active`	`#C1C546` `{branded-extended.yellow.300}`	`#C1C546` `{branded-extended.yellow.300}`
`global.bg.accent.extended.green.default`	`#A8EF5A` `{branded-extended.green.200}`	`#A8EF5A` `{branded-extended.green.200}`
`global.bg.accent.extended.green.hover`	`#91D643` `{branded-extended.green.300}`	`#91D643` `{branded-extended.green.300}`
`global.bg.accent.extended.green.active`	`#7BBA36` `{branded-extended.green.400}`	`#7BBA36` `{branded-extended.green.400}`
`global.bg.accent.extended.beige.default`	`#E9C39E` `{branded-extended.beige.200}`	`#E9C39E` `{branded-extended.beige.200}`
`global.bg.accent.extended.beige.hover`	`#E2A261` `{branded-extended.beige.300}`	`#E2A261` `{branded-extended.beige.300}`
`global.bg.accent.extended.beige.active`	`#C28548` `{branded-extended.beige.400}`	`#C28548` `{branded-extended.beige.400}`
`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	`#B6B4B41a`	`#7676761a`
`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	`#B6B4B426`	`#7676764d`
`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	`#B6B4B433`	`#76767680`
`global.bg.subtle.brand.default`	`#EEF1F7` `{brand.light.50}`	`#09191D` `{brand.dark.950}`
`global.bg.subtle.brand.hover`	`#DDE6F5` `{brand.light.100}`	`#0D272E` `{brand.dark.900}`
`global.bg.subtle.brand.active`	`#BFD1F1` `{brand.light.200}`	`#10363E` `{brand.dark.800}`
`global.bg.subtle.functional.success.default`	`#DBFAE6` `{functional.success.50}`	`#011C16` `{functional.success.950}`
`global.bg.subtle.functional.success.hover`	`#AEF6C9` `{functional.success.100}`	`#022A23` `{functional.success.900}`
`global.bg.subtle.functional.success.active`	`#30F498` `{functional.success.200}`	`#023A1E` `{functional.success.800}`
`global.bg.subtle.functional.warning.default`	`#FFF1C7` `{functional.warning.50}`	`#1F1504` `{functional.warning.950}`
`global.bg.subtle.functional.warning.hover`	`#FFE495` `{functional.warning.100}`	`#2D2107` `{functional.warning.900}`
`global.bg.subtle.functional.warning.active`	`#FFD654` `{functional.warning.200}`	`#3E2D0C` `{functional.warning.800}`
`global.bg.subtle.functional.severe.default`	`#FFEDE2` `{functional.severe.50}`	`#271001` `{functional.severe.950}`
`global.bg.subtle.functional.severe.hover`	`#FFDFCB` `{functional.severe.100}`	`#381A02` `{functional.severe.900}`
`global.bg.subtle.functional.severe.active`	`#FFCAA8` `{functional.severe.200}`	`#4A2506` `{functional.severe.800}`
`global.bg.subtle.functional.error.default`	`#FEECEA` `{functional.error.50}`	`#2B0B08` `{functional.error.950}`
`global.bg.subtle.functional.error.hover`	`#FCCDC6` `{functional.error.100}`	`#3E130F` `{functional.error.900}`
`global.bg.subtle.functional.error.active`	`#FAA79D` `{functional.error.200}`	`#531A16` `{functional.error.800}`
`global.bg.subtle.functional.info.default`	`#EDF1F9` `{functional.info.50}`	`#09162F` `{functional.info.950}`
`global.bg.subtle.functional.info.hover`	`#DEE7F6` `{functional.info.100}`	`#0B204B` `{functional.info.900}`
`global.bg.subtle.functional.info.active`	`#BBCFF3` `{functional.info.200}`	`#0C2A68` `{functional.info.800}`
`global.bg.subtle.extended.lavender.default`	`#F4EBFE` `{extended.lavender.50}`	`#2D1543` `{extended.lavender.900}`
`global.bg.subtle.extended.lavender.hover`	`#E6D2FE` `{extended.lavender.100}`	`#3F1A5C` `{extended.lavender.800}`
`global.bg.subtle.extended.lavender.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#DABCFD` `{extended.lavender.200}`	`#1D0E2C` `{extended.lavender.950}`
`global.bg.subtle.extended.lime.default`	`#F4FECD` `{extended.lime.50}`	`#22260E` `{extended.lime.900}`
`global.bg.subtle.extended.lime.hover`	`#EAFE8C` `{extended.lime.100}`	`#2E340B` `{extended.lime.800}`
`global.bg.subtle.extended.lime.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#E2FC00` `{extended.lime.200}`	`#657216` `{extended.lime.700}`
`global.bg.subtle.extended.coral.default`	`#FFEDE7` `{extended.coral.50}`	`#361A12` `{extended.coral.900}`
`global.bg.subtle.extended.coral.hover`	`#FFDFD5` `{extended.coral.100}`	`#4D2112` `{extended.coral.800}`
`global.bg.subtle.extended.coral.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#FEC8B6` `{extended.coral.200}`	`#1F1411` `{extended.coral.950}`
`global.bg.subtle.extended.forest.default`	`#E6F6F0` `{extended.forest.50}`	`#052A20` `{extended.forest.900}`
`global.bg.subtle.extended.forest.hover`	`#CBF1E3` `{extended.forest.100}`	`#0A382D` `{extended.forest.800}`
`global.bg.subtle.extended.forest.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#9EE8CF` `{extended.forest.200}`	`#031C15` `{extended.forest.950}`
`global.bg.subtle.extended.azure.default`	`#E7F4FB` `{extended.azure.50}`	`#14262E` `{extended.azure.900}`
`global.bg.subtle.extended.azure.hover`	`#D4EBF8` `{extended.azure.100}`	`#153443` `{extended.azure.800}`
`global.bg.subtle.extended.azure.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#B5DDF3` `{extended.azure.200}`	`#12181B` `{extended.azure.950}`
`global.bg.subtle.extended.orchid.default`	`#FDECF6` `{extended.orchid.50}`	`#33182A` `{extended.orchid.900}`
`global.bg.subtle.extended.orchid.hover`	`#FBDDEF` `{extended.orchid.100}`	`#491E3B` `{extended.orchid.800}`
`global.bg.subtle.extended.orchid.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#F8C4E4` `{extended.orchid.200}`	`#1D1419` `{extended.orchid.950}`
`global.bg.subtle.extended.sand.default`	`#FDFBD2` `{extended.sand.50}`	`#272316` `{extended.sand.900}`
`global.bg.subtle.extended.sand.hover`	`#FBF6AB` `{extended.sand.100}`	`#353019` `{extended.sand.800}`
`global.bg.subtle.extended.sand.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#F2E76F` `{extended.sand.200}`	`#181710` `{extended.sand.950}`
`global.bg.subtle.extended.amber.default`	`#FFF5E1` `{extended.amber.50}`	`#2A2212` `{extended.amber.900}`
`global.bg.subtle.extended.amber.hover`	`#FFEBC4` `{extended.amber.100}`	`#3B2D12` `{extended.amber.800}`
`global.bg.subtle.extended.amber.active` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#FEDC97` `{extended.amber.200}`	`#1A1611` `{extended.amber.950}`
`global.bg.subtle.extended.purple.default`	`#F5F0FA` `{branded-extended.purple.50}`	`#1C0E2E` `{branded-extended.purple.950}`
`global.bg.subtle.extended.purple.hover`	`#EEE4FB` `{branded-extended.purple.100}`	`#310056` `{branded-extended.purple.900}`
`global.bg.subtle.extended.purple.active`	`#E2CBFD` `{branded-extended.purple.200}`	`#410B6A` `{branded-extended.purple.800}`
`global.bg.subtle.extended.yellow.default`	`#F4FE9B` `{branded-extended.yellow.50}`	`#18180D` `{branded-extended.yellow.950}`
`global.bg.subtle.extended.yellow.hover`	`#EBF479` `{branded-extended.yellow.100}`	`#25240F` `{branded-extended.yellow.900}`
`global.bg.subtle.extended.yellow.active`	`#D8DE58` `{branded-extended.yellow.200}`	`#323212` `{branded-extended.yellow.800}`
`global.bg.subtle.extended.green.default`	`#EAF9DE` `{branded-extended.green.50}`	`#101A0B` `{branded-extended.green.950}`
`global.bg.subtle.extended.green.hover`	`#CEFCA4` `{branded-extended.green.100}`	`#152A03` `{branded-extended.green.900}`
`global.bg.subtle.extended.green.active`	`#A8EF5A` `{branded-extended.green.200}`	`#20370B` `{branded-extended.green.800}`
`global.bg.subtle.extended.beige.default`	`#F6ECE2` `{branded-extended.beige.50}`	`#1E150C` `{branded-extended.beige.950}`
`global.bg.subtle.extended.beige.hover`	`#EFDFCF` `{branded-extended.beige.100}`	`#301F10` `{branded-extended.beige.900}`
`global.bg.subtle.extended.beige.active`	`#E9C39E` `{branded-extended.beige.200}`	`#412A13` `{branded-extended.beige.800}`
`global.bg.sunken.brand.default`	`#DDE6F5` `{brand.light.100}`	`#09191D` `{brand.dark.950}`
`global.bg.sunken.functional.success.default`	`#AEF6C9` `{functional.success.100}`	`#011C16` `{functional.success.950}`
`global.bg.sunken.functional.warning.default`	`#FFE495` `{functional.warning.100}`	`#1F1504` `{functional.warning.950}`
`global.bg.sunken.functional.severe.default`	`#FFEDE2` `{functional.severe.50}`	`#271001` `{functional.severe.950}`
`global.bg.sunken.functional.error.default`	`#FCCDC6` `{functional.error.100}`	`#2B0B08` `{functional.error.950}`
`global.bg.sunken.functional.info.default`	`#DEE7F6` `{functional.info.100}`	`#09162F` `{functional.info.950}`
`global.bg.sunken.extended.lavender.default`	`#E6D2FE` `{extended.lavender.100}`	`#1D0E2C` `{extended.lavender.950}`
`global.bg.sunken.extended.lime.default`	`#EAFE8C` `{extended.lime.100}`	`#171811` `{extended.lime.950}`
`global.bg.sunken.extended.coral.default`	`#FFDFD5` `{extended.coral.100}`	`#1F1411` `{extended.coral.950}`
`global.bg.sunken.extended.forest.default`	`#CBF1E3` `{extended.forest.100}`	`#031C15` `{extended.forest.950}`
`global.bg.sunken.extended.azure.default`	`#D4EBF8` `{extended.azure.100}`	`#12181B` `{extended.azure.950}`
`global.bg.sunken.extended.orchid.default`	`#FBDDEF` `{extended.orchid.100}`	`#1D1419` `{extended.orchid.950}`
`global.bg.sunken.extended.sand.default`	`#FBF6AB` `{extended.sand.100}`	`#181710` `{extended.sand.950}`
`global.bg.sunken.extended.amber.default`	`#FFEBC4` `{extended.amber.100}`	`#1A1611` `{extended.amber.950}`
`global.bg.sunken.extended.purple.default`	`#EEE4FB` `{branded-extended.purple.100}`	`#1C0E2E` `{branded-extended.purple.950}`
`global.bg.sunken.extended.purple.hover`	`#E2CBFD` `{branded-extended.purple.200}`	`#310056` `{branded-extended.purple.900}`
`global.bg.sunken.extended.purple.active`	`#D5AEFF` `{branded-extended.purple.300}`	`#410B6A` `{branded-extended.purple.800}`
`global.bg.sunken.extended.yellow.default`	`#EBF479` `{branded-extended.yellow.100}`	`#18180D` `{branded-extended.yellow.950}`
`global.bg.sunken.extended.yellow.hover`	`#D8DE58` `{branded-extended.yellow.200}`	`#25240F` `{branded-extended.yellow.900}`
`global.bg.sunken.extended.yellow.active`	`#C1C546` `{branded-extended.yellow.300}`	`#323212` `{branded-extended.yellow.800}`
`global.bg.sunken.extended.green.default`	`#CEFCA4` `{branded-extended.green.100}`	`#101A0B` `{branded-extended.green.950}`
`global.bg.sunken.extended.green.hover`	`#A8EF5A` `{branded-extended.green.200}`	`#152A03` `{branded-extended.green.900}`
`global.bg.sunken.extended.green.active`	`#91D643` `{branded-extended.green.300}`	`#20370B` `{branded-extended.green.800}`
`global.bg.sunken.extended.beige.default`	`#EFDFCF` `{branded-extended.beige.100}`	`#1E150C` `{branded-extended.beige.950}`
`global.bg.sunken.extended.beige.hover`	`#E9C39E` `{branded-extended.beige.200}`	`#301F10` `{branded-extended.beige.900}`
`global.bg.sunken.extended.beige.active`	`#E2A261` `{branded-extended.beige.300}`	`#412A13` `{branded-extended.beige.800}`
`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	`#ECE8E900`	`#19191900`
`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	`#ECE8E91a`	`#1919191a`
`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	`#ECE8E933`	`#19191933`
`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	`#ECE8E94d`	`#1919194d`
`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	`#ECE8E980`	`#19191980`
`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	`#ECE8E9b2`	`#191919b2`
`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	`#32303100`	`#19191900`
`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	`#3230311a`	`#1919194d`
`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	`#32303133`	`#19191980`
`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	`#3230314d`	`#19191999`
`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	`#32303180`	`#191919b2`
`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	`#323031b2`	`#191919cc`
`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	`#DFDBDC66`	`#303030b2`
`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	`#B6B4B41a`	`#7676764d`

Text

Text on surfaces and on each fill, code colors, disabled and skeleton.

global.text.* · 85 tokens · Swatch, value and alias of each token in every mode, side by side.

Token	light	dark
`global.text.on-base.neutral.primary`	`#0E0D0D` `{light-switch.base.950}`	`#D2CECF` `{dark-switch.base.100}`
`global.text.on-base.neutral.secondary`	`#323031` `{light-switch.base.800}`	`#B9B7B7` `{dark-switch.base.200}`
`global.text.on-base.neutral.tertiary`	`#616161` `{light-switch.base.600}`	`#9D9B9C` `{dark-switch.base.300}`
`global.text.on-base.brand.default` Only use with natural bg	`#175DD6` `{brand.light.600}`	`#9EE7FA` `{brand.dark.200}`
`global.text.on-base.functional.success.default`	`#075D33` `{functional.success.700}`	`#16AE64` `{functional.success.400}`
`global.text.on-base.functional.warning.default`	`#3E2D0C` `{functional.warning.800}`	`#644B16` `{functional.warning.700}`
`global.text.on-base.functional.severe.default`	`#764016` `{functional.severe.700}`	`#CC6B0B` `{functional.severe.500}`
`global.text.on-base.functional.error.default` Only use with natural bg	`#E12A23` `{functional.error.500}`	`#EE5248` `{functional.error.400}`
`global.text.on-base.functional.info.default`	`#2B68E0` `{functional.info.600}`	`#94B6F4` `{functional.info.300}`
`global.text.on-base.extended.lavender.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#7534A9` `{extended.lavender.700}`	`#B87BF5` `{extended.lavender.400}`
`global.text.on-base.extended.lime.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#2E340B` `{extended.lime.800}`	`#A0B316` `{extended.lime.600}`
`global.text.on-base.extended.coral.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#9C4324` `{extended.coral.700}`	`#FD8C67` `{extended.coral.400}`
`global.text.on-base.extended.forest.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#18614E` `{extended.forest.700}`	`#68BBA1` `{extended.forest.400}`
`global.text.on-base.extended.azure.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#153443` `{extended.azure.800}`	`#5BB8E7` `{extended.azure.400}`
`global.text.on-base.extended.orchid.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#923D78` `{extended.orchid.700}`	`#F283CD` `{extended.orchid.400}`
`global.text.on-base.extended.sand.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#353019` `{extended.sand.800}`	`#ABA04B` `{extended.sand.500}`
`global.text.on-base.extended.amber.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#3B2D12` `{extended.amber.800}`	`#DDAB35` `{extended.amber.500}`
`global.text.on-accent.neutral.primary`	`#FDFDFD` `{light-switch.base.25}`	`#191919` `{dark-switch.base.900}`
`global.text.on-accent.neutral.secondary`	`#ECE8E9` `{light-switch.base.100}`	`#282828` `{dark-switch.base.700}`
`global.text.on-accent.neutral.tertiary`	`#D7D3D4` `{light-switch.base.300}`	`#303030` `{dark-switch.base.600}`
`global.text.on-accent.brand.default`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`global.text.on-accent.functional.success.default`	`#F8FEFA` `{functional.success.25}`	`#011C16` `{functional.success.950}`
`global.text.on-accent.functional.warning.default`	`#1F1504` `{functional.warning.950}`	`#1F1504` `{functional.warning.950}`
`global.text.on-accent.functional.severe.default`	`#271001` `{functional.severe.950}`	`#271001` `{functional.severe.950}`
`global.text.on-accent.functional.error.default`	`#FEFBFA` `{functional.error.25}`	`#FEFBFA` `{functional.error.25}`
`global.text.on-accent.functional.info.default`	`#FBFCFD` `{functional.info.25}`	`#09162F` `{functional.info.950}`
`global.text.on-accent.extended.lavender.default`	`#FDFBFF` `{extended.lavender.25}`	`#1D0E2C` `{extended.lavender.950}`
`global.text.on-accent.extended.lime.default`	`#171811` `{extended.lime.950}`	`#171811` `{extended.lime.950}`
`global.text.on-accent.extended.coral.default`	`#1F1411` `{extended.coral.950}`	`#1F1411` `{extended.coral.950}`
`global.text.on-accent.extended.forest.default`	`#FAFDFC` `{extended.forest.25}`	`#031C15` `{extended.forest.950}`
`global.text.on-accent.extended.azure.default`	`#FAFCFE` `{extended.azure.25}`	`#12181B` `{extended.azure.950}`
`global.text.on-accent.extended.orchid.default`	`#FEFBFD` `{extended.orchid.25}`	`#1D1419` `{extended.orchid.950}`
`global.text.on-accent.extended.sand.default`	`#FEFDEC` `{extended.sand.25}`	`#181710` `{extended.sand.950}`
`global.text.on-accent.extended.amber.default`	`#1A1611` `{extended.amber.950}`	`#1A1611` `{extended.amber.950}`
`global.text.on-accent.extended.purple.default`	`#FCFCFD` `{branded-extended.purple.25}`	`#FCFCFD` `{branded-extended.purple.25}`
`global.text.on-accent.extended.yellow.default`	`#18180D` `{branded-extended.yellow.950}`	`#18180D` `{branded-extended.yellow.950}`
`global.text.on-accent.extended.green.default`	`#101A0B` `{branded-extended.green.950}`	`#101A0B` `{branded-extended.green.950}`
`global.text.on-accent.extended.beige.default`	`#1E150C` `{branded-extended.beige.950}`	`#1E150C` `{branded-extended.beige.950}`
`global.text.on-subtle.neutral.default`	`#323031` `{global.text.on-base.neutral.secondary}`	`#E3DDDE` `{dark-switch.base.50}`
`global.text.on-subtle.brand.default`	`#1148A9` `{brand.light.700}`	`#9EE7FA` `{brand.dark.200}`
`global.text.on-subtle.functional.success.default`	`#075D33` `{functional.success.700}`	`#30F498` `{functional.success.200}`
`global.text.on-subtle.functional.warning.default`	`#644B16` `{functional.warning.700}`	`#FFD654` `{functional.warning.200}`
`global.text.on-subtle.functional.severe.default`	`#764016` `{functional.severe.700}`	`#FFCAA8` `{functional.severe.200}`
`global.text.on-subtle.functional.error.default`	`#C01619` `{functional.error.600}`	`#FAA79D` `{functional.error.200}`
`global.text.on-subtle.functional.info.default`	`#1A4CAD` `{functional.info.700}`	`#BBCFF3` `{functional.info.200}`
`global.text.on-subtle.extended.lavender.default`	`#3F1A5C` `{extended.lavender.800}`	`#CA9EFA` `{extended.lavender.300}`
`global.text.on-subtle.extended.lime.default`	`#2E340B` `{extended.lime.800}`	`#E2FC00` `{extended.lime.200}`
`global.text.on-subtle.extended.coral.default`	`#4D2112` `{extended.coral.800}`	`#FEA78B` `{extended.coral.300}`
`global.text.on-subtle.extended.forest.default`	`#18614E` `{extended.forest.700}`	`#82D3B9` `{extended.forest.300}`
`global.text.on-subtle.extended.azure.default`	`#153443` `{extended.azure.800}`	`#8ACAED` `{extended.azure.300}`
`global.text.on-subtle.extended.orchid.default`	`#491E3B` `{extended.orchid.800}`	`#F5A1D7` `{extended.orchid.300}`
`global.text.on-subtle.extended.sand.default`	`#68642C` `{extended.sand.700}`	`#C8BC5A` `{extended.sand.400}`
`global.text.on-subtle.extended.amber.default`	`#3B2D12` `{extended.amber.800}`	`#DDAB35` `{extended.amber.500}`
`global.text.on-subtle.extended.purple.default`	`#6B0DAC` `{branded-extended.purple.700}`	`#E2CBFD` `{branded-extended.purple.200}`
`global.text.on-subtle.extended.yellow.default`	`#5B5A21` `{branded-extended.yellow.700}`	`#D8DE58` `{branded-extended.yellow.200}`
`global.text.on-subtle.extended.green.default`	`#3F6717` `{branded-extended.green.700}`	`#A8EF5A` `{branded-extended.green.200}`
`global.text.on-subtle.extended.beige.default`	`#67431E` `{branded-extended.beige.700}`	`#E9C39E` `{branded-extended.beige.200}`
`global.text.on-sunken.brand.default`	`#0B2A69` `{brand.light.800}`	`#53D6F2` `{brand.dark.300}`
`global.text.on-sunken.functional.success.default`	`#075D33` `{functional.success.700}`	`#129957` `{functional.success.500}`
`global.text.on-sunken.functional.warning.default`	`#2D2107` `{functional.warning.900}`	`#C38401` `{functional.warning.500}`
`global.text.on-sunken.functional.severe.default`	`#764016` `{functional.severe.700}`	`#CC6B0B` `{functional.severe.500}`
`global.text.on-sunken.functional.error.default`	`#C01619` `{functional.error.600}`	`#EE5248` `{functional.error.400}`
`global.text.on-sunken.functional.info.default`	`#0C2A68` `{functional.info.800}`	`#94B6F4` `{functional.info.300}`
`global.text.on-sunken.extended.lavender.default`	`#7534A9` `{extended.lavender.700}`	`#A653EA` `{extended.lavender.500}`
`global.text.on-sunken.extended.lime.default`	`#2E340B` `{extended.lime.800}`	`#B8CD06` `{extended.lime.500}`
`global.text.on-sunken.extended.coral.default`	`#4D2112` `{extended.coral.800}`	`#E75F2E` `{extended.coral.500}`
`global.text.on-sunken.extended.forest.default`	`#0A382D` `{extended.forest.800}`	`#68BBA1` `{extended.forest.400}`
`global.text.on-sunken.extended.azure.default`	`#153443` `{extended.azure.800}`	`#379BCA` `{extended.azure.500}`
`global.text.on-sunken.extended.orchid.default`	`#491E3B` `{extended.orchid.800}`	`#D956B1` `{extended.orchid.500}`
`global.text.on-sunken.extended.sand.default`	`#353019` `{extended.sand.800}`	`#ABA04B` `{extended.sand.500}`
`global.text.on-sunken.extended.amber.default`	`#3B2D12` `{extended.amber.800}`	`#DDAB35` `{extended.amber.500}`
`global.text.code.keyword`	`#7534A9` `{extended.lavender.700}`	`#B87BF5` `{extended.lavender.400}`
`global.text.code.variable`	`#923D78` `{extended.orchid.700}`	`#F283CD` `{extended.orchid.400}`
`global.text.code.function`	`#266280` `{extended.azure.700}`	`#5BB8E7` `{extended.azure.400}`
`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.	`#7F6426` `{extended.amber.700}`	`#EEB836` `{extended.amber.400}`
`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.	`#18614E` `{extended.forest.700}`	`#68BBA1` `{extended.forest.400}`
`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.	`#9C4324` `{extended.coral.700}`	`#FD8C67` `{extended.coral.400}`
`global.text.code.comment`	`#4C4A4A` `{light-switch.base.700}`	`#9D9B9C` `{dark-switch.base.300}`
`global.text.code.inserted` Lines a diff adds. The on-base success text step.	`#075D33` `{functional.success.700}`	`#11C772` `{functional.success.300}`
`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.	`#C01619` `{functional.error.600}`	`#FAA79D` `{functional.error.200}`
`global.text.code.changed` Lines a context diff changes. The on-base severe text step.	`#764016` `{functional.severe.700}`	`#FE8400` `{functional.severe.300}`
`global.text.code.invalid` Code a grammar marks invalid or deprecated. Same step as deleted.	`#C01619` `{functional.error.600}`	`#FAA79D` `{functional.error.200}`
`global.text.code.link` URLs and links in code and markup. The on-base brand text step.	`#175DD6` `{brand.light.600}`	`#9EE7FA` `{brand.dark.200}`
`global.text.state.skeleton.default`	`#D7D3D4` `{light-switch.base.300}`	`#282828` `{dark-switch.base.700}`
`global.text.state.disabled.default`	`#8C8C8C` `{light-switch.base.500}`	`#9D9B9Cb2`

Icons

Icon colors, each aliasing the text color of its context.

global.icon.* · 73 tokens · Swatch, value and alias of each token in every mode, side by side.

Borders

Level borders, borders by emphasis and family, disabled.

global.border.* · 117 tokens · Swatch, value and alias of each token in every mode, side by side.

Token	light	dark
`global.border.level.edge.sunken.default`	`#D7D3D4` `{light-switch.base.300}`	`#282828` `{dark-switch.base.700}`
`global.border.level.edge.level.0`	`#DFDBDC` `{light-switch.base.200}`	`#212121` `{dark-switch.base.800}`
`global.border.level.edge.level.1`	`#D7D3D4` `{light-switch.base.300}`	`#282828` `{dark-switch.base.700}`
`global.border.level.edge.level.2`	`#DFDBDC` `{light-switch.base.200}`	`#303030` `{dark-switch.base.600}`
`global.border.level.edge.level.3`	`#D7D3D4` `{light-switch.base.300}`	`#363636` `{dark-switch.base.500}`
`global.border.level.edge.state.hover`	`#8C8C8C` `{light-switch.base.500}`	`#363636` `{dark-switch.base.500}`
`global.border.level.edge.state.active`	`#201E1F` `{light-switch.base.900}`	`#D2CECF` `{dark-switch.base.100}`
`global.border.level.on-level.0`	`#ECE8E9` `{light-switch.base.100}`	`#303030` `{dark-switch.base.600}`
`global.border.level.on-level.1`	`#DFDBDC` `{light-switch.base.200}`	`#363636` `{dark-switch.base.500}`
`global.border.level.on-level.2`	`#ECE8E9` `{light-switch.base.100}`	`#767676` `{dark-switch.base.400}`
`global.border.level.on-level.3`	`#DFDBDC` `{light-switch.base.200}`	`#9D9B9C` `{dark-switch.base.300}`
`global.border.level.blend.0`	`#FDFDFD` `{global.bg.level.0.default}`	`#191919` `{global.bg.level.0.default}`
`global.border.level.blend.1`	`#F7F6F6` `{global.bg.level.1.default}`	`#212121` `{global.bg.level.1.default}`
`global.border.level.blend.2`	`#FDFDFD` `{global.bg.level.2.default}`	`#282828` `{global.bg.level.2.default}`
`global.border.level.blend.3`	`#F7F6F6` `{global.bg.level.3.default}`	`#303030` `{global.bg.level.3.default}`
`global.border.base.neutral.1`	`#ECE8E9` `{light-switch.base.100}`	`#212121` `{dark-switch.base.800}`
`global.border.base.neutral.2`	`#DFDBDC` `{light-switch.base.200}`	`#282828` `{dark-switch.base.700}`
`global.border.base.neutral.3`	`#D7D3D4` `{light-switch.base.300}`	`#303030` `{dark-switch.base.600}`
`global.border.base.neutral.4`	`#B6B4B4` `{light-switch.base.400}`	`#363636` `{dark-switch.base.500}`
`global.border.base.neutral.5`	`#8C8C8C` `{light-switch.base.500}`	`#303030` `{dark-switch.base.600}`
`global.border.base.brand.default`	`#497EDE` `{brand.light.500}`	`#53D6F2` `{brand.dark.300}`
`global.border.base.functional.success.default`	`#129957` `{functional.success.500}`	`#16AE64` `{functional.success.400}`
`global.border.base.functional.warning.default`	`#DFA700` `{functional.warning.400}`	`#C38401` `{functional.warning.500}`
`global.border.base.functional.severe.default`	`#DE7B27` `{functional.severe.400}`	`#CC6B0B` `{functional.severe.500}`
`global.border.base.functional.error.default` Highlight of a form, of a shape that need to be seen more than just a regular border.	`#C01619` `{functional.error.600}`	`#E12A23` `{functional.error.500}`
`global.border.base.functional.info.default`	`#5085EA` `{functional.info.500}`	`#709DF1` `{functional.info.400}`
`global.border.base.extended.lavender.default`	`#8D3BCD` `{extended.lavender.600}`	`#B87BF5` `{extended.lavender.400}`
`global.border.base.extended.lime.default`	`#B8CD06` `{extended.lime.500}`	`#CAE200` `{extended.lime.400}`
`global.border.base.extended.coral.default`	`#C35129` `{extended.coral.600}`	`#FD8C67` `{extended.coral.400}`
`global.border.base.extended.forest.default`	`#318C73` `{extended.forest.600}`	`#68BBA1` `{extended.forest.400}`
`global.border.base.extended.azure.default`	`#2C7A9F` `{extended.azure.600}`	`#5BB8E7` `{extended.azure.400}`
`global.border.base.extended.orchid.default`	`#B74A96` `{extended.orchid.600}`	`#F283CD` `{extended.orchid.400}`
`global.border.base.extended.sand.default`	`#857B38` `{extended.sand.600}`	`#C8BC5A` `{extended.sand.400}`
`global.border.base.extended.amber.default`	`#B58D31` `{extended.amber.600}`	`#EEB836` `{extended.amber.400}`
`global.border.accent.neutral.default`	`#323031` `{light-switch.base.800}`	`#B9B7B7` `{dark-switch.base.200}`
`global.border.accent.neutral.hover`	`#4C4A4A` `{light-switch.base.700}`	`#B9B7B7` `{dark-switch.base.200}`
`global.border.accent.neutral.active`	`#616161` `{light-switch.base.600}`	`#9D9B9C` `{dark-switch.base.300}`
`global.border.accent.brand.default`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`global.border.accent.brand.hover`	`#0B2A69` `{brand.light.800}`	`#41B9D3` `{brand.dark.400}`
`global.border.accent.brand.active`	`#0B204D` `{brand.light.900}`	`#3499AF` `{brand.dark.500}`
`global.border.accent.functional.success.default`	`#075D33` `{functional.success.700}`	`#16AE64` `{functional.success.400}`
`global.border.accent.functional.success.hover`	`#023A1E` `{functional.success.800}`	`#129957` `{functional.success.500}`
`global.border.accent.functional.success.active`	`#022A23` `{functional.success.900}`	`#0B7742` `{functional.success.600}`
`global.border.accent.functional.warning.default`	`#DFA700` `{functional.warning.400}`	`#DFA700` `{functional.warning.400}`
`global.border.accent.functional.warning.hover`	`#C38401` `{functional.warning.500}`	`#C38401` `{functional.warning.500}`
`global.border.accent.functional.warning.active`	`#765818` `{functional.warning.600}`	`#765818` `{functional.warning.600}`
`global.border.accent.functional.severe.default`	`#DE7B27` `{functional.severe.400}`	`#DE7B27` `{functional.severe.400}`
`global.border.accent.functional.severe.hover`	`#CC6B0B` `{functional.severe.500}`	`#CC6B0B` `{functional.severe.500}`
`global.border.accent.functional.severe.active`	`#894C1A` `{functional.severe.600}`	`#894C1A` `{functional.severe.600}`
`global.border.accent.functional.error.default`	`#C01619` `{functional.error.600}`	`#C01619` `{functional.error.600}`
`global.border.accent.functional.error.hover`	`#940E11` `{functional.error.700}`	`#940E11` `{functional.error.700}`
`global.border.accent.functional.error.active`	`#531A16` `{functional.error.800}`	`#531A16` `{functional.error.800}`
`global.border.accent.functional.info.default`	`#1A4CAD` `{functional.info.700}`	`#709DF1` `{functional.info.400}`
`global.border.accent.functional.info.hover`	`#0C2A68` `{functional.info.800}`	`#5085EA` `{functional.info.500}`
`global.border.accent.functional.info.active`	`#0B204B` `{functional.info.900}`	`#2B68E0` `{functional.info.600}`
`global.border.accent.extended.lavender.default`	`#8D3BCD` `{extended.lavender.600}`	`#A653EA` `{extended.lavender.500}`
`global.border.accent.extended.lime.default`	`#D7F100` `{extended.lime.300}`	`#D7F100` `{extended.lime.300}`
`global.border.accent.extended.coral.default`	`#C35129` `{extended.coral.600}`	`#E75F2E` `{extended.coral.500}`
`global.border.accent.extended.forest.default`	`#18614E` `{extended.forest.700}`	`#318C73` `{extended.forest.600}`
`global.border.accent.extended.azure.default`	`#266280` `{extended.azure.700}`	`#379BCA` `{extended.azure.500}`
`global.border.accent.extended.orchid.default`	`#923D78` `{extended.orchid.700}`	`#D956B1` `{extended.orchid.500}`
`global.border.accent.extended.sand.default`	`#ABA04B` `{extended.sand.500}`	`#ABA04B` `{extended.sand.500}`
`global.border.accent.extended.amber.default`	`#EEB836` `{extended.amber.400}`	`#DDAB35` `{extended.amber.500}`
`global.border.accent.extended.purple.default`	`#6B0DAC` `{branded-extended.purple.700}`	`#6B0DAC` `{branded-extended.purple.700}`
`global.border.accent.extended.purple.hover`	`#410B6A` `{branded-extended.purple.800}`	`#410B6A` `{branded-extended.purple.800}`
`global.border.accent.extended.purple.active`	`#310056` `{branded-extended.purple.900}`	`#310056` `{branded-extended.purple.900}`
`global.border.accent.extended.yellow.default`	`#D8DE58` `{branded-extended.yellow.200}`	`#D8DE58` `{branded-extended.yellow.200}`
`global.border.accent.extended.yellow.hover`	`#C1C546` `{branded-extended.yellow.300}`	`#C1C546` `{branded-extended.yellow.300}`
`global.border.accent.extended.yellow.active`	`#A7A93E` `{branded-extended.yellow.400}`	`#A7A93E` `{branded-extended.yellow.400}`
`global.border.accent.extended.green.default`	`#91D643` `{branded-extended.green.300}`	`#91D643` `{branded-extended.green.300}`
`global.border.accent.extended.green.hover`	`#7BBA36` `{branded-extended.green.400}`	`#7BBA36` `{branded-extended.green.400}`
`global.border.accent.extended.green.active`	`#659C2A` `{branded-extended.green.500}`	`#659C2A` `{branded-extended.green.500}`
`global.border.accent.extended.beige.default`	`#E2A261` `{branded-extended.beige.300}`	`#E2A261` `{branded-extended.beige.300}`
`global.border.accent.extended.beige.hover`	`#C28548` `{branded-extended.beige.400}`	`#C28548` `{branded-extended.beige.400}`
`global.border.accent.extended.beige.active`	`#A06931` `{branded-extended.beige.500}`	`#A06931` `{branded-extended.beige.500}`
`global.border.subtle.neutral.default`	`#DFDBDC` `{light-switch.base.200}`	`#36363680`
`global.border.subtle.neutral.hover`	`#D7D3D4` `{light-switch.base.300}`	`#363636` `{dark-switch.base.500}`
`global.border.subtle.neutral.active`	`#B6B4B4` `{light-switch.base.400}`	`#767676` `{dark-switch.base.400}`
`global.border.subtle.brand.default`	`#DDE6F5` `{brand.light.100}`	`#0D272E` `{brand.dark.900}`
`global.border.subtle.brand.hover`	`#BFD1F1` `{brand.light.200}`	`#10363E` `{brand.dark.800}`
`global.border.subtle.brand.active`	`#9BB9EC` `{brand.light.300}`	`#1F606E` `{brand.dark.700}`
`global.border.subtle.functional.success.default`	`#AEF6C9` `{functional.success.100}`	`#022A23` `{functional.success.900}`
`global.border.subtle.functional.success.hover`	`#30F498` `{functional.success.200}`	`#023A1E` `{functional.success.800}`
`global.border.subtle.functional.success.active`	`#11C772` `{functional.success.300}`	`#075D33` `{functional.success.700}`
`global.border.subtle.functional.warning.default`	`#FFE495` `{functional.warning.100}`	`#2D2107` `{functional.warning.900}`
`global.border.subtle.functional.warning.hover`	`#FFD654` `{functional.warning.200}`	`#3E2D0C` `{functional.warning.800}`
`global.border.subtle.functional.warning.active`	`#FFC61C` `{functional.warning.300}`	`#644B16` `{functional.warning.700}`
`global.border.subtle.functional.severe.default`	`#FFDFCB` `{functional.severe.100}`	`#381A02` `{functional.severe.900}`
`global.border.subtle.functional.severe.hover`	`#FFCAA8` `{functional.severe.200}`	`#4A2506` `{functional.severe.800}`
`global.border.subtle.functional.severe.active`	`#FE8400` `{functional.severe.300}`	`#764016` `{functional.severe.700}`
`global.border.subtle.functional.error.default`	`#FCCDC6` `{functional.error.100}`	`#3E130F` `{functional.error.900}`
`global.border.subtle.functional.error.hover`	`#FAA79D` `{functional.error.200}`	`#531A16` `{functional.error.800}`
`global.border.subtle.functional.error.active`	`#F88275` `{functional.error.300}`	`#940E11` `{functional.error.700}`
`global.border.subtle.functional.info.default`	`#DEE7F6` `{functional.info.100}`	`#0B204B` `{functional.info.900}`
`global.border.subtle.functional.info.hover`	`#BBCFF3` `{functional.info.200}`	`#0C2A68` `{functional.info.800}`
`global.border.subtle.functional.info.active`	`#94B6F4` `{functional.info.300}`	`#1A4CAD` `{functional.info.700}`
`global.border.subtle.extended.lavender.default`	`#DABCFD` `{extended.lavender.200}`	`#3F1A5C` `{extended.lavender.800}`
`global.border.subtle.extended.lime.default`	`#EAFE8C` `{extended.lime.100}`	`#2E340B` `{extended.lime.800}`
`global.border.subtle.extended.coral.default`	`#FEC8B6` `{extended.coral.200}`	`#4D2112` `{extended.coral.800}`
`global.border.subtle.extended.forest.default`	`#9EE8CF` `{extended.forest.200}`	`#0A382D` `{extended.forest.800}`
`global.border.subtle.extended.azure.default`	`#B5DDF3` `{extended.azure.200}`	`#153443` `{extended.azure.800}`
`global.border.subtle.extended.orchid.default`	`#F8C4E4` `{extended.orchid.200}`	`#491E3B` `{extended.orchid.800}`
`global.border.subtle.extended.sand.default`	`#F2E76F` `{extended.sand.200}`	`#353019` `{extended.sand.800}`
`global.border.subtle.extended.amber.default`	`#FEDC97` `{extended.amber.200}`	`#3B2D12` `{extended.amber.800}`
`global.border.subtle.extended.purple.default`	`#EEE4FB` `{branded-extended.purple.100}`	`#310056` `{branded-extended.purple.900}`
`global.border.subtle.extended.purple.hover`	`#E2CBFD` `{branded-extended.purple.200}`	`#410B6A` `{branded-extended.purple.800}`
`global.border.subtle.extended.purple.active`	`#D5AEFF` `{branded-extended.purple.300}`	`#6B0DAC` `{branded-extended.purple.700}`
`global.border.subtle.extended.yellow.default`	`#EBF479` `{branded-extended.yellow.100}`	`#25240F` `{branded-extended.yellow.900}`
`global.border.subtle.extended.yellow.hover`	`#D8DE58` `{branded-extended.yellow.200}`	`#323212` `{branded-extended.yellow.800}`
`global.border.subtle.extended.yellow.active`	`#C1C546` `{branded-extended.yellow.300}`	`#5B5A21` `{branded-extended.yellow.700}`
`global.border.subtle.extended.green.default`	`#CEFCA4` `{branded-extended.green.100}`	`#152A03` `{branded-extended.green.900}`
`global.border.subtle.extended.green.hover`	`#A8EF5A` `{branded-extended.green.200}`	`#20370B` `{branded-extended.green.800}`
`global.border.subtle.extended.green.active`	`#91D643` `{branded-extended.green.300}`	`#3F6717` `{branded-extended.green.700}`
`global.border.subtle.extended.beige.default`	`#EFDFCF` `{branded-extended.beige.100}`	`#301F10` `{branded-extended.beige.900}`
`global.border.subtle.extended.beige.hover`	`#E9C39E` `{branded-extended.beige.200}`	`#412A13` `{branded-extended.beige.800}`
`global.border.subtle.extended.beige.active`	`#E2A261` `{branded-extended.beige.300}`	`#67431E` `{branded-extended.beige.700}`
`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	`#B6B4B466`	`#363636b2`

Brand identity

The brand identity colors as roles.

brand-identity.* · 2 tokens · Swatch, value and alias of each token in every mode, side by side.

Token	light	dark
`brand-identity.marine-blue`	`#242A75` `{brand.identity-base.marine-blue}`	`#FFFFFF` `{brand.identity-base.true-white}`
`brand-identity.light-blue`	`#00BBDD` `{brand.identity-base.light-blue}`	`#00BBDD` `{brand.identity-base.light-blue}`

AI roles

Unfinished in the Figma library: fills, text, icons, borders and gradients for AI features.

ai.bg.* ai.text.* ai.icon.* ai.border.* · 34 tokens · Swatch, value and alias of each token in every mode, side by side.

Token	light	dark
`ai.bg.accent.default`	`#175DD6` `{global.bg.accent.brand.default}`	`#9EE7FA` `{global.bg.accent.brand.default}`
`ai.bg.accent.hover`	`#1148A9` `{global.bg.accent.brand.hover}`	`#53D6F2` `{global.bg.accent.brand.hover}`
`ai.bg.accent.active`	`#0B2A69` `{global.bg.accent.brand.active}`	`#41B9D3` `{global.bg.accent.brand.active}`
`ai.bg.subtle.default`	`#EEF1F7` `{global.bg.subtle.brand.default}`	`#09191D` `{global.bg.subtle.brand.default}`
`ai.bg.subtle.hover`	`#DDE6F5` `{global.bg.subtle.brand.hover}`	`#0D272E` `{global.bg.subtle.brand.hover}`
`ai.bg.subtle.active`	`#BFD1F1` `{global.bg.subtle.brand.active}`	`#10363E` `{global.bg.subtle.brand.active}`
`ai.bg.gradient.avatar.start`	`#BFD1F1` `{brand.light.200}`	`#10363E` `{brand.dark.800}`
`ai.bg.gradient.avatar.end`	`#749DE5` `{brand.light.400}`	`#3499AF` `{brand.dark.500}`
`ai.bg.gradient.skeleton.start`	`#FDFDFD` `{global.bg.level.0.default}`	`#191919` `{global.bg.level.0.default}`
`ai.bg.gradient.skeleton.end`	`#DDE6F5` `{brand.light.100}`	`#0D272E` `{brand.dark.900}`
`ai.bg.gradient.subtle.start`	`#FDFDFD` `{global.bg.level.0.default}`	`#191919` `{global.bg.level.0.default}`
`ai.bg.gradient.subtle.end`	`#EEF1F7` `{brand.light.50}`	`#0D272E` `{brand.dark.900}`
`ai.bg.gradient.loading.start`	`#ECE8E900` `{global.bg.transparency.fade.none}`	`#19191900` `{global.bg.transparency.fade.none}`
`ai.bg.gradient.loading.end`	`#EEF1F7` `{ai.bg.subtle.default}`	`#0D272E` `{ai.bg.subtle.hover}`
`ai.text.on-base.default` Only use with natural bg	`#175DD6` `{global.text.on-base.brand.default}`	`#9EE7FA` `{global.text.on-base.brand.default}`
`ai.text.on-subtle.default` Only use with natural bg	`#1148A9` `{global.text.on-subtle.brand.default}`	`#9EE7FA` `{global.text.on-subtle.brand.default}`
`ai.text.on-accent.default` Only use with natural bg	`#FBFCFD` `{global.text.on-accent.brand.default}`	`#09191D` `{global.text.on-accent.brand.default}`
`ai.text.gradient.on-base.start` Only use with natural bg	`#175DD6` `{brand.light.600}`	`#41B9D3` `{brand.dark.400}`
`ai.text.gradient.on-base.end` Only use with natural bg	`#749DE5` `{brand.light.400}`	`#297B8C` `{brand.dark.600}`
`ai.text.gradient.on-accent.start` Only use with natural bg	`#EEF1F7` `{brand.light.50}`	`#09191D` `{brand.dark.950}`
`ai.text.gradient.on-accent.mid` Only use with natural bg	`#BFD1F1` `{brand.light.200}`	`#297B8C` `{brand.dark.600}`
`ai.text.gradient.on-accent.end` Only use with natural bg	`#05133A` `{brand.light.950}`	`#297B8C` `{brand.dark.600}`
`ai.icon.on-base.default` Only use with natural bg	`#497EDE` `{brand.light.500}`	`#41B9D3` `{brand.dark.400}`
`ai.icon.on-subtle.default` Only use with natural bg	`#497EDE` `{brand.light.500}`	`#41B9D3` `{brand.dark.400}`
`ai.icon.on-accent.default` Only use with natural bg	`#EEF1F7` `{brand.light.50}`	`#0D272E` `{brand.dark.900}`
`ai.border.base.default`	`#497EDE` `{global.border.base.brand.default}`	`#53D6F2` `{global.border.base.brand.default}`
`ai.border.subtle.default`	`#DDE6F5` `{global.border.subtle.brand.default}`	`#0D272E` `{global.border.subtle.brand.default}`
`ai.border.accent.default`	`#1148A9` `{global.border.accent.brand.default}`	`#53D6F2` `{global.border.accent.brand.default}`
`ai.border.gradient.avatar.start`	`#749DE5` `{brand.light.400}`	`#3499AF` `{brand.dark.500}`
`ai.border.gradient.avatar.end`	`#BFD1F1` `{brand.light.200}`	`#10363E` `{brand.dark.800}`
`ai.border.gradient.default.start`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`ai.border.gradient.default.end`	`#9BB9EC` `{brand.light.300}`	`#1F606E` `{brand.dark.700}`
`ai.border.gradient.focus.start`	`#BFD1F1` `{brand.light.200}`	`#0D272E` `{brand.dark.900}`
`ai.border.gradient.focus.end`	`#175DD6` `{brand.light.600}`	`#41B9D3` `{brand.dark.400}`

Data visualization roles

Unfinished in the Figma library: series colors by family and the structure of charts (axes, grid, track).

dataviz.* · 219 tokens · Swatch, value and alias of each token in every mode, side by side.

Token	light	dark
`dataviz.role.brand.bg.accent.brand-1`	`#0B2A69` `{brand.light.800}`	`#9EE7FA` `{brand.dark.200}`
`dataviz.role.brand.bg.accent.brand-2`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.bg.accent.brand-3`	`#175DD6` `{brand.light.600}`	`#41B9D3` `{brand.dark.400}`
`dataviz.role.brand.bg.accent.brand-4`	`#497EDE` `{brand.light.500}`	`#3499AF` `{brand.dark.500}`
`dataviz.role.brand.bg.accent.brand-5`	`#749DE5` `{brand.light.400}`	`#297B8C` `{brand.dark.600}`
`dataviz.role.brand.bg.subtile.brand-1`	`#749DE5` `{brand.light.400}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.bg.subtile.brand-2`	`#9BB9EC` `{brand.light.300}`	`#41B9D3` `{brand.dark.400}`
`dataviz.role.brand.bg.subtile.brand-3`	`#BFD1F1` `{brand.light.200}`	`#3499AF` `{brand.dark.500}`
`dataviz.role.brand.bg.subtile.brand-4`	`#DDE6F5` `{brand.light.100}`	`#297B8C` `{brand.dark.600}`
`dataviz.role.brand.bg.subtile.brand-5`	`#EEF1F7` `{brand.light.50}`	`#1F606E` `{brand.dark.700}`
`dataviz.role.brand.bg.area.brand-1`	`#EEF1F7` `{brand.light.50}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.bg.area.brand-2`	`#EEF1F7` `{brand.light.50}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.bg.area.brand-3`	`#EEF1F7` `{brand.light.50}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.bg.area.brand-4`	`#EEF1F7` `{brand.light.50}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.bg.area.brand-5`	`#EEF1F7` `{brand.light.50}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.text.base.brand-1`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.text.base.brand-2`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.text.base.brand-3`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.text.base.brand-4`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.text.base.brand-5`	`#1148A9` `{brand.light.700}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.text.on-accent.brand-1`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.text.on-accent.brand-2`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.text.on-accent.brand-3`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.text.on-accent.brand-4`	`#05133A` `{brand.light.950}`	`#E4F7FC` `{brand.dark.50}`
`dataviz.role.brand.text.on-accent.brand-5`	`#05133A` `{brand.light.950}`	`#E4F7FC` `{brand.dark.50}`
`dataviz.role.brand.text.on-subtile.brand-1`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.text.on-subtile.brand-2`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.text.on-subtile.brand-3`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.text.on-subtile.brand-4`	`#05133A` `{brand.light.950}`	`#E4F7FC` `{brand.dark.50}`
`dataviz.role.brand.text.on-subtile.brand-5`	`#05133A` `{brand.light.950}`	`#E4F7FC` `{brand.dark.50}`
`dataviz.role.brand.icon.brand-1`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.icon.brand-2`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.icon.brand-3`	`#FBFCFD` `{brand.light.25}`	`#09191D` `{brand.dark.950}`
`dataviz.role.brand.icon.brand-4`	`#05133A` `{brand.light.950}`	`#E4F7FC` `{brand.dark.50}`
`dataviz.role.brand.icon.brand-5`	`#05133A` `{brand.light.950}`	`#E4F7FC` `{brand.dark.50}`
`dataviz.role.brand.border.base.brand-1`	`#0B2A69` `{brand.light.800}`	`#9EE7FA` `{brand.dark.200}`
`dataviz.role.brand.border.base.brand-2`	`#175DD6` `{brand.light.600}`	`#41B9D3` `{brand.dark.400}`
`dataviz.role.brand.border.base.brand-3`	`#749DE5` `{brand.light.400}`	`#1F606E` `{brand.dark.700}`
`dataviz.role.brand.border.base.brand-4`	`#BFD1F1` `{brand.light.200}`	`#10363E` `{brand.dark.800}`
`dataviz.role.brand.border.base.brand-5`	`#BFD1F1` `{brand.light.200}`	`#0D272E` `{brand.dark.900}`
`dataviz.role.brand.border.on-accent.brand-1`	`#0B2A69` `{brand.light.800}`	`#9EE7FA` `{brand.dark.200}`
`dataviz.role.brand.border.on-accent.brand-2`	`#175DD6` `{brand.light.600}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.border.on-accent.brand-3`	`#497EDE` `{brand.light.500}`	`#41B9D3` `{brand.dark.400}`
`dataviz.role.brand.border.on-accent.brand-4`	`#749DE5` `{brand.light.400}`	`#3499AF` `{brand.dark.500}`
`dataviz.role.brand.border.on-accent.brand-5`	`#9BB9EC` `{brand.light.300}`	`#297B8C` `{brand.dark.600}`
`dataviz.role.brand.border.separator.brand-1`	`#DDE6F5` `{brand.light.100}`	`#9EE7FA` `{brand.dark.200}`
`dataviz.role.brand.border.separator.brand-2`	`#175DD6` `{brand.light.600}`	`#53D6F2` `{brand.dark.300}`
`dataviz.role.brand.border.separator.brand-3`	`#497EDE` `{brand.light.500}`	`#41B9D3` `{brand.dark.400}`
`dataviz.role.brand.border.separator.brand-4`	`#749DE5` `{brand.light.400}`	`#3499AF` `{brand.dark.500}`
`dataviz.role.brand.border.separator.brand-5`	`#9BB9EC` `{brand.light.300}`	`#297B8C` `{brand.dark.600}`
`dataviz.role.functionnal.bg.accent.error-accent`	`#C01619` `{functional.error.600}`	`#D3392A`
`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	`#1A9759`	`#1A9759`
`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	`#FFC61C`	`#FFC61C`
`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	`#FDF3F2`	`#2B0B08` `{functional.error.950}`
`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	`#EDFDF3`	`#011C16` `{functional.success.950}`
`dataviz.role.functionnal.bg.subtile.warning-subtile`	`#FFF1C7` `{functional.warning.50}`	`#1F1504` `{functional.warning.950}`
`dataviz.role.functionnal.text.on-accent.error-accent`	`#FEFBFA` `{global.text.on-accent.functional.error.default}`	`#FEFBFA` `{global.text.on-accent.functional.error.default}`
`dataviz.role.functionnal.text.on-accent.success-accent`	`#F8FEFA` `{global.text.on-accent.functional.success.default}`	`#011C16` `{global.text.on-accent.functional.success.default}`
`dataviz.role.functionnal.text.on-accent.warning-accent`	`#1F1504` `{global.text.on-accent.functional.warning.default}`	`#1F1504` `{global.text.on-accent.functional.warning.default}`
`dataviz.role.functionnal.text.on-subtile.error-subtile`	`#C01619` `{global.text.on-subtle.functional.error.default}`	`#FAA79D` `{global.text.on-subtle.functional.error.default}`
`dataviz.role.functionnal.text.on-subtile.success-subtile`	`#075D33` `{global.text.on-subtle.functional.success.default}`	`#30F498` `{global.text.on-subtle.functional.success.default}`
`dataviz.role.functionnal.text.on-subtile.warning-subtile`	`#644B16` `{global.text.on-subtle.functional.warning.default}`	`#FFD654` `{global.text.on-subtle.functional.warning.default}`
`dataviz.role.functionnal.text.base.error-base`	`#E12A23` `{global.text.on-base.functional.error.default}`	`#EE5248` `{global.text.on-base.functional.error.default}`
`dataviz.role.functionnal.text.base.success-base`	`#075D33` `{global.text.on-base.functional.success.default}`	`#16AE64` `{global.text.on-base.functional.success.default}`
`dataviz.role.functionnal.text.base.warning-base`	`#3E2D0C` `{global.text.on-base.functional.warning.default}`	`#644B16` `{global.text.on-base.functional.warning.default}`
`dataviz.role.functionnal.icon.on-accent.error-accent`	`#FEFBFA` `{global.text.on-accent.functional.error.default}`	`#FEFBFA` `{global.text.on-accent.functional.error.default}`
`dataviz.role.functionnal.icon.on-accent.success-accent`	`#F8FEFA` `{global.text.on-accent.functional.success.default}`	`#011C16` `{global.text.on-accent.functional.success.default}`
`dataviz.role.functionnal.icon.on-accent.warning-accent`	`#1F1504` `{global.text.on-accent.functional.warning.default}`	`#1F1504` `{global.text.on-accent.functional.warning.default}`
`dataviz.role.functionnal.icon.on-subtile.error-subtile`	`#C01619` `{global.text.on-subtle.functional.error.default}`	`#FAA79D` `{global.text.on-subtle.functional.error.default}`
`dataviz.role.functionnal.icon.on-subtile.success-subtile`	`#075D33` `{global.text.on-subtle.functional.success.default}`	`#30F498` `{global.text.on-subtle.functional.success.default}`
`dataviz.role.functionnal.icon.on-subtile.warning-subtile`	`#644B16` `{global.text.on-subtle.functional.warning.default}`	`#FFD654` `{global.text.on-subtle.functional.warning.default}`
`dataviz.role.functionnal.icon.base.error-base`	`#E12A23` `{global.text.on-base.functional.error.default}`	`#EE5248` `{global.text.on-base.functional.error.default}`
`dataviz.role.functionnal.icon.base.success-base`	`#075D33` `{global.text.on-base.functional.success.default}`	`#16AE64` `{global.text.on-base.functional.success.default}`
`dataviz.role.functionnal.icon.base.warning-base`	`#3E2D0C` `{global.text.on-base.functional.warning.default}`	`#644B16` `{global.text.on-base.functional.warning.default}`
`dataviz.role.functionnal.border.base.error-base`	`#C01619` `{global.border.base.functional.error.default}`	`#E12A23` `{global.border.base.functional.error.default}`
`dataviz.role.functionnal.border.base.success-base`	`#129957` `{global.border.base.functional.success.default}`	`#16AE64` `{global.border.base.functional.success.default}`
`dataviz.role.functionnal.border.base.warning-base`	`#DFA700` `{global.border.base.functional.warning.default}`	`#C38401` `{global.border.base.functional.warning.default}`
`dataviz.role.functionnal.border.on-accent.error-accent`	`#C01619` `{global.border.accent.functional.error.default}`	`#C01619` `{global.border.accent.functional.error.default}`
`dataviz.role.functionnal.border.on-accent.success-accent`	`#075D33` `{global.border.accent.functional.success.default}`	`#16AE64` `{global.border.accent.functional.success.default}`
`dataviz.role.functionnal.border.on-accent.warning-accent`	`#DFA700` `{global.border.accent.functional.warning.default}`	`#DFA700` `{global.border.accent.functional.warning.default}`
`dataviz.role.functionnal.border.on-subtile.error-subtile`	`#FCCDC6` `{global.border.subtle.functional.error.default}`	`#3E130F` `{global.border.subtle.functional.error.default}`
`dataviz.role.functionnal.border.on-subtile.success-subtile`	`#AEF6C9` `{global.border.subtle.functional.success.default}`	`#022A23` `{global.border.subtle.functional.success.default}`
`dataviz.role.functionnal.border.on-subtile.warning-subtile`	`#FFE495` `{global.border.subtle.functional.warning.default}`	`#2D2107` `{global.border.subtle.functional.warning.default}`
`dataviz.role.extended.sand.accent.extended-1`	`#A653EA` `{extended.lavender.500}`	`#8D3BCD` `{extended.lavender.600}`
`dataviz.role.extended.sand.accent.extended-2`	`#CAE200` `{extended.lime.400}`	`#CAE200` `{extended.lime.400}`
`dataviz.role.extended.sand.accent.extended-3`	`#E75F2E` `{extended.coral.500}`	`#C35129` `{extended.coral.600}`
`dataviz.role.extended.sand.accent.extended-4`	`#318C73` `{extended.forest.600}`	`#1B8E76`
`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	`#7B85FF`	`#7B85FF`
`dataviz.role.extended.sand.accent.extended-6`	`#F283CD` `{extended.orchid.400}`	`#E18FD1`
`dataviz.role.extended.sand.accent.extended-7`	`#ABA04B` `{extended.sand.500}`	`#B38F6B`
`dataviz.role.extended.sand.accent.extended-8`	`#DDAB35` `{extended.amber.500}`	`#F2AB31`
`dataviz.role.extended.sand.subtile.extended-1`	`#DABCFD` `{extended.lavender.200}`	`#3F1A5C` `{extended.lavender.800}`
`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	`#ECF8B7`	`#22260E` `{extended.lime.900}`
`dataviz.role.extended.sand.subtile.extended-3`	`#FEC8B6` `{extended.coral.200}`	`#4D2112` `{extended.coral.800}`
`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	`#D2F9EC`	`#052A20` `{extended.forest.900}`
`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	`#CFD2F2`	`#36398A`
`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	`#F6E7F4`	`#33182A` `{extended.orchid.900}`
`dataviz.role.extended.sand.subtile.extended-7`	`#F2E76F` `{extended.sand.200}`	`#353019` `{extended.sand.800}`
`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	`#FFF5C7`	`#2A2212` `{extended.amber.900}`
`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	`#FCFAFE`	`#FCFAFE`
`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	`#4D4000`	`#4D4000`
`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	`#FEFAF6`	`#FEFAF6`
`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	`#F6FEFC`	`#F6FEFC`
`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	`#F6FBFE`	`#F6FBFE`
`dataviz.role.extended.amber.on-accent.extended-6`	`#1D1419` `{extended.orchid.950}`	`#1D1419` `{extended.orchid.950}`
`dataviz.role.extended.amber.on-accent.extended-7`	`#181710` `{extended.sand.950}`	`#181710` `{extended.sand.950}`
`dataviz.role.extended.amber.on-accent.extended-8`	`#1A1611` `{extended.amber.950}`	`#1A1611` `{extended.amber.950}`
`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	`#7E47A8`	`#7E47A8`
`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	`#6C6000`	`#6C6000`
`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	`#B24125`	`#B24125`
`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	`#14715E`	`#14715E`
`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	`#2A6E94`	`#2A6E94`
`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	`#9D4881`	`#B7579D`
`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	`#78543D`	`#241C13`
`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	`#A35A1A`	`#482006`
`dataviz.role.extended.icon.on-accent.extended-1`	`#FCFAFE` `{dataviz.role.extended.amber.on-accent.extended-1}`	`#FCFAFE` `{dataviz.role.extended.amber.on-accent.extended-1}`
`dataviz.role.extended.icon.on-accent.extended-2`	`#4D4000` `{dataviz.role.extended.amber.on-accent.extended-2}`	`#4D4000` `{dataviz.role.extended.amber.on-accent.extended-2}`
`dataviz.role.extended.icon.on-accent.extended-3`	`#FEFAF6` `{dataviz.role.extended.amber.on-accent.extended-3}`	`#FEFAF6` `{dataviz.role.extended.amber.on-accent.extended-3}`
`dataviz.role.extended.icon.on-accent.extended-4`	`#F6FEFC` `{dataviz.role.extended.amber.on-accent.extended-4}`	`#F6FEFC` `{dataviz.role.extended.amber.on-accent.extended-4}`
`dataviz.role.extended.icon.on-accent.extended-5`	`#F6FBFE` `{dataviz.role.extended.amber.on-accent.extended-5}`	`#F6FBFE` `{dataviz.role.extended.amber.on-accent.extended-5}`
`dataviz.role.extended.icon.on-accent.extended-6`	`#1D1419` `{dataviz.role.extended.amber.on-accent.extended-6}`	`#1D1419` `{dataviz.role.extended.amber.on-accent.extended-6}`
`dataviz.role.extended.icon.on-accent.extended-7`	`#181710` `{dataviz.role.extended.amber.on-accent.extended-7}`	`#181710` `{dataviz.role.extended.amber.on-accent.extended-7}`
`dataviz.role.extended.icon.on-accent.extended-8`	`#1A1611` `{dataviz.role.extended.amber.on-accent.extended-8}`	`#1A1611` `{dataviz.role.extended.amber.on-accent.extended-8}`
`dataviz.role.extended.icon.on-subtile.extended-1`	`#7E47A8` `{dataviz.role.extended.amber.on-subtile.extended-1}`	`#7E47A8` `{dataviz.role.extended.amber.on-subtile.extended-1}`
`dataviz.role.extended.icon.on-subtile.extended-2`	`#6C6000` `{dataviz.role.extended.amber.on-subtile.extended-2}`	`#6C6000` `{dataviz.role.extended.amber.on-subtile.extended-2}`
`dataviz.role.extended.icon.on-subtile.extended-3`	`#B24125` `{dataviz.role.extended.amber.on-subtile.extended-3}`	`#B24125` `{dataviz.role.extended.amber.on-subtile.extended-3}`
`dataviz.role.extended.icon.on-subtile.extended-4`	`#14715E` `{dataviz.role.extended.amber.on-subtile.extended-4}`	`#14715E` `{dataviz.role.extended.amber.on-subtile.extended-4}`
`dataviz.role.extended.icon.on-subtile.extended-5`	`#2A6E94` `{dataviz.role.extended.amber.on-subtile.extended-5}`	`#2A6E94` `{dataviz.role.extended.amber.on-subtile.extended-5}`
`dataviz.role.extended.icon.on-subtile.extended-6`	`#9D4881` `{dataviz.role.extended.amber.on-subtile.extended-6}`	`#B7579D` `{dataviz.role.extended.amber.on-subtile.extended-6}`
`dataviz.role.extended.icon.on-subtile.extended-7`	`#78543D` `{dataviz.role.extended.amber.on-subtile.extended-7}`	`#241C13` `{dataviz.role.extended.amber.on-subtile.extended-7}`
`dataviz.role.extended.icon.on-subtile.extended-8`	`#A35A1A` `{dataviz.role.extended.amber.on-subtile.extended-8}`	`#482006` `{dataviz.role.extended.amber.on-subtile.extended-8}`
`dataviz.role.extended.lavender.on-accent.extended-1`	`#8D3BCD` `{extended.lavender.600}`	`#C290E7`
`dataviz.role.extended.lavender.on-accent.extended-2`	`#B8CD06` `{extended.lime.500}`	`#CAE200`
`dataviz.role.extended.lavender.on-accent.extended-3`	`#C35129` `{extended.coral.600}`	`#EC8C52`
`dataviz.role.extended.lavender.on-accent.extended-4`	`#18614E` `{extended.forest.700}`	`#21AF8F`
`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	`#6C6EF8`	`#B0B6F3`
`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	`#CF6AB9`	`#E8AFDF`
`dataviz.role.extended.lavender.on-accent.extended-7`	`#857B38` `{extended.sand.600}`	`#C8BC5A` `{extended.sand.400}`
`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	`#CC8121`	`#FAC138`
`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	`#B072DA`	`#B072DA`
`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	`#B9CC00`	`#B9CC00`
`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	`#E76F35`	`#E76F35`
`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	`#1B8E76`	`#1B8E76`
`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	`#7B85FF`	`#7B85FF`
`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	`#E18FD1`	`#E18FD1`
`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	`#B38F6B`	`#B38F6B`
`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	`#F2AB31`	`#F2AB31`
`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	`#673B89`	`#482461`
`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	`#5A4E00`	`#4D4000`
`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	`#8D3622`	`#732D1E`
`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	`#18614E`	`#064238`
`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	`#4445B0`	`#242653`
`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	`#9D4881`	`#683254`
`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	`#5C3D2D`	`#3D2C21`
`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	`#864819`	`#6E3816`
`dataviz.role.extended.azure.separator.extended-8`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.separator.extended-5`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.separator.extended-4`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.separator.extended-3`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.separator.extended-1`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.separator.extended-7`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.separator.extended-2`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.separator.extended-6`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-8`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-7`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-6`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-5`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-4`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-3`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-2`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-subtile.extended-1`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-accent.extended-8`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-accent.extended-6`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-accent.extended-5`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.azure.on-accent.extended-1`	`#2C7A9F` `{extended.azure.600}`	`#FFFFFF`
`dataviz.role.extended.azure.on-accent.extended-3`	`#2C7A9F` `{extended.azure.600}`	`#FFFFFF`
`dataviz.role.extended.azure.on-accent.extended-7`	`#2C7A9F` `{extended.azure.600}`	`#5BB8E7` `{extended.azure.400}`
`dataviz.role.extended.azure.on-accent.extended-2`	`#379BCA` `{extended.azure.500}`	`#FFFFFF`
`dataviz.role.extended.azure.on-accent.extended-4`	`#266280` `{extended.azure.700}`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-8`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-5`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-4`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-3`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-1`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-7`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-2`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.separator.extended-6`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-8`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-7`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-6`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-5`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-4`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-3`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-2`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-subtile.extended-1`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-accent.extended-8`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-accent.extended-6`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-accent.extended-5`	`#FFFFFF`	`#FFFFFF`
`dataviz.role.extended.orchid.on-accent.extended-1`	`#B74A96` `{extended.orchid.600}`	`#FFFFFF`
`dataviz.role.extended.orchid.on-accent.extended-3`	`#B74A96` `{extended.orchid.600}`	`#FFFFFF`
`dataviz.role.extended.orchid.on-accent.extended-7`	`#B74A96` `{extended.orchid.600}`	`#F283CD` `{extended.orchid.400}`
`dataviz.role.extended.orchid.on-accent.extended-2`	`#D956B1` `{extended.orchid.500}`	`#FFFFFF`
`dataviz.role.extended.orchid.on-accent.extended-4`	`#923D78` `{extended.orchid.700}`	`#FFFFFF`
`dataviz.structural.track.bg.track-primary`	`#ECE8E9` `{global.bg.base.neutral.3}`	`#282828` `{global.bg.base.neutral.3}`
`dataviz.structural.track.border.track-primary`	`#D7D3D4` `{global.border.base.neutral.3}`	`#303030` `{global.border.base.neutral.3}`
`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	`#D8D8D8`	`#303030` `{global.border.base.neutral.3}`
`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	`#B3B3B3`	`#303030` `{global.bg.base.neutral.4}`
`dataviz.structural.axis.baseline.baseline-primary`	`#323031` `{neutral.light.ash.800}`	`#D2CECF` `{neutral.dark.ash.100}`
`dataviz.structural.axis.baseline.baseline-secondary`	`#616161` `{neutral.light.ash.600}`	`#9D9B9C` `{neutral.dark.ash.300}`
`dataviz.structural.muted.bg.muted-primary`	`#DFDBDC` `{global.bg.base.neutral.4}`	`#303030` `{global.bg.base.neutral.4}`
`dataviz.structural.muted.border.muted-primary`	`#B6B4B4` `{global.border.base.neutral.4}`	`#363636` `{global.border.base.neutral.4}`
`dataviz.structural.pointer.pointer-primary`	`#4C4A4A` `{neutral.light.ash.700}`	`#767676` `{neutral.dark.ash.400}`
`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	`#6C6C6C`	`#6C6C6C`
`dataviz.structural.icon.icon-primary`	`#FFFFFF`	`#FFFFFF`
`dataviz.structural.icon.primary.color`	`#FFFFFF`	`#FFFFFF`
`dataviz.structural.icon.marker.color`	`#FFFFFF`	`#FFFFFF`
`dataviz.structural.text.label.color`	`#FFFFFF`	`#FFFFFF`
`dataviz.structural.text.graduations.color`	`#FFFFFF`	`#FFFFFF`
`dataviz.structural.text.data.color`	`#FFFFFF`	`#FFFFFF`

Examples

Components following this foundation, rendered by their web templates, once per mode. States are forced with data-state, so what you see is exactly what the CSS defines, without a keyboard.

light

dark

Button: Button, accent neutral
Button: Button, accent brand
Button: Button, accent error
Button: Button, subtle neutral
Button: Button, subtle brand
Button: Button, subtle error
Button: Button, ghost neutral
Button: Button, accent brand, disabled

Token	light	dark
`global.icon.on-base.neutral.primary`	`#0E0D0D` `{global.text.on-base.neutral.primary}`	`#D2CECF` `{global.text.on-base.neutral.primary}`
`global.icon.on-base.neutral.secondary`	`#323031` `{global.text.on-base.neutral.secondary}`	`#B9B7B7` `{global.text.on-base.neutral.secondary}`
`global.icon.on-base.neutral.tertiary`	`#616161` `{global.text.on-base.neutral.tertiary}`	`#9D9B9C` `{global.text.on-base.neutral.tertiary}`
`global.icon.on-base.brand.default`	`#175DD6` `{global.text.on-base.brand.default}`	`#9EE7FA` `{global.text.on-base.brand.default}`
`global.icon.on-base.functional.success.default`	`#075D33` `{global.text.on-base.functional.success.default}`	`#16AE64` `{global.text.on-base.functional.success.default}`
`global.icon.on-base.functional.warning.default`	`#3E2D0C` `{functional.warning.800}`	`#644B16` `{functional.warning.700}`
`global.icon.on-base.functional.severe.default`	`#764016` `{global.text.on-base.functional.severe.default}`	`#CC6B0B` `{global.text.on-base.functional.severe.default}`
`global.icon.on-base.functional.error.default`	`#E12A23` `{global.text.on-base.functional.error.default}`	`#EE5248` `{global.text.on-base.functional.error.default}`
`global.icon.on-base.functional.info.default`	`#2B68E0` `{global.text.on-base.functional.info.default}`	`#94B6F4` `{global.text.on-base.functional.info.default}`
`global.icon.on-base.extended.lavender.default`	`#7534A9` `{global.text.on-base.extended.lavender.default}`	`#B87BF5` `{global.text.on-base.extended.lavender.default}`
`global.icon.on-base.extended.lime.default`	`#2E340B` `{global.text.on-base.extended.lime.default}`	`#A0B316` `{global.text.on-base.extended.lime.default}`
`global.icon.on-base.extended.coral.default`	`#9C4324` `{global.text.on-base.extended.coral.default}`	`#FD8C67` `{global.text.on-base.extended.coral.default}`
`global.icon.on-base.extended.forest.default`	`#18614E` `{global.text.on-base.extended.forest.default}`	`#68BBA1` `{global.text.on-base.extended.forest.default}`
`global.icon.on-base.extended.azure.default`	`#153443` `{global.text.on-base.extended.azure.default}`	`#5BB8E7` `{global.text.on-base.extended.azure.default}`
`global.icon.on-base.extended.orchid.default`	`#923D78` `{global.text.on-base.extended.orchid.default}`	`#F283CD` `{global.text.on-base.extended.orchid.default}`
`global.icon.on-base.extended.sand.default`	`#353019` `{global.text.on-base.extended.sand.default}`	`#ABA04B` `{global.text.on-base.extended.sand.default}`
`global.icon.on-base.extended.amber.default`	`#3B2D12` `{global.text.on-base.extended.amber.default}`	`#DDAB35` `{global.text.on-base.extended.amber.default}`
`global.icon.on-accent.neutral.primary`	`#FDFDFD` `{global.text.on-accent.neutral.primary}`	`#191919` `{global.text.on-accent.neutral.primary}`
`global.icon.on-accent.neutral.secondary`	`#ECE8E9` `{global.text.on-accent.neutral.secondary}`	`#282828` `{global.text.on-accent.neutral.secondary}`
`global.icon.on-accent.neutral.tertiary`	`#D7D3D4` `{global.text.on-accent.neutral.tertiary}`	`#303030` `{global.text.on-accent.neutral.tertiary}`
`global.icon.on-accent.brand.default`	`#FBFCFD` `{global.text.on-accent.brand.default}`	`#09191D` `{global.text.on-accent.brand.default}`
`global.icon.on-accent.functional.success.default`	`#F8FEFA` `{global.text.on-accent.functional.success.default}`	`#011C16` `{global.text.on-accent.functional.success.default}`
`global.icon.on-accent.functional.warning.default`	`#1F1504` `{functional.warning.950}`	`#1F1504` `{functional.warning.950}`
`global.icon.on-accent.functional.severe.default`	`#271001` `{global.text.on-accent.functional.severe.default}`	`#271001` `{global.text.on-accent.functional.severe.default}`
`global.icon.on-accent.functional.error.default`	`#FEFBFA` `{global.text.on-accent.functional.error.default}`	`#FEFBFA` `{global.text.on-accent.functional.error.default}`
`global.icon.on-accent.functional.info.default`	`#FBFCFD` `{global.text.on-accent.functional.info.default}`	`#09162F` `{global.text.on-accent.functional.info.default}`
`global.icon.on-accent.extended.lavender.default`	`#FDFBFF` `{global.text.on-accent.extended.lavender.default}`	`#1D0E2C` `{global.text.on-accent.extended.lavender.default}`
`global.icon.on-accent.extended.lime.default`	`#171811` `{global.text.on-accent.extended.lime.default}`	`#171811` `{global.text.on-accent.extended.lime.default}`
`global.icon.on-accent.extended.coral.default`	`#1F1411` `{global.text.on-accent.extended.coral.default}`	`#1F1411` `{global.text.on-accent.extended.coral.default}`
`global.icon.on-accent.extended.forest.default`	`#FAFDFC` `{global.text.on-accent.extended.forest.default}`	`#031C15` `{global.text.on-accent.extended.forest.default}`
`global.icon.on-accent.extended.azure.default`	`#FAFCFE` `{global.text.on-accent.extended.azure.default}`	`#12181B` `{global.text.on-accent.extended.azure.default}`
`global.icon.on-accent.extended.orchid.default`	`#FEFBFD` `{global.text.on-accent.extended.orchid.default}`	`#1D1419` `{global.text.on-accent.extended.orchid.default}`
`global.icon.on-accent.extended.sand.default`	`#FEFDEC` `{global.text.on-accent.extended.sand.default}`	`#181710` `{global.text.on-accent.extended.sand.default}`
`global.icon.on-accent.extended.amber.default`	`#1A1611` `{global.text.on-accent.extended.amber.default}`	`#1A1611` `{global.text.on-accent.extended.amber.default}`
`global.icon.on-accent.extended.purple.default`	`#FCFCFD` `{global.text.on-accent.extended.purple.default}`	`#FCFCFD` `{global.text.on-accent.extended.purple.default}`
`global.icon.on-accent.extended.yellow.default`	`#18180D` `{global.text.on-accent.extended.yellow.default}`	`#18180D` `{global.text.on-accent.extended.yellow.default}`
`global.icon.on-accent.extended.green.default`	`#101A0B` `{global.text.on-accent.extended.green.default}`	`#101A0B` `{global.text.on-accent.extended.green.default}`
`global.icon.on-accent.extended.beige.default`	`#1E150C` `{global.text.on-accent.extended.beige.default}`	`#1E150C` `{global.text.on-accent.extended.beige.default}`
`global.icon.on-subtle.neutral.default`	`#323031` `{global.text.on-subtle.neutral.default}`	`#E3DDDE` `{global.text.on-subtle.neutral.default}`
`global.icon.on-subtle.brand.default`	`#1148A9` `{global.text.on-subtle.brand.default}`	`#9EE7FA` `{global.text.on-subtle.brand.default}`
`global.icon.on-subtle.functional.success.default`	`#075D33` `{global.text.on-subtle.functional.success.default}`	`#30F498` `{global.text.on-subtle.functional.success.default}`
`global.icon.on-subtle.functional.warning.default`	`#3E2D0C` `{functional.warning.800}`	`#DFA700` `{functional.warning.400}`
`global.icon.on-subtle.functional.severe.default`	`#764016` `{global.text.on-subtle.functional.severe.default}`	`#FFCAA8` `{global.text.on-subtle.functional.severe.default}`
`global.icon.on-subtle.functional.error.default`	`#C01619` `{global.text.on-subtle.functional.error.default}`	`#FAA79D` `{global.text.on-subtle.functional.error.default}`
`global.icon.on-subtle.functional.info.default`	`#1A4CAD` `{global.text.on-subtle.functional.info.default}`	`#BBCFF3` `{global.text.on-subtle.functional.info.default}`
`global.icon.on-subtle.extended.lavender.default`	`#3F1A5C` `{global.text.on-subtle.extended.lavender.default}`	`#CA9EFA` `{global.text.on-subtle.extended.lavender.default}`
`global.icon.on-subtle.extended.lime.default`	`#2E340B` `{global.text.on-subtle.extended.lime.default}`	`#E2FC00` `{global.text.on-subtle.extended.lime.default}`
`global.icon.on-subtle.extended.coral.default`	`#4D2112` `{global.text.on-subtle.extended.coral.default}`	`#FEA78B` `{global.text.on-subtle.extended.coral.default}`
`global.icon.on-subtle.extended.forest.default`	`#18614E` `{global.text.on-subtle.extended.forest.default}`	`#82D3B9` `{global.text.on-subtle.extended.forest.default}`
`global.icon.on-subtle.extended.azure.default`	`#153443` `{global.text.on-subtle.extended.azure.default}`	`#8ACAED` `{global.text.on-subtle.extended.azure.default}`
`global.icon.on-subtle.extended.orchid.default`	`#491E3B` `{global.text.on-subtle.extended.orchid.default}`	`#F5A1D7` `{global.text.on-subtle.extended.orchid.default}`
`global.icon.on-subtle.extended.sand.default`	`#68642C` `{global.text.on-subtle.extended.sand.default}`	`#C8BC5A` `{global.text.on-subtle.extended.sand.default}`
`global.icon.on-subtle.extended.amber.default`	`#3B2D12` `{global.text.on-subtle.extended.amber.default}`	`#DDAB35` `{global.text.on-subtle.extended.amber.default}`
`global.icon.on-subtle.extended.purple.default`	`#6B0DAC` `{global.text.on-subtle.extended.purple.default}`	`#E2CBFD` `{global.text.on-subtle.extended.purple.default}`
`global.icon.on-subtle.extended.yellow.default`	`#5B5A21` `{global.text.on-subtle.extended.yellow.default}`	`#D8DE58` `{global.text.on-subtle.extended.yellow.default}`
`global.icon.on-subtle.extended.green.default`	`#3F6717` `{global.text.on-subtle.extended.green.default}`	`#A8EF5A` `{global.text.on-subtle.extended.green.default}`
`global.icon.on-subtle.extended.beige.default`	`#67431E` `{global.text.on-subtle.extended.beige.default}`	`#E9C39E` `{global.text.on-subtle.extended.beige.default}`
`global.icon.on-sunken.brand.default`	`#0B2A69` `{global.text.on-sunken.brand.default}`	`#53D6F2` `{global.text.on-sunken.brand.default}`
`global.icon.on-sunken.functional.success.default`	`#075D33` `{global.text.on-sunken.functional.success.default}`	`#129957` `{global.text.on-sunken.functional.success.default}`
`global.icon.on-sunken.functional.warning.default`	`#3E2D0C` `{global.icon.on-base.functional.warning.default}`	`#C38401` `{global.text.on-sunken.functional.warning.default}`
`global.icon.on-sunken.functional.severe.default`	`#764016` `{global.text.on-sunken.functional.severe.default}`	`#CC6B0B` `{global.text.on-sunken.functional.severe.default}`
`global.icon.on-sunken.functional.error.default`	`#C01619` `{global.text.on-sunken.functional.error.default}`	`#EE5248` `{global.text.on-sunken.functional.error.default}`
`global.icon.on-sunken.functional.info.default` Created by the POC2 migration. Value not set. Remove -RET once assigned.	`#0C2A68` `{global.text.on-sunken.functional.info.default}`	`#94B6F4` `{global.text.on-sunken.functional.info.default}`
`global.icon.on-sunken.extended.lavender.default`	`#7534A9` `{global.text.on-sunken.extended.lavender.default}`	`#A653EA` `{global.text.on-sunken.extended.lavender.default}`
`global.icon.on-sunken.extended.lime.default`	`#2E340B` `{global.text.on-sunken.extended.lime.default}`	`#B8CD06` `{global.text.on-sunken.extended.lime.default}`
`global.icon.on-sunken.extended.coral.default`	`#4D2112` `{global.text.on-sunken.extended.coral.default}`	`#E75F2E` `{global.text.on-sunken.extended.coral.default}`
`global.icon.on-sunken.extended.forest.default`	`#0A382D` `{global.text.on-sunken.extended.forest.default}`	`#68BBA1` `{global.text.on-sunken.extended.forest.default}`
`global.icon.on-sunken.extended.azure.default`	`#153443` `{global.text.on-sunken.extended.azure.default}`	`#379BCA` `{global.text.on-sunken.extended.azure.default}`
`global.icon.on-sunken.extended.orchid.default`	`#491E3B` `{global.text.on-sunken.extended.orchid.default}`	`#D956B1` `{global.text.on-sunken.extended.orchid.default}`
`global.icon.on-sunken.extended.sand.default`	`#353019` `{global.text.on-sunken.extended.sand.default}`	`#ABA04B` `{global.text.on-sunken.extended.sand.default}`
`global.icon.on-sunken.extended.amber.default`	`#3B2D12` `{global.text.on-sunken.extended.amber.default}`	`#DDAB35` `{global.text.on-sunken.extended.amber.default}`
`global.icon.state.disabled.default`	`#8C8C8C` `{global.text.state.disabled.default}`	`#9D9B9Cb2` `{global.text.state.disabled.default}`
`global.icon.state.skeleton.default`	`#D7D3D4` `{global.text.state.skeleton.default}`	`#282828` `{global.text.state.skeleton.default}`