Appfire
appfire--Colors
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
text.brand | React: themeGet('colors.text.brand') | text/brand | Use for text that reinforces our brand. | #397BFF | |
text.inverse | React: themeGet('colors.text.inverse') | text/inverse | Use for text on bold backgrounds. | #090A0F | |
text.default | React: themeGet('colors.text.default') | text/default | Use for primary text, such as body copy, sentence case headers, and buttons. | #FFFFFF | |
text.subtle.default | React: themeGet('colors.text.subtle.default') | text/subtle/default | Use 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/inverse | Use 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/default | Use 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/inverse | Use 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/default | Use for critical text, such as input field error messaging. | #F44343 | |
text.danger.inverse | React: themeGet('colors.text.danger.inverse') | text/danger/inverse | Use 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/default | Use 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/inverse | Use 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/disabled | Use for text in a disabled state. | #5C5B5E | |
text.accent.blue.default | React: themeGet('colors.text.accent.blue.default') | text/accent/blue/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/brand | Use for icons that reinforce our brand. | #397BFF | |
icon.inverse | React: themeGet('colors.icon.inverse') | icon/inverse | Use for icons on bold backgrounds. | #121213 | |
icon.danger.default | React: themeGet('colors.icon.danger.default') | icon/danger/default | Use for icons communicating critical information, such as those used in error handing. | #F44343 | |
icon.danger.inverse | React: themeGet('colors.icon.danger.inverse') | icon/danger/inverse | Use 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/default | Use 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/inverse | Use 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/disabled | Use for icons in a disabled state. | #8A888E | |
icon.accent.blue.default | React: themeGet('colors.icon.accent.blue.default') | icon/accent/blue/default | Use 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/bolder | Use on bold blue accent backgrounds. | #B0CAFF | |
icon.accent.red.default | React: themeGet('colors.icon.accent.red.default') | icon/accent/red/default | Use 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/bolder | Use on bold red accent backgrounds. | #FEECEC | |
icon.accent.orange.default | React: themeGet('colors.icon.accent.orange.default') | icon/accent/orange/default | Use 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/bolder | Use on bold orange accent backgrounds. | #FFD6C4 | |
icon.accent.yellow.default | React: themeGet('colors.icon.accent.yellow.default') | icon/accent/yellow/default | Use 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/bolder | Use on bold yellow accent backgrounds. | #FFFBE2 | |
icon.accent.green.default | React: themeGet('colors.icon.accent.green.default') | icon/accent/green/default | Use 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/bolder | Use on bold green accent backgrounds. | #B7DFB9 | |
icon.accent.purple.default | React: themeGet('colors.icon.accent.purple.default') | icon/accent/purple/default | Use 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/bolder | Use on bold purple accent backgrounds. | #DDCBFF | |
icon.accent.teal.default | React: themeGet('colors.icon.accent.teal.default') | icon/accent/teal/default | Use 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/bolder | Use on bold teal accent backgrounds. | #D1FEF9 | |
icon.accent.gray.default | React: themeGet('colors.icon.accent.gray.default') | icon/accent/gray/default | Use 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/bolder | Use for text on gray subtle accent backgrounds. | #CFCCD4 | |
icon.default | React: themeGet('colors.icon.default') | icon/default | Use for icon-only buttons, or icons paired with color.text.default | #FFFFFF | |
border.brand | React: themeGet('colors.border.brand') | border/brand | Use 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/inverse | Use for borders on bold backgrounds. | #090A0F | |
border.focused.default | React: themeGet('colors.border.focused.default') | border/focused/default | Use for focus rings of elements in a focus state. | #6195FF | |
border.focused.inverse | React: themeGet('colors.border.focused.inverse') | border/focused/inverse | Use for focus rings of elements in a focus state. | #173166 | |
border.danger.default | React: themeGet('colors.border.danger.default') | border/danger/default | Use 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/inverse | Use 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/default | Use 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/inverse | Use 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/default | Use 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/hovered | Hovered state for border.input | #397BFF | |
border.disabled | React: themeGet('colors.border.disabled') | border/disabled | Use for borders of elements in a disabled state. | #b8b6bd78 | |
border.default | React: themeGet('colors.border.default') | border/default | Use 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/blue | Use 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/red | Use 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/orange | Use 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/yellow | Use 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/green | Use 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/purple | Use 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/teal | Use 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/gray | Use for borders on non-bold gray accent backgrounds. | #8A888E | |
border.subtle.default | React: themeGet('colors.border.subtle.default') | border/subtle/default | undefined | #5C5B5E | |
border.subtle.inverse | React: themeGet('colors.border.subtle.inverse') | border/subtle/inverse | undefined | #CFCCD4 | |
background.brand.bold.default | React: themeGet('colors.background.brand.bold.default') | background/brand/bold/default | Use 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/hovered | Hovered state of color.background.brand.bold | #2256C5 | |
background.brand.bold.pressed | React: themeGet('colors.background.brand.bold.pressed') | background/brand/bold/pressed | Pressed state of color.background.brand.bold | #224A99 | |
background.brand.default | React: themeGet('colors.background.brand.default') | background/brand/default | Use for the background of elements used to reinforce our brand. | #336FE6 | |
background.disabled | React: themeGet('colors.background.disabled') | background/disabled | Use for backgrounds of elements in a disabled state. | #b8b6bd1a | |
background.success.default | React: themeGet('colors.background.success.default') | background/success/default | Use for backgrounds communicating a favourable outcome, such as success section messages. | #0F2310 | |
background.success.inverse | React: themeGet('colors.background.success.inverse') | background/success/inverse | Use 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/default | Use for backgrounds communicating critical information, such as in error messages. | #310E0E | |
background.danger.inverse | React: themeGet('colors.background.danger.inverse') | background/danger/inverse | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/orangeYellow | Use for accent gradients from orange to yellow | linear-gradient(90deg, #FF996C 0%, #FFF6B6 100%) | |
background.accent.gradient.yellowPurple | React: themeGet('colors.background.accent.gradient.yellowPurple') | background/accent/gradient/yellowPurple | Uae for accent gradients from yellow to purple | linear-gradient(90deg, #FFF6B6 0%, #A97DFF 100%) | |
background.accent.gradient.bluePurple | React: themeGet('colors.background.accent.gradient.bluePurple') | background/accent/gradient/bluePurple | Uae for accent gradients from blue to purple | linear-gradient(90deg, #397BFF 0%, #A97DFF 100%) | |
background.accent.gradient.yellowBlue | React: themeGet('colors.background.accent.gradient.yellowBlue') | background/accent/gradient/yellowBlue | Uae for accent gradients from yellow to blue | linear-gradient(90deg, #FFF6B6 0%, #397BFF 100%) | |
background.accent.gradient.orangeTeal | React: themeGet('colors.background.accent.gradient.orangeTeal') | background/accent/gradient/orangeTeal | Use for accent gradients from orange to teal | linear-gradient(90deg, #FF996C 0%, #8DFCF1 99%) | |
background.accent.gradient.orangePurple | React: themeGet('colors.background.accent.gradient.orangePurple') | background/accent/gradient/orangePurple | Uae for accent gradients from orange to purple | linear-gradient(90deg, #FF996C 0%, #A97DFF 100%) | |
background.accent.gradient.blueOrange | React: themeGet('colors.background.accent.gradient.blueOrange') | background/accent/gradient/blueOrange | Uae for accent gradients from blue to orange | linear-gradient(90deg, #397BFF 0%, #FF996C 99%) | |
background.accent.gradient.purpleTeal | React: themeGet('colors.background.accent.gradient.purpleTeal') | background/accent/gradient/purpleTeal | Uae for accent gradients from purple to teal | linear-gradient(90deg, #A97DFF 0%, #8DFCF1 99%) | |
background.accent.gradient.tealBlue | React: themeGet('colors.background.accent.gradient.tealBlue') | background/accent/gradient/tealBlue | Uae for accent gradients from teal to blue | linear-gradient(90deg, #8DFCF1 0%, #397BFF 100%) | |
background.accent.gradient.tealYellow | React: themeGet('colors.background.accent.gradient.tealYellow') | background/accent/gradient/tealYellow | Uae for accent gradients from teal to yellow | linear-gradient(90deg, #8DFCF1 0%, #FFF6B6 100%) | |
surface.default | React: themeGet('colors.surface.default') | surface/default | Use as the primary background for the UI. | #090A0F | |
surface.inverse | React: themeGet('colors.surface.inverse') | surface/inverse | Use 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/default | Use 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/hovered | Use 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/pressed | Use 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/inverse | undefined | #FFFFFF | |
elevation.surface.default | React: themeGet('colors.elevation.surface.default') | elevation/surface/default | undefined | #090A0F | |
elevation.surface.raised.default | React: themeGet('colors.elevation.surface.raised.default') | elevation/surface/raised/default | Use 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/hovered | Use 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/pressed | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #2E2D2F |
Atlassian
atlassian--Colors
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
text.default | React: themeGet('colors.text.default')CSS: --ds-text | text/default | Use 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/subtle | Use 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/subtlest | Use 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/disabled | Use for text in a disabled state. | #8590A2 | |
text.inverse | React: themeGet('colors.text.inverse')CSS: --ds-text-inverse | text/inverse | Use for text on bold backgrounds. | #FFFFFF | |
text.brand | React: themeGet('colors.text.brand')CSS: --ds-text-brand | text/brand | Use for text that reinforces our brand. | #0C66E4 | |
text.selected | React: themeGet('colors.text.selected')CSS: --ds-text-selected | text/selected | Use 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/danger | Use for critical text, such as input field error messaging. | #AE2A19 | |
text.success | React: themeGet('colors.text.success')CSS: --ds-text-success | text/success | Use 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/discovery | Use 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/information | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use 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/default | Use 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/bolder | Use on bold lime accent backgrounds. | #37471F | |
text.warning.default | React: themeGet('colors.text.warning.default')CSS: --ds-text-warning | text/warning/default | Use 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/inverse | Use for text when on bold warning backgrounds. | #172B4D | |
icon.default | React: themeGet('colors.icon.default')CSS: --ds-icon | icon/default | Use for icon-only buttons, or icons paired with color.text | #44546F | |
icon.subtle | React: themeGet('colors.icon.subtle')CSS: --ds-icon-subtle | icon/subtle | Use for icons paired with color.text.subtle | #626F86 | |
icon.inverse | React: themeGet('colors.icon.inverse')CSS: --ds-icon-inverse | icon/inverse | Use for icons on bold backgrounds. | #FFFFFF | |
icon.disabled | React: themeGet('colors.icon.disabled')CSS: --ds-icon-disabled | icon/disabled | Use for icons in a disabled state. | #8590A2 | |
icon.brand | React: themeGet('colors.icon.brand')CSS: --ds-icon-brand | icon/brand | Use for icons that reinforce our brand. | #0C66E4 | |
icon.selected | React: themeGet('colors.icon.selected')CSS: --ds-icon-selected | icon/selected | Use 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/danger | Use 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/success | Use 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/discovery | Use 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/information | Use 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/blue | Use 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/red | Use 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/orange | Use 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/yellow | Use 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/green | Use 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/purple | Use 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/teal | Use 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/magenta | Use 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/gray | Use 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/lime | Use 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/default | Use 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/inverse | Use for icons when on bold warning backgrounds. | #172B4D | |
border.default | React: themeGet('colors.border.default')CSS: --ds-border | border/default | Use 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/inverse | Use for borders on bold backgrounds. | #FFFFFF | |
border.focused | React: themeGet('colors.border.focused')CSS: --ds-border-focused | border/focused | Use for focus rings of elements in a focus state. | #388BFF | |
border.input | React: themeGet('colors.border.input')CSS: --ds-border-input | border/input | Use 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/disabled | Use for borders of elements in a disabled state. | #091e420f | |
border.brand | React: themeGet('colors.border.brand')CSS: --ds-border-brand | border/brand | Use 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/selected | Use 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/danger | Use 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/warning | Use for borders communicating caution. | #D97008 | |
border.success | React: themeGet('colors.border.success')CSS: --ds-border-success | border/success | Use 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/discovery | Use 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/information | Use for borders communicating information or something in-progress. | #1D7AFC | |
border.subtle | React: themeGet('colors.border.subtle')CSS: --ds-border-subtle | border/subtle | Use 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/blue | Use 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/red | Use 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/orange | Use 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/yellow | Use 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/green | Use 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/purple | Use 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/teal | Use 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/magenta | Use 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/gray | Use for borders on non-bold gray accent backgrounds. | #758195 | |
border.table.default | React: themeGet('colors.border.table.default')CSS: --ds-border-table | border/table/default | Use 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/disabled | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/default | Use 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/hovered | Use 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/pressed | Use 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/default | Use 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/hovered | Hovered state for color.background.input | #F7F8F9 | |
background.input.pressed | React: themeGet('colors.background.input.pressed')CSS: --ds-background-input-pressed | background/input/pressed | Pressed state for color.background.input | #FFFFFF | |
background.neutral.default.[default] | React: themeGet('colors.background.neutral.default.[default]')CSS: --ds-background-neutral | background/neutral/default/default | The 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | A 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | A 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | A 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | A 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hover 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/pressed | Pressed 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/default | A 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | A 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/hovered | Hovered 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/pressed | Pressed state of color.background.information.bold | #09326C | |
blanket.default | React: themeGet('colors.blanket.default')CSS: --ds-blanket | blanket/default | Use for the screen overlay that appears with modal dialogs | #091e427d | |
blanket.selected | React: themeGet('colors.blanket.selected')CSS: --ds-blanket-selected | blanket/selected | Use 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/danger | Use 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/hovered | Use 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/pressed | Use 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/default | Use for skeleton loading states | #091e420f | |
skeleton.subtle | React: themeGet('colors.skeleton.subtle')CSS: --ds-skeleton-subtle | skeleton/subtle | Use for the pulse or shimmer effect in skeleton loading states | #091e4208 | |
link.default | React: themeGet('colors.link.default')CSS: --ds-link | link/default | Use 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/pressed | Use for links in a pressed state. | #0055CC | |
link.visited | React: themeGet('colors.link.visited')CSS: --ds-link-visited | link/visited | Use for links in a visited state. | #5E4DB2 | |
chart.brand.default | React: themeGet('colors.chart.brand.default')CSS: --ds-chart-brand | chart/brand/default | Our 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/hovered | Hovered state of color.chart.brand. | #0C66E4 | |
chart.neutral.default | React: themeGet('colors.chart.neutral.default')CSS: --ds-chart-neutral | chart/neutral/default | A 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/hovered | Hovered state of color.chart.neutral. | #758195 | |
chart.success.default.[default] | React: themeGet('colors.chart.success.default.[default]')CSS: --ds-chart-success | chart/success/default/default | For 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/hovered | Hovered 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/default | A 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | A 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | A 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | A 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | A 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For 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/hovered | Hovered 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/default | For data visualisation only. | #388BFF | |
chart.blue.bold.hovered | React: themeGet('colors.chart.blue.bold.hovered')CSS: --ds-chart-blue-bold-hovered | chart/blue/bold/hovered | Hovered 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/default | For data visualisation only. | #1D7AFC | |
chart.blue.bolder.hovered | React: themeGet('colors.chart.blue.bolder.hovered')CSS: --ds-chart-blue-bolder-hovered | chart/blue/bolder/hovered | Hovered 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/default | For data visualisation only. | #0055CC | |
chart.blue.boldest.hovered | React: themeGet('colors.chart.blue.boldest.hovered')CSS: --ds-chart-blue-boldest-hovered | chart/blue/boldest/hovered | Hovered 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/default | For data visualisation only. | #EF5C48 | |
chart.red.bold.hovered | React: themeGet('colors.chart.red.bold.hovered')CSS: --ds-chart-red-bold-hovered | chart/red/bold/hovered | Hovered 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/default | For data visualisation only. | #E34935 | |
chart.red.bolder.hovered | React: themeGet('colors.chart.red.bolder.hovered')CSS: --ds-chart-red-bolder-hovered | chart/red/bolder/hovered | Hovered 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/default | For data visualisation only. | #AE2A19 | |
chart.red.boldest.hovered | React: themeGet('colors.chart.red.boldest.hovered')CSS: --ds-chart-red-boldest-hovered | chart/red/boldest/hovered | Hovered 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/default | For data visualisation only. | #D97008 | |
chart.orange.bold.hovered | React: themeGet('colors.chart.orange.bold.hovered')CSS: --ds-chart-orange-bold-hovered | chart/orange/bold/hovered | Hovered 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/default | For data visualisation only. | #B65C02 | |
chart.orange.bolder.hovered | React: themeGet('colors.chart.orange.bolder.hovered')CSS: --ds-chart-orange-bolder-hovered | chart/orange/bolder/hovered | Hovered 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/default | For data visualisation only. | #974F0C | |
chart.orange.boldest.hovered | React: themeGet('colors.chart.orange.boldest.hovered')CSS: --ds-chart-orange-boldest-hovered | chart/orange/boldest/hovered | Hovered 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/default | For data visualisation only. | #B38600 | |
chart.yellow.bold.hovered | React: themeGet('colors.chart.yellow.bold.hovered')CSS: --ds-chart-yellow-bold-hovered | chart/yellow/bold/hovered | Hovered 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/default | For data visualisation only. | #946F00 | |
chart.yellow.bolder.hovered | React: themeGet('colors.chart.yellow.bolder.hovered')CSS: --ds-chart-yellow-bolder-hovered | chart/yellow/bolder/hovered | Hovered 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/default | For data visualisation only. | #7F5F01 | |
chart.yellow.boldest.hovered | React: themeGet('colors.chart.yellow.boldest.hovered')CSS: --ds-chart-yellow-boldest-hovered | chart/yellow/boldest/hovered | Hovered 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/default | For data visualisation only. | #22A06B | |
chart.green.bold.hovered | React: themeGet('colors.chart.green.bold.hovered')CSS: --ds-chart-green-bold-hovered | chart/green/bold/hovered | Hovered 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/default | For data visualisation only. | #1F845A | |
chart.green.bolder.hovered | React: themeGet('colors.chart.green.bolder.hovered')CSS: --ds-chart-green-bolder-hovered | chart/green/bolder/hovered | Hovered 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/default | For data visualisation only. | #216E4E | |
chart.green.boldest.hovered | React: themeGet('colors.chart.green.boldest.hovered')CSS: --ds-chart-green-boldest-hovered | chart/green/boldest/hovered | Hovered 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/default | For data visualisation only. | #1D9AAA | |
chart.teal.bold.hovered | React: themeGet('colors.chart.teal.bold.hovered')CSS: --ds-chart-teal-bold-hovered | chart/teal/bold/hovered | Hovered 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/default | For data visualisation only. | #1D7F8C | |
chart.teal.bolder.hovered | React: themeGet('colors.chart.teal.bolder.hovered')CSS: --ds-chart-teal-bolder-hovered | chart/teal/bolder/hovered | Hovered 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/default | For data visualisation only. | #206B74 | |
chart.teal.boldest.hovered | React: themeGet('colors.chart.teal.boldest.hovered')CSS: --ds-chart-teal-boldest-hovered | chart/teal/boldest/hovered | Hovered 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/default | For data visualisation only. | #8F7EE7 | |
chart.purple.bold.hovered | React: themeGet('colors.chart.purple.bold.hovered')CSS: --ds-chart-purple-bold-hovered | chart/purple/bold/hovered | Hovered 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/default | For data visualisation only. | #8270DB | |
chart.purple.bolder.hovered | React: themeGet('colors.chart.purple.bolder.hovered')CSS: --ds-chart-purple-bolder-hovered | chart/purple/bolder/hovered | Hovered 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/default | For data visualisation only. | #5E4DB2 | |
chart.purple.boldest.hovered | React: themeGet('colors.chart.purple.boldest.hovered')CSS: --ds-chart-purple-boldest-hovered | chart/purple/boldest/hovered | Hovered 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/default | For data visualisation only. | #DA62AC | |
chart.magenta.bold.hovered | React: themeGet('colors.chart.magenta.bold.hovered')CSS: --ds-chart-magenta-bold-hovered | chart/magenta/bold/hovered | Hovered 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/default | For data visualisation only. | #CD519D | |
chart.magenta.bolder.hovered | React: themeGet('colors.chart.magenta.bolder.hovered')CSS: --ds-chart-magenta-bolder-hovered | chart/magenta/bolder/hovered | Hovered 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/default | For data visualisation only. | #943D73 | |
chart.magenta.boldest.hovered | React: themeGet('colors.chart.magenta.boldest.hovered')CSS: --ds-chart-magenta-boldest-hovered | chart/magenta/boldest/hovered | Hovered 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/default | For data visualisation only. | #8590A2 | |
chart.gray.bold.hovered | React: themeGet('colors.chart.gray.bold.hovered')CSS: --ds-chart-gray-bold-hovered | chart/gray/bold/hovered | Hovered 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/default | For data visualisation only. | #758195 | |
chart.gray.bolder.hovered | React: themeGet('colors.chart.gray.bolder.hovered')CSS: --ds-chart-gray-bolder-hovered | chart/gray/bolder/hovered | Hovered 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/default | For data visualisation only. | #44546F | |
chart.gray.boldest.hovered | React: themeGet('colors.chart.gray.boldest.hovered')CSS: --ds-chart-gray-boldest-hovered | chart/gray/boldest/hovered | Hovered 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/default | For data visualisation only. | #6A9A23 | |
chart.lime.bold.hovered | React: themeGet('colors.chart.lime.bold.hovered')CSS: --ds-chart-lime-bold-hovered | chart/lime/bold/hovered | Hovered 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/default | For data visualisation only. | #5B7F24 | |
chart.lime.bolder.hovered | React: themeGet('colors.chart.lime.bolder.hovered')CSS: --ds-chart-lime-bolder-hovered | chart/lime/bolder/hovered | Hovered 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/default | For data visualisation only. | #4C6B1F | |
chart.lime.boldest.hovered | React: themeGet('colors.chart.lime.boldest.hovered')CSS: --ds-chart-lime-boldest-hovered | chart/lime/boldest/hovered | Hovered state of color.chart.lime.boldest. | #37471F | |
elevation.surface.default.[default] | React: themeGet('colors.elevation.surface.default.[default]')CSS: --ds-surface | elevation/surface/default/default | Use 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/hovered | Hovered state of elevation.surface | #F1F2F4 | |
elevation.surface.default.pressed | React: themeGet('colors.elevation.surface.default.pressed')CSS: --ds-surface-pressed | elevation/surface/default/pressed | Pressed state of elevation.surface | #DCDFE4 | |
elevation.surface.sunken | React: themeGet('colors.elevation.surface.sunken')CSS: --ds-surface-sunken | elevation/surface/sunken | A 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/default | Use 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/hovered | Use 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/pressed | Use 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/spread | Use 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/perimeter | Use 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
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
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
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
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
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
| 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
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
elevation.surface.default.[default] | React: themeGet('colors.elevation.surface.default.[default]')CSS: --fk-monday-surface | elevation/surface/default/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/sunken | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/default | Use 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/hovered | Hovered 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/pressed | Pressed 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/spread | Use 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/perimeter | Use 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/default | Use 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/selected | Use 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/focused | Use for focus rings of elements in a focus state. | #1E89FA | |
border.subtle | React: themeGet('colors.border.subtle')CSS: --fk-monday-border-subtle | border/subtle | Use 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/input | Use 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/inverse | Use for borders on bold backgrounds. Reference: --color-snow_white | #FFFFFF | |
border.disabled | React: themeGet('colors.border.disabled')CSS: --fk-monday-border-disabled | border/disabled | Use for borders of elements in a disabled state. | #1f222d0f | |
border.brand | React: themeGet('colors.border.brand')CSS: --fk-monday-border-brand | border/brand | Use 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/danger | Use 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/warning | Use for borders communicating caution. Reference: --warning-color-hover | #EAAA15 | |
border.success | React: themeGet('colors.border.success')CSS: --fk-monday-border-success | border/success | Use 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/discovery | Use 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/information | Use 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/blue | Use 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/red | Use 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/orange | Use 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/yellow | Use 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/green | Use 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/magenta | Use 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/purple | Use 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/teal | Use 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/gray | Use 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/default | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use 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/subtler | Use 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/subtle | Use 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/bolder | Use 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/subtlest | Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #D6F2F5 | |
background.accent.teal.subtler | React: themeGet('colors.background.accent.teal.subtler')CSS: --fk-monday-background-accent-teal-subtler | background/accent/teal/subtler | Use for teal backgrounds when there is no meaning tied to the color, such as colored tags. | #C1EBF1 | |
background.accent.teal.subtle |