Fuegokit Tokensv0.13.3

Design tokens are the smallest building blocks of the design system. They enable a single source of truth for design decisions to be shared across different disciplines, tools, and technologies.

Appfire

appfire--Colors

DemoToken nameCodeFigma usageDescriptionValue
text.brand
React: themeGet('colors.text.brand')
text/brandUse for text that reinforces our brand.#397BFF
text.inverse
React: themeGet('colors.text.inverse')
text/inverseUse for text on bold backgrounds.#090A0F
text.default
React: themeGet('colors.text.default')
text/defaultUse for primary text, such as body copy, sentence case headers, and buttons.#FFFFFF
text.subtle.default
React: themeGet('colors.text.subtle.default')
text/subtle/defaultUse for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.#CFCCD4
text.subtle.inverse
React: themeGet('colors.text.subtle.inverse')
text/subtle/inverseUse for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.#5C5B5E
text.subtlest.default
React: themeGet('colors.text.subtlest.default')
text/subtlest/defaultUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.#A19FA5
text.subtlest.inverse
React: themeGet('colors.text.subtlest.inverse')
text/subtlest/inverseUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.#A19FA5
text.danger.default
React: themeGet('colors.text.danger.default')
text/danger/defaultUse for critical text, such as input field error messaging.#F44343
text.danger.inverse
React: themeGet('colors.text.danger.inverse')
text/danger/inverseUse for critical text in inverse contexts, such as input field error messaging. Use with background.danger.inverse or on surface.inverse.#C33636
text.success.default
React: themeGet('colors.text.success.default')
text/success/defaultUse for text to communicate a favourable outcome, such as input field success messaging.#4CAF50
text.success.inverse
React: themeGet('colors.text.success.inverse')
text/success/inverseUse for text on inverse success backgrounds that communicates a favourable outcome, such as input field success messaging. Use with background.success.inverse or surface.inverse.#358238
text.disabled
React: themeGet('colors.text.disabled')
text/disabledUse for text in a disabled state.#5C5B5E
text.accent.blue.default
React: themeGet('colors.text.accent.blue.default')
text/accent/blue/defaultUse for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#397BFF
text.accent.blue.bolder
React: themeGet('colors.text.accent.blue.bolder')
text/accent/blue/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#B0CAFF
text.accent.red.default
React: themeGet('colors.text.accent.red.default')
text/accent/red/defaultUse for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#F44343
text.accent.red.bolder
React: themeGet('colors.text.accent.red.bolder')
text/accent/red/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#FEECEC
text.accent.orange.default
React: themeGet('colors.text.accent.orange.default')
text/accent/orange/defaultUse for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#FF996C
text.accent.orange.bolder
React: themeGet('colors.text.accent.orange.bolder')
text/accent/orange/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#FFD6C4
text.accent.yellow.default
React: themeGet('colors.text.accent.yellow.default')
text/accent/yellow/defaultUse for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#FFEE70
text.accent.yellow.bolder
React: themeGet('colors.text.accent.yellow.bolder')
text/accent/yellow/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#FFFBE2
text.accent.green.default
React: themeGet('colors.text.accent.green.default')
text/accent/green/defaultUse for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#4CAF50
text.accent.green.bolder
React: themeGet('colors.text.accent.green.bolder')
text/accent/green/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#B7DFB9
text.accent.purple.default
React: themeGet('colors.text.accent.purple.default')
text/accent/purple/defaultUse for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#9871E6
text.accent.purple.bolder
React: themeGet('colors.text.accent.purple.bolder')
text/accent/purple/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#DDCBFF
text.accent.teal.default
React: themeGet('colors.text.accent.teal.default')
text/accent/teal/defaultUse for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#8DFCF1
text.accent.teal.bolder
React: themeGet('colors.text.accent.teal.bolder')
text/accent/teal/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#D1FEF9
text.accent.gray.default
React: themeGet('colors.text.accent.gray.default')
text/accent/gray/defaultUse for text on non-bold gray accent backgrounds, such as colored tags.#8A888E
text.accent.gray.bolder
React: themeGet('colors.text.accent.gray.bolder')
text/accent/gray/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#CFCCD4
icon.brand
React: themeGet('colors.icon.brand')
icon/brandUse for icons that reinforce our brand.#397BFF
icon.inverse
React: themeGet('colors.icon.inverse')
icon/inverseUse for icons on bold backgrounds.#121213
icon.danger.default
React: themeGet('colors.icon.danger.default')
icon/danger/defaultUse for icons communicating critical information, such as those used in error handing.#F44343
icon.danger.inverse
React: themeGet('colors.icon.danger.inverse')
icon/danger/inverseUse for icons in inverse contexts that communicate critical information, such as input field error messaging. Use with background.danger.inverse or on surface.inverse.#C33636
icon.success.default
React: themeGet('colors.icon.success.default')
icon/success/defaultUse for icons communicating a favourable outcome, such as those used in success section messages.#4CAF50
icon.success.inverse
React: themeGet('colors.icon.success.inverse')
icon/success/inverseUse for icons in inverse contexts communicating a favourable outcome, such as those used in success section messages. Use with background.success.inverse or surface.inverse.#358238
icon.disabled
React: themeGet('colors.icon.disabled')
icon/disabledUse for icons in a disabled state.#8A888E
icon.accent.blue.default
React: themeGet('colors.icon.accent.blue.default')
icon/accent/blue/defaultUse for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#397BFF
icon.accent.blue.bolder
React: themeGet('colors.icon.accent.blue.bolder')
icon/accent/blue/bolderUse on bold blue accent backgrounds.#B0CAFF
icon.accent.red.default
React: themeGet('colors.icon.accent.red.default')
icon/accent/red/defaultUse for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#F44343
icon.accent.red.bolder
React: themeGet('colors.icon.accent.red.bolder')
icon/accent/red/bolderUse on bold red accent backgrounds.#FEECEC
icon.accent.orange.default
React: themeGet('colors.icon.accent.orange.default')
icon/accent/orange/defaultUse for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#FF996C
icon.accent.orange.bolder
React: themeGet('colors.icon.accent.orange.bolder')
icon/accent/orange/bolderUse on bold orange accent backgrounds.#FFD6C4
icon.accent.yellow.default
React: themeGet('colors.icon.accent.yellow.default')
icon/accent/yellow/defaultUse for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#FFEE70
icon.accent.yellow.bolder
React: themeGet('colors.icon.accent.yellow.bolder')
icon/accent/yellow/bolderUse on bold yellow accent backgrounds.#FFFBE2
icon.accent.green.default
React: themeGet('colors.icon.accent.green.default')
icon/accent/green/defaultUse for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#4CAF50
icon.accent.green.bolder
React: themeGet('colors.icon.accent.green.bolder')
icon/accent/green/bolderUse on bold green accent backgrounds.#B7DFB9
icon.accent.purple.default
React: themeGet('colors.icon.accent.purple.default')
icon/accent/purple/defaultUse for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#9871E6
icon.accent.purple.bolder
React: themeGet('colors.icon.accent.purple.bolder')
icon/accent/purple/bolderUse on bold purple accent backgrounds.#DDCBFF
icon.accent.teal.default
React: themeGet('colors.icon.accent.teal.default')
icon/accent/teal/defaultUse for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#7FE3D9
icon.accent.teal.bolder
React: themeGet('colors.icon.accent.teal.bolder')
icon/accent/teal/bolderUse on bold teal accent backgrounds.#D1FEF9
icon.accent.gray.default
React: themeGet('colors.icon.accent.gray.default')
icon/accent/gray/defaultUse for text on non-bold gray accent backgrounds, such as colored tags.#5C5B5E
icon.accent.gray.bolder
React: themeGet('colors.icon.accent.gray.bolder')
icon/accent/gray/bolderUse for text on gray subtle accent backgrounds.#CFCCD4
icon.default
React: themeGet('colors.icon.default')
icon/defaultUse for icon-only buttons, or icons paired with color.text.default#FFFFFF
border.brand
React: themeGet('colors.border.brand')
border/brandUse for borders or visual indicators of elements that reinforce our brand, such as section dividers or card borders.#397BFF
border.inverse
React: themeGet('colors.border.inverse')
border/inverseUse for borders on bold backgrounds.#090A0F
border.focused.default
React: themeGet('colors.border.focused.default')
border/focused/defaultUse for focus rings of elements in a focus state.#6195FF
border.focused.inverse
React: themeGet('colors.border.focused.inverse')
border/focused/inverseUse for focus rings of elements in a focus state.#173166
border.danger.default
React: themeGet('colors.border.danger.default')
border/danger/defaultUse for borders communicating critical information, such as the borders on invalid text fields.#F44343
border.danger.inverse
React: themeGet('colors.border.danger.inverse')
border/danger/inverseUse for borders in inverse background contexts that communicate critical information, such as the borders on invalid text fields. Use with background.danger.inverse or on surface.inverse.#C33636
border.success.default
React: themeGet('colors.border.success.default')
border/success/defaultUse for borders communicating a favourable outcome, such as the borders on validated text fields.#4CAF50
border.success.inverse
React: themeGet('colors.border.success.inverse')
border/success/inverseUse for borders in inverse contexts that communicate a favourable outcome, such as the borders on validated text fields. Use with background.success.inverse or surface.inverse.#358238
border.input.default
React: themeGet('colors.border.input.default')
border/input/defaultUse for borders of form UI elements, such as text fields, checkboxes, and radio buttons.#FFFFFF
border.input.hovered
React: themeGet('colors.border.input.hovered')
border/input/hoveredHovered state for border.input#397BFF
border.disabled
React: themeGet('colors.border.disabled')
border/disabledUse for borders of elements in a disabled state.#b8b6bd78
border.default
React: themeGet('colors.border.default')
border/defaultUse to visually group or separate UI elements, such as flat cards or side panel dividers.#FFFFFF
border.accent.blue
React: themeGet('colors.border.accent.blue')
border/accent/blueUse for blue borders on non-bold backgrounds when there is no meaning tied to the color.#397BFF
border.accent.red
React: themeGet('colors.border.accent.red')
border/accent/redUse for red borders on non-bold backgrounds when there is no meaning tied to the color.#F44343
border.accent.orange
React: themeGet('colors.border.accent.orange')
border/accent/orangeUse for orange borders on non-bold backgrounds when there is no meaning tied to the color.#FF996C
border.accent.yellow
React: themeGet('colors.border.accent.yellow')
border/accent/yellowUse for yellow borders on non-bold backgrounds when there is no meaning tied to the color.#FFEE70
border.accent.green
React: themeGet('colors.border.accent.green')
border/accent/greenUse for green borders on non-bold backgrounds when there is no meaning tied to the color.#4CAF50
border.accent.purple
React: themeGet('colors.border.accent.purple')
border/accent/purpleUse for purple borders on non-bold backgrounds when there is no meaning tied to the color.#A97DFF
border.accent.teal
React: themeGet('colors.border.accent.teal')
border/accent/tealUse for teal borders on non-bold backgrounds when there is no meaning tied to the color.#7FE3D9
border.accent.gray
React: themeGet('colors.border.accent.gray')
border/accent/grayUse for borders on non-bold gray accent backgrounds.#8A888E
border.subtle.default
React: themeGet('colors.border.subtle.default')
border/subtle/defaultundefined#5C5B5E
border.subtle.inverse
React: themeGet('colors.border.subtle.inverse')
border/subtle/inverseundefined#CFCCD4
background.brand.bold.default
React: themeGet('colors.background.brand.bold.default')
background/brand/bold/defaultUse for the background of elements used to reinforce our brand, but with more emphasis.#336FE6
background.brand.bold.hovered
React: themeGet('colors.background.brand.bold.hovered')
background/brand/bold/hoveredHovered state of color.background.brand.bold#2256C5
background.brand.bold.pressed
React: themeGet('colors.background.brand.bold.pressed')
background/brand/bold/pressedPressed state of color.background.brand.bold#224A99
background.brand.default
React: themeGet('colors.background.brand.default')
background/brand/defaultUse for the background of elements used to reinforce our brand.#336FE6
background.disabled
React: themeGet('colors.background.disabled')
background/disabledUse for backgrounds of elements in a disabled state.#b8b6bd1a
background.success.default
React: themeGet('colors.background.success.default')
background/success/defaultUse for backgrounds communicating a favourable outcome, such as success section messages.#0F2310
background.success.inverse
React: themeGet('colors.background.success.inverse')
background/success/inverseUse for inverse backgrounds communicating a favourable outcome, such as success section messages. Use with backgrounds for text.success.inverse or icon.success.inverse.#EDF7EE
background.danger.default
React: themeGet('colors.background.danger.default')
background/danger/defaultUse for backgrounds communicating critical information, such as in error messages.#310E0E
background.danger.inverse
React: themeGet('colors.background.danger.inverse')
background/danger/inverseUse for inverse backgrounds communicating critical information, such as in error messages. Use with backgrounds for text.danger.inverse or icon.danger.inverse.#FEECEC
background.accent.blue.subtlest
React: themeGet('colors.background.accent.blue.subtlest')
background/accent/blue/subtlestUse for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#0C1933
background.accent.blue.subtler
React: themeGet('colors.background.accent.blue.subtler')
background/accent/blue/subtlerUse for blue backgrounds when there is no meaning tied to the color, such as coloured tags.#224A99
background.accent.blue.subtle
React: themeGet('colors.background.accent.blue.subtle')
background/accent/blue/subtleUse for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.#2256C5
background.accent.blue.bolder
React: themeGet('colors.background.accent.blue.bolder')
background/accent/blue/bolderUse for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#397BFF
background.accent.red.subtlest
React: themeGet('colors.background.accent.red.subtlest')
background/accent/red/subtlestUse for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#310E0E
background.accent.red.subtler
React: themeGet('colors.background.accent.red.subtler')
background/accent/red/subtlerUse for red backgrounds when there is no meaning tied to the color, such as colored tags.#621B1B
background.accent.red.subtle
React: themeGet('colors.background.accent.red.subtle')
background/accent/red/subtleUse for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.#922828
background.accent.red.bolder
React: themeGet('colors.background.accent.red.bolder')
background/accent/red/bolderUse for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#F44343
background.accent.orange.subtlest
React: themeGet('colors.background.accent.orange.subtlest')
background/accent/orange/subtlestUse for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#2F190F
background.accent.orange.subtler
React: themeGet('colors.background.accent.orange.subtler')
background/accent/orange/subtlerUse for orange backgrounds when there is no meaning tied to the color, such as colored tags.#8E4A2C
background.accent.orange.subtle
React: themeGet('colors.background.accent.orange.subtle')
background/accent/orange/subtleUse for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.#BE633B
background.accent.orange.bolder
React: themeGet('colors.background.accent.orange.bolder')
background/accent/orange/bolderUse for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#FF996C
background.accent.yellow.subtlest
React: themeGet('colors.background.accent.yellow.subtlest')
background/accent/yellow/subtlestUse for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#484117
background.accent.yellow.subtler
React: themeGet('colors.background.accent.yellow.subtler')
background/accent/yellow/subtlerUse for yellow backgrounds when there is no meaning tied to the color, such as colored tags.#C0AE3E
background.accent.yellow.subtle
React: themeGet('colors.background.accent.yellow.subtle')
background/accent/yellow/subtleUse for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.#f0da4e
background.accent.yellow.bolder
React: themeGet('colors.background.accent.yellow.bolder')
background/accent/yellow/bolderUse for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#FFF6B6
background.accent.green.subtlest
React: themeGet('colors.background.accent.green.subtlest')
background/accent/green/subtlestUse for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#0F2310
background.accent.green.subtler
React: themeGet('colors.background.accent.green.subtler')
background/accent/green/subtlerUse for green backgrounds when there is no meaning tied to the color, such as colored tags.#2E6930
background.accent.green.subtle
React: themeGet('colors.background.accent.green.subtle')
background/accent/green/subtleUse for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.#358238
background.accent.green.bolder
React: themeGet('colors.background.accent.green.bolder')
background/accent/green/bolderUse for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#4CAF50
background.accent.teal.subtlest
React: themeGet('colors.background.accent.teal.subtlest')
background/accent/teal/subtlestUse for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#1C3330
background.accent.teal.subtler
React: themeGet('colors.background.accent.teal.subtler')
background/accent/teal/subtlerUse for teal backgrounds when there is no meaning tied to the color, such as colored tags.#559791
background.accent.teal.subtle
React: themeGet('colors.background.accent.teal.subtle')
background/accent/teal/subtleUse for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.#71CAC1
background.accent.teal.bolder
React: themeGet('colors.background.accent.teal.bolder')
background/accent/teal/bolderUse for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#8DFCF1
background.accent.purple.subtlest
React: themeGet('colors.background.accent.purple.subtlest')
background/accent/purple/subtlestUse for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#221933
background.accent.purple.subtler
React: themeGet('colors.background.accent.purple.subtler')
background/accent/purple/subtlerUse for purple backgrounds when there is no meaning tied to the color, such as colored tags.#654B99
background.accent.purple.subtle
React: themeGet('colors.background.accent.purple.subtle')
background/accent/purple/subtleUse for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.#8764CC
background.accent.purple.bolder
React: themeGet('colors.background.accent.purple.bolder')
background/accent/purple/bolderUse for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#A97DFF
background.accent.gray.subtlest
React: themeGet('colors.background.accent.gray.subtlest')
background/accent/gray/subtlestUse for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#1C1B1C
background.accent.gray.subtler
React: themeGet('colors.background.accent.gray.subtler')
background/accent/gray/subtlerUse for gray backgrounds when there is no meaning tied to the color, such as colored tags.#2E2D2F
background.accent.gray.subtle
React: themeGet('colors.background.accent.gray.subtle')
background/accent/gray/subtleUse for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.#8A888E
background.accent.gray.bolder
React: themeGet('colors.background.accent.gray.bolder')
background/accent/gray/bolderUse for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#B8B6BD
background.accent.gradient.orangeYellow
React: themeGet('colors.background.accent.gradient.orangeYellow')
background/accent/gradient/orangeYellowUse for accent gradients from orange to yellowlinear-gradient(90deg, #FF996C 0%, #FFF6B6 100%)
background.accent.gradient.yellowPurple
React: themeGet('colors.background.accent.gradient.yellowPurple')
background/accent/gradient/yellowPurpleUae for accent gradients from yellow to purplelinear-gradient(90deg, #FFF6B6 0%, #A97DFF 100%)
background.accent.gradient.bluePurple
React: themeGet('colors.background.accent.gradient.bluePurple')
background/accent/gradient/bluePurpleUae for accent gradients from blue to purplelinear-gradient(90deg, #397BFF 0%, #A97DFF 100%)
background.accent.gradient.yellowBlue
React: themeGet('colors.background.accent.gradient.yellowBlue')
background/accent/gradient/yellowBlueUae for accent gradients from yellow to bluelinear-gradient(90deg, #FFF6B6 0%, #397BFF 100%)
background.accent.gradient.orangeTeal
React: themeGet('colors.background.accent.gradient.orangeTeal')
background/accent/gradient/orangeTealUse for accent gradients from orange to teallinear-gradient(90deg, #FF996C 0%, #8DFCF1 99%)
background.accent.gradient.orangePurple
React: themeGet('colors.background.accent.gradient.orangePurple')
background/accent/gradient/orangePurpleUae for accent gradients from orange to purplelinear-gradient(90deg, #FF996C 0%, #A97DFF 100%)
background.accent.gradient.blueOrange
React: themeGet('colors.background.accent.gradient.blueOrange')
background/accent/gradient/blueOrangeUae for accent gradients from blue to orangelinear-gradient(90deg, #397BFF 0%, #FF996C 99%)
background.accent.gradient.purpleTeal
React: themeGet('colors.background.accent.gradient.purpleTeal')
background/accent/gradient/purpleTealUae for accent gradients from purple to teallinear-gradient(90deg, #A97DFF 0%, #8DFCF1 99%)
background.accent.gradient.tealBlue
React: themeGet('colors.background.accent.gradient.tealBlue')
background/accent/gradient/tealBlueUae for accent gradients from teal to bluelinear-gradient(90deg, #8DFCF1 0%, #397BFF 100%)
background.accent.gradient.tealYellow
React: themeGet('colors.background.accent.gradient.tealYellow')
background/accent/gradient/tealYellowUae for accent gradients from teal to yellowlinear-gradient(90deg, #8DFCF1 0%, #FFF6B6 100%)
surface.default
React: themeGet('colors.surface.default')
surface/defaultUse as the primary background for the UI.#090A0F
surface.inverse
React: themeGet('colors.surface.inverse')
surface/inverseUse for surfaces that should be the inverse of the primary surface of the UI.#FFFFFF
surface.raised.default
React: themeGet('colors.surface.raised.default')
surface/raised/defaultUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#121213
surface.raised.hovered
React: themeGet('colors.surface.raised.hovered')
surface/raised/hoveredUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#1C1B1C
surface.raised.pressed
React: themeGet('colors.surface.raised.pressed')
surface/raised/pressedUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#2E2D2F
elevation.surface.inverse
React: themeGet('colors.elevation.surface.inverse')
elevation/surface/inverseundefined#FFFFFF
elevation.surface.default
React: themeGet('colors.elevation.surface.default')
elevation/surface/defaultundefined#090A0F
elevation.surface.raised.default
React: themeGet('colors.elevation.surface.raised.default')
elevation/surface/raised/defaultUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#121213
elevation.surface.raised.hovered
React: themeGet('colors.elevation.surface.raised.hovered')
elevation/surface/raised/hoveredUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#1C1B1C
elevation.surface.raised.pressed
React: themeGet('colors.elevation.surface.raised.pressed')
elevation/surface/raised/pressedUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#2E2D2F

Atlassian

atlassian--Colors

DemoToken nameCodeFigma usageDescriptionValue
text.default
React: themeGet('colors.text.default')
CSS: --ds-text
text/defaultUse for primary text, such as body copy, sentence case headers, and buttons.#172B4D
text.subtle
React: themeGet('colors.text.subtle')
CSS: --ds-text-subtle
text/subtleUse for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.#44546F
text.subtlest
React: themeGet('colors.text.subtlest')
CSS: --ds-text-subtlest
text/subtlestUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.#626F86
text.disabled
React: themeGet('colors.text.disabled')
CSS: --ds-text-disabled
text/disabledUse for text in a disabled state.#8590A2
text.inverse
React: themeGet('colors.text.inverse')
CSS: --ds-text-inverse
text/inverseUse for text on bold backgrounds.#FFFFFF
text.brand
React: themeGet('colors.text.brand')
CSS: --ds-text-brand
text/brandUse for text that reinforces our brand.#0C66E4
text.selected
React: themeGet('colors.text.selected')
CSS: --ds-text-selected
text/selectedUse for text in selected or opened states, such as tabs and dropdown buttons.#0C66E4
text.danger
React: themeGet('colors.text.danger')
CSS: --ds-text-danger
text/dangerUse for critical text, such as input field error messaging.#AE2A19
text.success
React: themeGet('colors.text.success')
CSS: --ds-text-success
text/successUse for text to communicate a favourable outcome, such as input field success messaging.#216E4E
text.discovery
React: themeGet('colors.text.discovery')
CSS: --ds-text-discovery
text/discoveryUse for text to emphasize change or something new, such as in new lozenges.#5E4DB2
text.information
React: themeGet('colors.text.information')
CSS: --ds-text-information
text/informationUse for informative text or to communicate something is in progress, such as in-progress lozenges.#0055CC
text.accent.blue.default
React: themeGet('colors.text.accent.blue.default')
CSS: --ds-text-accent-blue
text/accent/blue/defaultUse for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#0055CC
text.accent.blue.bolder
React: themeGet('colors.text.accent.blue.bolder')
CSS: --ds-text-accent-blue-bolder
text/accent/blue/bolderUse on bold blue accent backgrounds.#09326C
text.accent.red.default
React: themeGet('colors.text.accent.red.default')
CSS: --ds-text-accent-red
text/accent/red/defaultUse for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#AE2A19
text.accent.red.bolder
React: themeGet('colors.text.accent.red.bolder')
CSS: --ds-text-accent-red-bolder
text/accent/red/bolderUse on bold red accent backgrounds.#601E16
text.accent.orange.default
React: themeGet('colors.text.accent.orange.default')
CSS: --ds-text-accent-orange
text/accent/orange/defaultUse for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#974F0C
text.accent.orange.bolder
React: themeGet('colors.text.accent.orange.bolder')
CSS: --ds-text-accent-orange-bolder
text/accent/orange/bolderUse on bold orange accent backgrounds.#5F3811
text.accent.yellow.default
React: themeGet('colors.text.accent.yellow.default')
CSS: --ds-text-accent-yellow
text/accent/yellow/defaultUse for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#7F5F01
text.accent.yellow.bolder
React: themeGet('colors.text.accent.yellow.bolder')
CSS: --ds-text-accent-yellow-bolder
text/accent/yellow/bolderUse on bold yellow accent backgrounds.#533F04
text.accent.green.default
React: themeGet('colors.text.accent.green.default')
CSS: --ds-text-accent-green
text/accent/green/defaultUse for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#216E4E
text.accent.green.bolder
React: themeGet('colors.text.accent.green.bolder')
CSS: --ds-text-accent-green-bolder
text/accent/green/bolderUse on bold green accent backgrounds.#164B35
text.accent.purple.default
React: themeGet('colors.text.accent.purple.default')
CSS: --ds-text-accent-purple
text/accent/purple/defaultUse for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#5E4DB2
text.accent.purple.bolder
React: themeGet('colors.text.accent.purple.bolder')
CSS: --ds-text-accent-purple-bolder
text/accent/purple/bolderUse on bold purple accent backgrounds.#352C63
text.accent.teal.default
React: themeGet('colors.text.accent.teal.default')
CSS: --ds-text-accent-teal
text/accent/teal/defaultUse for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#206B74
text.accent.teal.bolder
React: themeGet('colors.text.accent.teal.bolder')
CSS: --ds-text-accent-teal-bolder
text/accent/teal/bolderUse on bold teal accent backgrounds.#1D474C
text.accent.magenta.default
React: themeGet('colors.text.accent.magenta.default')
CSS: --ds-text-accent-magenta
text/accent/magenta/defaultUse for magenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#943D73
text.accent.magenta.bolder
React: themeGet('colors.text.accent.magenta.bolder')
CSS: --ds-text-accent-magenta-bolder
text/accent/magenta/bolderUse on bold magenta accent backgrounds.#50253F
text.accent.gray.default
React: themeGet('colors.text.accent.gray.default')
CSS: --ds-text-accent-gray
text/accent/gray/defaultUse for text on non-bold gray accent backgrounds, such as colored tags.#44546F
text.accent.gray.bolder
React: themeGet('colors.text.accent.gray.bolder')
CSS: --ds-text-accent-gray-bolder
text/accent/gray/bolderUse for text and icons on gray subtle accent backgrounds.#091E42
text.accent.lime.default
React: themeGet('colors.text.accent.lime.default')
CSS: --ds-text-accent-lime
text/accent/lime/defaultUse for lime text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#4C6B1F
text.accent.lime.bolder
React: themeGet('colors.text.accent.lime.bolder')
CSS: --ds-text-accent-lime-bolder
text/accent/lime/bolderUse on bold lime accent backgrounds.#37471F
text.warning.default
React: themeGet('colors.text.warning.default')
CSS: --ds-text-warning
text/warning/defaultUse for text to emphasize caution, such as in moved lozenges.#974F0C
text.warning.inverse
React: themeGet('colors.text.warning.inverse')
CSS: --ds-text-warning-inverse
text/warning/inverseUse for text when on bold warning backgrounds.#172B4D
icon.default
React: themeGet('colors.icon.default')
CSS: --ds-icon
icon/defaultUse for icon-only buttons, or icons paired with color.text#44546F
icon.subtle
React: themeGet('colors.icon.subtle')
CSS: --ds-icon-subtle
icon/subtleUse for icons paired with color.text.subtle#626F86
icon.inverse
React: themeGet('colors.icon.inverse')
CSS: --ds-icon-inverse
icon/inverseUse for icons on bold backgrounds.#FFFFFF
icon.disabled
React: themeGet('colors.icon.disabled')
CSS: --ds-icon-disabled
icon/disabledUse for icons in a disabled state.#8590A2
icon.brand
React: themeGet('colors.icon.brand')
CSS: --ds-icon-brand
icon/brandUse for icons that reinforce our brand.#0C66E4
icon.selected
React: themeGet('colors.icon.selected')
CSS: --ds-icon-selected
icon/selectedUse for icons in selected or opened states, such as those used in dropdown buttons.#0C66E4
icon.danger
React: themeGet('colors.icon.danger')
CSS: --ds-icon-danger
icon/dangerUse for icons communicating critical information, such as those used in error handing.#E34935
icon.success
React: themeGet('colors.icon.success')
CSS: --ds-icon-success
icon/successUse for icons communicating a favourable outcome, such as those used in success section messaged.#22A06B
icon.discovery
React: themeGet('colors.icon.discovery')
CSS: --ds-icon-discovery
icon/discoveryUse for icons communicating change or something new, such as discovery section messages.#8270DB
icon.information
React: themeGet('colors.icon.information')
CSS: --ds-icon-information
icon/informationUse for icons communicating information or something in-progress, such as information section messages.#1D7AFC
icon.accent.blue
React: themeGet('colors.icon.accent.blue')
CSS: --ds-icon-accent-blue
icon/accent/blueUse for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#1D7AFC
icon.accent.red
React: themeGet('colors.icon.accent.red')
CSS: --ds-icon-accent-red
icon/accent/redUse for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#E34935
icon.accent.orange
React: themeGet('colors.icon.accent.orange')
CSS: --ds-icon-accent-orange
icon/accent/orangeUse for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#D97008
icon.accent.yellow
React: themeGet('colors.icon.accent.yellow')
CSS: --ds-icon-accent-yellow
icon/accent/yellowUse for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#B38600
icon.accent.green
React: themeGet('colors.icon.accent.green')
CSS: --ds-icon-accent-green
icon/accent/greenUse for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#22A06B
icon.accent.purple
React: themeGet('colors.icon.accent.purple')
CSS: --ds-icon-accent-purple
icon/accent/purpleUse for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#8270DB
icon.accent.teal
React: themeGet('colors.icon.accent.teal')
CSS: --ds-icon-accent-teal
icon/accent/tealUse for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#1D9AAA
icon.accent.magenta
React: themeGet('colors.icon.accent.magenta')
CSS: --ds-icon-accent-magenta
icon/accent/magentaUse for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.#CD519D
icon.accent.gray
React: themeGet('colors.icon.accent.gray')
CSS: --ds-icon-accent-gray
icon/accent/grayUse for icons on non-bold gray accent backgrounds, such as file type icons.#758195
icon.accent.lime
React: themeGet('colors.icon.accent.lime')
CSS: --ds-icon-accent-lime
icon/accent/limeUse for icons on non-bold lime accent backgrounds, such as file type icons.#6A9A23
icon.warning.default
React: themeGet('colors.icon.warning.default')
CSS: --ds-icon-warning
icon/warning/defaultUse for icons communicating caution, such as those used in warning section messages.#D97008
icon.warning.inverse
React: themeGet('colors.icon.warning.inverse')
CSS: --ds-icon-warning-inverse
icon/warning/inverseUse for icons when on bold warning backgrounds.#172B4D
border.default
React: themeGet('colors.border.default')
CSS: --ds-border
border/defaultUse to visually group or separate UI elements, such as flat cards or side panel dividers.#091e4224
border.inverse
React: themeGet('colors.border.inverse')
CSS: --ds-border-inverse
border/inverseUse for borders on bold backgrounds.#FFFFFF
border.focused
React: themeGet('colors.border.focused')
CSS: --ds-border-focused
border/focusedUse for focus rings of elements in a focus state.#388BFF
border.input
React: themeGet('colors.border.input')
CSS: --ds-border-input
border/inputUse for borders of form UI elements, such as text fields, checkboxes, and radio buttons.#091e4224
border.disabled
React: themeGet('colors.border.disabled')
CSS: --ds-border-disabled
border/disabledUse for borders of elements in a disabled state.#091e420f
border.brand
React: themeGet('colors.border.brand')
CSS: --ds-border-brand
border/brandUse for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.#0C66E4
border.selected
React: themeGet('colors.border.selected')
CSS: --ds-border-selected
border/selectedUse for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.#0C66E4
border.danger
React: themeGet('colors.border.danger')
CSS: --ds-border-danger
border/dangerUse for borders communicating critical information, such as the borders on invalid text fields.#E34935
border.warning
React: themeGet('colors.border.warning')
CSS: --ds-border-warning
border/warningUse for borders communicating caution.#D97008
border.success
React: themeGet('colors.border.success')
CSS: --ds-border-success
border/successUse for borders communicating a favourable outcome, such as the borders on validated text fields.#22A06B
border.discovery
React: themeGet('colors.border.discovery')
CSS: --ds-border-discovery
border/discoveryUse for borders communicating change or something new, such as the borders in onboarding spotlights.#8270DB
border.information
React: themeGet('colors.border.information')
CSS: --ds-border-information
border/informationUse for borders communicating information or something in-progress.#1D7AFC
border.subtle
React: themeGet('colors.border.subtle')
CSS: --ds-border-subtle
border/subtleUse for subtle dividers to visually group or separate UI elements, such as flat cards or side panel dividers.#091e420f
border.accent.blue
React: themeGet('colors.border.accent.blue')
CSS: --ds-border-accent-blue
border/accent/blueUse for blue borders on non-bold backgrounds when there is no meaning tied to the color.#1D7AFC
border.accent.red
React: themeGet('colors.border.accent.red')
CSS: --ds-border-accent-red
border/accent/redUse for red borders on non-bold backgrounds when there is no meaning tied to the color.#E34935
border.accent.orange
React: themeGet('colors.border.accent.orange')
CSS: --ds-border-accent-orange
border/accent/orangeUse for orange borders on non-bold backgrounds when there is no meaning tied to the color.#D97008
border.accent.yellow
React: themeGet('colors.border.accent.yellow')
CSS: --ds-border-accent-yellow
border/accent/yellowUse for yellow borders on non-bold backgrounds when there is no meaning tied to the color.#B38600
border.accent.green
React: themeGet('colors.border.accent.green')
CSS: --ds-border-accent-green
border/accent/greenUse for green borders on non-bold backgrounds when there is no meaning tied to the color.#22A06B
border.accent.purple
React: themeGet('colors.border.accent.purple')
CSS: --ds-border-accent-purple
border/accent/purpleUse for purple borders on non-bold backgrounds when there is no meaning tied to the color.#8270DB
border.accent.teal
React: themeGet('colors.border.accent.teal')
CSS: --ds-border-accent-teal
border/accent/tealUse for teal borders on non-bold backgrounds when there is no meaning tied to the color.#1D9AAA
border.accent.magenta
React: themeGet('colors.border.accent.magenta')
CSS: --ds-border-accent-magenta
border/accent/magentaUse for magenta borders on non-bold backgrounds when there is no meaning tied to the color.#CD519D
border.accent.gray
React: themeGet('colors.border.accent.gray')
CSS: --ds-border-accent-gray
border/accent/grayUse for borders on non-bold gray accent backgrounds.#758195
border.table.default
React: themeGet('colors.border.table.default')
CSS: --ds-border-table
border/table/defaultUse for the default borders in table elements, such as the visual divider between table headers or footers and table content.#091e4224
background.disabled
React: themeGet('colors.background.disabled')
CSS: --ds-background-disabled
background/disabledUse for backgrounds of elements in a disabled state.#F1F2F4
background.accent.blue.subtlest
React: themeGet('colors.background.accent.blue.subtlest')
CSS: --ds-background-accent-blue-subtlest
background/accent/blue/subtlestUse for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#E9F2FF
background.accent.blue.subtler
React: themeGet('colors.background.accent.blue.subtler')
CSS: --ds-background-accent-blue-subtler
background/accent/blue/subtlerUse for blue backgrounds when there is no meaning tied to the color, such as coloured tags.#CCE0FF
background.accent.blue.subtle
React: themeGet('colors.background.accent.blue.subtle')
CSS: --ds-background-accent-blue-subtle
background/accent/blue/subtleUse for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.#579DFF
background.accent.blue.bolder
React: themeGet('colors.background.accent.blue.bolder')
CSS: --ds-background-accent-blue-bolder
background/accent/blue/bolderUse for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#0C66E4
background.accent.red.subtlest
React: themeGet('colors.background.accent.red.subtlest')
CSS: --ds-background-accent-red-subtlest
background/accent/red/subtlestUse for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#FFEDEB
background.accent.red.subtler
React: themeGet('colors.background.accent.red.subtler')
CSS: --ds-background-accent-red-subtler
background/accent/red/subtlerUse for red backgrounds when there is no meaning tied to the color, such as colored tags.#FFD2CC
background.accent.red.subtle
React: themeGet('colors.background.accent.red.subtle')
CSS: --ds-background-accent-red-subtle
background/accent/red/subtleUse for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.#F87462
background.accent.red.bolder
React: themeGet('colors.background.accent.red.bolder')
CSS: --ds-background-accent-red-bolder
background/accent/red/bolderUse for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#CA3521
background.accent.orange.subtlest
React: themeGet('colors.background.accent.orange.subtlest')
CSS: --ds-background-accent-orange-subtlest
background/accent/orange/subtlestUse for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#FFF4E5
background.accent.orange.subtler
React: themeGet('colors.background.accent.orange.subtler')
CSS: --ds-background-accent-orange-subtler
background/accent/orange/subtlerUse for orange backgrounds when there is no meaning tied to the color, such as colored tags.#FFE2BD
background.accent.orange.subtle
React: themeGet('colors.background.accent.orange.subtle')
CSS: --ds-background-accent-orange-subtle
background/accent/orange/subtleUse for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.#FAA53D
background.accent.orange.bolder
React: themeGet('colors.background.accent.orange.bolder')
CSS: --ds-background-accent-orange-bolder
background/accent/orange/bolderUse for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#B65C02
background.accent.yellow.subtlest
React: themeGet('colors.background.accent.yellow.subtlest')
CSS: --ds-background-accent-yellow-subtlest
background/accent/yellow/subtlestUse for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#FFF7D6
background.accent.yellow.subtler
React: themeGet('colors.background.accent.yellow.subtler')
CSS: --ds-background-accent-yellow-subtler
background/accent/yellow/subtlerUse for yellow backgrounds when there is no meaning tied to the color, such as colored tags.#F8E6A0
background.accent.yellow.subtle
React: themeGet('colors.background.accent.yellow.subtle')
CSS: --ds-background-accent-yellow-subtle
background/accent/yellow/subtleUse for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.#E2B203
background.accent.yellow.bolder
React: themeGet('colors.background.accent.yellow.bolder')
CSS: --ds-background-accent-yellow-bolder
background/accent/yellow/bolderUse for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#946F00
background.accent.green.subtlest
React: themeGet('colors.background.accent.green.subtlest')
CSS: --ds-background-accent-green-subtlest
background/accent/green/subtlestUse for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#DFFCF0
background.accent.green.subtler
React: themeGet('colors.background.accent.green.subtler')
CSS: --ds-background-accent-green-subtler
background/accent/green/subtlerUse for green backgrounds when there is no meaning tied to the color, such as colored tags.#BAF3DB
background.accent.green.subtle
React: themeGet('colors.background.accent.green.subtle')
CSS: --ds-background-accent-green-subtle
background/accent/green/subtleUse for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.#4BCE97
background.accent.green.bolder
React: themeGet('colors.background.accent.green.bolder')
CSS: --ds-background-accent-green-bolder
background/accent/green/bolderUse for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#1F845A
background.accent.teal.subtlest
React: themeGet('colors.background.accent.teal.subtlest')
CSS: --ds-background-accent-teal-subtlest
background/accent/teal/subtlestUse for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#E3FAFC
background.accent.teal.subtler
React: themeGet('colors.background.accent.teal.subtler')
CSS: --ds-background-accent-teal-subtler
background/accent/teal/subtlerUse for teal backgrounds when there is no meaning tied to the color, such as colored tags.#C1F0F5
background.accent.teal.subtle
React: themeGet('colors.background.accent.teal.subtle')
CSS: --ds-background-accent-teal-subtle
background/accent/teal/subtleUse for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.#60C6D2
background.accent.teal.bolder
React: themeGet('colors.background.accent.teal.bolder')
CSS: --ds-background-accent-teal-bolder
background/accent/teal/bolderUse for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#1D7F8C
background.accent.purple.subtlest
React: themeGet('colors.background.accent.purple.subtlest')
CSS: --ds-background-accent-purple-subtlest
background/accent/purple/subtlestUse for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#F3F0FF
background.accent.purple.subtler
React: themeGet('colors.background.accent.purple.subtler')
CSS: --ds-background-accent-purple-subtler
background/accent/purple/subtlerUse for purple backgrounds when there is no meaning tied to the color, such as colored tags.#DFD8FD
background.accent.purple.subtle
React: themeGet('colors.background.accent.purple.subtle')
CSS: --ds-background-accent-purple-subtle
background/accent/purple/subtleUse for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.#9F8FEF
background.accent.purple.bolder
React: themeGet('colors.background.accent.purple.bolder')
CSS: --ds-background-accent-purple-bolder
background/accent/purple/bolderUse for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#6E5DC6
background.accent.magenta.subtlest
React: themeGet('colors.background.accent.magenta.subtlest')
CSS: --ds-background-accent-magenta-subtlest
background/accent/magenta/subtlestUse for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#FFECF8
background.accent.magenta.subtler
React: themeGet('colors.background.accent.magenta.subtler')
CSS: --ds-background-accent-magenta-subtler
background/accent/magenta/subtlerUse for magenta backgrounds when there is no meaning tied to the color, such as colored tags.#FDD0EC
background.accent.magenta.subtle
React: themeGet('colors.background.accent.magenta.subtle')
CSS: --ds-background-accent-magenta-subtle
background/accent/magenta/subtleUse for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.#E774BB
background.accent.magenta.bolder
React: themeGet('colors.background.accent.magenta.bolder')
CSS: --ds-background-accent-magenta-bolder
background/accent/magenta/bolderUse for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#AE4787
background.accent.gray.subtlest
React: themeGet('colors.background.accent.gray.subtlest')
CSS: --ds-background-accent-gray-subtlest
background/accent/gray/subtlestUse for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#F1F2F4
background.accent.gray.subtler
React: themeGet('colors.background.accent.gray.subtler')
CSS: --ds-background-accent-gray-subtler
background/accent/gray/subtlerUse for gray backgrounds when there is no meaning tied to the color, such as colored tags.#DCDFE4
background.accent.gray.subtle
React: themeGet('colors.background.accent.gray.subtle')
CSS: --ds-background-accent-gray-subtle
background/accent/gray/subtleUse for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.#8590A2
background.accent.gray.bolder
React: themeGet('colors.background.accent.gray.bolder')
CSS: --ds-background-accent-gray-bolder
background/accent/gray/bolderUse for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#626F86
background.accent.lime.subtlest
React: themeGet('colors.background.accent.lime.subtlest')
CSS: --ds-background-accent-lime-subtlest
background/accent/lime/subtlestUse for lime backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#EEFBDA
background.accent.lime.subtler
React: themeGet('colors.background.accent.lime.subtler')
CSS: --ds-background-accent-lime-subtler
background/accent/lime/subtlerUse for lime backgrounds when there is no meaning tied to the color, such as colored tags.#D3F1A7
background.accent.lime.subtle
React: themeGet('colors.background.accent.lime.subtle')
CSS: --ds-background-accent-lime-subtle
background/accent/lime/subtleUse for vibrant lime backgrounds when there is no meaning tied to the color, such as colored tags.#94C748
background.accent.lime.bolder
React: themeGet('colors.background.accent.lime.bolder')
CSS: --ds-background-accent-lime-bolder
background/accent/lime/bolderUse for lime backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#5B7F24
background.inverse.subtle.default
React: themeGet('colors.background.inverse.subtle.default')
CSS: --ds-background-inverse-subtle
background/inverse/subtle/defaultUse for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.#00000029
background.inverse.subtle.hovered
React: themeGet('colors.background.inverse.subtle.hovered')
CSS: --ds-background-inverse-subtle-hovered
background/inverse/subtle/hoveredUse for the hovered state of color.background.inverse.subtle#0000003d
background.inverse.subtle.pressed
React: themeGet('colors.background.inverse.subtle.pressed')
CSS: --ds-background-inverse-subtle-pressed
background/inverse/subtle/pressedUse for the pressed state of color.background.inverse.subtle#00000052
background.input.default
React: themeGet('colors.background.input.default')
CSS: --ds-background-input
background/input/defaultUse for background of form UI elements, such as text fields, checkboxes, and radio buttons.#FFFFFF
background.input.hovered
React: themeGet('colors.background.input.hovered')
CSS: --ds-background-input-hovered
background/input/hoveredHovered state for color.background.input#F7F8F9
background.input.pressed
React: themeGet('colors.background.input.pressed')
CSS: --ds-background-input-pressed
background/input/pressedPressed state for color.background.input#FFFFFF
background.neutral.default.[default]
React: themeGet('colors.background.neutral.default.[default]')
CSS: --ds-background-neutral
background/neutral/default/defaultThe default background for neutral elements, such as default buttons.#091e420f
background.neutral.default.hovered
React: themeGet('colors.background.neutral.default.hovered')
CSS: --ds-background-neutral-hovered
background/neutral/default/hoveredHovered state for color.background.neutral#091e4224
background.neutral.default.pressed
React: themeGet('colors.background.neutral.default.pressed')
CSS: --ds-background-neutral-pressed
background/neutral/default/pressedPressed state for color.background.neutral#091e4224
background.neutral.subtle.default
React: themeGet('colors.background.neutral.subtle.default')
CSS: --ds-background-neutral-subtle
background/neutral/subtle/defaultUse for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.#00000000
background.neutral.subtle.hovered
React: themeGet('colors.background.neutral.subtle.hovered')
CSS: --ds-background-neutral-subtle-hovered
background/neutral/subtle/hoveredHovered state for color.background.neutral.subtle#091e420f
background.neutral.subtle.pressed
React: themeGet('colors.background.neutral.subtle.pressed')
CSS: --ds-background-neutral-subtle-pressed
background/neutral/subtle/pressedPressed state for color.background.neutral.subtle#091e4224
background.neutral.bold.default
React: themeGet('colors.background.neutral.bold.default')
CSS: --ds-background-neutral-bold
background/neutral/bold/defaultA vibrant background option for neutral UI elements, such as announcement banners.#44546F
background.neutral.bold.hovered
React: themeGet('colors.background.neutral.bold.hovered')
CSS: --ds-background-neutral-bold-hovered
background/neutral/bold/hoveredHovered state of color.background.neutral.bold#2C3E5D
background.neutral.bold.pressed
React: themeGet('colors.background.neutral.bold.pressed')
CSS: --ds-background-neutral-bold-pressed
background/neutral/bold/pressedPressed state of color.background.neutral.bold#172B4D
background.brand.bold.default
React: themeGet('colors.background.brand.bold.default')
CSS: --ds-background-brand-bold
background/brand/bold/defaultUse for the background of elements used to reinforce our brand, but with more emphasis.#0C66E4
background.brand.bold.hovered
React: themeGet('colors.background.brand.bold.hovered')
CSS: --ds-background-brand-bold-hovered
background/brand/bold/hoveredHovered state of color.background.brand.bold#0055CC
background.brand.bold.pressed
React: themeGet('colors.background.brand.bold.pressed')
CSS: --ds-background-brand-bold-pressed
background/brand/bold/pressedPressed state of color.background.brand.bold#09326C
background.selected.default.[default]
React: themeGet('colors.background.selected.default.[default]')
CSS: --ds-background-selected
background/selected/default/defaultUse for the background of elements in a selected state, such as in opened dropdown buttons.#E9F2FF
background.selected.default.hovered
React: themeGet('colors.background.selected.default.hovered')
CSS: --ds-background-selected-hovered
background/selected/default/hoveredHovered state for color.background.selected#CCE0FF
background.selected.default.pressed
React: themeGet('colors.background.selected.default.pressed')
CSS: --ds-background-selected-pressed
background/selected/default/pressedPressed state for color.background.selected#85B8FF
background.selected.bold.default
React: themeGet('colors.background.selected.bold.default')
CSS: --ds-background-selected-bold
background/selected/bold/defaultUse for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.#0C66E4
background.selected.bold.hovered
React: themeGet('colors.background.selected.bold.hovered')
CSS: --ds-background-selected-bold-hovered
background/selected/bold/hoveredHovered state of color.background.selected.bold#0055CC
background.selected.bold.pressed
React: themeGet('colors.background.selected.bold.pressed')
CSS: --ds-background-selected-bold-pressed
background/selected/bold/pressedPressed state of color.background.selected.bold#09326C
background.danger.default.[default]
React: themeGet('colors.background.danger.default.[default]')
CSS: --ds-background-danger
background/danger/default/defaultUse for backgrounds communicating critical information, such in error section messages.#FFEDEB
background.danger.default.hovered
React: themeGet('colors.background.danger.default.hovered')
CSS: --ds-background-danger-hovered
background/danger/default/hoveredHovered state for color.background.danger#FFD2CC
background.danger.default.pressed
React: themeGet('colors.background.danger.default.pressed')
CSS: --ds-background-danger-pressed
background/danger/default/pressedPressed state for color.background.danger#FF9C8F
background.danger.bold.default
React: themeGet('colors.background.danger.bold.default')
CSS: --ds-background-danger-bold
background/danger/bold/defaultA vibrant background option for communicating critical information, such as in danger buttons and error banners.#CA3521
background.danger.bold.hovered
React: themeGet('colors.background.danger.bold.hovered')
CSS: --ds-background-danger-bold-hovered
background/danger/bold/hoveredHovered state of color.background.danger.bold#AE2A19
background.danger.bold.pressed
React: themeGet('colors.background.danger.bold.pressed')
CSS: --ds-background-danger-bold-pressed
background/danger/bold/pressedPressed state of color.background.danger.bold#601E16
background.warning.default.[default]
React: themeGet('colors.background.warning.default.[default]')
CSS: --ds-background-warning
background/warning/default/defaultUse for backgrounds communicating caution, such as in warning section messages.#FFF7D6
background.warning.default.hovered
React: themeGet('colors.background.warning.default.hovered')
CSS: --ds-background-warning-hovered
background/warning/default/hoveredHovered state for color.background.warning#F8E6A0
background.warning.default.pressed
React: themeGet('colors.background.warning.default.pressed')
CSS: --ds-background-warning-pressed
background/warning/default/pressedPressed state for color.background.warning#F8E6A0
background.warning.bold.default
React: themeGet('colors.background.warning.bold.default')
CSS: --ds-background-warning-bold
background/warning/bold/defaultA vibrant background option for communicating caution, such as in warning buttons and warning banners.#E2B203
background.warning.bold.hovered
React: themeGet('colors.background.warning.bold.hovered')
CSS: --ds-background-warning-bold-hovered
background/warning/bold/hoveredHovered state of color.background.warning.bold#CF9F02
background.warning.bold.pressed
React: themeGet('colors.background.warning.bold.pressed')
CSS: --ds-background-warning-bold-pressed
background/warning/bold/pressedPressed state of color.background.warning.bold#B38600
background.success.default.[default]
React: themeGet('colors.background.success.default.[default]')
CSS: --ds-background-success
background/success/default/defaultUse for backgrounds communicating a favourable outcome, such as in success section messages.#DFFCF0
background.success.default.hovered
React: themeGet('colors.background.success.default.hovered')
CSS: --ds-background-success-hovered
background/success/default/hoveredHovered state for color.background.success#BAF3DB
background.success.default.pressed
React: themeGet('colors.background.success.default.pressed')
CSS: --ds-background-success-pressed
background/success/default/pressedPressed state for color.background.success#7EE2B8
background.success.bold.default
React: themeGet('colors.background.success.bold.default')
CSS: --ds-background-success-bold
background/success/bold/defaultA vibrant background option for communicating a favourable outcome, such as in checked toggles.#1F845A
background.success.bold.hovered
React: themeGet('colors.background.success.bold.hovered')
CSS: --ds-background-success-bold-hovered
background/success/bold/hoveredHovered state of color.background.success.bold#216E4E
background.success.bold.pressed
React: themeGet('colors.background.success.bold.pressed')
CSS: --ds-background-success-bold-pressed
background/success/bold/pressedPressed state of color.background.success.bold#164B35
background.discovery.default.[default]
React: themeGet('colors.background.discovery.default.[default]')
CSS: --ds-background-discovery
background/discovery/default/defaultUse for backgrounds communicating change or something new, such as in discovery section messages.#F3F0FF
background.discovery.default.hovered
React: themeGet('colors.background.discovery.default.hovered')
CSS: --ds-background-discovery-hovered
background/discovery/default/hoveredHover state for color.background.discovery#DFD8FD
background.discovery.default.pressed
React: themeGet('colors.background.discovery.default.pressed')
CSS: --ds-background-discovery-pressed
background/discovery/default/pressedPressed state for color.background.discovery#B8ACF6
background.discovery.bold.default
React: themeGet('colors.background.discovery.bold.default')
CSS: --ds-background-discovery-bold
background/discovery/bold/defaultA vibrant background option communicating change or something new, such as in onboarding spotlights.#6E5DC6
background.discovery.bold.hovered
React: themeGet('colors.background.discovery.bold.hovered')
CSS: --ds-background-discovery-bold-hovered
background/discovery/bold/hoveredHovered state of color.background.discovery.bold#5E4DB2
background.discovery.bold.pressed
React: themeGet('colors.background.discovery.bold.pressed')
CSS: --ds-background-discovery-bold-pressed
background/discovery/bold/pressedPressed state of color.background.discovery.bold#352C63
background.information.default.[default]
React: themeGet('colors.background.information.default.[default]')
CSS: --ds-background-information
background/information/default/defaultUse for backgrounds communicating information or something in-progress, such as in information section messages.#E9F2FF
background.information.default.hovered
React: themeGet('colors.background.information.default.hovered')
CSS: --ds-background-information-hovered
background/information/default/hoveredHovered state of color.background.information#CCE0FF
background.information.default.pressed
React: themeGet('colors.background.information.default.pressed')
CSS: --ds-background-information-pressed
background/information/default/pressedPressed state of color.background.information#85B8FF
background.information.bold.default
React: themeGet('colors.background.information.bold.default')
CSS: --ds-background-information-bold
background/information/bold/defaultA vibrant background option for communicating information or something in-progress.#0C66E4
background.information.bold.hovered
React: themeGet('colors.background.information.bold.hovered')
CSS: --ds-background-information-bold-hovered
background/information/bold/hoveredHovered state of color.background.information.bold#0055CC
background.information.bold.pressed
React: themeGet('colors.background.information.bold.pressed')
CSS: --ds-background-information-bold-pressed
background/information/bold/pressedPressed state of color.background.information.bold#09326C
blanket.default
React: themeGet('colors.blanket.default')
CSS: --ds-blanket
blanket/defaultUse for the screen overlay that appears with modal dialogs#091e427d
blanket.selected
React: themeGet('colors.blanket.selected')
CSS: --ds-blanket-selected
blanket/selectedUse as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements#388bff14
blanket.danger
React: themeGet('colors.blanket.danger')
CSS: --ds-blanket-danger
blanket/dangerUse as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements#ef5c4814
interaction.hovered
React: themeGet('colors.interaction.hovered')
CSS: --ds-interaction-hovered
interaction/hoveredUse as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.#00000029
interaction.pressed
React: themeGet('colors.interaction.pressed')
CSS: --ds-interaction-pressed
interaction/pressedUse as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.#00000052
skeleton.default
React: themeGet('colors.skeleton.default')
CSS: --ds-skeleton
skeleton/defaultUse for skeleton loading states#091e420f
skeleton.subtle
React: themeGet('colors.skeleton.subtle')
CSS: --ds-skeleton-subtle
skeleton/subtleUse for the pulse or shimmer effect in skeleton loading states#091e4208
link.default
React: themeGet('colors.link.default')
CSS: --ds-link
link/defaultUse for links in a default or hovered state. Add an underline for hovered states.#0C66E4
link.pressed
React: themeGet('colors.link.pressed')
CSS: --ds-link-pressed
link/pressedUse for links in a pressed state.#0055CC
link.visited
React: themeGet('colors.link.visited')
CSS: --ds-link-visited
link/visitedUse for links in a visited state.#5E4DB2
chart.brand.default
React: themeGet('colors.chart.brand.default')
CSS: --ds-chart-brand
chart/brand/defaultOur primary color for data visualisation. Use when only one color is required.#1D7AFC
chart.brand.hovered
React: themeGet('colors.chart.brand.hovered')
CSS: --ds-chart-brand-hovered
chart/brand/hoveredHovered state of color.chart.brand.#0C66E4
chart.neutral.default
React: themeGet('colors.chart.neutral.default')
CSS: --ds-chart-neutral
chart/neutral/defaultA secondary color for data visualisation or to communicate 'to-do' statues.#8590A2
chart.neutral.hovered
React: themeGet('colors.chart.neutral.hovered')
CSS: --ds-chart-neutral-hovered
chart/neutral/hoveredHovered state of color.chart.neutral.#758195
chart.success.default.[default]
React: themeGet('colors.chart.success.default.[default]')
CSS: --ds-chart-success
chart/success/default/defaultFor data visualisation communicating positive information, such as 'on track'.#22A06B
chart.success.default.hovered
React: themeGet('colors.chart.success.default.hovered')
CSS: --ds-chart-success-hovered
chart/success/default/hoveredHovered state of color.chart.success.#1F845A
chart.success.bold.default
React: themeGet('colors.chart.success.bold.default')
CSS: --ds-chart-success-bold
chart/success/bold/defaultA stronger emphasis option of color.chart.success.#216E4E
chart.success.bold.hovered
React: themeGet('colors.chart.success.bold.hovered')
CSS: --ds-chart-success-bold-hovered
chart/success/bold/hoveredHovered state of color.chart.success.bold.#164B35
chart.danger.default.[default]
React: themeGet('colors.chart.danger.default.[default]')
CSS: --ds-chart-danger
chart/danger/default/defaultFor data visualisation communicating negative information, such as 'off track'.#EF5C48
chart.danger.default.hovered
React: themeGet('colors.chart.danger.default.hovered')
CSS: --ds-chart-danger-hovered
chart/danger/default/hoveredHovered state of color.chart.danger.#E34935
chart.danger.bold.default
React: themeGet('colors.chart.danger.bold.default')
CSS: --ds-chart-danger-bold
chart/danger/bold/defaultA stronger emphasis option of color.chart.danger.#AE2A19
chart.danger.bold.hovered
React: themeGet('colors.chart.danger.bold.hovered')
CSS: --ds-chart-danger-bold-hovered
chart/danger/bold/hoveredHovered state of color.chart.danger.bold.#601E16
chart.warning.default.[default]
React: themeGet('colors.chart.warning.default.[default]')
CSS: --ds-chart-warning
chart/warning/default/defaultFor data visualisation communicating caution, such as 'at risk' statuses.#B38600
chart.warning.default.hovered
React: themeGet('colors.chart.warning.default.hovered')
CSS: --ds-chart-warning-hovered
chart/warning/default/hoveredHovered state of color.chart.warning.#946F00
chart.warning.bold.default
React: themeGet('colors.chart.warning.bold.default')
CSS: --ds-chart-warning-bold
chart/warning/bold/defaultA stronger emphasis option of color.chart.warning.#7F5F01
chart.warning.bold.hovered
React: themeGet('colors.chart.warning.bold.hovered')
CSS: --ds-chart-warning-bold-hovered
chart/warning/bold/hoveredHovered state of color.chart.warning.bold.#533F04
chart.information.default.[default]
React: themeGet('colors.chart.information.default.[default]')
CSS: --ds-chart-information
chart/information/default/defaultFor data visualisation communicating low priority or in-progress statuses.#388BFF
chart.information.default.hovered
React: themeGet('colors.chart.information.default.hovered')
CSS: --ds-chart-information-hovered
chart/information/default/hoveredHovered state of color.chart.information.#1D7AFC
chart.information.bold.default
React: themeGet('colors.chart.information.bold.default')
CSS: --ds-chart-information-bold
chart/information/bold/defaultA stronger emphasis option of color.chart.information.#0055CC
chart.information.bold.hovered
React: themeGet('colors.chart.information.bold.hovered')
CSS: --ds-chart-information-bold-hovered
chart/information/bold/hoveredHovered state of color.chart.information.bold.#09326C
chart.discovery.default.[default]
React: themeGet('colors.chart.discovery.default.[default]')
CSS: --ds-chart-discovery
chart/discovery/default/defaultFor data visualisation communicating 'new' statuses.#8F7EE7
chart.discovery.default.hovered
React: themeGet('colors.chart.discovery.default.hovered')
CSS: --ds-chart-discovery-hovered
chart/discovery/default/hoveredHovered state of color.chart.discovery.#8270DB
chart.discovery.bold.default
React: themeGet('colors.chart.discovery.bold.default')
CSS: --ds-chart-discovery-bold
chart/discovery/bold/defaultA stronger emphasis option of color.chart.discovery.#5E4DB2
chart.discovery.bold.hovered
React: themeGet('colors.chart.discovery.bold.hovered')
CSS: --ds-chart-discovery-bold-hovered
chart/discovery/bold/hoveredHovered state of color.chart.discovery.bold.#352C63
chart.categorical.1.default
React: themeGet('colors.chart.categorical.1.default')
CSS: --ds-chart-categorical-1
chart/categorical/1/defaultFor data visualisation only. Follow numbered sequence.#1D9AAA
chart.categorical.1.hovered
React: themeGet('colors.chart.categorical.1.hovered')
CSS: --ds-chart-categorical-1-hovered
chart/categorical/1/hoveredHovered state of color.chart.categorical.1.#1D7F8C
chart.categorical.2.default
React: themeGet('colors.chart.categorical.2.default')
CSS: --ds-chart-categorical-2
chart/categorical/2/defaultFor data visualisation only. Follow numbered sequence.#5E4DB2
chart.categorical.2.hovered
React: themeGet('colors.chart.categorical.2.hovered')
CSS: --ds-chart-categorical-2-hovered
chart/categorical/2/hoveredHovered state of color.chart.categorical.2.#352C63
chart.categorical.3.default
React: themeGet('colors.chart.categorical.3.default')
CSS: --ds-chart-categorical-3
chart/categorical/3/defaultFor data visualisation only. Follow numbered sequence.#D97008
chart.categorical.3.hovered
React: themeGet('colors.chart.categorical.3.hovered')
CSS: --ds-chart-categorical-3-hovered
chart/categorical/3/hoveredHovered state of color.chart.categorical.3.#B65C02
chart.categorical.4.default
React: themeGet('colors.chart.categorical.4.default')
CSS: --ds-chart-categorical-4
chart/categorical/4/defaultFor data visualisation only. Follow numbered sequence.#943D73
chart.categorical.4.hovered
React: themeGet('colors.chart.categorical.4.hovered')
CSS: --ds-chart-categorical-4-hovered
chart/categorical/4/hoveredHovered state of color.chart.categorical.4.#50253F
chart.categorical.5.default
React: themeGet('colors.chart.categorical.5.default')
CSS: --ds-chart-categorical-5
chart/categorical/5/defaultFor data visualisation only. Follow numbered sequence.#09326C
chart.categorical.5.hovered
React: themeGet('colors.chart.categorical.5.hovered')
CSS: --ds-chart-categorical-5-hovered
chart/categorical/5/hoveredHovered state of color.chart.categorical.5.#092957
chart.categorical.6.default
React: themeGet('colors.chart.categorical.6.default')
CSS: --ds-chart-categorical-6
chart/categorical/6/defaultFor data visualisation only. Follow numbered sequence.#8F7EE7
chart.categorical.6.hovered
React: themeGet('colors.chart.categorical.6.hovered')
CSS: --ds-chart-categorical-6-hovered
chart/categorical/6/hoveredHovered state of color.chart.categorical.6.#8270DB
chart.categorical.7.default
React: themeGet('colors.chart.categorical.7.default')
CSS: --ds-chart-categorical-7
chart/categorical/7/defaultFor data visualisation only. Follow numbered sequence.#50253F
chart.categorical.7.hovered
React: themeGet('colors.chart.categorical.7.hovered')
CSS: --ds-chart-categorical-7-hovered
chart/categorical/7/hoveredHovered state of color.chart.categorical.7.#421F34
chart.categorical.8.default
React: themeGet('colors.chart.categorical.8.default')
CSS: --ds-chart-categorical-8
chart/categorical/8/defaultFor data visualisation only. Follow numbered sequence.#974F0C
chart.categorical.8.hovered
React: themeGet('colors.chart.categorical.8.hovered')
CSS: --ds-chart-categorical-8-hovered
chart/categorical/8/hoveredHovered state of color.chart.categorical.8.#5F3811
chart.blue.bold.default
React: themeGet('colors.chart.blue.bold.default')
CSS: --ds-chart-blue-bold
chart/blue/bold/defaultFor data visualisation only.#388BFF
chart.blue.bold.hovered
React: themeGet('colors.chart.blue.bold.hovered')
CSS: --ds-chart-blue-bold-hovered
chart/blue/bold/hoveredHovered state of color.chart.blue.bold.#1D7AFC
chart.blue.bolder.default
React: themeGet('colors.chart.blue.bolder.default')
CSS: --ds-chart-blue-bolder
chart/blue/bolder/defaultFor data visualisation only.#1D7AFC
chart.blue.bolder.hovered
React: themeGet('colors.chart.blue.bolder.hovered')
CSS: --ds-chart-blue-bolder-hovered
chart/blue/bolder/hoveredHovered state of color.chart.blue.bolder.#0C66E4
chart.blue.boldest.default
React: themeGet('colors.chart.blue.boldest.default')
CSS: --ds-chart-blue-boldest
chart/blue/boldest/defaultFor data visualisation only.#0055CC
chart.blue.boldest.hovered
React: themeGet('colors.chart.blue.boldest.hovered')
CSS: --ds-chart-blue-boldest-hovered
chart/blue/boldest/hoveredHovered state of color.chart.blue.boldest.#09326C
chart.red.bold.default
React: themeGet('colors.chart.red.bold.default')
CSS: --ds-chart-red-bold
chart/red/bold/defaultFor data visualisation only.#EF5C48
chart.red.bold.hovered
React: themeGet('colors.chart.red.bold.hovered')
CSS: --ds-chart-red-bold-hovered
chart/red/bold/hoveredHovered state of color.chart.red.bold.#E34935
chart.red.bolder.default
React: themeGet('colors.chart.red.bolder.default')
CSS: --ds-chart-red-bolder
chart/red/bolder/defaultFor data visualisation only.#E34935
chart.red.bolder.hovered
React: themeGet('colors.chart.red.bolder.hovered')
CSS: --ds-chart-red-bolder-hovered
chart/red/bolder/hoveredHovered state of color.chart.red.bolder.#CA3521
chart.red.boldest.default
React: themeGet('colors.chart.red.boldest.default')
CSS: --ds-chart-red-boldest
chart/red/boldest/defaultFor data visualisation only.#AE2A19
chart.red.boldest.hovered
React: themeGet('colors.chart.red.boldest.hovered')
CSS: --ds-chart-red-boldest-hovered
chart/red/boldest/hoveredHovered state of color.chart.red.boldest.#601E16
chart.orange.bold.default
React: themeGet('colors.chart.orange.bold.default')
CSS: --ds-chart-orange-bold
chart/orange/bold/defaultFor data visualisation only.#D97008
chart.orange.bold.hovered
React: themeGet('colors.chart.orange.bold.hovered')
CSS: --ds-chart-orange-bold-hovered
chart/orange/bold/hoveredHovered state of color.chart.orange.bold.#B65C02
chart.orange.bolder.default
React: themeGet('colors.chart.orange.bolder.default')
CSS: --ds-chart-orange-bolder
chart/orange/bolder/defaultFor data visualisation only.#B65C02
chart.orange.bolder.hovered
React: themeGet('colors.chart.orange.bolder.hovered')
CSS: --ds-chart-orange-bolder-hovered
chart/orange/bolder/hoveredHovered state of color.chart.orange.bolder.#974F0C
chart.orange.boldest.default
React: themeGet('colors.chart.orange.boldest.default')
CSS: --ds-chart-orange-boldest
chart/orange/boldest/defaultFor data visualisation only.#974F0C
chart.orange.boldest.hovered
React: themeGet('colors.chart.orange.boldest.hovered')
CSS: --ds-chart-orange-boldest-hovered
chart/orange/boldest/hoveredHovered state of color.chart.orange.boldest.#5F3811
chart.yellow.bold.default
React: themeGet('colors.chart.yellow.bold.default')
CSS: --ds-chart-yellow-bold
chart/yellow/bold/defaultFor data visualisation only.#B38600
chart.yellow.bold.hovered
React: themeGet('colors.chart.yellow.bold.hovered')
CSS: --ds-chart-yellow-bold-hovered
chart/yellow/bold/hoveredHovered state of color.chart.yellow.bold.#946F00
chart.yellow.bolder.default
React: themeGet('colors.chart.yellow.bolder.default')
CSS: --ds-chart-yellow-bolder
chart/yellow/bolder/defaultFor data visualisation only.#946F00
chart.yellow.bolder.hovered
React: themeGet('colors.chart.yellow.bolder.hovered')
CSS: --ds-chart-yellow-bolder-hovered
chart/yellow/bolder/hoveredHovered state of color.chart.yellow.bolder.#7F5F01
chart.yellow.boldest.default
React: themeGet('colors.chart.yellow.boldest.default')
CSS: --ds-chart-yellow-boldest
chart/yellow/boldest/defaultFor data visualisation only.#7F5F01
chart.yellow.boldest.hovered
React: themeGet('colors.chart.yellow.boldest.hovered')
CSS: --ds-chart-yellow-boldest-hovered
chart/yellow/boldest/hoveredHovered state of color.chart.yellow.boldest.#533F04
chart.green.bold.default
React: themeGet('colors.chart.green.bold.default')
CSS: --ds-chart-green-bold
chart/green/bold/defaultFor data visualisation only.#22A06B
chart.green.bold.hovered
React: themeGet('colors.chart.green.bold.hovered')
CSS: --ds-chart-green-bold-hovered
chart/green/bold/hoveredHovered state of color.chart.green.bold.#1F845A
chart.green.bolder.default
React: themeGet('colors.chart.green.bolder.default')
CSS: --ds-chart-green-bolder
chart/green/bolder/defaultFor data visualisation only.#1F845A
chart.green.bolder.hovered
React: themeGet('colors.chart.green.bolder.hovered')
CSS: --ds-chart-green-bolder-hovered
chart/green/bolder/hoveredHovered state of color.chart.green.bolder.#216E4E
chart.green.boldest.default
React: themeGet('colors.chart.green.boldest.default')
CSS: --ds-chart-green-boldest
chart/green/boldest/defaultFor data visualisation only.#216E4E
chart.green.boldest.hovered
React: themeGet('colors.chart.green.boldest.hovered')
CSS: --ds-chart-green-boldest-hovered
chart/green/boldest/hoveredHovered state of color.chart.green.boldest.#164B35
chart.teal.bold.default
React: themeGet('colors.chart.teal.bold.default')
CSS: --ds-chart-teal-bold
chart/teal/bold/defaultFor data visualisation only.#1D9AAA
chart.teal.bold.hovered
React: themeGet('colors.chart.teal.bold.hovered')
CSS: --ds-chart-teal-bold-hovered
chart/teal/bold/hoveredHovered state of color.chart.teal.bold.#1D7F8C
chart.teal.bolder.default
React: themeGet('colors.chart.teal.bolder.default')
CSS: --ds-chart-teal-bolder
chart/teal/bolder/defaultFor data visualisation only.#1D7F8C
chart.teal.bolder.hovered
React: themeGet('colors.chart.teal.bolder.hovered')
CSS: --ds-chart-teal-bolder-hovered
chart/teal/bolder/hoveredHovered state of color.chart.teal.bolder.#206B74
chart.teal.boldest.default
React: themeGet('colors.chart.teal.boldest.default')
CSS: --ds-chart-teal-boldest
chart/teal/boldest/defaultFor data visualisation only.#206B74
chart.teal.boldest.hovered
React: themeGet('colors.chart.teal.boldest.hovered')
CSS: --ds-chart-teal-boldest-hovered
chart/teal/boldest/hoveredHovered state of color.chart.teal.boldest.#1D474C
chart.purple.bold.default
React: themeGet('colors.chart.purple.bold.default')
CSS: --ds-chart-purple-bold
chart/purple/bold/defaultFor data visualisation only.#8F7EE7
chart.purple.bold.hovered
React: themeGet('colors.chart.purple.bold.hovered')
CSS: --ds-chart-purple-bold-hovered
chart/purple/bold/hoveredHovered state of color.chart.purple.bold.#8270DB
chart.purple.bolder.default
React: themeGet('colors.chart.purple.bolder.default')
CSS: --ds-chart-purple-bolder
chart/purple/bolder/defaultFor data visualisation only.#8270DB
chart.purple.bolder.hovered
React: themeGet('colors.chart.purple.bolder.hovered')
CSS: --ds-chart-purple-bolder-hovered
chart/purple/bolder/hoveredHovered state of color.chart.purple.bolder.#6E5DC6
chart.purple.boldest.default
React: themeGet('colors.chart.purple.boldest.default')
CSS: --ds-chart-purple-boldest
chart/purple/boldest/defaultFor data visualisation only.#5E4DB2
chart.purple.boldest.hovered
React: themeGet('colors.chart.purple.boldest.hovered')
CSS: --ds-chart-purple-boldest-hovered
chart/purple/boldest/hoveredHovered state of color.chart.purple.boldest.#352C63
chart.magenta.bold.default
React: themeGet('colors.chart.magenta.bold.default')
CSS: --ds-chart-magenta-bold
chart/magenta/bold/defaultFor data visualisation only.#DA62AC
chart.magenta.bold.hovered
React: themeGet('colors.chart.magenta.bold.hovered')
CSS: --ds-chart-magenta-bold-hovered
chart/magenta/bold/hoveredHovered state of color.chart.magenta.bold.#CD519D
chart.magenta.bolder.default
React: themeGet('colors.chart.magenta.bolder.default')
CSS: --ds-chart-magenta-bolder
chart/magenta/bolder/defaultFor data visualisation only.#CD519D
chart.magenta.bolder.hovered
React: themeGet('colors.chart.magenta.bolder.hovered')
CSS: --ds-chart-magenta-bolder-hovered
chart/magenta/bolder/hoveredHovered state of color.chart.magenta.bolder.#AE4787
chart.magenta.boldest.default
React: themeGet('colors.chart.magenta.boldest.default')
CSS: --ds-chart-magenta-boldest
chart/magenta/boldest/defaultFor data visualisation only.#943D73
chart.magenta.boldest.hovered
React: themeGet('colors.chart.magenta.boldest.hovered')
CSS: --ds-chart-magenta-boldest-hovered
chart/magenta/boldest/hoveredHovered state of color.chart.magenta.boldest.#50253F
chart.gray.bold.default
React: themeGet('colors.chart.gray.bold.default')
CSS: --ds-chart-gray-bold
chart/gray/bold/defaultFor data visualisation only.#8590A2
chart.gray.bold.hovered
React: themeGet('colors.chart.gray.bold.hovered')
CSS: --ds-chart-gray-bold-hovered
chart/gray/bold/hoveredHovered state of color.chart.gray.bold.#758195
chart.gray.bolder.default
React: themeGet('colors.chart.gray.bolder.default')
CSS: --ds-chart-gray-bolder
chart/gray/bolder/defaultFor data visualisation only.#758195
chart.gray.bolder.hovered
React: themeGet('colors.chart.gray.bolder.hovered')
CSS: --ds-chart-gray-bolder-hovered
chart/gray/bolder/hoveredHovered state of color.chart.gray.bolder.#626F86
chart.gray.boldest.default
React: themeGet('colors.chart.gray.boldest.default')
CSS: --ds-chart-gray-boldest
chart/gray/boldest/defaultFor data visualisation only.#44546F
chart.gray.boldest.hovered
React: themeGet('colors.chart.gray.boldest.hovered')
CSS: --ds-chart-gray-boldest-hovered
chart/gray/boldest/hoveredHovered state of color.chart.gray.boldest.#2C3E5D
chart.lime.bold.default
React: themeGet('colors.chart.lime.bold.default')
CSS: --ds-chart-lime-bold
chart/lime/bold/defaultFor data visualisation only.#6A9A23
chart.lime.bold.hovered
React: themeGet('colors.chart.lime.bold.hovered')
CSS: --ds-chart-lime-bold-hovered
chart/lime/bold/hoveredHovered state of color.chart.lime.bold.#5B7F24
chart.lime.bolder.default
React: themeGet('colors.chart.lime.bolder.default')
CSS: --ds-chart-lime-bolder
chart/lime/bolder/defaultFor data visualisation only.#5B7F24
chart.lime.bolder.hovered
React: themeGet('colors.chart.lime.bolder.hovered')
CSS: --ds-chart-lime-bolder-hovered
chart/lime/bolder/hoveredHovered state of color.chart.lime.bolder.#4C6B1F
chart.lime.boldest.default
React: themeGet('colors.chart.lime.boldest.default')
CSS: --ds-chart-lime-boldest
chart/lime/boldest/defaultFor data visualisation only.#4C6B1F
chart.lime.boldest.hovered
React: themeGet('colors.chart.lime.boldest.hovered')
CSS: --ds-chart-lime-boldest-hovered
chart/lime/boldest/hoveredHovered state of color.chart.lime.boldest.#37471F
elevation.surface.default.[default]
React: themeGet('colors.elevation.surface.default.[default]')
CSS: --ds-surface
elevation/surface/default/defaultUse as the primary background for the UI.#FFFFFF
elevation.surface.default.hovered
React: themeGet('colors.elevation.surface.default.hovered')
CSS: --ds-surface-hovered
elevation/surface/default/hoveredHovered state of elevation.surface#F1F2F4
elevation.surface.default.pressed
React: themeGet('colors.elevation.surface.default.pressed')
CSS: --ds-surface-pressed
elevation/surface/default/pressedPressed state of elevation.surface#DCDFE4
elevation.surface.sunken
React: themeGet('colors.elevation.surface.sunken')
CSS: --ds-surface-sunken
elevation/surface/sunkenA secondary background for the UI commonly used for grouping items, such as Jira cards in columns.#F7F8F9
elevation.surface.raised.default
React: themeGet('colors.elevation.surface.raised.default')
CSS: --ds-surface-raised
elevation/surface/raised/defaultUse for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised#FFFFFF
elevation.surface.raised.hovered
React: themeGet('colors.elevation.surface.raised.hovered')
CSS: --ds-surface-raised-hovered
elevation/surface/raised/hoveredUse for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised#F1F2F4
elevation.surface.raised.pressed
React: themeGet('colors.elevation.surface.raised.pressed')
CSS: --ds-surface-raised-pressed
elevation/surface/raised/pressedUse for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised#DCDFE4
elevation.surface.overlay.default
React: themeGet('colors.elevation.surface.overlay.default')
CSS: --ds-surface-overlay
elevation/surface/overlay/defaultUse for the background of elements that sit on top of the UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay.#FFFFFF
elevation.surface.overlay.hovered
React: themeGet('colors.elevation.surface.overlay.hovered')
CSS: --ds-surface-overlay-hovered
elevation/surface/overlay/hoveredHovered state of elevation.surface.overlay#F1F2F4
elevation.surface.overlay.pressed
React: themeGet('colors.elevation.surface.overlay.pressed')
CSS: --ds-surface-overlay-pressed
elevation/surface/overlay/pressedPressed state of elevation.surface.overlay#DCDFE4
elevation.shadow.overflow.spread
React: themeGet('colors.elevation.shadow.overflow.spread')
CSS: --ds-shadow-overflow-spread
elevation/shadow/overflow/spreadUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.#091e4229
elevation.shadow.overflow.perimeter
React: themeGet('colors.elevation.shadow.overflow.perimeter')
CSS: --ds-shadow-overflow-perimeter
elevation/shadow/overflow/perimeterUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.#091e421f

atlassian--Spacing

DemoToken nameCodeFigma usageDescriptionValue
space.0
React: themeGet('space.0')
CSS: --ds-space-0
0px
space.1
React: themeGet('space.1')
CSS: --ds-space-1
4px
space.2
React: themeGet('space.2')
CSS: --ds-space-2
8px
space.3
React: themeGet('space.3')
CSS: --ds-space-3
16px
space.4
React: themeGet('space.4')
CSS: --ds-space-4
24px
space.5
React: themeGet('space.5')
CSS: --ds-space-5
32px
space.6
React: themeGet('space.6')
CSS: --ds-space-6
40px
space.7
React: themeGet('space.7')
CSS: --ds-space-7
48px
space.8
React: themeGet('space.8')
CSS: --ds-space-8
64px
space.9
React: themeGet('space.9')
CSS: --ds-space-9
80px
space.10
React: themeGet('space.10')
CSS: --ds-space-10
96px
space.11
React: themeGet('space.11')
CSS: --ds-space-11
112px
space.12
React: themeGet('space.12')
CSS: --ds-space-12
128px

atlassian--Border Radius

DemoToken nameCodeFigma usageDescriptionValue
radii.0
React: themeGet('radii.0')
CSS: --ds-radii-0
0px
radii.1
React: themeGet('radii.1')
CSS: --ds-radii-1
3px
radii.2
React: themeGet('radii.2')
CSS: --ds-radii-2
4px
radii.3
React: themeGet('radii.3')
CSS: --ds-radii-3
6px
radii.4
React: themeGet('radii.4')
CSS: --ds-radii-4
8px
radii.5
React: themeGet('radii.5')
CSS: --ds-radii-5
9999999px

atlassian--Typography

DemoToken nameCodeFigma usageDescriptionValue
Aa
fontSizes.0
React: themeGet('fontSizes.0')
10px
Aa
fontSizes.1
React: themeGet('fontSizes.1')
11px
Aa
fontSizes.2
React: themeGet('fontSizes.2')
12px
Aa
fontSizes.3
React: themeGet('fontSizes.3')
14px
Aa
fontSizes.4
React: themeGet('fontSizes.4')
16px
Aa
fontSizes.5
React: themeGet('fontSizes.5')
18px
Aa
fontSizes.6
React: themeGet('fontSizes.6')
20px
Aa
fontSizes.7
React: themeGet('fontSizes.7')
24px
Aa
fontSizes.8
React: themeGet('fontSizes.8')
28px
Aa
fontSizes.9
React: themeGet('fontSizes.9')
29px
Aa
fontSizes.10
React: themeGet('fontSizes.10')
35px
Aa
fontSizes.11
React: themeGet('fontSizes.11')
36px
Aa
fontSizes.12
React: themeGet('fontSizes.12')
47px
Aa
fontSizes.13
React: themeGet('fontSizes.13')
62px

Monday

monday--Colors

DemoToken nameCodeFigma usageDescriptionValue
elevation.surface.default.[default]
React: themeGet('colors.elevation.surface.default.[default]')
CSS: --fk-monday-surface
elevation/surface/default/defaultUse as the primary background for the UI. Reference: --color-snow_white, --primary-background-color, --secondary-background-color, --modal-background-color, --dialog-background-color, --primary-background-color-rgb, --secondary-background-color-rgb#FFFFFF
elevation.surface.default.hovered
React: themeGet('colors.elevation.surface.default.hovered')
CSS: --fk-monday-surface-hovered
elevation/surface/default/hoveredHovered state of elevation.surface. Reference: --surfce-color#ECEFF8
elevation.surface.default.pressed
React: themeGet('colors.elevation.surface.default.pressed')
CSS: --fk-monday-surface-pressed
elevation/surface/default/pressedPressed state of elevation.surface. Reference: --color-ui_grey, --primary-background-hover-color, --primary-background-hover-on-secondary-color#DCDFEC
elevation.surface.sunken
React: themeGet('colors.elevation.surface.sunken')
CSS: --fk-monday-surface-sunken
elevation/surface/sunkenPressed state of elevation.surface. Reference: --color-riverstone_gray, --grey-background-color, --allgrey-background-color, --dark-background-color, --dark-background-on-secondary-color#F6F7FB
elevation.surface.raised.default
React: themeGet('colors.elevation.surface.raised.default')
CSS: --fk-monday-surface-raised
elevation/surface/raised/defaultUse for the background of raised cards, such as cards on a Kanban board. Combine with elevation.shadow.raised. Reference: --color-snow_white, --primary-background-color, --secondary-background-color, --modal-background-color, --dialog-background-color, --primary-background-color-rgb, --secondary-background-color-rgb#FFFFFF
elevation.surface.raised.hovered
React: themeGet('colors.elevation.surface.raised.hovered')
CSS: --fk-monday-surface-raised-hovered
elevation/surface/raised/hoveredHovered state of elevation.surface.raised. Reference: --color-riverstone_gray, --grey-background-color, --allgrey-background-color, --dark-background-color, --dark-background-on-secondary-color#F6F7FB
elevation.surface.raised.pressed
React: themeGet('colors.elevation.surface.raised.pressed')
CSS: --fk-monday-surface-raised-pressed
elevation/surface/raised/pressedPressed state of elevation.surface.raised. Reference: --surfce-color#ECEFF8
elevation.surface.overlay.default
React: themeGet('colors.elevation.surface.overlay.default')
CSS: --fk-monday-surface-overlay
elevation/surface/overlay/defaultUse for the background of raised cards, such as cards on a Kanban board. Combine with elevation.shadow.raised. Reference: --color-snow_white, --primary-background-color, --secondary-background-color, --modal-background-color, --dialog-background-color, --primary-background-color-rgb, --secondary-background-color-rgb#FFFFFF
elevation.surface.overlay.hovered
React: themeGet('colors.elevation.surface.overlay.hovered')
CSS: --fk-monday-surface-overlay-hovered
elevation/surface/overlay/hoveredHovered state of elevation.surface.raised. Reference: --surfce-color#ECEFF8
elevation.surface.overlay.pressed
React: themeGet('colors.elevation.surface.overlay.pressed')
CSS: --fk-monday-surface-overlay-pressed
elevation/surface/overlay/pressedPressed state of elevation.surface.raised. Reference: --color-ui_grey, --primary-background-hover-color, --primary-background-hover-on-secondary-color#DCDFEC
elevation.shadow.overflow.spread
React: themeGet('colors.elevation.shadow.overflow.spread')
CSS: --fk-monday-shadow-overflow-spread
elevation/shadow/overflow/spreadUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.#1f222d0f
elevation.shadow.overflow.perimeter
React: themeGet('colors.elevation.shadow.overflow.perimeter')
CSS: --fk-monday-shadow-overflow-perimeter
elevation/shadow/overflow/perimeterUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.#1f222d24
border.default
React: themeGet('colors.border.default')
CSS: --fk-monday-border
border/defaultUse to visually group or separate UI elements, such as flat cards or side panel dividers. Reference: --ui-border-color, --ui-border-on-secondary-color, --color-wolf_gray#C3C6D4
border.selected
React: themeGet('colors.border.selected')
CSS: --fk-monday-border-selected
border/selectedUse for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color#0073EA
border.focused
React: themeGet('colors.border.focused')
CSS: --fk-monday-border-focused
border/focusedUse for focus rings of elements in a focus state.#1E89FA
border.subtle
React: themeGet('colors.border.subtle')
CSS: --fk-monday-border-subtle
border/subtleUse for secondary borders to visually group or separate UI elements, such as flat cards or side panel dividers.#ECEFF8
border.input
React: themeGet('colors.border.input')
CSS: --fk-monday-border-input
border/inputUse for borders of form UI elements, such as text fields, checkboxes, and radio buttons. Reference: --ui-border-color, --ui-border-on-secondary-color, --color-wolf_gray#C3C6D4
border.inverse
React: themeGet('colors.border.inverse')
CSS: --fk-monday-border-inverse
border/inverseUse for borders on bold backgrounds. Reference: --color-snow_white#FFFFFF
border.disabled
React: themeGet('colors.border.disabled')
CSS: --fk-monday-border-disabled
border/disabledUse for borders of elements in a disabled state.#1f222d0f
border.brand
React: themeGet('colors.border.brand')
CSS: --fk-monday-border-brand
border/brandUse for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color#0073EA
border.danger
React: themeGet('colors.border.danger')
CSS: --fk-monday-border-danger
border/dangerUse for borders communicating critical information, such as the borders on invalid text fields. Reference: --color-error, --negative-color#D83A52
border.warning
React: themeGet('colors.border.warning')
CSS: --fk-monday-border-warning
border/warningUse for borders communicating caution. Reference: --warning-color-hover#EAAA15
border.success
React: themeGet('colors.border.success')
CSS: --fk-monday-border-success
border/successUse for borders communicating a favourable outcome, such as the borders on validated text fields. Reference: --color-success, --positive-color#00854D
border.discovery
React: themeGet('colors.border.discovery')
CSS: --fk-monday-border-discovery
border/discoveryUse for borders communicating change or something new, such as the borders in onboarding spotlights. Reference: --shareable-color, --color-purple, --color-amethyst#A25DDC
border.information
React: themeGet('colors.border.information')
CSS: --fk-monday-border-information
border/informationUse for borders communicating information or something in-progress. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color#0073EA
border.accent.blue
React: themeGet('colors.border.accent.blue')
CSS: --fk-monday-border-accent-blue
border/accent/blueUse for blue borders on non-bold backgrounds when there is no meaning tied to the color. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color#0073EA
border.accent.red
React: themeGet('colors.border.accent.red')
CSS: --fk-monday-border-accent-red
border/accent/redUse for red borders on non-bold backgrounds when there is no meaning tied to the color. Reference: --color-error, --negative-color#D83A52
border.accent.orange
React: themeGet('colors.border.accent.orange')
CSS: --fk-monday-border-accent-orange
border/accent/orangeUse for orange borders on non-bold backgrounds when there is no meaning tied to the color. Reference: --warning-color-hover#EAAA15
border.accent.yellow
React: themeGet('colors.border.accent.yellow')
CSS: --fk-monday-border-accent-yellow
border/accent/yellowUse for yellow borders on non-bold backgrounds when there is no meaning tied to the color.#F5C300
border.accent.green
React: themeGet('colors.border.accent.green')
CSS: --fk-monday-border-accent-green
border/accent/greenUse for green borders on non-bold backgrounds when there is no meaning tied to the color. Reference: --color-success, --positive-color#00854D
border.accent.magenta
React: themeGet('colors.border.accent.magenta')
CSS: --fk-monday-border-accent-magenta
border/accent/magentaUse for green borders on non-bold backgrounds when there is no meaning tied to the color. Reference: --color-sofia_pink, --color-dark-pink#FF158A
border.accent.purple
React: themeGet('colors.border.accent.purple')
CSS: --fk-monday-border-accent-purple
border/accent/purpleUse for purple borders on non-bold backgrounds when there is no meaning tied to the color.#904ACF
border.accent.teal
React: themeGet('colors.border.accent.teal')
CSS: --fk-monday-border-accent-teal
border/accent/tealUse for purple borders on non-bold backgrounds when there is no meaning tied to the color.#2696A6
border.accent.gray
React: themeGet('colors.border.accent.gray')
CSS: --fk-monday-border-accent-gray
border/accent/grayUse for borders on non-bold gray accent backgrounds.#878CA1
border.table.default
React: themeGet('colors.border.table.default')
CSS: --fk-monday-border-table
border/table/defaultUse for the default borders in table elements, such as the visual divider between table headers or footers and table content.#1f222d24
background.accent.blue.subtlest
React: themeGet('colors.background.accent.blue.subtlest')
CSS: --fk-monday-background-accent-blue-subtlest
background/accent/blue/subtlestUse for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Reference: --color-highlight_blue, --primary-selected-color, --brand-selected-color, --primary-selected-on-secondary-color, --label-background-color, --label-background-on-secondary-color, --primary-selected-color-rgb#CCE5FF
background.accent.blue.subtler
React: themeGet('colors.background.accent.blue.subtler')
CSS: --fk-monday-background-accent-blue-subtler
background/accent/blue/subtlerUse for blue backgrounds when there is no meaning tied to the color, such as colored tags. Reference: --primary-selected-hover-color, --brand-selected-hover-color#AED4FC
background.accent.blue.subtle
React: themeGet('colors.background.accent.blue.subtle')
CSS: --fk-monday-background-accent-blue-subtle
background/accent/blue/subtleUse for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.#1E89FA
background.accent.blue.bolder
React: themeGet('colors.background.accent.blue.bolder')
CSS: --fk-monday-background-accent-blue-bolder
background/accent/blue/bolderUse for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#1F76DB
background.accent.red.subtlest
React: themeGet('colors.background.accent.red.subtlest')
CSS: --fk-monday-background-accent-red-subtlest
background/accent/red/subtlestUse for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#FBE9EC
background.accent.red.subtler
React: themeGet('colors.background.accent.red.subtler')
CSS: --fk-monday-background-accent-red-subtler
background/accent/red/subtlerUse for red backgrounds when there is no meaning tied to the color, such as colored tags. Reference: --color-error-highlight, --negative-color-selected#F4C3CB
background.accent.red.subtle
React: themeGet('colors.background.accent.red.subtle')
CSS: --fk-monday-background-accent-red-subtle
background/accent/red/subtleUse for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.#E06C7D
background.accent.red.bolder
React: themeGet('colors.background.accent.red.bolder')
CSS: --fk-monday-background-accent-red-bolder
background/accent/red/bolderUse for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Reference: --color-error, --negative-color#D83A52
background.accent.orange.subtlest
React: themeGet('colors.background.accent.orange.subtlest')
CSS: --fk-monday-background-accent-orange-subtlest
background/accent/orange/subtlestUse for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#FDF4CE
background.accent.orange.subtler
React: themeGet('colors.background.accent.orange.subtler')
CSS: --fk-monday-background-accent-orange-subtler
background/accent/orange/subtlerUse for orange backgrounds when there is no meaning tied to the color, such as colored tags. Reference: --warning-color-selected#FCEBA1
background.accent.orange.subtle
React: themeGet('colors.background.accent.orange.subtle')
CSS: --fk-monday-background-accent-orange-subtle
background/accent/orange/subtleUse for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.#F5C238
background.accent.orange.bolder
React: themeGet('colors.background.accent.orange.bolder')
CSS: --fk-monday-background-accent-orange-bolder
background/accent/orange/bolderUse for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#C58F12
background.accent.yellow.subtlest
React: themeGet('colors.background.accent.yellow.subtlest')
CSS: --fk-monday-background-accent-yellow-subtlest
background/accent/yellow/subtlestUse for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#FFEFB2
background.accent.yellow.subtler
React: themeGet('colors.background.accent.yellow.subtler')
CSS: --fk-monday-background-accent-yellow-subtler
background/accent/yellow/subtlerUse for yellow backgrounds when there is no meaning tied to the color, such as colored tags. Reference: --color-egg_yolk-selected#FFE580
background.accent.yellow.subtle
React: themeGet('colors.background.accent.yellow.subtle')
CSS: --fk-monday-background-accent-yellow-subtle
background/accent/yellow/subtleUse for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.#FFD329
background.accent.yellow.bolder
React: themeGet('colors.background.accent.yellow.bolder')
CSS: --fk-monday-background-accent-yellow-bolder
background/accent/yellow/bolderUse for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#DBAF00
background.accent.green.subtlest
React: themeGet('colors.background.accent.green.subtlest')
CSS: --fk-monday-background-accent-green-subtlest
background/accent/green/subtlestUse for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#D6EBDF
background.accent.green.subtler
React: themeGet('colors.background.accent.green.subtler')
CSS: --fk-monday-background-accent-green-subtler
background/accent/green/subtlerUse for green backgrounds when there is no meaning tied to the color, such as colored tags. Reference: --color-success-highlight, --positive-color-selected#BBDBC9
background.accent.green.subtle
React: themeGet('colors.background.accent.green.subtle')
CSS: --fk-monday-background-accent-green-subtle
background/accent/green/subtleUse for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.#89BDA0
background.accent.green.bolder
React: themeGet('colors.background.accent.green.bolder')
CSS: --fk-monday-background-accent-green-bolder
background/accent/green/bolderUse for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#007A41
background.accent.purple.subtlest
React: themeGet('colors.background.accent.purple.subtlest')
CSS: --fk-monday-background-accent-purple-subtlest
background/accent/purple/subtlestUse for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#F3EAFA
background.accent.purple.subtler
React: themeGet('colors.background.accent.purple.subtler')
CSS: --fk-monday-background-accent-purple-subtler
background/accent/purple/subtlerUse for purple backgrounds when there is no meaning tied to the color, such as colored tags.#E7D5F6
background.accent.purple.subtle
React: themeGet('colors.background.accent.purple.subtle')
CSS: --fk-monday-background-accent-purple-subtle
background/accent/purple/subtleUse for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.#B781E4
background.accent.purple.bolder
React: themeGet('colors.background.accent.purple.bolder')
CSS: --fk-monday-background-accent-purple-bolder
background/accent/purple/bolderUse for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Reference: --color-purple-hover#8050AB
background.accent.teal.subtlest
React: themeGet('colors.background.accent.teal.subtlest')
CSS: --fk-monday-background-accent-teal-subtlest
background/accent/teal/subtlestUse for teal backgrounds when there is no meaning tied to the color. Reserved for when