Modes
A mode is a context in which the same tokens take other values: light and dark today. Components never change per mode; their tokens alias semantic tokens, and only the semantic values differ.
From packages/tokens/tokens.config.json (modes) and the overlays under packages/tokens/src/modes/ (the Figma library) and packages/tokens/src/additions/modes/ (the design system). The default mode is the base tiers; every other mode overrides semantic tokens with the same paths. Use the Mode switch at the top of the sidebar to review the whole site in one mode.
Vocabulary
| Mode | Scheme | Sources | Web context | Other platforms |
|---|---|---|---|---|
| light default Light surfaces, dark text. |
light | base tiers | [data-theme="light"] and the root |
platforms/<platform>/light.tokens.json |
| dark Dark surfaces, light text. |
dark | tokens/src/modes/dark/colors-mapped.tokens.jsontokens/src/additions/modes/dark/code.tokens.jsontokens/src/additions/modes/dark/color.tokens.json |
[data-theme="dark"] |
platforms/<platform>/dark.tokens.json |
On the web
The attribute data-theme sets the mode of an element and everything inside it, so a page and a region of it can use different modes. The value auto follows the system preference (prefers-color-scheme) through each mode's scheme. Without the attribute the page is in the default mode. Each context also sets color-scheme, so native form controls and scrollbars match.
<!-- The whole page follows the system preference -->
<html data-theme="auto">
<!-- A subtree in dark mode, whatever the page mode -->
<section data-theme="dark">…</section>
</html>On other platforms
Each platform gets one resolved DTCG tree per mode; the technology picks the tree that matches the system appearance named by the mode's scheme (light or dark) and switches when it changes. See Platforms.
Components in every mode
The web examples of each component, rendered once per mode context.
Accordion
Shipping and returns
Orders ship within two business days. Returns are free within 30 days.
Payment methods
We accept cards, bank transfers and most digital wallets.
Warranty
Every product is covered for two years from the delivery date.
Advanced settings
Change the region, the retention period and the export format.
Danger zone
Delete the workspace and all its data.
What is included?
Unlimited projects, 20 members and priority support.
Can I cancel at any time?
Yes. Your plan stays active until the end of the billing period.
Do you offer discounts?
Yearly billing saves two months.
Shipping and returns
Orders ship within two business days. Returns are free within 30 days.
Payment methods
We accept cards, bank transfers and most digital wallets.
Warranty
Every product is covered for two years from the delivery date.
Advanced settings
Change the region, the retention period and the export format.
Danger zone
Delete the workspace and all its data.
What is included?
Unlimited projects, 20 members and priority support.
Can I cancel at any time?
Yes. Your plan stays active until the end of the billing period.
Do you offer discounts?
Yearly billing saves two months.
Alert
Scheduled maintenance
Changes saved
Storage almost full
Payment failed
Scheduled maintenance
Changes saved
Storage almost full
Payment failed
Avatar
Badge
Draft
New
Shipped
Expiring soon
Failed
Scheduled
12
Beta
3 overdue
Online
Draft
New
Shipped
Expiring soon
Failed
Scheduled
12
Beta
3 overdue
Online
Breadcrumb
Button
Card
Quantum Design System
Technology-agnostic component specifications, DTCG tokens and a vanilla CSS reference implementation.
Team plan
Up to 20 members, unlimited projects and priority support.
Notifications
Quantum Design System
Technology-agnostic component specifications, DTCG tokens and a vanilla CSS reference implementation.
Team plan
Up to 20 members, unlimited projects and priority support.
Notifications
Checkbox
You can change this at any time in Settings.
Check the box to continue.
Managed by your organization.
You can change this at any time in Settings.
Check the box to continue.
Managed by your organization.
Checkbox group
Divider
Dropdown
Icon
Icon button
Number field
Between 1 and 12 per booking.
Between 1 and 12 per booking.
Pagination
Progress bar
Radio group
Search field
Name, email or role.
Name, email or role.
Select
Used for reminders and reports.
Used for reminders and reports.
Skeleton
Slider
Spinner
Loading projects
Loading projects
Saving
Loading your workspace
Loading projects
Loading projects
Saving
Loading your workspace
Switch
Ask for a code from your authenticator app at sign-in.
Managed by your organization.
Ask for a code from your authenticator app at sign-in.
Managed by your organization.
Text field
We will only use it to send your receipt.
Generated when the workspace was created.
We will only use it to send your receipt.
Generated when the workspace was created.
Textarea
Up to 500 characters.
Up to 500 characters.
dark mode tokens 434 overridden · 425 component tokens follow
| Token | Value | light | dark |
|---|---|---|---|
global.bg.level.2.default |
{global.bg.base.neutral.3} |
#FDFDFD |
#282828 |
global.bg.level.2.hover |
{global.bg.base.neutral.4} |
#F7F6F6 |
#303030 |
global.bg.level.2.active |
{global.bg.base.neutral.5} |
#ECE8E9 |
#363636 |
global.bg.level.3.default |
{global.bg.base.neutral.4} |
#F7F6F6 |
#303030 |
global.bg.level.sunken.default |
{dark-switch.base.950} |
#F7F6F6 |
#141414 |
global.bg.level.sunken.hover |
{dark-switch.base.900} |
#ECE8E9 |
#191919 |
global.bg.base.neutral.1 |
{dark-switch.base.900} |
#FDFDFD |
#191919 |
global.bg.base.neutral.2 |
{dark-switch.base.800} |
#F7F6F6 |
#212121 |
global.bg.base.neutral.3 |
{dark-switch.base.700} |
#ECE8E9 |
#282828 |
global.bg.base.neutral.4 |
{dark-switch.base.600} |
#DFDBDC |
#303030 |
global.bg.base.neutral.5 |
{dark-switch.base.500} |
#D7D3D4 |
#363636 |
global.bg.accent.neutral.default |
{dark-switch.base.25} |
#201E1F |
#E8E3E4 |
global.bg.accent.neutral.hover |
{dark-switch.base.100} |
#323031 |
#D2CECF |
global.bg.accent.neutral.active |
{dark-switch.base.200} |
#4C4A4A |
#B9B7B7 |
global.bg.accent.brand.default |
{brand.dark.200} |
#175DD6 |
#9EE7FA |
global.bg.accent.brand.hover |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
global.bg.accent.brand.active |
{brand.dark.400} |
#0B2A69 |
#41B9D3 |
global.bg.accent.functional.success.default |
{functional.success.300} |
#0B7742 |
#11C772 |
global.bg.accent.functional.success.hover |
{functional.success.400} |
#075D33 |
#16AE64 |
global.bg.accent.functional.success.active |
{functional.success.500} |
#023A1E |
#129957 |
global.bg.accent.functional.info.default |
{functional.info.300} |
#2B68E0 |
#94B6F4 |
global.bg.accent.functional.info.hover |
{functional.info.400} |
#1A4CAD |
#709DF1 |
global.bg.accent.functional.info.active |
{functional.info.500} |
#0C2A68 |
#5085EA |
global.bg.accent.extended.lavender.default |
{extended.lavender.400} |
#7534A9 |
#B87BF5 |
global.bg.accent.extended.lavender.hover |
{extended.lavender.300} |
#8D3BCD |
#CA9EFA |
global.bg.accent.extended.lavender.active |
{extended.lavender.500} |
#3F1A5C |
#A653EA |
global.bg.accent.extended.lime.default |
{extended.lime.400} |
#D7F100 |
#CAE200 |
global.bg.accent.extended.lime.hover |
{extended.lime.300} |
#E2FC00 |
#D7F100 |
global.bg.accent.extended.lime.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.lime.500} |
#CAE200 |
#B8CD06 |
global.bg.accent.extended.forest.default |
{extended.forest.400} |
#0A382D |
#68BBA1 |
global.bg.accent.extended.forest.hover |
{extended.forest.300} |
#18614E |
#82D3B9 |
global.bg.accent.extended.forest.active |
{extended.forest.500} |
#052A20 |
#4FA189 |
global.bg.accent.extended.azure.default |
{extended.azure.400} |
#266280 |
#5BB8E7 |
global.bg.accent.extended.azure.hover |
{extended.azure.300} |
#2C7A9F |
#8ACAED |
global.bg.accent.extended.azure.active |
{extended.azure.500} |
#153443 |
#379BCA |
global.bg.accent.extended.orchid.default |
{extended.orchid.400} |
#923D78 |
#F283CD |
global.bg.accent.extended.orchid.hover |
{extended.orchid.300} |
#B74A96 |
#F5A1D7 |
global.bg.accent.extended.orchid.active |
{extended.orchid.500} |
#923D78 |
#D956B1 |
global.bg.accent.extended.sand.default |
{extended.sand.300} |
#353019 |
#DFD465 |
global.bg.accent.extended.sand.hover |
{extended.sand.200} |
#68642C |
#F2E76F |
global.bg.accent.extended.sand.active |
{extended.sand.400} |
#272316 |
#C8BC5A |
global.bg.subtle.neutral.defaultdark-switch.base.400 at opacity.10: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.4627451002597809,0.4627451002597809,0.4627451002597809],"alpha":0.10000000149011612,"hex":"#767676"} |
#B6B4B41a |
#7676761a |
global.bg.subtle.neutral.hoverdark-switch.base.400 at opacity.30: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.4627451002597809,0.4627451002597809,0.4627451002597809],"alpha":0.30000001192092896,"hex":"#767676"} |
#B6B4B426 |
#7676764d |
global.bg.subtle.neutral.activedark-switch.base.400 at opacity.50: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.4627451002597809,0.4627451002597809,0.4627451002597809],"alpha":0.5,"hex":"#767676"} |
#B6B4B433 |
#76767680 |
global.bg.subtle.brand.default |
{brand.dark.950} |
#EEF1F7 |
#09191D |
global.bg.subtle.brand.hover |
{brand.dark.900} |
#DDE6F5 |
#0D272E |
global.bg.subtle.brand.active |
{brand.dark.800} |
#BFD1F1 |
#10363E |
global.bg.subtle.functional.success.default |
{functional.success.950} |
#DBFAE6 |
#011C16 |
global.bg.subtle.functional.success.hover |
{functional.success.900} |
#AEF6C9 |
#022A23 |
global.bg.subtle.functional.success.active |
{functional.success.800} |
#30F498 |
#023A1E |
global.bg.subtle.functional.warning.default |
{functional.warning.950} |
#FFF1C7 |
#1F1504 |
global.bg.subtle.functional.warning.hover |
{functional.warning.900} |
#FFE495 |
#2D2107 |
global.bg.subtle.functional.warning.active |
{functional.warning.800} |
#FFD654 |
#3E2D0C |
global.bg.subtle.functional.severe.default |
{functional.severe.950} |
#FFEDE2 |
#271001 |
global.bg.subtle.functional.severe.hover |
{functional.severe.900} |
#FFDFCB |
#381A02 |
global.bg.subtle.functional.severe.active |
{functional.severe.800} |
#FFCAA8 |
#4A2506 |
global.bg.subtle.functional.error.default |
{functional.error.950} |
#FEECEA |
#2B0B08 |
global.bg.subtle.functional.error.hover |
{functional.error.900} |
#FCCDC6 |
#3E130F |
global.bg.subtle.functional.error.active |
{functional.error.800} |
#FAA79D |
#531A16 |
global.bg.subtle.functional.info.default |
{functional.info.950} |
#EDF1F9 |
#09162F |
global.bg.subtle.functional.info.hover |
{functional.info.900} |
#DEE7F6 |
#0B204B |
global.bg.subtle.functional.info.active |
{functional.info.800} |
#BBCFF3 |
#0C2A68 |
global.bg.subtle.extended.lavender.default |
{extended.lavender.900} |
#F4EBFE |
#2D1543 |
global.bg.subtle.extended.lavender.hover |
{extended.lavender.800} |
#E6D2FE |
#3F1A5C |
global.bg.subtle.extended.lavender.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.lavender.950} |
#DABCFD |
#1D0E2C |
global.bg.subtle.extended.lime.default |
{extended.lime.900} |
#F4FECD |
#22260E |
global.bg.subtle.extended.lime.hover |
{extended.lime.800} |
#EAFE8C |
#2E340B |
global.bg.subtle.extended.lime.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.lime.700} |
#E2FC00 |
#657216 |
global.bg.subtle.extended.coral.default |
{extended.coral.900} |
#FFEDE7 |
#361A12 |
global.bg.subtle.extended.coral.hover |
{extended.coral.800} |
#FFDFD5 |
#4D2112 |
global.bg.subtle.extended.coral.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.coral.950} |
#FEC8B6 |
#1F1411 |
global.bg.subtle.extended.forest.default |
{extended.forest.900} |
#E6F6F0 |
#052A20 |
global.bg.subtle.extended.forest.hover |
{extended.forest.800} |
#CBF1E3 |
#0A382D |
global.bg.subtle.extended.forest.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.forest.950} |
#9EE8CF |
#031C15 |
global.bg.subtle.extended.azure.default |
{extended.azure.900} |
#E7F4FB |
#14262E |
global.bg.subtle.extended.azure.hover |
{extended.azure.800} |
#D4EBF8 |
#153443 |
global.bg.subtle.extended.azure.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.azure.950} |
#B5DDF3 |
#12181B |
global.bg.subtle.extended.orchid.default |
{extended.orchid.900} |
#FDECF6 |
#33182A |
global.bg.subtle.extended.orchid.hover |
{extended.orchid.800} |
#FBDDEF |
#491E3B |
global.bg.subtle.extended.orchid.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.orchid.950} |
#F8C4E4 |
#1D1419 |
global.bg.subtle.extended.sand.default |
{extended.sand.900} |
#FDFBD2 |
#272316 |
global.bg.subtle.extended.sand.hover |
{extended.sand.800} |
#FBF6AB |
#353019 |
global.bg.subtle.extended.sand.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.sand.950} |
#F2E76F |
#181710 |
global.bg.subtle.extended.amber.default |
{extended.amber.900} |
#FFF5E1 |
#2A2212 |
global.bg.subtle.extended.amber.hover |
{extended.amber.800} |
#FFEBC4 |
#3B2D12 |
global.bg.subtle.extended.amber.activeCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.amber.950} |
#FEDC97 |
#1A1611 |
global.bg.subtle.extended.purple.default |
{branded-extended.purple.950} |
#F5F0FA |
#1C0E2E |
global.bg.subtle.extended.purple.hover |
{branded-extended.purple.900} |
#EEE4FB |
#310056 |
global.bg.subtle.extended.purple.active |
{branded-extended.purple.800} |
#E2CBFD |
#410B6A |
global.bg.subtle.extended.yellow.default |
{branded-extended.yellow.950} |
#F4FE9B |
#18180D |
global.bg.subtle.extended.yellow.hover |
{branded-extended.yellow.900} |
#EBF479 |
#25240F |
global.bg.subtle.extended.yellow.active |
{branded-extended.yellow.800} |
#D8DE58 |
#323212 |
global.bg.subtle.extended.green.default |
{branded-extended.green.950} |
#EAF9DE |
#101A0B |
global.bg.subtle.extended.green.hover |
{branded-extended.green.900} |
#CEFCA4 |
#152A03 |
global.bg.subtle.extended.green.active |
{branded-extended.green.800} |
#A8EF5A |
#20370B |
global.bg.subtle.extended.beige.default |
{branded-extended.beige.950} |
#F6ECE2 |
#1E150C |
global.bg.subtle.extended.beige.hover |
{branded-extended.beige.900} |
#EFDFCF |
#301F10 |
global.bg.subtle.extended.beige.active |
{branded-extended.beige.800} |
#E9C39E |
#412A13 |
global.bg.sunken.brand.default |
{brand.dark.950} |
#DDE6F5 |
#09191D |
global.bg.sunken.functional.success.default |
{functional.success.950} |
#AEF6C9 |
#011C16 |
global.bg.sunken.functional.warning.default |
{functional.warning.950} |
#FFE495 |
#1F1504 |
global.bg.sunken.functional.severe.default |
{functional.severe.950} |
#FFEDE2 |
#271001 |
global.bg.sunken.functional.error.default |
{functional.error.950} |
#FCCDC6 |
#2B0B08 |
global.bg.sunken.functional.info.default |
{functional.info.950} |
#DEE7F6 |
#09162F |
global.bg.sunken.extended.lavender.default |
{extended.lavender.950} |
#E6D2FE |
#1D0E2C |
global.bg.sunken.extended.lime.default |
{extended.lime.950} |
#EAFE8C |
#171811 |
global.bg.sunken.extended.coral.default |
{extended.coral.950} |
#FFDFD5 |
#1F1411 |
global.bg.sunken.extended.forest.default |
{extended.forest.950} |
#CBF1E3 |
#031C15 |
global.bg.sunken.extended.azure.default |
{extended.azure.950} |
#D4EBF8 |
#12181B |
global.bg.sunken.extended.orchid.default |
{extended.orchid.950} |
#FBDDEF |
#1D1419 |
global.bg.sunken.extended.sand.default |
{extended.sand.950} |
#FBF6AB |
#181710 |
global.bg.sunken.extended.amber.default |
{extended.amber.950} |
#FFEBC4 |
#1A1611 |
global.bg.sunken.extended.purple.default |
{branded-extended.purple.950} |
#EEE4FB |
#1C0E2E |
global.bg.sunken.extended.purple.hover |
{branded-extended.purple.900} |
#E2CBFD |
#310056 |
global.bg.sunken.extended.purple.active |
{branded-extended.purple.800} |
#D5AEFF |
#410B6A |
global.bg.sunken.extended.yellow.default |
{branded-extended.yellow.950} |
#EBF479 |
#18180D |
global.bg.sunken.extended.yellow.hover |
{branded-extended.yellow.900} |
#D8DE58 |
#25240F |
global.bg.sunken.extended.yellow.active |
{branded-extended.yellow.800} |
#C1C546 |
#323212 |
global.bg.sunken.extended.green.default |
{branded-extended.green.950} |
#CEFCA4 |
#101A0B |
global.bg.sunken.extended.green.hover |
{branded-extended.green.900} |
#A8EF5A |
#152A03 |
global.bg.sunken.extended.green.active |
{branded-extended.green.800} |
#91D643 |
#20370B |
global.bg.sunken.extended.beige.default |
{branded-extended.beige.950} |
#EFDFCF |
#1E150C |
global.bg.sunken.extended.beige.hover |
{branded-extended.beige.900} |
#E9C39E |
#301F10 |
global.bg.sunken.extended.beige.active |
{branded-extended.beige.800} |
#E2A261 |
#412A13 |
global.bg.transparency.fade.nonedark-switch.base.900 at opacity.0: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0,"hex":"#191919"} |
#ECE8E900 |
#19191900 |
global.bg.transparency.fade.thindark-switch.base.900 at opacity.10: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.10000000149011612,"hex":"#191919"} |
#ECE8E91a |
#1919191a |
global.bg.transparency.fade.lightdark-switch.base.900 at opacity.20: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.20000000298023224,"hex":"#191919"} |
#ECE8E933 |
#19191933 |
global.bg.transparency.fade.defaultdark-switch.base.900 at opacity.30: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.30000001192092896,"hex":"#191919"} |
#ECE8E94d |
#1919194d |
global.bg.transparency.fade.strongdark-switch.base.900 at opacity.50: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.5,"hex":"#191919"} |
#ECE8E980 |
#19191980 |
global.bg.transparency.fade.blackoutdark-switch.base.900 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.699999988079071,"hex":"#191919"} |
#ECE8E9b2 |
#191919b2 |
global.bg.transparency.overlay.nonedark-switch.base.900 at opacity.0: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0,"hex":"#191919"} |
#32303100 |
#19191900 |
global.bg.transparency.overlay.thindark-switch.base.900 at opacity.30: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.30000001192092896,"hex":"#191919"} |
#3230311a |
#1919194d |
global.bg.transparency.overlay.lightdark-switch.base.900 at opacity.50: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.5,"hex":"#191919"} |
#32303133 |
#19191980 |
global.bg.transparency.overlay.defaultdark-switch.base.900 at opacity.60: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.6000000238418579,"hex":"#191919"} |
#3230314d |
#19191999 |
global.bg.transparency.overlay.strongdark-switch.base.900 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.699999988079071,"hex":"#191919"} |
#32303180 |
#191919b2 |
global.bg.transparency.overlay.blackoutdark-switch.base.900 at opacity.80: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.09803921729326248,0.09803921729326248,0.09803921729326248],"alpha":0.800000011920929,"hex":"#191919"} |
#323031b2 |
#191919cc |
global.bg.state.skeleton.defaultdark-switch.base.600 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.1882352977991104,0.1882352977991104,0.1882352977991104],"alpha":0.699999988079071,"hex":"#303030"} |
#DFDBDC66 |
#303030b2 |
global.bg.state.disabled.defaultdark-switch.base.400 at opacity.30: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.4627451002597809,0.4627451002597809,0.4627451002597809],"alpha":0.30000001192092896,"hex":"#767676"} |
#B6B4B41a |
#7676764d |
global.text.on-base.neutral.primary |
{dark-switch.base.100} |
#0E0D0D |
#D2CECF |
global.text.on-base.neutral.secondary |
{dark-switch.base.200} |
#323031 |
#B9B7B7 |
global.text.on-base.neutral.tertiary |
{dark-switch.base.300} |
#616161 |
#9D9B9C |
global.text.on-base.brand.defaultOnly use with natural bg |
{brand.dark.200} |
#175DD6 |
#9EE7FA |
global.text.on-base.functional.success.default |
{functional.success.400} |
#075D33 |
#16AE64 |
global.text.on-base.functional.warning.default |
{functional.warning.700} |
#3E2D0C |
#644B16 |
global.text.on-base.functional.severe.default |
{functional.severe.500} |
#764016 |
#CC6B0B |
global.text.on-base.functional.error.defaultOnly use with natural bg |
{functional.error.400} |
#E12A23 |
#EE5248 |
global.text.on-base.functional.info.default |
{functional.info.300} |
#2B68E0 |
#94B6F4 |
global.text.on-base.extended.lavender.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.lavender.400} |
#7534A9 |
#B87BF5 |
global.text.on-base.extended.lime.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.lime.600} |
#2E340B |
#A0B316 |
global.text.on-base.extended.coral.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.coral.400} |
#9C4324 |
#FD8C67 |
global.text.on-base.extended.forest.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.forest.400} |
#18614E |
#68BBA1 |
global.text.on-base.extended.azure.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.azure.400} |
#153443 |
#5BB8E7 |
global.text.on-base.extended.orchid.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.orchid.400} |
#923D78 |
#F283CD |
global.text.on-base.extended.sand.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.sand.500} |
#353019 |
#ABA04B |
global.text.on-base.extended.amber.defaultCreated by the POC2 migration. Value not set. Remove -RET once assigned. |
{extended.amber.500} |
#3B2D12 |
#DDAB35 |
global.text.on-accent.neutral.primary |
{dark-switch.base.900} |
#FDFDFD |
#191919 |
global.text.on-accent.neutral.secondary |
{dark-switch.base.700} |
#ECE8E9 |
#282828 |
global.text.on-accent.neutral.tertiary |
{dark-switch.base.600} |
#D7D3D4 |
#303030 |
global.text.on-accent.brand.default |
{brand.dark.950} |
#FBFCFD |
#09191D |
global.text.on-accent.functional.success.default |
{functional.success.950} |
#F8FEFA |
#011C16 |
global.text.on-accent.functional.info.default |
{functional.info.950} |
#FBFCFD |
#09162F |
global.text.on-accent.extended.lavender.default |
{extended.lavender.950} |
#FDFBFF |
#1D0E2C |
global.text.on-accent.extended.forest.default |
{extended.forest.950} |
#FAFDFC |
#031C15 |
global.text.on-accent.extended.azure.default |
{extended.azure.950} |
#FAFCFE |
#12181B |
global.text.on-accent.extended.orchid.default |
{extended.orchid.950} |
#FEFBFD |
#1D1419 |
global.text.on-accent.extended.sand.default |
{extended.sand.950} |
#FEFDEC |
#181710 |
global.text.on-subtle.neutral.default |
{dark-switch.base.50} |
#323031 |
#E3DDDE |
global.text.on-subtle.brand.default |
{brand.dark.200} |
#1148A9 |
#9EE7FA |
global.text.on-subtle.functional.success.default |
{functional.success.200} |
#075D33 |
#30F498 |
global.text.on-subtle.functional.warning.default |
{functional.warning.200} |
#644B16 |
#FFD654 |
global.text.on-subtle.functional.severe.default |
{functional.severe.200} |
#764016 |
#FFCAA8 |
global.text.on-subtle.functional.error.default |
{functional.error.200} |
#C01619 |
#FAA79D |
global.text.on-subtle.functional.info.default |
{functional.info.200} |
#1A4CAD |
#BBCFF3 |
global.text.on-subtle.extended.lavender.default |
{extended.lavender.300} |
#3F1A5C |
#CA9EFA |
global.text.on-subtle.extended.lime.default |
{extended.lime.200} |
#2E340B |
#E2FC00 |
global.text.on-subtle.extended.coral.default |
{extended.coral.300} |
#4D2112 |
#FEA78B |
global.text.on-subtle.extended.forest.default |
{extended.forest.300} |
#18614E |
#82D3B9 |
global.text.on-subtle.extended.azure.default |
{extended.azure.300} |
#153443 |
#8ACAED |
global.text.on-subtle.extended.orchid.default |
{extended.orchid.300} |
#491E3B |
#F5A1D7 |
global.text.on-subtle.extended.sand.default |
{extended.sand.400} |
#68642C |
#C8BC5A |
global.text.on-subtle.extended.amber.default |
{extended.amber.500} |
#3B2D12 |
#DDAB35 |
global.text.on-subtle.extended.purple.default |
{branded-extended.purple.200} |
#6B0DAC |
#E2CBFD |
global.text.on-subtle.extended.yellow.default |
{branded-extended.yellow.200} |
#5B5A21 |
#D8DE58 |
global.text.on-subtle.extended.green.default |
{branded-extended.green.200} |
#3F6717 |
#A8EF5A |
global.text.on-subtle.extended.beige.default |
{branded-extended.beige.200} |
#67431E |
#E9C39E |
global.text.on-sunken.brand.default |
{brand.dark.300} |
#0B2A69 |
#53D6F2 |
global.text.on-sunken.functional.success.default |
{functional.success.500} |
#075D33 |
#129957 |
global.text.on-sunken.functional.warning.default |
{functional.warning.500} |
#2D2107 |
#C38401 |
global.text.on-sunken.functional.severe.default |
{functional.severe.500} |
#764016 |
#CC6B0B |
global.text.on-sunken.functional.error.default |
{functional.error.400} |
#C01619 |
#EE5248 |
global.text.on-sunken.functional.info.default |
{functional.info.300} |
#0C2A68 |
#94B6F4 |
global.text.on-sunken.extended.lavender.default |
{extended.lavender.500} |
#7534A9 |
#A653EA |
global.text.on-sunken.extended.lime.default |
{extended.lime.500} |
#2E340B |
#B8CD06 |
global.text.on-sunken.extended.coral.default |
{extended.coral.500} |
#4D2112 |
#E75F2E |
global.text.on-sunken.extended.forest.default |
{extended.forest.400} |
#0A382D |
#68BBA1 |
global.text.on-sunken.extended.azure.default |
{extended.azure.500} |
#153443 |
#379BCA |
global.text.on-sunken.extended.orchid.default |
{extended.orchid.500} |
#491E3B |
#D956B1 |
global.text.on-sunken.extended.sand.default |
{extended.sand.500} |
#353019 |
#ABA04B |
global.text.on-sunken.extended.amber.default |
{extended.amber.500} |
#3B2D12 |
#DDAB35 |
global.text.code.keyword |
{extended.lavender.400} |
#7534A9 |
#B87BF5 |
global.text.code.variable |
{extended.orchid.400} |
#923D78 |
#F283CD |
global.text.code.function |
{extended.azure.400} |
#266280 |
#5BB8E7 |
global.text.code.class-and-typeDecision 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. |
{extended.amber.400} |
#7F6426 |
#EEB836 |
global.text.code.stringDecision code-colors-contrast (Code foundation): the Figma library extended.forest.500 is 4.27:1 on global.bg.level.3.default. |
{extended.forest.400} |
#18614E |
#68BBA1 |
global.text.code.numberDecision 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. |
{extended.coral.400} |
#9C4324 |
#FD8C67 |
global.text.code.commentDecision code-colors-contrast (Code foundation): the Figma library dark-switch.base.400 is 3.54:1 on global.bg.level.1.default and 2.91:1 on level 3. |
{dark-switch.base.300} |
#4C4A4A |
#9D9B9C |
global.text.code.insertedOn-base success (success 400) is 4.57:1 on level 3; success 300 leaves more room. |
{functional.success.300} |
#075D33 |
#11C772 |
global.text.code.deletedThe dark step of error text on tinted fills: on-base error (error 400) is 3.73:1 on level 3. |
{functional.error.200} |
#C01619 |
#FAA79D |
global.text.code.changedOn-base severe (severe 500) is 3.57:1 on level 3. |
{functional.severe.300} |
#764016 |
#FE8400 |
global.text.code.invalidCode a grammar marks invalid or deprecated. Same step as deleted. |
{functional.error.200} |
#C01619 |
#FAA79D |
global.text.code.linkThe on-base brand text step. |
{brand.dark.200} |
#175DD6 |
#9EE7FA |
global.text.state.skeleton.default |
{dark-switch.base.700} |
#D7D3D4 |
#282828 |
global.text.state.disabled.defaultdark-switch.base.300 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.6156859993934631,0.6079063415527344,0.6117955446243286],"alpha":0.699999988079071,"hex":"#9D9B9C"} |
#8C8C8C |
#9D9B9Cb2 |
global.icon.on-base.functional.warning.default |
{functional.warning.700} |
#3E2D0C |
#644B16 |
global.icon.on-subtle.functional.warning.default |
{functional.warning.400} |
#3E2D0C |
#DFA700 |
global.icon.on-sunken.functional.warning.default |
{global.text.on-sunken.functional.warning.default} |
#3E2D0C |
#C38401 |
global.border.level.edge.sunken.default |
{dark-switch.base.700} |
#D7D3D4 |
#282828 |
global.border.level.edge.level.0 |
{dark-switch.base.800} |
#DFDBDC |
#212121 |
global.border.level.edge.level.1 |
{dark-switch.base.700} |
#D7D3D4 |
#282828 |
global.border.level.edge.level.2 |
{dark-switch.base.600} |
#DFDBDC |
#303030 |
global.border.level.edge.level.3 |
{dark-switch.base.500} |
#D7D3D4 |
#363636 |
global.border.level.edge.state.hover |
{dark-switch.base.500} |
#8C8C8C |
#363636 |
global.border.level.edge.state.active |
{dark-switch.base.100} |
#201E1F |
#D2CECF |
global.border.level.on-level.0 |
{dark-switch.base.600} |
#ECE8E9 |
#303030 |
global.border.level.on-level.1 |
{dark-switch.base.500} |
#DFDBDC |
#363636 |
global.border.level.on-level.2 |
{dark-switch.base.400} |
#ECE8E9 |
#767676 |
global.border.level.on-level.3 |
{dark-switch.base.300} |
#DFDBDC |
#9D9B9C |
global.border.base.neutral.1 |
{dark-switch.base.800} |
#ECE8E9 |
#212121 |
global.border.base.neutral.2 |
{dark-switch.base.700} |
#DFDBDC |
#282828 |
global.border.base.neutral.3 |
{dark-switch.base.600} |
#D7D3D4 |
#303030 |
global.border.base.neutral.4 |
{dark-switch.base.500} |
#B6B4B4 |
#363636 |
global.border.base.neutral.5 |
{dark-switch.base.600} |
#8C8C8C |
#303030 |
global.border.base.brand.default |
{brand.dark.300} |
#497EDE |
#53D6F2 |
global.border.base.functional.success.default |
{functional.success.400} |
#129957 |
#16AE64 |
global.border.base.functional.warning.default |
{functional.warning.500} |
#DFA700 |
#C38401 |
global.border.base.functional.severe.default |
{functional.severe.500} |
#DE7B27 |
#CC6B0B |
global.border.base.functional.error.defaultHighlight of a form, of a shape that need to be seen more than just a regular border. |
{functional.error.500} |
#C01619 |
#E12A23 |
global.border.base.functional.info.default |
{functional.info.400} |
#5085EA |
#709DF1 |
global.border.base.extended.lavender.default |
{extended.lavender.400} |
#8D3BCD |
#B87BF5 |
global.border.base.extended.lime.default |
{extended.lime.400} |
#B8CD06 |
#CAE200 |
global.border.base.extended.coral.default |
{extended.coral.400} |
#C35129 |
#FD8C67 |
global.border.base.extended.forest.default |
{extended.forest.400} |
#318C73 |
#68BBA1 |
global.border.base.extended.azure.default |
{extended.azure.400} |
#2C7A9F |
#5BB8E7 |
global.border.base.extended.orchid.default |
{extended.orchid.400} |
#B74A96 |
#F283CD |
global.border.base.extended.sand.default |
{extended.sand.400} |
#857B38 |
#C8BC5A |
global.border.base.extended.amber.default |
{extended.amber.400} |
#B58D31 |
#EEB836 |
global.border.accent.neutral.default |
{dark-switch.base.200} |
#323031 |
#B9B7B7 |
global.border.accent.neutral.hover |
{dark-switch.base.200} |
#4C4A4A |
#B9B7B7 |
global.border.accent.neutral.active |
{dark-switch.base.300} |
#616161 |
#9D9B9C |
global.border.accent.brand.default |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
global.border.accent.brand.hover |
{brand.dark.400} |
#0B2A69 |
#41B9D3 |
global.border.accent.brand.active |
{brand.dark.500} |
#0B204D |
#3499AF |
global.border.accent.functional.success.default |
{functional.success.400} |
#075D33 |
#16AE64 |
global.border.accent.functional.success.hover |
{functional.success.500} |
#023A1E |
#129957 |
global.border.accent.functional.success.active |
{functional.success.600} |
#022A23 |
#0B7742 |
global.border.accent.functional.info.default |
{functional.info.400} |
#1A4CAD |
#709DF1 |
global.border.accent.functional.info.hover |
{functional.info.500} |
#0C2A68 |
#5085EA |
global.border.accent.functional.info.active |
{functional.info.600} |
#0B204B |
#2B68E0 |
global.border.accent.extended.lavender.default |
{extended.lavender.500} |
#8D3BCD |
#A653EA |
global.border.accent.extended.coral.default |
{extended.coral.500} |
#C35129 |
#E75F2E |
global.border.accent.extended.forest.default |
{extended.forest.600} |
#18614E |
#318C73 |
global.border.accent.extended.azure.default |
{extended.azure.500} |
#266280 |
#379BCA |
global.border.accent.extended.orchid.default |
{extended.orchid.500} |
#923D78 |
#D956B1 |
global.border.accent.extended.amber.default |
{extended.amber.500} |
#EEB836 |
#DDAB35 |
global.border.subtle.neutral.defaultdark-switch.base.500 at opacity.50: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.21176470816135406,0.21176470816135406,0.21176470816135406],"alpha":0.5,"hex":"#363636"} |
#DFDBDC |
#36363680 |
global.border.subtle.neutral.hover |
{dark-switch.base.500} |
#D7D3D4 |
#363636 |
global.border.subtle.neutral.active |
{dark-switch.base.400} |
#B6B4B4 |
#767676 |
global.border.subtle.brand.default |
{brand.dark.900} |
#DDE6F5 |
#0D272E |
global.border.subtle.brand.hover |
{brand.dark.800} |
#BFD1F1 |
#10363E |
global.border.subtle.brand.active |
{brand.dark.700} |
#9BB9EC |
#1F606E |
global.border.subtle.functional.success.default |
{functional.success.900} |
#AEF6C9 |
#022A23 |
global.border.subtle.functional.success.hover |
{functional.success.800} |
#30F498 |
#023A1E |
global.border.subtle.functional.success.active |
{functional.success.700} |
#11C772 |
#075D33 |
global.border.subtle.functional.warning.default |
{functional.warning.900} |
#FFE495 |
#2D2107 |
global.border.subtle.functional.warning.hover |
{functional.warning.800} |
#FFD654 |
#3E2D0C |
global.border.subtle.functional.warning.active |
{functional.warning.700} |
#FFC61C |
#644B16 |
global.border.subtle.functional.severe.default |
{functional.severe.900} |
#FFDFCB |
#381A02 |
global.border.subtle.functional.severe.hover |
{functional.severe.800} |
#FFCAA8 |
#4A2506 |
global.border.subtle.functional.severe.active |
{functional.severe.700} |
#FE8400 |
#764016 |
global.border.subtle.functional.error.default |
{functional.error.900} |
#FCCDC6 |
#3E130F |
global.border.subtle.functional.error.hover |
{functional.error.800} |
#FAA79D |
#531A16 |
global.border.subtle.functional.error.active |
{functional.error.700} |
#F88275 |
#940E11 |
global.border.subtle.functional.info.default |
{functional.info.900} |
#DEE7F6 |
#0B204B |
global.border.subtle.functional.info.hover |
{functional.info.800} |
#BBCFF3 |
#0C2A68 |
global.border.subtle.functional.info.active |
{functional.info.700} |
#94B6F4 |
#1A4CAD |
global.border.subtle.extended.lavender.default |
{extended.lavender.800} |
#DABCFD |
#3F1A5C |
global.border.subtle.extended.lime.default |
{extended.lime.800} |
#EAFE8C |
#2E340B |
global.border.subtle.extended.coral.default |
{extended.coral.800} |
#FEC8B6 |
#4D2112 |
global.border.subtle.extended.forest.default |
{extended.forest.800} |
#9EE8CF |
#0A382D |
global.border.subtle.extended.azure.default |
{extended.azure.800} |
#B5DDF3 |
#153443 |
global.border.subtle.extended.orchid.default |
{extended.orchid.800} |
#F8C4E4 |
#491E3B |
global.border.subtle.extended.sand.default |
{extended.sand.800} |
#F2E76F |
#353019 |
global.border.subtle.extended.amber.default |
{extended.amber.800} |
#FEDC97 |
#3B2D12 |
global.border.subtle.extended.purple.default |
{branded-extended.purple.900} |
#EEE4FB |
#310056 |
global.border.subtle.extended.purple.hover |
{branded-extended.purple.800} |
#E2CBFD |
#410B6A |
global.border.subtle.extended.purple.active |
{branded-extended.purple.700} |
#D5AEFF |
#6B0DAC |
global.border.subtle.extended.yellow.default |
{branded-extended.yellow.900} |
#EBF479 |
#25240F |
global.border.subtle.extended.yellow.hover |
{branded-extended.yellow.800} |
#D8DE58 |
#323212 |
global.border.subtle.extended.yellow.active |
{branded-extended.yellow.700} |
#C1C546 |
#5B5A21 |
global.border.subtle.extended.green.default |
{branded-extended.green.900} |
#CEFCA4 |
#152A03 |
global.border.subtle.extended.green.hover |
{branded-extended.green.800} |
#A8EF5A |
#20370B |
global.border.subtle.extended.green.active |
{branded-extended.green.700} |
#91D643 |
#3F6717 |
global.border.subtle.extended.beige.default |
{branded-extended.beige.900} |
#EFDFCF |
#301F10 |
global.border.subtle.extended.beige.hover |
{branded-extended.beige.800} |
#E9C39E |
#412A13 |
global.border.subtle.extended.beige.active |
{branded-extended.beige.700} |
#E2A261 |
#67431E |
global.border.state.disabled.defaultdark-switch.base.500 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.21176470816135406,0.21176470816135406,0.21176470816135406],"alpha":0.699999988079071,"hex":"#363636"} |
#B6B4B466 |
#363636b2 |
effect.shadow.1dark-switch.base.950 at opacity.30: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.0784313753247261,0.0784313753247261,0.0784313753247261],"alpha":0.30000001192092896,"hex":"#141414"} |
#201E1F03 |
#1414144d |
effect.shadow.2dark-switch.base.950 at opacity.40: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.0784313753247261,0.0784313753247261,0.0784313753247261],"alpha":0.4000000059604645,"hex":"#141414"} |
#201E1F05 |
#14141466 |
effect.shadow.3dark-switch.base.950 at opacity.50: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.0784313753247261,0.0784313753247261,0.0784313753247261],"alpha":0.5,"hex":"#141414"} |
#201E1F08 |
#14141480 |
effect.shadow.4dark-switch.base.950 at opacity.70: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.0784313753247261,0.0784313753247261,0.0784313753247261],"alpha":0.699999988079071,"hex":"#141414"} |
#201E1F0a |
#141414b2 |
effect.shadow.5dark-switch.base.950 at opacity.80: the Figma library composes them, DTCG cannot, so the resulting color is written as is |
{"colorSpace":"srgb","components":[0.0784313753247261,0.0784313753247261,0.0784313753247261],"alpha":0.800000011920929,"hex":"#141414"} |
#201E1F0d |
#141414cc |
brand-identity.marine-blue |
{brand.identity-base.true-white} |
#242A75 |
#FFFFFF |
dataviz.role.brand.bg.accent.brand-1 |
{brand.dark.200} |
#0B2A69 |
#9EE7FA |
dataviz.role.brand.bg.accent.brand-2 |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
dataviz.role.brand.bg.accent.brand-3 |
{brand.dark.400} |
#175DD6 |
#41B9D3 |
dataviz.role.brand.bg.accent.brand-4 |
{brand.dark.500} |
#497EDE |
#3499AF |
dataviz.role.brand.bg.accent.brand-5 |
{brand.dark.600} |
#749DE5 |
#297B8C |
dataviz.role.brand.bg.subtile.brand-1 |
{brand.dark.300} |
#749DE5 |
#53D6F2 |
dataviz.role.brand.bg.subtile.brand-2 |
{brand.dark.400} |
#9BB9EC |
#41B9D3 |
dataviz.role.brand.bg.subtile.brand-3 |
{brand.dark.500} |
#BFD1F1 |
#3499AF |
dataviz.role.brand.bg.subtile.brand-4 |
{brand.dark.600} |
#DDE6F5 |
#297B8C |
dataviz.role.brand.bg.subtile.brand-5 |
{brand.dark.700} |
#EEF1F7 |
#1F606E |
dataviz.role.brand.bg.area.brand-1 |
{brand.dark.950} |
#EEF1F7 |
#09191D |
dataviz.role.brand.bg.area.brand-2 |
{brand.dark.950} |
#EEF1F7 |
#09191D |
dataviz.role.brand.bg.area.brand-3 |
{brand.dark.950} |
#EEF1F7 |
#09191D |
dataviz.role.brand.bg.area.brand-4 |
{brand.dark.950} |
#EEF1F7 |
#09191D |
dataviz.role.brand.bg.area.brand-5 |
{brand.dark.950} |
#EEF1F7 |
#09191D |
dataviz.role.brand.text.base.brand-1 |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
dataviz.role.brand.text.base.brand-2 |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
dataviz.role.brand.text.base.brand-3 |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
dataviz.role.brand.text.base.brand-4 |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
dataviz.role.brand.text.base.brand-5 |
{brand.dark.300} |
#1148A9 |
#53D6F2 |
dataviz.role.brand.text.on-accent.brand-1 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.text.on-accent.brand-2 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.text.on-accent.brand-3 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.text.on-accent.brand-4 |
{brand.dark.50} |
#05133A |
#E4F7FC |
dataviz.role.brand.text.on-accent.brand-5 |
{brand.dark.50} |
#05133A |
#E4F7FC |
dataviz.role.brand.text.on-subtile.brand-1 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.text.on-subtile.brand-2 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.text.on-subtile.brand-3 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.text.on-subtile.brand-4 |
{brand.dark.50} |
#05133A |
#E4F7FC |
dataviz.role.brand.text.on-subtile.brand-5 |
{brand.dark.50} |
#05133A |
#E4F7FC |
dataviz.role.brand.icon.brand-1 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.icon.brand-2 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.icon.brand-3 |
{brand.dark.950} |
#FBFCFD |
#09191D |
dataviz.role.brand.icon.brand-4 |
{brand.dark.50} |
#05133A |
#E4F7FC |
dataviz.role.brand.icon.brand-5 |
{brand.dark.50} |
#05133A |
#E4F7FC |
dataviz.role.brand.border.base.brand-1 |
{brand.dark.200} |
#0B2A69 |
#9EE7FA |
dataviz.role.brand.border.base.brand-2 |
{brand.dark.400} |
#175DD6 |
#41B9D3 |
dataviz.role.brand.border.base.brand-3 |
{brand.dark.700} |
#749DE5 |
#1F606E |
dataviz.role.brand.border.base.brand-4 |
{brand.dark.800} |
#BFD1F1 |
#10363E |
dataviz.role.brand.border.base.brand-5 |
{brand.dark.900} |
#BFD1F1 |
#0D272E |
dataviz.role.brand.border.on-accent.brand-1 |
{brand.dark.200} |
#0B2A69 |
#9EE7FA |
dataviz.role.brand.border.on-accent.brand-2 |
{brand.dark.300} |
#175DD6 |
#53D6F2 |
dataviz.role.brand.border.on-accent.brand-3 |
{brand.dark.400} |
#497EDE |
#41B9D3 |
dataviz.role.brand.border.on-accent.brand-4 |
{brand.dark.500} |
#749DE5 |
#3499AF |
dataviz.role.brand.border.on-accent.brand-5 |
{brand.dark.600} |
#9BB9EC |
#297B8C |
dataviz.role.brand.border.separator.brand-1 |
{brand.dark.200} |
#DDE6F5 |
#9EE7FA |
dataviz.role.brand.border.separator.brand-2 |
{brand.dark.300} |
#175DD6 |
#53D6F2 |
dataviz.role.brand.border.separator.brand-3 |
{brand.dark.400} |
#497EDE |
#41B9D3 |
dataviz.role.brand.border.separator.brand-4 |
{brand.dark.500} |
#749DE5 |
#3499AF |
dataviz.role.brand.border.separator.brand-5 |
{brand.dark.600} |
#9BB9EC |
#297B8C |
dataviz.role.functionnal.bg.accent.error-accentThe Figma library aliases Colors / Mapped: bg/functionnal/error/error-primary, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.8274509906768799,0.2235294133424759,0.16470588743686676],"alpha":1,"hex":"#D3392A"} |
#C01619 |
#D3392A |
dataviz.role.functionnal.bg.subtile.error-subtileThe Figma library aliases Colors / Mapped: bg/functionnal/error/error-secondary, which it does not contain; its literal value is kept |
{functional.error.950} |
#FDF3F2 |
#2B0B08 |
dataviz.role.functionnal.bg.subtile.success-subtileThe Figma library aliases Colors / Mapped: bg/functionnal/success/success-secondary, which it does not contain; its literal value is kept |
{functional.success.950} |
#EDFDF3 |
#011C16 |
dataviz.role.functionnal.bg.subtile.warning-subtile |
{functional.warning.950} |
#FFF1C7 |
#1F1504 |
dataviz.role.extended.sand.accent.extended-1 |
{extended.lavender.600} |
#A653EA |
#8D3BCD |
dataviz.role.extended.sand.accent.extended-3 |
{extended.coral.600} |
#E75F2E |
#C35129 |
dataviz.role.extended.sand.accent.extended-4The Figma library aliases Colors / Alias: extended/green/600, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.10602934658527374,0.5579723715782166,0.46214309334754944],"alpha":1,"hex":"#1B8E76"} |
#318C73 |
#1B8E76 |
dataviz.role.extended.sand.accent.extended-6The Figma library aliases Colors / Alias: extended/pink/400, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.8829138278961182,0.5609331130981445,0.8213754296302795],"alpha":1,"hex":"#E18FD1"} |
#F283CD |
#E18FD1 |
dataviz.role.extended.sand.accent.extended-7The Figma library aliases Colors / Alias: extended/desertstorm/500, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.7024500370025635,0.5607610940933228,0.4206547141075134],"alpha":1,"hex":"#B38F6B"} |
#ABA04B |
#B38F6B |
dataviz.role.extended.sand.accent.extended-8The Figma library aliases Colors / Alias: extended/yellow-01/500, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.9490196108818054,0.6705882549285889,0.1921568661928177],"alpha":1,"hex":"#F2AB31"} |
#DDAB35 |
#F2AB31 |
dataviz.role.extended.sand.subtile.extended-1 |
{extended.lavender.800} |
#DABCFD |
#3F1A5C |
dataviz.role.extended.sand.subtile.extended-2The Figma library aliases Colors / Alias: extended/mustard/100, which it does not contain; its literal value is kept |
{extended.lime.900} |
#ECF8B7 |
#22260E |
dataviz.role.extended.sand.subtile.extended-3 |
{extended.coral.800} |
#FEC8B6 |
#4D2112 |
dataviz.role.extended.sand.subtile.extended-4The Figma library aliases Colors / Alias: extended/green/100, which it does not contain; its literal value is kept |
{extended.forest.900} |
#D2F9EC |
#052A20 |
dataviz.role.extended.sand.subtile.extended-5The Figma library aliases Colors / Base: extended/archive/royal-blue/800, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.21270282566547394,0.22243939340114594,0.5424725413322449],"alpha":1,"hex":"#36398A"} |
#CFD2F2 |
#36398A |
dataviz.role.extended.sand.subtile.extended-6The Figma library aliases Colors / Alias: extended/pink/100, which it does not contain; its literal value is kept |
{extended.orchid.900} |
#F6E7F4 |
#33182A |
dataviz.role.extended.sand.subtile.extended-7 |
{extended.sand.800} |
#F2E76F |
#353019 |
dataviz.role.extended.sand.subtile.extended-8The Figma library aliases Colors / Alias: extended/yellow-01/100, which it does not contain; its literal value is kept |
{extended.amber.900} |
#FFF5C7 |
#2A2212 |
dataviz.role.extended.amber.on-subtile.extended-6The Figma library aliases Colors / Alias: extended/pink/600, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.7175392508506775,0.3404206931591034,0.6139146089553833],"alpha":1,"hex":"#B7579D"} |
#9D4881 |
#B7579D |
dataviz.role.extended.amber.on-subtile.extended-7The Figma library aliases Colors / Alias: extended/desertstorm/950, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.1424565613269806,0.11053762584924698,0.07439140230417252],"alpha":1,"hex":"#241C13"} |
#78543D |
#241C13 |
dataviz.role.extended.amber.on-subtile.extended-8The Figma library aliases Colors / Alias: extended/yellow-01/950, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.2823529541492462,0.125490203499794,0.0235294122248888],"alpha":1,"hex":"#482006"} |
#A35A1A |
#482006 |
dataviz.role.extended.lavender.on-accent.extended-1The Figma library aliases Colors / Alias: extended/lila/400, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.7625118494033813,0.5631575584411621,0.9074155688285828],"alpha":1,"hex":"#C290E7"} |
#8D3BCD |
#C290E7 |
dataviz.role.extended.lavender.on-accent.extended-2The Figma library aliases Colors / Alias: extended/mustard/300, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.7921568751335144,0.886274516582489,0],"alpha":1,"hex":"#CAE200"} |
#B8CD06 |
#CAE200 |
dataviz.role.extended.lavender.on-accent.extended-3The Figma library aliases Colors / Alias: extended/orange/400, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.9248560667037964,0.5472203493118286,0.32241812348365784],"alpha":1,"hex":"#EC8C52"} |
#C35129 |
#EC8C52 |
dataviz.role.extended.lavender.on-accent.extended-4The Figma library aliases Colors / Alias: extended/green/500, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.12770621478557587,0.6857120990753174,0.5626434683799744],"alpha":1,"hex":"#21AF8F"} |
#18614E |
#21AF8F |
dataviz.role.extended.lavender.on-accent.extended-5The Figma library aliases Colors / Alias: extended/royal-blue/300, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.691927969455719,0.7146194577217102,0.9519326686859131],"alpha":1,"hex":"#B0B6F3"} |
#6C6EF8 |
#B0B6F3 |
dataviz.role.extended.lavender.on-accent.extended-6The Figma library aliases Colors / Alias: extended/pink/300, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.9111660122871399,0.6873764991760254,0.875260591506958],"alpha":1,"hex":"#E8AFDF"} |
#CF6AB9 |
#E8AFDF |
dataviz.role.extended.lavender.on-accent.extended-7 |
{extended.sand.400} |
#857B38 |
#C8BC5A |
dataviz.role.extended.lavender.on-accent.extended-8The Figma library aliases Colors / Alias: extended/yellow-01/400, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.9803921580314636,0.7568627595901489,0.21960784494876862],"alpha":1,"hex":"#FAC138"} |
#CC8121 |
#FAC138 |
dataviz.role.extended.lavender.separator.extended-1When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/lila/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.28180456161499023,0.14304909110069275,0.3787904679775238],"alpha":1,"hex":"#482461"} |
#673B89 |
#482461 |
dataviz.role.extended.lavender.separator.extended-2When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/mustard/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.30099713802337646,0.249945268034935,0],"alpha":1,"hex":"#4D4000"} |
#5A4E00 |
#4D4000 |
dataviz.role.extended.lavender.separator.extended-3When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/orange/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.45087528228759766,0.1783902794122696,0.11800076812505722],"alpha":1,"hex":"#732D1E"} |
#8D3622 |
#732D1E |
dataviz.role.extended.lavender.separator.extended-4When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/green/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.02485349029302597,0.2593628466129303,0.21782970428466797],"alpha":1,"hex":"#064238"} |
#18614E |
#064238 |
dataviz.role.extended.lavender.separator.extended-5When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/royal-blue/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.1400686353445053,0.14920316636562347,0.3249320089817047],"alpha":1,"hex":"#242653"} |
#4445B0 |
#242653 |
dataviz.role.extended.lavender.separator.extended-6When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/pink/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.4064963459968567,0.19675342738628387,0.33018386363983154],"alpha":1,"hex":"#683254"} |
#9D4881 |
#683254 |
dataviz.role.extended.lavender.separator.extended-7When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/desertstorm/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.2402915060520172,0.1709028035402298,0.12950187921524048],"alpha":1,"hex":"#3D2C21"} |
#5C3D2D |
#3D2C21 |
dataviz.role.extended.lavender.separator.extended-8When a high contrast is needed (e.g scatter view). The Figma library aliases Colors / Alias: extended/yellow-01/900, which it does not contain; its literal value is kept |
{"colorSpace":"srgb","components":[0.4313725531101227,0.21960784494876862,0.08627451211214066],"alpha":1,"hex":"#6E3816"} |
#864819 |
#6E3816 |
dataviz.role.extended.azure.on-accent.extended-1 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#2C7A9F |
#FFFFFF |
dataviz.role.extended.azure.on-accent.extended-3 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#2C7A9F |
#FFFFFF |
dataviz.role.extended.azure.on-accent.extended-7 |
{extended.azure.400} |
#2C7A9F |
#5BB8E7 |
dataviz.role.extended.azure.on-accent.extended-2 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#379BCA |
#FFFFFF |
dataviz.role.extended.azure.on-accent.extended-4 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#266280 |
#FFFFFF |
dataviz.role.extended.orchid.on-accent.extended-1 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#B74A96 |
#FFFFFF |
dataviz.role.extended.orchid.on-accent.extended-3 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#B74A96 |
#FFFFFF |
dataviz.role.extended.orchid.on-accent.extended-7 |
{extended.orchid.400} |
#B74A96 |
#F283CD |
dataviz.role.extended.orchid.on-accent.extended-2 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#D956B1 |
#FFFFFF |
dataviz.role.extended.orchid.on-accent.extended-4 |
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#FFFFFF"} |
#923D78 |
#FFFFFF |
dataviz.structural.axis.axis-primaryThe Figma library aliases Colors / Mapped: border/neutral/base/tertiary, which it does not contain; its literal value is kept |
{global.border.base.neutral.3} |
#D8D8D8 |
#303030 |
dataviz.structural.axis.axis-secondaryThe Figma library aliases Colors / Mapped: border/neutral/base/quartenary, which it does not contain; its literal value is kept |
{global.bg.base.neutral.4} |
#B3B3B3 |
#303030 |
dataviz.structural.axis.baseline.baseline-primary |
{neutral.dark.ash.100} |
#323031 |
#D2CECF |
dataviz.structural.axis.baseline.baseline-secondary |
{neutral.dark.ash.300} |
#616161 |
#9D9B9C |
dataviz.structural.pointer.pointer-primary |
{neutral.dark.ash.400} |
#4C4A4A |
#767676 |
ai.bg.gradient.avatar.start |
{brand.dark.800} |
#BFD1F1 |
#10363E |
ai.bg.gradient.avatar.end |
{brand.dark.500} |
#749DE5 |
#3499AF |
ai.bg.gradient.skeleton.end |
{brand.dark.900} |
#DDE6F5 |
#0D272E |
ai.bg.gradient.subtle.end |
{brand.dark.900} |
#EEF1F7 |
#0D272E |
ai.bg.gradient.loading.end |
{ai.bg.subtle.hover} |
#EEF1F7 |
#0D272E |
ai.text.gradient.on-base.startOnly use with natural bg |
{brand.dark.400} |
#175DD6 |
#41B9D3 |
ai.text.gradient.on-base.endOnly use with natural bg |
{brand.dark.600} |
#749DE5 |
#297B8C |
ai.text.gradient.on-accent.startOnly use with natural bg |
{brand.dark.950} |
#EEF1F7 |
#09191D |
ai.text.gradient.on-accent.midOnly use with natural bg |
{brand.dark.600} |
#BFD1F1 |
#297B8C |
ai.text.gradient.on-accent.endOnly use with natural bg |
{brand.dark.600} |
#05133A |
#297B8C |
ai.icon.on-base.defaultOnly use with natural bg |
{brand.dark.400} |
#497EDE |
#41B9D3 |
ai.icon.on-subtle.defaultOnly use with natural bg |
{brand.dark.400} |
#497EDE |
#41B9D3 |
ai.icon.on-accent.defaultOnly use with natural bg |
{brand.dark.900} |
#EEF1F7 |
#0D272E |
ai.border.gradient.avatar.start |
{brand.dark.500} |
#749DE5 |
#3499AF |
ai.border.gradient.avatar.end |
{brand.dark.800} |
#BFD1F1 |
#10363E |
ai.border.gradient.default.start |
{brand.dark.950} |
#FBFCFD |
#09191D |
ai.border.gradient.default.end |
{brand.dark.700} |
#9BB9EC |
#1F606E |
ai.border.gradient.focus.start |
{brand.dark.900} |
#BFD1F1 |
#0D272E |
ai.border.gradient.focus.end |
{brand.dark.400} |
#175DD6 |
#41B9D3 |
color.focus.ringFocus indicator color shared by every interactive component. Dark mode: the brand accent fill of the mode (global.bg.accent.brand.default), as in light mode. |
{brand.dark.200} |
#175DD6 |
#9EE7FA |