Appfire
appfire--Colors
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
text.brand | React: themeGet('text.brand')CSS: --text-brand | text/brand | Use for text that reinforces our brand. | #397bff | |
text.inverse | React: themeGet('text.inverse')CSS: --text-inverse | text/inverse | Use for text on bold backgrounds. | #090a0f | |
text.default | React: themeGet('text.default')CSS: --text | text/default | Use for primary text, such as body copy, sentence case headers, and buttons. | #ffffff | |
text.subtle.default | React: themeGet('text.subtle.default')CSS: --text-subtle | 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('text.subtle.inverse')CSS: --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('text.subtlest.default')CSS: --text-subtlest | text/subtlest/default | Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text. | #a19fa5 | |
text.subtlest.inverse | React: themeGet('text.subtlest.inverse')CSS: --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('text.danger.default')CSS: --text-danger | text/danger/default | Use for critical text, such as input field error messaging. | #f44343 | |
text.danger.inverse | React: themeGet('text.danger.inverse')CSS: --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('text.success.default')CSS: --text-success | text/success/default | Use for text to communicate a favourable outcome, such as input field success messaging. | #4caf50 | |
text.success.inverse | React: themeGet('text.success.inverse')CSS: --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('text.disabled')CSS: --text-disabled | text/disabled | Use for text in a disabled state. | #5c5b5e | |
text.accent.blue.default | React: themeGet('text.accent.blue.default')CSS: --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. | #397bff | |
text.accent.blue.bolder | React: themeGet('text.accent.blue.bolder')CSS: --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('text.accent.red.default')CSS: --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. | #f44343 | |
text.accent.red.bolder | React: themeGet('text.accent.red.bolder')CSS: --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('text.accent.orange.default')CSS: --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. | #ff996c | |
text.accent.orange.bolder | React: themeGet('text.accent.orange.bolder')CSS: --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('text.accent.yellow.default')CSS: --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. | #ffee70 | |
text.accent.yellow.bolder | React: themeGet('text.accent.yellow.bolder')CSS: --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('text.accent.green.default')CSS: --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. | #4caf50 | |
text.accent.green.bolder | React: themeGet('text.accent.green.bolder')CSS: --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('text.accent.purple.default')CSS: --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. | #9871e6 | |
text.accent.purple.bolder | React: themeGet('text.accent.purple.bolder')CSS: --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('text.accent.teal.default')CSS: --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. | #8dfcf1 | |
text.accent.teal.bolder | React: themeGet('text.accent.teal.bolder')CSS: --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('text.accent.gray.default')CSS: --text-accent-gray | text/accent/gray/default | Use for text on non-bold gray accent backgrounds, such as colored tags. | #8a888e | |
text.accent.gray.bolder | React: themeGet('text.accent.gray.bolder')CSS: --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('icon.brand')CSS: --icon-brand | icon/brand | Use for icons that reinforce our brand. | #397bff | |
icon.inverse | React: themeGet('icon.inverse')CSS: --icon-inverse | icon/inverse | Use for icons on bold backgrounds. | #121213 | |
icon.danger.default | React: themeGet('icon.danger.default')CSS: --icon-danger | icon/danger/default | Use for icons communicating critical information, such as those used in error handing. | #f44343 | |
icon.danger.inverse | React: themeGet('icon.danger.inverse')CSS: --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('icon.success.default')CSS: --icon-success | icon/success/default | Use for icons communicating a favourable outcome, such as those used in success section messages. | #4caf50 | |
icon.success.inverse | React: themeGet('icon.success.inverse')CSS: --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('icon.disabled')CSS: --icon-disabled | icon/disabled | Use for icons in a disabled state. | #8a888e | |
icon.accent.blue.default | React: themeGet('icon.accent.blue.default')CSS: --icon-accent-blue | 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('icon.accent.blue.bolder')CSS: --icon-accent-blue-bolder | icon/accent/blue/bolder | Use on bold blue accent backgrounds. | #b0caff | |
icon.accent.red.default | React: themeGet('icon.accent.red.default')CSS: --icon-accent-red | 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('icon.accent.red.bolder')CSS: --icon-accent-red-bolder | icon/accent/red/bolder | Use on bold red accent backgrounds. | #feecec | |
icon.accent.orange.default | React: themeGet('icon.accent.orange.default')CSS: --icon-accent-orange | 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('icon.accent.orange.bolder')CSS: --icon-accent-orange-bolder | icon/accent/orange/bolder | Use on bold orange accent backgrounds. | #ffd6c4 | |
icon.accent.yellow.default | React: themeGet('icon.accent.yellow.default')CSS: --icon-accent-yellow | 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('icon.accent.yellow.bolder')CSS: --icon-accent-yellow-bolder | icon/accent/yellow/bolder | Use on bold yellow accent backgrounds. | #fffbe2 | |
icon.accent.green.default | React: themeGet('icon.accent.green.default')CSS: --icon-accent-green | 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('icon.accent.green.bolder')CSS: --icon-accent-green-bolder | icon/accent/green/bolder | Use on bold green accent backgrounds. | #b7dfb9 | |
icon.accent.purple.default | React: themeGet('icon.accent.purple.default')CSS: --icon-accent-purple | 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('icon.accent.purple.bolder')CSS: --icon-accent-purple-bolder | icon/accent/purple/bolder | Use on bold purple accent backgrounds. | #ddcbff | |
icon.accent.teal.default | React: themeGet('icon.accent.teal.default')CSS: --icon-accent-teal | 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('icon.accent.teal.bolder')CSS: --icon-accent-teal-bolder | icon/accent/teal/bolder | Use on bold teal accent backgrounds. | #d1fef9 | |
icon.accent.gray.default | React: themeGet('icon.accent.gray.default')CSS: --icon-accent-gray | icon/accent/gray/default | Use for text on non-bold gray accent backgrounds, such as colored tags. | #5c5b5e | |
icon.accent.gray.bolder | React: themeGet('icon.accent.gray.bolder')CSS: --icon-accent-gray-bolder | icon/accent/gray/bolder | Use for text on gray subtle accent backgrounds. | #cfccd4 | |
icon.default | React: themeGet('icon.default')CSS: --icon | icon/default | Use for icon-only buttons, or icons paired with color.text.default | #ffffff | |
border.brand | React: themeGet('border.brand')CSS: --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('border.inverse')CSS: --border-inverse | border/inverse | Use for borders on bold backgrounds. | #090a0f | |
border.focused.default | React: themeGet('border.focused.default')CSS: --border-focused | border/focused/default | Use for focus rings of elements in a focus state. | #6195ff | |
border.focused.inverse | React: themeGet('border.focused.inverse')CSS: --border-focused-inverse | border/focused/inverse | Use for focus rings of elements in a focus state. | #173166 | |
border.danger.default | React: themeGet('border.danger.default')CSS: --border-danger | border/danger/default | Use for borders communicating critical information, such as the borders on invalid text fields. | #f44343 | |
border.danger.inverse | React: themeGet('border.danger.inverse')CSS: --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('border.success.default')CSS: --border-success | border/success/default | Use for borders communicating a favourable outcome, such as the borders on validated text fields. | #4caf50 | |
border.success.inverse | React: themeGet('border.success.inverse')CSS: --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('border.input.default')CSS: --border-input | border/input/default | Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons. | #ffffff | |
border.input.hovered | React: themeGet('border.input.hovered')CSS: --border-input-hovered | border/input/hovered | Hovered state for border.input | #397bff | |
border.disabled | React: themeGet('border.disabled')CSS: --border-disabled | border/disabled | Use for borders of elements in a disabled state. | #b8b6bd78 | |
border.default | React: themeGet('border.default')CSS: --border | border/default | Use to visually group or separate UI elements, such as flat cards or side panel dividers. | #ffffff | |
border.accent.blue | React: themeGet('border.accent.blue')CSS: --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('border.accent.red')CSS: --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('border.accent.orange')CSS: --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('border.accent.yellow')CSS: --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('border.accent.green')CSS: --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('border.accent.purple')CSS: --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('border.accent.teal')CSS: --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('border.accent.gray')CSS: --border-accent-gray | border/accent/gray | Use for borders on non-bold gray accent backgrounds. | #8a888e | |
border.subtle.default | React: themeGet('border.subtle.default')CSS: --border-subtle | border/subtle/default | undefined | #5c5b5e | |
border.subtle.inverse | React: themeGet('border.subtle.inverse')CSS: --border-subtle-inverse | border/subtle/inverse | undefined | #cfccd4 | |
background.brand.bold.default | React: themeGet('background.brand.bold.default')CSS: --background-brand-bold | 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('background.brand.bold.hovered')CSS: --background-brand-bold-hovered | background/brand/bold/hovered | Hovered state of color.background.brand.bold | #2256c5 | |
background.brand.bold.pressed | React: themeGet('background.brand.bold.pressed')CSS: --background-brand-bold-pressed | background/brand/bold/pressed | Pressed state of color.background.brand.bold | #224a99 | |
background.brand.default | React: themeGet('background.brand.default')CSS: --background-brand | background/brand/default | Use for the background of elements used to reinforce our brand. | #336fe6 | |
background.disabled | React: themeGet('background.disabled')CSS: --background-disabled | background/disabled | Use for backgrounds of elements in a disabled state. | #b8b6bd1a | |
background.success.default | React: themeGet('background.success.default')CSS: --background-success | background/success/default | Use for backgrounds communicating a favourable outcome, such as success section messages. | #0f2310 | |
background.success.inverse | React: themeGet('background.success.inverse')CSS: --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('background.danger.default')CSS: --background-danger | background/danger/default | Use for backgrounds communicating critical information, such as in error messages. | #310e0e | |
background.danger.inverse | React: themeGet('background.danger.inverse')CSS: --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('background.accent.blue.subtlest')CSS: --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('background.accent.blue.subtler')CSS: --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('background.accent.blue.subtle')CSS: --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('background.accent.blue.bolder')CSS: --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('background.accent.red.subtlest')CSS: --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('background.accent.red.subtler')CSS: --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('background.accent.red.subtle')CSS: --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('background.accent.red.bolder')CSS: --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('background.accent.orange.subtlest')CSS: --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('background.accent.orange.subtler')CSS: --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('background.accent.orange.subtle')CSS: --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('background.accent.orange.bolder')CSS: --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('background.accent.yellow.subtlest')CSS: --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('background.accent.yellow.subtler')CSS: --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('background.accent.yellow.subtle')CSS: --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('background.accent.yellow.bolder')CSS: --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('background.accent.green.subtlest')CSS: --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('background.accent.green.subtler')CSS: --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('background.accent.green.subtle')CSS: --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('background.accent.green.bolder')CSS: --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('background.accent.teal.subtlest')CSS: --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('background.accent.teal.subtler')CSS: --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('background.accent.teal.subtle')CSS: --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('background.accent.teal.bolder')CSS: --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('background.accent.purple.subtlest')CSS: --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('background.accent.purple.subtler')CSS: --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('background.accent.purple.subtle')CSS: --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('background.accent.purple.bolder')CSS: --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('background.accent.gray.subtlest')CSS: --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('background.accent.gray.subtler')CSS: --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('background.accent.gray.subtle')CSS: --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('background.accent.gray.bolder')CSS: --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('background.accent.gradient.orangeYellow')CSS: --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('background.accent.gradient.yellowPurple')CSS: --background-accent-gradient-yellowPurple | background/accent/gradient/yellowPurple | Use for accent gradients from yellow to purple | linear-gradient(90deg, #FFF6B6 0%, #A97DFF 100%) | |
background.accent.gradient.bluePurple | React: themeGet('background.accent.gradient.bluePurple')CSS: --background-accent-gradient-bluePurple | background/accent/gradient/bluePurple | Use for accent gradients from blue to purple | linear-gradient(90deg, #397BFF 0%, #A97DFF 100%) | |
background.accent.gradient.yellowBlue | React: themeGet('background.accent.gradient.yellowBlue')CSS: --background-accent-gradient-yellowBlue | background/accent/gradient/yellowBlue | Use for accent gradients from yellow to blue | linear-gradient(90deg, #FFF6B6 0%, #397BFF 100%) | |
background.accent.gradient.orangeTeal | React: themeGet('background.accent.gradient.orangeTeal')CSS: --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('background.accent.gradient.orangePurple')CSS: --background-accent-gradient-orangePurple | background/accent/gradient/orangePurple | Use for accent gradients from orange to purple | linear-gradient(90deg, #FF996C 0%, #A97DFF 100%) | |
background.accent.gradient.blueOrange | React: themeGet('background.accent.gradient.blueOrange')CSS: --background-accent-gradient-blueOrange | background/accent/gradient/blueOrange | Use for accent gradients from blue to orange | linear-gradient(90deg, #397BFF 0%, #FF996C 99%) | |
background.accent.gradient.purpleTeal | React: themeGet('background.accent.gradient.purpleTeal')CSS: --background-accent-gradient-purpleTeal | background/accent/gradient/purpleTeal | Use for accent gradients from purple to teal | linear-gradient(90deg, #A97DFF 0%, #8DFCF1 99%) | |
background.accent.gradient.tealBlue | React: themeGet('background.accent.gradient.tealBlue')CSS: --background-accent-gradient-tealBlue | background/accent/gradient/tealBlue | Use for accent gradients from teal to blue | linear-gradient(90deg, #8DFCF1 0%, #397BFF 100%) | |
background.accent.gradient.tealYellow | React: themeGet('background.accent.gradient.tealYellow')CSS: --background-accent-gradient-tealYellow | background/accent/gradient/tealYellow | Use for accent gradients from teal to yellow | linear-gradient(90deg, #8DFCF1 0%, #FFF6B6 100%) | |
surface.default | React: themeGet('surface.default')CSS: -- | surface/default | Use as the primary background for the UI. | #090a0f | |
surface.inverse | React: themeGet('surface.inverse')CSS: --inverse | surface/inverse | Use for surfaces that should be the inverse of the primary surface of the UI. | #ffffff | |
surface.raised.default | React: themeGet('surface.raised.default')CSS: --raised | surface/raised/default | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #121213 | |
surface.raised.hovered | React: themeGet('surface.raised.hovered')CSS: --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('surface.raised.pressed')CSS: --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('elevation.surface.inverse')CSS: --surface-inverse | elevation/surface/inverse | Use for surfaces that should be the inverse of the primary surface of the UI. | #ffffff | |
elevation.surface.default | React: themeGet('elevation.surface.default')CSS: --surface | elevation/surface/default | Use as the primary background for the UI. | #090a0f | |
elevation.surface.raised.default | React: themeGet('elevation.surface.raised.default')CSS: --surface-raised | 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('elevation.surface.raised.hovered')CSS: --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('elevation.surface.raised.pressed')CSS: --surface-raised-pressed | elevation/surface/raised/pressed | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #2e2d2f |
appfire--Typography
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
Light the way | font.body.default | React: themeGet('font.body.default')CSS: --font-body | 300 14px/1.8 "Area Normal", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.small | React: themeGet('font.body.small')CSS: --font-body-small | 400 12px/18px "Area Normal", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.medium | React: themeGet('font.body.medium')CSS: --font-body-medium | 400 16px/24px "Area Normal", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.large | React: themeGet('font.body.large')CSS: --font-body-large | 400 12px/24px "Area Normal", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.xlarge | React: themeGet('font.body.xlarge')CSS: --font-body-xlarge | 500 12px/24px "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.title.xxsmall | React: themeGet('font.title.xxsmall')CSS: --font-title-xxsmall | 600 14px/20px "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.title.xsmall | React: themeGet('font.title.xsmall')CSS: --font-title-xsmall | 600 14px/20px "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.title.small | React: themeGet('font.title.small')CSS: --font-title-small | 300 16px/24px "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.title.medium | React: themeGet('font.title.medium')CSS: --font-title-medium | 600 32px/1.2 "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.title.large | React: themeGet('font.title.large')CSS: --font-title-large | 700 48px/1.1 "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.title.xlarge | React: themeGet('font.title.xlarge')CSS: --font-title-xlarge | 700 64px/1.1 "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.title.xxlarge | React: themeGet('font.title.xxlarge')CSS: --font-title-xxlarge | 700 72px/1.1 "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.display.default | React: themeGet('font.display.default')CSS: --font-display | 300 96px/1.1 "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.display.medium | React: themeGet('font.display.medium')CSS: --font-display-medium | 300 80px/1.1 "Area Normal", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif |
Atlassian
atlassian--Colors
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
elevation.surface.default.[default] | React: themeGet('colors.elevation.surface.default.default')CSS: --fk-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: --fk-surface-hovered | elevation/surface/default/hovered | Hovered state of elevation.surface | #f1f2f4 | |
elevation.surface.default.pressed | React: themeGet('colors.elevation.surface.default.pressed')CSS: --fk-surface-pressed | elevation/surface/default/pressed | Pressed state of elevation.surface | #dcdfe4 | |
elevation.surface.sunken | React: themeGet('colors.elevation.surface.sunken')CSS: --fk-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: --fk-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 | #ffffff | |
elevation.surface.raised.hovered | React: themeGet('colors.elevation.surface.raised.hovered')CSS: --fk-surface-raised-hovered | elevation/surface/raised/hovered | Hovered state of elevation.surface.raised | #f7f8f9 | |
elevation.surface.raised.pressed | React: themeGet('colors.elevation.surface.raised.pressed')CSS: --fk-surface-raised-pressed | elevation/surface/raised/pressed | Pressed state of elevation.surface.raised | #f1f2f4 | |
elevation.surface.overlay.default | React: themeGet('colors.elevation.surface.overlay.default')CSS: --fk-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: --fk-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: --fk-surface-overlay-pressed | elevation/surface/overlay/pressed | Pressed state of elevation.surface.overlay | #dcdfe4 | |
elevation.shadow.raised | React: themeGet('colors.elevation.shadow.raised')CSS: --fk-shadow-raised | elevation/shadow/raised | Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised | 0px 1px 1px 0px #091e4240, 0px 0px 1px 0px #091e424f | |
elevation.shadow.overflow.default | React: themeGet('colors.elevation.shadow.overflow.default')CSS: --fk-shadow-overflow | elevation/shadow/overflow/default | Use to create a shadow when content scolls under other content. | 0px 0px 12px 0px #0304048f, 0px 0px 1px 0px #03040480 | |
elevation.shadow.overflow.spread | React: themeGet('colors.elevation.shadow.overflow.spread')CSS: --fk-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: --fk-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 | |
elevation.shadow.overlay | React: themeGet('colors.elevation.shadow.overlay')CSS: --fk-shadow-overlay | elevation/shadow/overlay | Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay. Also use for the box shadow of raised cards in a dragged state. | 0px 8px 12px 0px #091e4226, 0px 0px 1px 0px #091e424f | |
border.default | React: themeGet('colors.border.default')CSS: --fk-border | border/default | Use to visually group or separate UI elements, such as flat cards or side panel dividers. | #091e4224 | |
border.selected | React: themeGet('colors.border.selected')CSS: --fk-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. | #1d7afc | |
border.focused | React: themeGet('colors.border.focused')CSS: --fk-border-focused | border/focused | Use for focus rings of elements in a focus state. | #388bff | |
border.subtle | React: themeGet('colors.border.subtle')CSS: --fk-border-subtle | border/subtle | Use for secondary borders to visually group or separate UI elements, such as flat cards or side panel dividers. | #091e420f | |
border.input | React: themeGet('colors.border.input')CSS: --fk-border-input | border/input | Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons. | #091e4224 | |
border.inverse | React: themeGet('colors.border.inverse')CSS: --fk-border-inverse | border/inverse | Use for borders on bold backgrounds. | #ffffff | |
border.disabled | React: themeGet('colors.border.disabled')CSS: --fk-border-disabled | border/disabled | Use for borders of elements in a disabled state. | #091e420f | |
border.brand | React: themeGet('colors.border.brand')CSS: --fk-border-brand | border/brand | Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons. | #0c66e4 | |
border.danger | React: themeGet('colors.border.danger')CSS: --fk-border-danger | border/danger | Use for borders communicating critical information, such as the borders on invalid text fields. | #e2483d | |
border.warning | React: themeGet('colors.border.warning')CSS: --fk-border-warning | border/warning | Use for borders communicating caution. | #e56910 | |
border.success | React: themeGet('colors.border.success')CSS: --fk-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: --fk-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: --fk-border-information | border/information | Use for borders communicating information or something in-progress. | #1d7afc | |
border.accent.blue | React: themeGet('colors.border.accent.blue')CSS: --fk-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: --fk-border-accent-red | border/accent/red | Use for red borders on non-bold backgrounds when there is no meaning tied to the color. | #e2483d | |
border.accent.orange | React: themeGet('colors.border.accent.orange')CSS: --fk-border-accent-orange | border/accent/orange | Use for orange borders on non-bold backgrounds when there is no meaning tied to the color. | #e56910 | |
border.accent.yellow | React: themeGet('colors.border.accent.yellow')CSS: --fk-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: --fk-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.magenta | React: themeGet('colors.border.accent.magenta')CSS: --fk-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.purple | React: themeGet('colors.border.accent.purple')CSS: --fk-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: --fk-border-accent-teal | border/accent/teal | Use for teal borders on non-bold backgrounds when there is no meaning tied to the color. | #2898bd | |
border.accent.gray | React: themeGet('colors.border.accent.gray')CSS: --fk-border-accent-gray | border/accent/gray | Use for borders on non-bold gray accent backgrounds. | #8590a2 | |
border.table.default | React: themeGet('colors.border.table.default')CSS: --fk-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.accent.blue.subtlest | React: themeGet('colors.background.accent.blue.subtlest')CSS: --fk-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: --fk-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. | #cce0ff | |
background.accent.blue.subtle | React: themeGet('colors.background.accent.blue.subtle')CSS: --fk-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. | #579dff | |
background.accent.blue.bolder | React: themeGet('colors.background.accent.blue.bolder')CSS: --fk-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: --fk-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. | #ffeceb | |
background.accent.red.subtler | React: themeGet('colors.background.accent.red.subtler')CSS: --fk-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. | #ffd5d2 | |
background.accent.red.subtle | React: themeGet('colors.background.accent.red.subtle')CSS: --fk-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. | #f87168 | |
background.accent.red.bolder | React: themeGet('colors.background.accent.red.bolder')CSS: --fk-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. | #c9372c | |
background.accent.orange.subtlest | React: themeGet('colors.background.accent.orange.subtlest')CSS: --fk-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. | #fff3eb | |
background.accent.orange.subtler | React: themeGet('colors.background.accent.orange.subtler')CSS: --fk-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. | #fedec8 | |
background.accent.orange.subtle | React: themeGet('colors.background.accent.orange.subtle')CSS: --fk-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. | #fea362 | |
background.accent.orange.bolder | React: themeGet('colors.background.accent.orange.bolder')CSS: --fk-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. | #c25100 | |
background.accent.yellow.subtlest | React: themeGet('colors.background.accent.yellow.subtlest')CSS: --fk-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: --fk-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: --fk-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. | #f5cd47 | |
background.accent.yellow.bolder | React: themeGet('colors.background.accent.yellow.bolder')CSS: --fk-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: --fk-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. | #dcfff1 | |
background.accent.green.subtler | React: themeGet('colors.background.accent.green.subtler')CSS: --fk-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: --fk-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: --fk-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.purple.subtlest | React: themeGet('colors.background.accent.purple.subtlest')CSS: --fk-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: --fk-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: --fk-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: --fk-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.teal.subtlest | React: themeGet('colors.background.accent.teal.subtlest')CSS: --fk-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. | #e7f9ff | |
background.accent.teal.subtler | React: themeGet('colors.background.accent.teal.subtler')CSS: --fk-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. | #c6edfb | |
background.accent.teal.subtle | React: themeGet('colors.background.accent.teal.subtle')CSS: --fk-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. | #6cc3e0 | |
background.accent.teal.bolder | React: themeGet('colors.background.accent.teal.bolder')CSS: --fk-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. | #227d9b | |
background.accent.magenta.subtlest | React: themeGet('colors.background.accent.magenta.subtlest')CSS: --fk-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: --fk-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: --fk-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: --fk-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.lime.subtlest | React: themeGet('colors.background.accent.lime.subtlest')CSS: --fk-background-accent-lime-subtlest | background/accent/lime/subtlest | Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #efffd6 | |
background.accent.lime.subtler | React: themeGet('colors.background.accent.lime.subtler')CSS: --fk-background-accent-lime-subtler | background/accent/lime/subtler | Use for for 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: --fk-background-accent-lime-subtle | background/accent/lime/subtle | Use for vibrant for 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: --fk-background-accent-lime-bolder | background/accent/lime/bolder | Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #5b7f24 | |
background.accent.gray.subtlest | React: themeGet('colors.background.accent.gray.subtlest')CSS: --fk-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: --fk-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: --fk-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: --fk-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.input.default | React: themeGet('colors.background.input.default')CSS: --fk-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: --fk-background-input-hovered | background/input/hovered | Hovered state for color.background.input | #f7f8f9 | |
background.input.pressed | React: themeGet('colors.background.input.pressed')CSS: --fk-background-input-pressed | background/input/pressed | Pressed state for color.background.input | #ffffff | |
background.inverse.subtle.default | React: themeGet('colors.background.inverse.subtle.default')CSS: --fk-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: --fk-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: --fk-background-inverse-subtle-pressed | background/inverse/subtle/pressed | Use for the pressed state of color.background.inverse.subtle | #00000052 | |
background.neutral.default.[default] | React: themeGet('colors.background.neutral.default.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-background-neutral-bold-pressed | background/neutral/bold/pressed | Pressed state of color.background.neutral.bold | #172b4d | |
background.brand.subtlest.default | React: themeGet('colors.background.brand.subtlest.default')CSS: --fk-background-brand-subtlest | background/brand/subtlest/default | Use for the background of elements used to reinforce our brand, but with less emphasis. | #e9f2ff | |
background.brand.subtlest.hovered | React: themeGet('colors.background.brand.subtlest.hovered')CSS: --fk-background-brand-subtlest-hovered | background/brand/subtlest/hovered | Hovered state of color.background.brand.subtlest | #cce0ff | |
background.brand.subtlest.pressed | React: themeGet('colors.background.brand.subtlest.pressed')CSS: --fk-background-brand-subtlest-pressed | background/brand/subtlest/pressed | Pressed state of color.background.brand.subtlest | #85b8ff | |
background.brand.bold.default | React: themeGet('colors.background.brand.bold.default')CSS: --fk-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: --fk-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: --fk-background-brand-bold-pressed | background/brand/bold/pressed | Pressed state of color.background.brand.bold | #09326c | |
background.brand.boldest.default | React: themeGet('colors.background.brand.boldest.default')CSS: --fk-background-brand-boldest | background/brand/boldest/default | Use for the background of elements used to reinforce our brand, that need to stand out a lot. | #1c2b41 | |
background.brand.boldest.hovered | React: themeGet('colors.background.brand.boldest.hovered')CSS: --fk-background-brand-boldest-hovered | background/brand/boldest/hovered | Hovered state of color.background.brand.boldest | #09326c | |
background.brand.boldest.pressed | React: themeGet('colors.background.brand.boldest.pressed')CSS: --fk-background-brand-boldest-pressed | background/brand/boldest/pressed | Pressed state of color.background.brand.boldest | #0055cc | |
background.selected.default.[default] | React: themeGet('colors.background.selected.default.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-background-selected-bold-pressed | background/selected/bold/pressed | Pressed state of color.background.selected.bold | #09326c | |
background.disabled | React: themeGet('colors.background.disabled')CSS: --fk-background-disabled | background/disabled | Use for backgrounds of elements in a disabled state. | #f7f8f9 | |
background.information.default.[default] | React: themeGet('colors.background.information.default.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-background-information-bold-pressed | background/information/bold/pressed | Pressed state of color.background.information.bold | #09326c | |
background.danger.default.[default] | React: themeGet('colors.background.danger.default.default')CSS: --fk-background-danger | background/danger/default/default | Use for backgrounds communicating critical information, such in error section messages. | #ffeceb | |
background.danger.default.hovered | React: themeGet('colors.background.danger.default.hovered')CSS: --fk-background-danger-hovered | background/danger/default/hovered | Hovered state for color.background.danger | #ffd5d2 | |
background.danger.default.pressed | React: themeGet('colors.background.danger.default.pressed')CSS: --fk-background-danger-pressed | background/danger/default/pressed | Pressed state for color.background.danger | #fd9891 | |
background.danger.bold.default | React: themeGet('colors.background.danger.bold.default')CSS: --fk-background-danger-bold | background/danger/bold/default | A vibrant background option for communicating critical information, such as in danger buttons and error banners. | #c9372c | |
background.danger.bold.hovered | React: themeGet('colors.background.danger.bold.hovered')CSS: --fk-background-danger-bold-hovered | background/danger/bold/hovered | Hovered state of color.background.danger.bold | #ae2e24 | |
background.danger.bold.pressed | React: themeGet('colors.background.danger.bold.pressed')CSS: --fk-background-danger-bold-pressed | background/danger/bold/pressed | Pressed state of color.background.danger.bold | #5d1f1a | |
background.success.default.[default] | React: themeGet('colors.background.success.default.default')CSS: --fk-background-success | background/success/default/default | Use for backgrounds communicating a favourable outcome, such as in success section messages. | #dcfff1 | |
background.success.default.hovered | React: themeGet('colors.background.success.default.hovered')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-background-discovery-bold-pressed | background/discovery/bold/pressed | Pressed state of color.background.discovery.bold | #352c63 | |
background.warning.default.[default] | React: themeGet('colors.background.warning.default.default')CSS: --fk-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: --fk-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: --fk-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: --fk-background-warning-bold | background/warning/bold/default | A vibrant background option for communicating caution, such as in warning buttons and warning banners. | #f5cd47 | |
background.warning.bold.hovered | React: themeGet('colors.background.warning.bold.hovered')CSS: --fk-background-warning-bold-hovered | background/warning/bold/hovered | Hovered state of color.background.warning.bold | #e2b203 | |
background.warning.bold.pressed | React: themeGet('colors.background.warning.bold.pressed')CSS: --fk-background-warning-bold-pressed | background/warning/bold/pressed | Pressed state of color.background.warning.bold | #cf9f02 | |
blanket.default | React: themeGet('colors.blanket.default')CSS: --fk-blanket | blanket/default | Use for the screen overlay that appears with modal dialogs | #091e427d | |
blanket.selected | React: themeGet('colors.blanket.selected')CSS: --fk-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: --fk-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 | |
text.default | React: themeGet('colors.text.default')CSS: --fk-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: --fk-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: --fk-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: --fk-text-disabled | text/disabled | Use for text in a disabled state. | #8590a2 | |
text.selected | React: themeGet('colors.text.selected')CSS: --fk-text-selected | text/selected | Use for text in selected or opened states, such as tabs and dropdown buttons. | #0c66e4 | |
text.inverse | React: themeGet('colors.text.inverse')CSS: --fk-text-inverse | text/inverse | Use for text on bold backgrounds. | #ffffff | |
text.success | React: themeGet('colors.text.success')CSS: --fk-text-success | text/success | Use for text to communicate a favourable outcome, such as input field success messaging. | #216e4e | |
text.danger | React: themeGet('colors.text.danger')CSS: --fk-text-danger | text/danger | Use for critical text, such as input field error messaging. | #ae2e24 | |
text.information | React: themeGet('colors.text.information')CSS: --fk-text-information | text/information | Use for informative text or to communicate something is in progress, such as in-progress lozenges. | #0055cc | |
text.warning.default | React: themeGet('colors.text.warning.default')CSS: --fk-text-warning | text/warning/default | Use for text to emphasize caution, such as in moved lozenges. | #a54800 | |
text.warning.inverse | React: themeGet('colors.text.warning.inverse')CSS: --fk-text-warning-inverse | text/warning/inverse | Use for text when on bold warning backgrounds. | #172b4d | |
text.discovery | React: themeGet('colors.text.discovery')CSS: --fk-text-discovery | text/discovery | Use for text to emphasize change or something new, such as in new lozenges. | #5e4db2 | |
text.brand | React: themeGet('colors.text.brand')CSS: --fk-text-brand | text/brand | Use for text that reinforces our brand. | #0c66e4 | |
text.accent.blue.default | React: themeGet('colors.text.accent.blue.default')CSS: --fk-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: --fk-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: --fk-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. | #ae2e24 | |
text.accent.red.bolder | React: themeGet('colors.text.accent.red.bolder')CSS: --fk-text-accent-red-bolder | text/accent/red/bolder | Use on bold red accent backgrounds. | #5d1f1a | |
text.accent.orange.default | React: themeGet('colors.text.accent.orange.default')CSS: --fk-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. | #a54800 | |
text.accent.orange.bolder | React: themeGet('colors.text.accent.orange.bolder')CSS: --fk-text-accent-orange-bolder | text/accent/orange/bolder | Use on bold orange accent backgrounds. | #702e00 | |
text.accent.yellow.default | React: themeGet('colors.text.accent.yellow.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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. | #206a83 | |
text.accent.teal.bolder | React: themeGet('colors.text.accent.teal.bolder')CSS: --fk-text-accent-teal-bolder | text/accent/teal/bolder | Use on bold teal accent backgrounds. | #164555 | |
text.accent.magenta.default | React: themeGet('colors.text.accent.magenta.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-text-accent-lime-bolder | text/accent/lime/bolder | Use on bold lime accent backgrounds. | #37471f | |
link.default | React: themeGet('colors.link.default')CSS: --fk-link | link/default | Use for links in a default state. | #0c66e4 | |
link.hovered | React: themeGet('colors.link.hovered')CSS: --fk-link-hovered | link/hovered | Use for links in a hovered state. | #0c66e4 | |
link.pressed | React: themeGet('colors.link.pressed')CSS: --fk-link-pressed | link/pressed | Use for links in a pressed state. | #0055cc | |
link.visited | React: themeGet('colors.link.visited')CSS: --fk-link-visited | link/visited | Use for links in a visited state. | #5e4db2 | |
icon.accent.blue | React: themeGet('colors.icon.accent.blue')CSS: --fk-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: --fk-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. | #c9372c | |
icon.accent.orange | React: themeGet('colors.icon.accent.orange')CSS: --fk-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. | #e56910 | |
icon.accent.yellow | React: themeGet('colors.icon.accent.yellow')CSS: --fk-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: --fk-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: --fk-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: --fk-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. | #2898bd | |
icon.accent.magenta | React: themeGet('colors.icon.accent.magenta')CSS: --fk-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: --fk-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: --fk-icon-accent-lime | icon/accent/lime | Use for icons on non-bold lime accent backgrounds, such as file type icons. | #6a9a23 | |
icon.default | React: themeGet('colors.icon.default')CSS: --fk-icon | icon/default | Use for icon-only buttons, or icons paired with color.text | #44546f | |
icon.subtle | React: themeGet('colors.icon.subtle')CSS: --fk-icon-subtle | icon/subtle | Use for icons paired with color.text.subtle | #626f86 | |
icon.inverse | React: themeGet('colors.icon.inverse')CSS: --fk-icon-inverse | icon/inverse | Use for icons on bold backgrounds. | #ffffff | |
icon.disabled | React: themeGet('colors.icon.disabled')CSS: --fk-icon-disabled | icon/disabled | Use for icons in a disabled state. | #8590a2 | |
icon.brand | React: themeGet('colors.icon.brand')CSS: --fk-icon-brand | icon/brand | Use for icons that reinforce our brand. | #0c66e4 | |
icon.selected | React: themeGet('colors.icon.selected')CSS: --fk-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: --fk-icon-danger | icon/danger | Use for icons communicating critical information, such as those used in error handing. | #c9372c | |
icon.success | React: themeGet('colors.icon.success')CSS: --fk-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: --fk-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: --fk-icon-information | icon/information | Use for icons communicating information or something in-progress, such as information section messages. | #1d7afc | |
icon.warning.default | React: themeGet('colors.icon.warning.default')CSS: --fk-icon-warning | icon/warning/default | Use for icons communicating caution, such as those used in warning section messages. | #e56910 | |
icon.warning.inverse | React: themeGet('colors.icon.warning.inverse')CSS: --fk-icon-warning-inverse | icon/warning/inverse | Use for icons when on bold warning backgrounds. | #172b4d | |
interaction.hovered | React: themeGet('colors.interaction.hovered')CSS: --fk-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: --fk-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: --fk-skeleton | skeleton/default | Use for skeleton loading states | #091e420f | |
skeleton.subtle | React: themeGet('colors.skeleton.subtle')CSS: --fk-skeleton-subtle | skeleton/subtle | Use for the pulse or shimmer effect in skeleton loading states | #091e4208 | |
chart.brand.default | React: themeGet('colors.chart.brand.default')CSS: --fk-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: --fk-chart-brand-hovered | chart/brand/hovered | Hovered state of color.chart.brand. | #0c66e4 | |
chart.neutral.default | React: themeGet('colors.chart.neutral.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-chart-danger | chart/danger/default/default | For data visualisation communicating negative information, such as 'off track'. | #f15b50 | |
chart.danger.default.hovered | React: themeGet('colors.chart.danger.default.hovered')CSS: --fk-chart-danger-hovered | chart/danger/default/hovered | Hovered state of color.chart.danger. | #e2483d | |
chart.danger.bold.default | React: themeGet('colors.chart.danger.bold.default')CSS: --fk-chart-danger-bold | chart/danger/bold/default | A stronger emphasis option of color.chart.danger. | #ae2e24 | |
chart.danger.bold.hovered | React: themeGet('colors.chart.danger.bold.hovered')CSS: --fk-chart-danger-bold-hovered | chart/danger/bold/hovered | Hovered state of color.chart.danger.bold. | #5d1f1a | |
chart.warning.default.[default] | React: themeGet('colors.chart.warning.default.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-chart-information | chart/information/default/default | For data visualisation communicating low priority or in-progress statuses. | #1d7afc | |
chart.information.default.hovered | React: themeGet('colors.chart.information.default.hovered')CSS: --fk-chart-information-hovered | chart/information/default/hovered | Hovered state of color.chart.information. | #0c66e4 | |
chart.information.bold.default | React: themeGet('colors.chart.information.bold.default')CSS: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-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: --fk-chart-categorical-1 | chart/categorical/1/default | For data visualisation only. Follow numbered sequence. | #2898bd | |
chart.categorical.1.hovered | React: themeGet('colors.chart.categorical.1.hovered')CSS: --fk-chart-categorical-1-hovered | chart/categorical/1/hovered | Hovered state of color.chart.categorical.1. | #227d9b | |
chart.categorical.2.default | React: themeGet('colors.chart.categorical.2.default')CSS: --fk-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: --fk-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: --fk-chart-categorical-3 | chart/categorical/3/default | For data visualisation only. Follow numbered sequence. | #e56910 | |
chart.categorical.3.hovered | React: themeGet('colors.chart.categorical.3.hovered')CSS: --fk-chart-categorical-3-hovered | chart/categorical/3/hovered | Hovered state of color.chart.categorical.3. | #c25100 | |
chart.categorical.4.default | React: themeGet('colors.chart.categorical.4.default')CSS: --fk-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: --fk-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: --fk-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: --fk-chart-categorical-5-hovered | chart/categorical/5/hovered | Hovered state of color.chart.categorical.5. | #1c2b41 | |
chart.categorical.6.default | React: themeGet('colors.chart.categorical.6.default')CSS: --fk-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: --fk-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: --fk-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: --fk-chart-categorical-7-hovered | chart/categorical/7/hovered | Hovered state of color.chart.categorical.7. | #3d2232 | |
chart.categorical.8.default | React: themeGet('colors.chart.categorical.8.default')CSS: --fk-chart-categorical-8 | chart/categorical/8/default | For data visualisation only. Follow numbered sequence. | #a54800 | |
chart.categorical.8.hovered | React: themeGet('colors.chart.categorical.8.hovered')CSS: --fk-chart-categorical-8-hovered | chart/categorical/8/hovered | Hovered state of color.chart.categorical.8. | #702e00 | |
chart.blue.bold.default | React: themeGet('colors.chart.blue.bold.default')CSS: --fk-chart-blue-bold | chart/blue/bold/default | For data visualisation only. | #388bff | |
chart.blue.bold.hovered | React: themeGet('colors.chart.blue.bold.hovered')CSS: --fk-chart-blue-bold-hovered | chart/blue/bold/hovered | Hovered state of color.chart.blue.bold. | #388bff | |
chart.blue.bolder.default | React: themeGet('colors.chart.blue.bolder.default')CSS: --fk-chart-blue-bolder | chart/blue/bolder/default | For data visualisation only. | #1d7afc | |
chart.blue.bolder.hovered | React: themeGet('colors.chart.blue.bolder.hovered')CSS: --fk-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: --fk-chart-blue-boldest | chart/blue/boldest/default | For data visualisation only. | #0055cc | |
chart.blue.boldest.hovered | React: themeGet('colors.chart.blue.boldest.hovered')CSS: --fk-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: --fk-chart-red-bold | chart/red/bold/default | For data visualisation only. | #f15b50 | |
chart.red.bold.hovered | React: themeGet('colors.chart.red.bold.hovered')CSS: --fk-chart-red-bold-hovered | chart/red/bold/hovered | Hovered state of color.chart.red.bold. | #e2483d | |
chart.red.bolder.default | React: themeGet('colors.chart.red.bolder.default')CSS: --fk-chart-red-bolder | chart/red/bolder/default | For data visualisation only. | #e2483d | |
chart.red.bolder.hovered | React: themeGet('colors.chart.red.bolder.hovered')CSS: --fk-chart-red-bolder-hovered | chart/red/bolder/hovered | Hovered state of color.chart.red.bolder. | #c9372c | |
chart.red.boldest.default | React: themeGet('colors.chart.red.boldest.default')CSS: --fk-chart-red-boldest | chart/red/boldest/default | For data visualisation only. | #ae2e24 | |
chart.red.boldest.hovered | React: themeGet('colors.chart.red.boldest.hovered')CSS: --fk-chart-red-boldest-hovered | chart/red/boldest/hovered | Hovered state of color.chart.red.boldest. | #5d1f1a | |
chart.orange.bold.default | React: themeGet('colors.chart.orange.bold.default')CSS: --fk-chart-orange-bold | chart/orange/bold/default | For data visualisation only. | #e56910 | |
chart.orange.bold.hovered | React: themeGet('colors.chart.orange.bold.hovered')CSS: --fk-chart-orange-bold-hovered | chart/orange/bold/hovered | Hovered state of color.chart.orange.bold. | #c25100 | |
chart.orange.bolder.default | React: themeGet('colors.chart.orange.bolder.default')CSS: --fk-chart-orange-bolder | chart/orange/bolder/default | For data visualisation only. | #c25100 | |
chart.orange.bolder.hovered | React: themeGet('colors.chart.orange.bolder.hovered')CSS: --fk-chart-orange-bolder-hovered | chart/orange/bolder/hovered | Hovered state of color.chart.orange.bolder. | #a54800 | |
chart.orange.boldest.default | React: themeGet('colors.chart.orange.boldest.default')CSS: --fk-chart-orange-boldest | chart/orange/boldest/default | For data visualisation only. | #a54800 | |
chart.orange.boldest.hovered | React: themeGet('colors.chart.orange.boldest.hovered')CSS: --fk-chart-orange-boldest-hovered | chart/orange/boldest/hovered | Hovered state of color.chart.orange.boldest. | #702e00 | |
chart.yellow.bold.default | React: themeGet('colors.chart.yellow.bold.default')CSS: --fk-chart-yellow-bold | chart/yellow/bold/default | For data visualisation only. | #b38600 | |
chart.yellow.bold.hovered | React: themeGet('colors.chart.yellow.bold.hovered')CSS: --fk-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: --fk-chart-yellow-bolder | chart/yellow/bolder/default | For data visualisation only. | #946f00 | |
chart.yellow.bolder.hovered | React: themeGet('colors.chart.yellow.bolder.hovered')CSS: --fk-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: --fk-chart-yellow-boldest | chart/yellow/boldest/default | For data visualisation only. | #7f5f01 | |
chart.yellow.boldest.hovered | React: themeGet('colors.chart.yellow.boldest.hovered')CSS: --fk-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: --fk-chart-green-bold | chart/green/bold/default | For data visualisation only. | #22a06b | |
chart.green.bold.hovered | React: themeGet('colors.chart.green.bold.hovered')CSS: --fk-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: --fk-chart-green-bolder | chart/green/bolder/default | For data visualisation only. | #1f845a | |
chart.green.bolder.hovered | React: themeGet('colors.chart.green.bolder.hovered')CSS: --fk-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: --fk-chart-green-boldest | chart/green/boldest/default | For data visualisation only. | #216e4e | |
chart.green.boldest.hovered | React: themeGet('colors.chart.green.boldest.hovered')CSS: --fk-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: --fk-chart-teal-bold | chart/teal/bold/default | For data visualisation only. | #2898bd | |
chart.teal.bold.hovered | React: themeGet('colors.chart.teal.bold.hovered')CSS: --fk-chart-teal-bold-hovered | chart/teal/bold/hovered | Hovered state of color.chart.teal.bold. | #227d9b | |
chart.teal.bolder.default | React: themeGet('colors.chart.teal.bolder.default')CSS: --fk-chart-teal-bolder | chart/teal/bolder/default | For data visualisation only. | #227d9b | |
chart.teal.bolder.hovered | React: themeGet('colors.chart.teal.bolder.hovered')CSS: --fk-chart-teal-bolder-hovered | chart/teal/bolder/hovered | Hovered state of color.chart.teal.bolder. | #206a83 | |
chart.teal.boldest.default | React: themeGet('colors.chart.teal.boldest.default')CSS: --fk-chart-teal-boldest | chart/teal/boldest/default | For data visualisation only. | #206a83 | |
chart.teal.boldest.hovered | React: themeGet('colors.chart.teal.boldest.hovered')CSS: --fk-chart-teal-boldest-hovered | chart/teal/boldest/hovered | Hovered state of color.chart.teal.boldest. | #164555 | |
chart.purple.bold.default | React: themeGet('colors.chart.purple.bold.default')CSS: --fk-chart-purple-bold | chart/purple/bold/default | For data visualisation only. | #8f7ee7 | |
chart.purple.bold.hovered | React: themeGet('colors.chart.purple.bold.hovered')CSS: --fk-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: --fk-chart-purple-bolder | chart/purple/bolder/default | For data visualisation only. | #8270db | |
chart.purple.bolder.hovered | React: themeGet('colors.chart.purple.bolder.hovered')CSS: --fk-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: --fk-chart-purple-boldest | chart/purple/boldest/default | For data visualisation only. | #5e4db2 | |
chart.purple.boldest.hovered | React: themeGet('colors.chart.purple.boldest.hovered')CSS: --fk-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: --fk-chart-magenta-bold | chart/magenta/bold/default | For data visualisation only. | #da62ac | |
chart.magenta.bold.hovered | React: themeGet('colors.chart.magenta.bold.hovered')CSS: --fk-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: --fk-chart-magenta-bolder | chart/magenta/bolder/default | For data visualisation only. | #cd519d | |
chart.magenta.bolder.hovered | React: themeGet('colors.chart.magenta.bolder.hovered')CSS: --fk-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: --fk-chart-magenta-boldest | chart/magenta/boldest/default | For data visualisation only. | #943d73 | |
chart.magenta.boldest.hovered | React: themeGet('colors.chart.magenta.boldest.hovered')CSS: --fk-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: --fk-chart-gray-bold | chart/gray/bold/default | For data visualisation only. | #8590a2 | |
chart.gray.bold.hovered | React: themeGet('colors.chart.gray.bold.hovered')CSS: --fk-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: --fk-chart-gray-bolder | chart/gray/bolder/default | For data visualisation only. | #758195 | |
chart.gray.bolder.hovered | React: themeGet('colors.chart.gray.bolder.hovered')CSS: --fk-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: --fk-chart-gray-boldest | chart/gray/boldest/default | For data visualisation only. | #44546f | |
chart.gray.boldest.hovered | React: themeGet('colors.chart.gray.boldest.hovered')CSS: --fk-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: --fk-chart-lime-bold | chart/lime/bold/default | For data visualisation only. | #6a9a23 | |
chart.lime.bold.hovered | React: themeGet('colors.chart.lime.bold.hovered')CSS: --fk-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: --fk-chart-lime-bolder | chart/lime/bolder/default | For data visualisation only. | #5b7f24 | |
chart.lime.bolder.hovered | React: themeGet('colors.chart.lime.bolder.hovered')CSS: --fk-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: --fk-chart-lime-boldest | chart/lime/boldest/default | For data visualisation only. | #4c6b1f | |
chart.lime.boldest.hovered | React: themeGet('colors.chart.lime.boldest.hovered')CSS: --fk-chart-lime-boldest-hovered | chart/lime/boldest/hovered | Hovered state of color.chart.lime.boldest. | #37471f |
atlassian--Size
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
space.0 | React: themeGet('space.0')CSS: --fk-space-0 | 0px | |||
space.1 | React: themeGet('space.1')CSS: --fk-space-1 | 4px | |||
space.2 | React: themeGet('space.2')CSS: --fk-space-2 | 8px | |||
space.3 | React: themeGet('space.3')CSS: --fk-space-3 | 16px | |||
space.4 | React: themeGet('space.4')CSS: --fk-space-4 | 24px | |||
space.5 | React: themeGet('space.5')CSS: --fk-space-5 | 32px | |||
space.6 | React: themeGet('space.6')CSS: --fk-space-6 | 40px | |||
space.7 | React: themeGet('space.7')CSS: --fk-space-7 | 48px | |||
space.8 | React: themeGet('space.8')CSS: --fk-space-8 | 64px | |||
space.9 | React: themeGet('space.9')CSS: --fk-space-9 | 80px | |||
space.10 | React: themeGet('space.10')CSS: --fk-space-10 | 96px | |||
space.11 | React: themeGet('space.11')CSS: --fk-space-11 | 112px | |||
space.12 | React: themeGet('space.12')CSS: --fk-space-12 | 128px |
atlassian--Border Radius
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
radii.0 | React: themeGet('radii.0')CSS: --fk-radii-0 | 0px | |||
radii.1 | React: themeGet('radii.1')CSS: --fk-radii-1 | 3px | |||
radii.2 | React: themeGet('radii.2')CSS: --fk-radii-2 | 4px | |||
radii.3 | React: themeGet('radii.3')CSS: --fk-radii-3 | 6px | |||
radii.4 | React: themeGet('radii.4')CSS: --fk-radii-4 | 8px | |||
radii.5 | React: themeGet('radii.5')CSS: --fk-radii-5 | 9999999px |
atlassian--Typography
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
Light the way | font.title.xxsmall | React: themeGet('font.title.xxsmall')CSS: --fk-font-title-xxsmall | normal 700 12px/16px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.title.xsmall | React: themeGet('font.title.xsmall')CSS: --fk-font-title-xsmall | normal 700 14px/16px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.title.small | React: themeGet('font.title.small')CSS: --fk-font-title-small | normal 700 16px/24px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.title.medium | React: themeGet('font.title.medium')CSS: --fk-font-title-medium | normal 700 20px/24px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.title.large | React: themeGet('font.title.large')CSS: --fk-font-title-large | normal 700 24px/24px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.title.xlarge | React: themeGet('font.title.xlarge')CSS: --fk-font-title-xlarge | normal 700 28px/32px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.title.xxlarge | React: themeGet('font.title.xxlarge')CSS: --fk-font-title-xxlarge | normal 700 29px/40px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.body.default | React: themeGet('font.body.default')CSS: --fk-font-body | normal 400 14px/20px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.body.small | React: themeGet('font.body.small')CSS: --fk-font-body-small | normal 400 12px/20px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.body.medium | React: themeGet('font.body.medium')CSS: --fk-font-body-medium | 400 14px/20px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.body.large | React: themeGet('font.body.large')CSS: --fk-font-body-large | normal 400 14px/24px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.body.xlarge | React: themeGet('font.body.xlarge')CSS: --fk-font-body-xlarge | normal 500 16px/24px "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.ui.default | React: themeGet('font.ui.default')CSS: --fk-font-ui | 500 14px/1 "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.ui.small | React: themeGet('font.ui.small')CSS: --fk-font-ui-small | 500 11px/1 "SF Pro", ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif | ||
Light the way | font.code.default | React: themeGet('font.code.default')CSS: --fk-font-code | 400 0.875em/1 "SF Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace |
Monday
monday--Colors
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
elevation.surface.default.[default] | React: themeGet('colors.elevation.surface.default.default')CSS: --fk-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-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-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-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-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-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-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-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-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-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.overlay | React: themeGet('colors.elevation.shadow.overlay')CSS: --fk-shadow-overlay | elevation/shadow/overlay | Use for the box shadow of raised card elements, such as cards on a Kanban board. Combine with elevation.surface.raised | | |
elevation.shadow.overflow.default | React: themeGet('colors.elevation.shadow.overflow.default')CSS: --fk-shadow-overflow | elevation/shadow/overflow/default | Use to create a shadow when content scolls under other content. | 0px 0px 12px 0px #0304048f, 0px 0px 1px 0px #03040480 | |
elevation.shadow.overflow.spread | React: themeGet('colors.elevation.shadow.overflow.spread')CSS: --fk-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-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 | |
elevation.shadow.raised | React: themeGet('colors.elevation.shadow.raised')CSS: --fk-shadow-raised | elevation/shadow/raised | Use for the box shadow of raised card elements, such as cards on a Kanban board. | | |
border.default | React: themeGet('colors.border.default')CSS: --fk-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-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-border-focused | border/focused | Use for focus rings of elements in a focus state. | #1e89fa | |
border.subtle | React: themeGet('colors.border.subtle')CSS: --fk-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-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-border-inverse | border/inverse | Use for borders on bold backgrounds. Reference: --color-snow_white | #ffffff | |
border.disabled | React: themeGet('colors.border.disabled')CSS: --fk-border-disabled | border/disabled | Use for borders of elements in a disabled state. | #1f222d0f | |
border.brand | React: themeGet('colors.border.brand')CSS: --fk-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-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-border-warning | border/warning | Use for borders communicating caution. Reference: --warning-color-hover | #eaaa15 | |
border.success | React: themeGet('colors.border.success')CSS: --fk-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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 | React: themeGet('colors.background.accent.teal.subtle')CSS: --fk-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. | #6acfdc | |
background.accent.teal.bolder | React: themeGet('colors.background.accent.teal.bolder')CSS: --fk-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. | #1d717c | |
background.accent.magenta.subtlest | React: themeGet('colors.background.accent.magenta.subtlest')CSS: --fk-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. | #ffe5f2 | |
background.accent.magenta.subtler | React: themeGet('colors.background.accent.magenta.subtler')CSS: --fk-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. | #ffc2e0 | |
background.accent.magenta.subtle | React: themeGet('colors.background.accent.magenta.subtle')CSS: --fk-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. | #ff5cad | |
background.accent.magenta.bolder | React: themeGet('colors.background.accent.magenta.bolder')CSS: --fk-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. | #e1197e | |
background.accent.lime.subtlest | React: themeGet('colors.background.accent.lime.subtlest')CSS: --fk-background-accent-lime-subtlest | background/accent/lime/subtlest | Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #ecf6d5 | |
background.accent.lime.subtler | React: themeGet('colors.background.accent.lime.subtler')CSS: --fk-background-accent-lime-subtler | background/accent/lime/subtler | Use for for backgrounds when there is no meaning tied to the color, such as colored tags. | #e0f1bb | |
background.accent.lime.subtle | React: themeGet('colors.background.accent.lime.subtle')CSS: --fk-background-accent-lime-subtle | background/accent/lime/subtle | Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags. | #a8d841 | |
background.accent.lime.bolder | React: themeGet('colors.background.accent.lime.bolder')CSS: --fk-background-accent-lime-bolder | background/accent/lime/bolder | Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Reference: --color-bright-green-hover | #7ca32b | |
background.accent.gray.subtlest | React: themeGet('colors.background.accent.gray.subtlest')CSS: --fk-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. Reference: --surfce-color | #eceff8 | |
background.accent.gray.subtler | React: themeGet('colors.background.accent.gray.subtler')CSS: --fk-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. Reference: --color-ui_grey, --primary-background-hover-color, --primary-background-hover-on-secondary-color | #dcdfec | |
background.accent.gray.subtle | React: themeGet('colors.background.accent.gray.subtle')CSS: --fk-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. | #878ca1 | |
background.accent.gray.bolder | React: themeGet('colors.background.accent.gray.bolder')CSS: --fk-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. Reference: --color-asphalt | #676879 | |
background.input.default | React: themeGet('colors.background.input.default')CSS: --fk-background-input | background/input/default | Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. 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 | |
background.input.hovered | React: themeGet('colors.background.input.hovered')CSS: --fk-background-input-hovered | background/input/hovered | Hovered state for color.background.input. 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 | |
background.input.pressed | React: themeGet('colors.background.input.pressed')CSS: --fk-background-input-pressed | background/input/pressed | Pressed state for color.background.input. 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 | |
background.inverse.subtle.default | React: themeGet('colors.background.inverse.subtle.default')CSS: --fk-background-inverse-subtle | background/inverse/subtle/default | Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards. | #1f222d24 | |
background.inverse.subtle.hovered | React: themeGet('colors.background.inverse.subtle.hovered')CSS: --fk-background-inverse-subtle-hovered | background/inverse/subtle/hovered | Use for the hovered state of color.background.inverse.subtle | #1f222d38 | |
background.inverse.subtle.pressed | React: themeGet('colors.background.inverse.subtle.pressed')CSS: --fk-background-inverse-subtle-pressed | background/inverse/subtle/pressed | Use for the pressed state of color.background.inverse.subtle | #1f222d70 | |
background.neutral.default.[default] | React: themeGet('colors.background.neutral.default.default')CSS: --fk-background-neutral | background/neutral/default/default | The default background for neutral elements, such as default buttons. Reference: --color-riverstone_gray, --grey-background-color, --allgrey-background-color, --dark-background-color, --dark-background-on-secondary-color | #f6f7fb | |
background.neutral.default.hovered | React: themeGet('colors.background.neutral.default.hovered')CSS: --fk-background-neutral-hovered | background/neutral/default/hovered | Hovered state for color.background.neutral. Reference: --color-ui_grey, --primary-background-hover-color, --primary-background-hover-on-secondary-color | #dcdfec | |
background.neutral.default.pressed | React: themeGet('colors.background.neutral.default.pressed')CSS: --fk-background-neutral-pressed | background/neutral/default/pressed | Pressed state for color.background.neutral. Reference: --color-ui_grey, --primary-background-hover-color, --primary-background-hover-on-secondary-color | #dcdfec | |
background.neutral.subtle.default | React: themeGet('colors.background.neutral.subtle.default')CSS: --fk-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. Reference: --color-snow_white, --primary-background-color, --secondary-background-color, --modal-background-color, --dialog-background-color, --primary-background-color-rgb, --secondary-background-color-rgb | #ffffff00 | |
background.neutral.subtle.hovered | React: themeGet('colors.background.neutral.subtle.hovered')CSS: --fk-background-neutral-subtle-hovered | background/neutral/subtle/hovered | Hovered state for color.background.neutral.subtle. Reference: --color-ui_grey, --primary-background-hover-color, --primary-background-hover-on-secondary-color | #dcdfec | |
background.neutral.subtle.pressed | React: themeGet('colors.background.neutral.subtle.pressed')CSS: --fk-background-neutral-subtle-pressed | background/neutral/subtle/pressed | Pressed state for color.background.neutral.subtle. Reference: --color-ui_grey, --primary-background-hover-color, --primary-background-hover-on-secondary-color | #dcdfec | |
background.neutral.bold.default | React: themeGet('colors.background.neutral.bold.default')CSS: --fk-background-neutral-bold | background/neutral/bold/default | A vibrant background option for neutral UI elements, such as announcement banners. Reference: --color-mud_black, --inverted-color-background | #323338 | |
background.neutral.bold.hovered | React: themeGet('colors.background.neutral.bold.hovered')CSS: --fk-background-neutral-bold-hovered | background/neutral/bold/hovered | Hovered state of color.background.neutral.bold. Reference: --color-mud_black, --inverted-color-background | #323338 | |
background.neutral.bold.pressed | React: themeGet('colors.background.neutral.bold.pressed')CSS: --fk-background-neutral-bold-pressed | background/neutral/bold/pressed | Pressed state of color.background.neutral.bold. Reference: --color-mud_black, --inverted-color-background | #323338 | |
background.brand.subtlest.default | React: themeGet('colors.background.brand.subtlest.default')CSS: --fk-background-brand-subtlest | background/brand/subtlest/default | Use for the background of elements used to reinforce our brand, but with less emphasis. | #cce5ff | |
background.brand.subtlest.hovered | React: themeGet('colors.background.brand.subtlest.hovered')CSS: --fk-background-brand-subtlest-hovered | background/brand/subtlest/hovered | Hovered state of color.background.brand.subtlest | #aed4fc | |
background.brand.subtlest.pressed | React: themeGet('colors.background.brand.subtlest.pressed')CSS: --fk-background-brand-subtlest-pressed | background/brand/subtlest/pressed | Pressed state of color.background.brand.subtlest | #67aef9 | |
background.brand.bold.default | React: themeGet('colors.background.brand.bold.default')CSS: --fk-background-brand-bold | background/brand/bold/default | Use for the background of elements used to reinforce our brand, but with more emphasis. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
background.brand.bold.hovered | React: themeGet('colors.background.brand.bold.hovered')CSS: --fk-background-brand-bold-hovered | background/brand/bold/hovered | Hovered state of color.background.brand.bold. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
background.brand.bold.pressed | React: themeGet('colors.background.brand.bold.pressed')CSS: --fk-background-brand-bold-pressed | background/brand/bold/pressed | Pressed state of color.background.brand.bold. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
background.brand.boldest.default | React: themeGet('colors.background.brand.boldest.default')CSS: --fk-background-brand-boldest | background/brand/boldest/default | Use for the background of elements used to reinforce our brand, that need to stand out a lot. | #00284d | |
background.brand.boldest.hovered | React: themeGet('colors.background.brand.boldest.hovered')CSS: --fk-background-brand-boldest-hovered | background/brand/boldest/hovered | Hovered state of color.background.brand.boldest | #003d75 | |
background.brand.boldest.pressed | React: themeGet('colors.background.brand.boldest.pressed')CSS: --fk-background-brand-boldest-pressed | background/brand/boldest/pressed | Pressed state of color.background.brand.boldest | #0060b9 | |
background.selected.default.[default] | React: themeGet('colors.background.selected.default.default')CSS: --fk-background-selected | background/selected/default/default | Use for the background of elements in a selected state, such as in opened dropdown buttons. 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.selected.default.hovered | React: themeGet('colors.background.selected.default.hovered')CSS: --fk-background-selected-hovered | background/selected/default/hovered | Hovered state for color.background.selected. Reference: --primary-selected-hover-color, --brand-selected-hover-color | #aed4fc | |
background.selected.default.pressed | React: themeGet('colors.background.selected.default.pressed')CSS: --fk-background-selected-pressed | background/selected/default/pressed | Pressed state for color.background.selected | #67aef9 | |
background.selected.bold.default | React: themeGet('colors.background.selected.bold.default')CSS: --fk-background-selected-bold | background/selected/bold/default | Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. | #1f76db | |
background.selected.bold.hovered | React: themeGet('colors.background.selected.bold.hovered')CSS: --fk-background-selected-bold-hovered | background/selected/bold/hovered | Hovered state of color.background.selected.bold. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
background.selected.bold.pressed | React: themeGet('colors.background.selected.bold.pressed')CSS: --fk-background-selected-bold-pressed | background/selected/bold/pressed | Pressed state of color.background.selected.bold | #003d75 | |
background.disabled | React: themeGet('colors.background.disabled')CSS: --fk-background-disabled | background/disabled | Use for backgrounds of elements in a disabled state. Reference: --surfce-color | #eceff8 | |
background.information.default.[default] | React: themeGet('colors.background.information.default.default')CSS: --fk-background-information | background/information/default/default | Use for backgrounds communicating information or something in-progress, such as in information section messages. 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.information.default.hovered | React: themeGet('colors.background.information.default.hovered')CSS: --fk-background-information-hovered | background/information/default/hovered | Hovered state of color.background.information. Reference: --primary-selected-hover-color, --brand-selected-hover-color | #aed4fc | |
background.information.default.pressed | React: themeGet('colors.background.information.default.pressed')CSS: --fk-background-information-pressed | background/information/default/pressed | Pressed state of color.background.information | #67aef9 | |
background.information.bold.default | React: themeGet('colors.background.information.bold.default')CSS: --fk-background-information-bold | background/information/bold/default | A vibrant background option for communicating information or something in-progress. | #1f76db | |
background.information.bold.hovered | React: themeGet('colors.background.information.bold.hovered')CSS: --fk-background-information-bold-hovered | background/information/bold/hovered | Hovered state of color.background.information.bold. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
background.information.bold.pressed | React: themeGet('colors.background.information.bold.pressed')CSS: --fk-background-information-bold-pressed | background/information/bold/pressed | Pressed state of color.background.information.bold | #003d75 | |
background.danger.default.[default] | React: themeGet('colors.background.danger.default.default')CSS: --fk-background-danger | background/danger/default/default | Use for backgrounds communicating critical information, such in error section messages. | #fbe9ec | |
background.danger.default.hovered | React: themeGet('colors.background.danger.default.hovered')CSS: --fk-background-danger-hovered | background/danger/default/hovered | Hovered state for color.background.danger. Reference: --color-error-highlight, --negative-color-selected | #f4c3cb | |
background.danger.default.pressed | React: themeGet('colors.background.danger.default.pressed')CSS: --fk-background-danger-pressed | background/danger/default/pressed | Pressed state for color.background.danger. Reference: --negative-color-selected-hover | #ecb7bf | |
background.danger.bold.default | React: themeGet('colors.background.danger.bold.default')CSS: --fk-background-danger-bold | background/danger/bold/default | A vibrant background option for communicating critical information, such as in danger buttons and error banners. Reference: --color-error, --negative-color | #d83a52 | |
background.danger.bold.hovered | React: themeGet('colors.background.danger.bold.hovered')CSS: --fk-background-danger-bold-hovered | background/danger/bold/hovered | Hovered state of color.background.danger.bold | #c53a4c | |
background.danger.bold.pressed | React: themeGet('colors.background.danger.bold.pressed')CSS: --fk-background-danger-bold-pressed | background/danger/bold/pressed | Pressed state of color.background.danger.bold | #76232e | |
background.success.default.[default] | React: themeGet('colors.background.success.default.default')CSS: --fk-background-success | background/success/default/default | Use for backgrounds communicating a favourable outcome, such as in success section messages. | #d6ebdf | |
background.success.default.hovered | React: themeGet('colors.background.success.default.hovered')CSS: --fk-background-success-hovered | background/success/default/hovered | Hovered state for color.background.success. Reference: --color-success-highlight, --positive-color-selected | #bbdbc9 | |
background.success.default.pressed | React: themeGet('colors.background.success.default.pressed')CSS: --fk-background-success-pressed | background/success/default/pressed | Pressed state for color.background.success | #89bda0 | |
background.success.bold.default | React: themeGet('colors.background.success.bold.default')CSS: --fk-background-success-bold | background/success/bold/default | A vibrant background option for communicating a favourable outcome, such as in checked toggles. Reference: --color-success, --positive-color | #00854d | |
background.success.bold.hovered | React: themeGet('colors.background.success.bold.hovered')CSS: --fk-background-success-bold-hovered | background/success/bold/hovered | Hovered state of color.background.success.bold. Reference: --color-success-hover, --positive-color-hover | #007038 | |
background.success.bold.pressed | React: themeGet('colors.background.success.bold.pressed')CSS: --fk-background-success-bold-pressed | background/success/bold/pressed | Pressed state of color.background.success.bold | #006130 | |
background.discovery.default.[default] | React: themeGet('colors.background.discovery.default.default')CSS: --fk-background-discovery | background/discovery/default/default | Use for backgrounds communicating change or something new, such as in discovery section messages. | #f3eafa | |
background.discovery.default.hovered | React: themeGet('colors.background.discovery.default.hovered')CSS: --fk-background-discovery-hovered | background/discovery/default/hovered | Hover state for color.background.discovery | #e7d5f6 | |
background.discovery.default.pressed | React: themeGet('colors.background.discovery.default.pressed')CSS: --fk-background-discovery-pressed | background/discovery/default/pressed | Pressed state for color.background.discovery. Reference: --color-purple-selected | #d0aeed | |
background.discovery.bold.default | React: themeGet('colors.background.discovery.bold.default')CSS: --fk-background-discovery-bold | background/discovery/bold/default | A vibrant background option communicating change or something new, such as in onboarding spotlights. Reference: --color-purple-hover | #8050ab | |
background.discovery.bold.hovered | React: themeGet('colors.background.discovery.bold.hovered')CSS: --fk-background-discovery-bold-hovered | background/discovery/bold/hovered | Hovered state of color.background.discovery.bold | #68418b | |
background.discovery.bold.pressed | React: themeGet('colors.background.discovery.bold.pressed')CSS: --fk-background-discovery-bold-pressed | background/discovery/bold/pressed | Pressed state of color.background.discovery.bold | #4e3168 | |
background.warning.default.[default] | React: themeGet('colors.background.warning.default.default')CSS: --fk-background-warning | background/warning/default/default | Use for backgrounds communicating caution, such as in warning section messages. | #fdf4ce | |
background.warning.default.hovered | React: themeGet('colors.background.warning.default.hovered')CSS: --fk-background-warning-hovered | background/warning/default/hovered | Hovered state for color.background.warning. Reference: --warning-color-selected | #fceba1 | |
background.warning.default.pressed | React: themeGet('colors.background.warning.default.pressed')CSS: --fk-background-warning-pressed | background/warning/default/pressed | Pressed state for color.background.warning. Reference: --warning-color-selected-hover | #f2d973 | |
background.warning.bold.default | React: themeGet('colors.background.warning.bold.default')CSS: --fk-background-warning-bold | background/warning/bold/default | A vibrant background option for communicating caution, such as in warning buttons and warning banners. | #f5c238 | |
background.warning.bold.hovered | React: themeGet('colors.background.warning.bold.hovered')CSS: --fk-background-warning-bold-hovered | background/warning/bold/hovered | Hovered state of color.background.warning.bold. Reference: --warning-color-hover | #eaaa15 | |
background.warning.bold.pressed | React: themeGet('colors.background.warning.bold.pressed')CSS: --fk-background-warning-bold-pressed | background/warning/bold/pressed | Pressed state of color.background.warning.bold | #c58f12 | |
blanket.default | React: themeGet('colors.blanket.default')CSS: --fk-blanket | blanket/default | Use for the screen overlay that appears with modal dialogs | #292f4cb3 | |
blanket.selected | React: themeGet('colors.blanket.selected')CSS: --fk-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 | #0060b914 | |
blanket.danger | React: themeGet('colors.blanket.danger')CSS: --fk-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 | #b635461a | |
text.default | React: themeGet('colors.text.default')CSS: --fk-text | text/default | Use for primary text, such as body copy, sentence case headers, and buttons. Reference: --primary-text-color, --text-color-fixed-dark, --primary-text-on-secondary-color, --color-mud_black | #323338 | |
text.subtle | React: themeGet('colors.text.subtle')CSS: --fk-text-subtle | text/subtle | Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings. Reference: --color-asphalt, --secondary-text-color, --placeholder-color, --secondary-text-on-secondary-color, --placeholder-on-secondary-color | #676879 | |
text.subtlest | React: themeGet('colors.text.subtlest')CSS: --fk-text-subtlest | text/subtlest | Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text. | #878ca1 | |
text.disabled | React: themeGet('colors.text.disabled')CSS: --fk-text-disabled | text/disabled | Use for text in a disabled state. | #1f222d85 | |
text.selected | React: themeGet('colors.text.selected')CSS: --fk-text-selected | text/selected | Use for text in selected or opened states, such as tabs and dropdown buttons. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
text.inverse | React: themeGet('colors.text.inverse')CSS: --fk-text-inverse | text/inverse | Use for text on bold backgrounds. Reference: --color-snow_white, --text-color-on-primary, --text-color-on-inverted, --text-color-fixed-light, --text-color-on-brand | #ffffff | |
text.success | React: themeGet('colors.text.success')CSS: --fk-text-success | text/success | Use for text to communicate a favourable outcome, such as input field success messaging. Reference: --color-success, --positive-color | #00854d | |
text.danger | React: themeGet('colors.text.danger')CSS: --fk-text-danger | text/danger | Use for critical text, such as input field error messaging. Reference: --color-error, --negative-color | #d83a52 | |
text.information | React: themeGet('colors.text.information')CSS: --fk-text-information | text/information | Use for informative text or to communicate something is in progress, such as in-progress lozenges. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
text.warning.default | React: themeGet('colors.text.warning.default')CSS: --fk-text-warning | text/warning/default | Use for text to emphasize caution, such as in moved lozenges. | #7c5803 | |
text.warning.inverse | React: themeGet('colors.text.warning.inverse')CSS: --fk-text-warning-inverse | text/warning/inverse | Use for text when on bold warning backgrounds. | #262936 | |
text.discovery | React: themeGet('colors.text.discovery')CSS: --fk-text-discovery | text/discovery | Use for text to emphasize change or something new. | #68418b | |
text.brand | React: themeGet('colors.text.brand')CSS: --fk-text-brand | text/brand | Use for text that reinforces Monday brand. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
text.accent.blue.default | React: themeGet('colors.text.accent.blue.default')CSS: --fk-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. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
text.accent.blue.bolder | React: themeGet('colors.text.accent.blue.bolder')CSS: --fk-text-accent-blue-bolder | text/accent/blue/bolder | Use on bold blue accent backgrounds. | #003d75 | |
text.accent.red.default | React: themeGet('colors.text.accent.red.default')CSS: --fk-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. Reference: --color-error-hover, --negative-color-hover | #b63546 | |
text.accent.red.bolder | React: themeGet('colors.text.accent.red.bolder')CSS: --fk-text-accent-red-bolder | text/accent/red/bolder | Use on bold red accent backgrounds. | #76232e | |
text.accent.orange.default | React: themeGet('colors.text.accent.orange.default')CSS: --fk-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. | #7c5803 | |
text.accent.orange.bolder | React: themeGet('colors.text.accent.orange.bolder')CSS: --fk-text-accent-orange-bolder | text/accent/orange/bolder | Use on bold orange accent backgrounds. | #5a3f02 | |
text.accent.yellow.default | React: themeGet('colors.text.accent.yellow.default')CSS: --fk-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. | #755f0a | |
text.accent.yellow.bolder | React: themeGet('colors.text.accent.yellow.bolder')CSS: --fk-text-accent-yellow-bolder | text/accent/yellow/bolder | Use on bold yellow accent backgrounds. | #463906 | |
text.accent.green.default | React: themeGet('colors.text.accent.green.default')CSS: --fk-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. | #007a41 | |
text.accent.green.bolder | React: themeGet('colors.text.accent.green.bolder')CSS: --fk-text-accent-green-bolder | text/accent/green/bolder | Use on bold green accent backgrounds. | #006130 | |
text.accent.purple.default | React: themeGet('colors.text.accent.purple.default')CSS: --fk-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. Reference: --color-purple-hover | #8050ab | |
text.accent.purple.bolder | React: themeGet('colors.text.accent.purple.bolder')CSS: --fk-text-accent-purple-bolder | text/accent/purple/bolder | Use on bold purple accent backgrounds. | #4e3168 | |
text.accent.teal.default | React: themeGet('colors.text.accent.teal.default')CSS: --fk-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. | #1d717c | |
text.accent.teal.bolder | React: themeGet('colors.text.accent.teal.bolder')CSS: --fk-text-accent-teal-bolder | text/accent/teal/bolder | Use on bold teal accent backgrounds. Reference: --color-teal-hover | #12484f | |
text.accent.magenta.default | React: themeGet('colors.text.accent.magenta.default')CSS: --fk-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. Reference: --color-sofia_pink-hover | #c21e71 | |
text.accent.magenta.bolder | React: themeGet('colors.text.accent.magenta.bolder')CSS: --fk-text-accent-magenta-bolder | text/accent/magenta/bolder | Use on bold magenta accent backgrounds. | #610f39 | |
text.accent.gray.default | React: themeGet('colors.text.accent.gray.default')CSS: --fk-text-accent-gray | text/accent/gray/default | Use for text on non-bold gray accent backgrounds, such as colored tags. | #494a4b | |
text.accent.gray.bolder | React: themeGet('colors.text.accent.gray.bolder')CSS: --fk-text-accent-gray-bolder | text/accent/gray/bolder | Use for text and icons on gray subtle accent backgrounds. | #191a1a | |
text.accent.lime.default | React: themeGet('colors.text.accent.lime.default')CSS: --fk-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. | #4d651b | |
text.accent.lime.bolder | React: themeGet('colors.text.accent.lime.bolder')CSS: --fk-text-accent-lime-bolder | text/accent/lime/bolder | Use on bold lime accent backgrounds. | #2e3d10 | |
link.default | React: themeGet('colors.link.default')CSS: --fk-link | link/default | Use for links in a default state. Reference: --color-link_color, --link_color, --link-on-secondary-color | #1f76c2 | |
link.hovered | React: themeGet('colors.link.hovered')CSS: --fk-link-hovered | link/hovered | Use for links in a hovered state. Reference: --color-link_color, --link_color, --link-on-secondary-color | #1f76c2 | |
link.pressed | React: themeGet('colors.link.pressed')CSS: --fk-link-pressed | link/pressed | Use for links in a pressed state. Reference: --color-link_color, --link_color, --link-on-secondary-color | #1f76c2 | |
link.visited | React: themeGet('colors.link.visited')CSS: --fk-link-visited | link/visited | Use for links in a visited state. | #1f76c2 | |
icon.accent.blue | React: themeGet('colors.icon.accent.blue')CSS: --fk-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. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
icon.accent.red | React: themeGet('colors.icon.accent.red')CSS: --fk-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. Reference: --color-error, --negative-color | #d83a52 | |
icon.accent.orange | React: themeGet('colors.icon.accent.orange')CSS: --fk-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. Reference: --warning-color-hover | #eaaa15 | |
icon.accent.yellow | React: themeGet('colors.icon.accent.yellow')CSS: --fk-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. | #e5b700 | |
icon.accent.green | React: themeGet('colors.icon.accent.green')CSS: --fk-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. Reference: --color-success, --positive-color | #00854d | |
icon.accent.purple | React: themeGet('colors.icon.accent.purple')CSS: --fk-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. | #904acf | |
icon.accent.teal | React: themeGet('colors.icon.accent.teal')CSS: --fk-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. | #2696a6 | |
icon.accent.magenta | React: themeGet('colors.icon.accent.magenta')CSS: --fk-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. Reference: --color-sofia_pink, --color-dark-pink | #ff158a | |
icon.accent.gray | React: themeGet('colors.icon.accent.gray')CSS: --fk-icon-accent-gray | icon/accent/gray | Use for icons on non-bold gray accent backgrounds, such as file type icons. | #73788c | |
icon.accent.lime | React: themeGet('colors.icon.accent.lime')CSS: --fk-icon-accent-lime | icon/accent/lime | Use for icons on non-bold lime accent backgrounds, such as file type icons. | #89ba21 | |
icon.default | React: themeGet('colors.icon.default')CSS: --fk-icon | icon/default | Use for icon-only buttons, or icons paired with color.text. Reference: --color-asphalt, --secondary-text-color, --placeholder-color, --secondary-text-on-secondary-color, --placeholder-on-secondary-color, --icon-color, --icon-on-secondary-color | #676879 | |
icon.subtle | React: themeGet('colors.icon.subtle')CSS: --fk-icon-subtle | icon/subtle | Use for icons paired with color.text.subtle | #878ca1 | |
icon.inverse | React: themeGet('colors.icon.inverse')CSS: --fk-icon-inverse | icon/inverse | Use for icons on bold backgrounds. Reference: --color-snow_white, --text-color-on-primary, --text-color-on-inverted, --text-color-fixed-light, --text-color-on-brand | #ffffff | |
icon.disabled | React: themeGet('colors.icon.disabled')CSS: --fk-icon-disabled | icon/disabled | Use for icons in a disabled state. Reference: --color-wolf_gray | #c3c6d4 | |
icon.brand | React: themeGet('colors.icon.brand')CSS: --fk-icon-brand | icon/brand | Use for icons that reinforce our brand. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
icon.selected | React: themeGet('colors.icon.selected')CSS: --fk-icon-selected | icon/selected | Use for icons in selected or opened states, such as those used in dropdown buttons. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
icon.danger | React: themeGet('colors.icon.danger')CSS: --fk-icon-danger | icon/danger | Use for icons communicating critical information, such as those used in error handing. Reference: --color-error, --negative-color | #d83a52 | |
icon.success | React: themeGet('colors.icon.success')CSS: --fk-icon-success | icon/success | Use for icons communicating a favourable outcome, such as those used in success section messaged. Reference: --color-success, --positive-color | #00854d | |
icon.discovery | React: themeGet('colors.icon.discovery')CSS: --fk-icon-discovery | icon/discovery | Use for icons communicating change or something new, such as discovery section messages. | #904acf | |
icon.information | React: themeGet('colors.icon.information')CSS: --fk-icon-information | icon/information | Use for icons communicating information or something in-progress, such as information section messages. | #1f76c2 | |
icon.warning.default | React: themeGet('colors.icon.warning.default')CSS: --fk-icon-warning | icon/warning/default | Use for icons communicating caution, such as those used in warning section messages. | #c58f12 | |
icon.warning.inverse | React: themeGet('colors.icon.warning.inverse')CSS: --fk-icon-warning-inverse | icon/warning/inverse | Use for icons when on bold warning backgrounds. | #262936 | |
interaction.hovered | React: themeGet('colors.interaction.hovered')CSS: --fk-interaction-hovered | interaction/hovered | Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars. | #1f222d24 | |
interaction.pressed | React: themeGet('colors.interaction.pressed')CSS: --fk-interaction-pressed | interaction/pressed | Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars. | #1f222d38 | |
skeleton.default | React: themeGet('colors.skeleton.default')CSS: --fk-skeleton | skeleton/default | Use for skeleton loading states | #1f222d0f | |
skeleton.subtle | React: themeGet('colors.skeleton.subtle')CSS: --fk-skeleton-subtle | skeleton/subtle | Use for the pulse or shimmer effect in skeleton loading states | #1f222d08 | |
chart.brand.default | React: themeGet('colors.chart.brand.default')CSS: --fk-chart-brand | chart/brand/default | Our primary color for data visualisation. Use when only one color is required. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
chart.brand.hovered | React: themeGet('colors.chart.brand.hovered')CSS: --fk-chart-brand-hovered | chart/brand/hovered | Hovered state of color.chart.brand. | #1f76db | |
chart.neutral.default | React: themeGet('colors.chart.neutral.default')CSS: --fk-chart-neutral | chart/neutral/default | A secondary color for data visualisation or to communicate 'to-do' statues. | #878ca1 | |
chart.neutral.hovered | React: themeGet('colors.chart.neutral.hovered')CSS: --fk-chart-neutral-hovered | chart/neutral/hovered | Hovered state of color.chart.neutral. | #73788c | |
chart.success.default.[default] | React: themeGet('colors.chart.success.default.default')CSS: --fk-chart-success | chart/success/default/default | For data visualisation communicating positive information, such as 'on track'. Reference: --color-success, --positive-color | #00854d | |
chart.success.default.hovered | React: themeGet('colors.chart.success.default.hovered')CSS: --fk-chart-success-hovered | chart/success/default/hovered | Hovered state of color.chart.success. | #007a41 | |
chart.success.bold.default | React: themeGet('colors.chart.success.bold.default')CSS: --fk-chart-success-bold | chart/success/bold/default | A stronger emphasis option of color.chart.success. Reference: --color-success-hover, --positive-color-hover | #007038 | |
chart.success.bold.hovered | React: themeGet('colors.chart.success.bold.hovered')CSS: --fk-chart-success-bold-hovered | chart/success/bold/hovered | Hovered state of color.chart.success.bold. | #006130 | |
chart.danger.default.[default] | React: themeGet('colors.chart.danger.default.default')CSS: --fk-chart-danger | chart/danger/default/default | For data visualisation communicating negative information, such as 'off track'. | #dd5569 | |
chart.danger.default.hovered | React: themeGet('colors.chart.danger.default.hovered')CSS: --fk-chart-danger-hovered | chart/danger/default/hovered | Hovered state of color.chart.danger. Reference: --color-error, --negative-color | #d83a52 | |
chart.danger.bold.default | React: themeGet('colors.chart.danger.bold.default')CSS: --fk-chart-danger-bold | chart/danger/bold/default | A stronger emphasis option of color.chart.danger. Reference: --color-error-hover, --negative-color-hover | #b63546 | |
chart.danger.bold.hovered | React: themeGet('colors.chart.danger.bold.hovered')CSS: --fk-chart-danger-bold-hovered | chart/danger/bold/hovered | Hovered state of color.chart.danger.bold. | #76232e | |
chart.warning.default.[default] | React: themeGet('colors.chart.warning.default.default')CSS: --fk-chart-warning | chart/warning/default/default | For data visualisation communicating caution, such as 'at risk' statuses. Reference: --warning-color-hover | #eaaa15 | |
chart.warning.default.hovered | React: themeGet('colors.chart.warning.default.hovered')CSS: --fk-chart-warning-hovered | chart/warning/default/hovered | Hovered state of color.chart.warning. | #c58f12 | |
chart.warning.bold.default | React: themeGet('colors.chart.warning.bold.default')CSS: --fk-chart-warning-bold | chart/warning/bold/default | A stronger emphasis option of color.chart.warning. | #aa7909 | |
chart.warning.bold.hovered | React: themeGet('colors.chart.warning.bold.hovered')CSS: --fk-chart-warning-bold-hovered | chart/warning/bold/hovered | Hovered state of color.chart.warning.bold. | #7c5803 | |
chart.information.default.[default] | React: themeGet('colors.chart.information.default.default')CSS: --fk-chart-information | chart/information/default/default | For data visualisation communicating low priority or in-progress statuses. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
chart.information.default.hovered | React: themeGet('colors.chart.information.default.hovered')CSS: --fk-chart-information-hovered | chart/information/default/hovered | Hovered state of color.chart.information. | #1f76db | |
chart.information.bold.default | React: themeGet('colors.chart.information.bold.default')CSS: --fk-chart-information-bold | chart/information/bold/default | A stronger emphasis option of color.chart.information. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
chart.information.bold.hovered | React: themeGet('colors.chart.information.bold.hovered')CSS: --fk-chart-information-bold-hovered | chart/information/bold/hovered | Hovered state of color.chart.information.bold. | #003d75 | |
chart.discovery.default.[default] | React: themeGet('colors.chart.discovery.default.default')CSS: --fk-chart-discovery | chart/discovery/default/default | For data visualisation communicating 'new' statuses. Reference: --shareable-color, --color-purple, --color-amethyst | #a25ddc | |
chart.discovery.default.hovered | React: themeGet('colors.chart.discovery.default.hovered')CSS: --fk-chart-discovery-hovered | chart/discovery/default/hovered | Hovered state of color.chart.discovery. | #904acf | |
chart.discovery.bold.default | React: themeGet('colors.chart.discovery.bold.default')CSS: --fk-chart-discovery-bold | chart/discovery/bold/default | A stronger emphasis option of color.chart.discovery. | #68418b | |
chart.discovery.bold.hovered | React: themeGet('colors.chart.discovery.bold.hovered')CSS: --fk-chart-discovery-bold-hovered | chart/discovery/bold/hovered | Hovered state of color.chart.discovery.bold. | #4e3168 | |
chart.categorical.1.default | React: themeGet('colors.chart.categorical.1.default')CSS: --fk-chart-categorical-1 | chart/categorical/1/default | For data visualisation only. Follow numbered sequence. | #2696a6 | |
chart.categorical.1.hovered | React: themeGet('colors.chart.categorical.1.hovered')CSS: --fk-chart-categorical-1-hovered | chart/categorical/1/hovered | Hovered state of color.chart.categorical.1. | #1d717c | |
chart.categorical.2.default | React: themeGet('colors.chart.categorical.2.default')CSS: --fk-chart-categorical-2 | chart/categorical/2/default | For data visualisation only. Follow numbered sequence. | #68418b | |
chart.categorical.2.hovered | React: themeGet('colors.chart.categorical.2.hovered')CSS: --fk-chart-categorical-2-hovered | chart/categorical/2/hovered | Hovered state of color.chart.categorical.2. | #4e3168 | |
chart.categorical.3.default | React: themeGet('colors.chart.categorical.3.default')CSS: --fk-chart-categorical-3 | chart/categorical/3/default | For data visualisation only. Follow numbered sequence. Reference: --warning-color-hover | #eaaa15 | |
chart.categorical.3.hovered | React: themeGet('colors.chart.categorical.3.hovered')CSS: --fk-chart-categorical-3-hovered | chart/categorical/3/hovered | Hovered state of color.chart.categorical.3. | #c58f12 | |
chart.categorical.4.default | React: themeGet('colors.chart.categorical.4.default')CSS: --fk-chart-categorical-4 | chart/categorical/4/default | For data visualisation only. Follow numbered sequence. Reference: --color-sofia_pink-hover | #c21e71 | |
chart.categorical.4.hovered | React: themeGet('colors.chart.categorical.4.hovered')CSS: --fk-chart-categorical-4-hovered | chart/categorical/4/hovered | Hovered state of color.chart.categorical.4. | #610f39 | |
chart.categorical.5.default | React: themeGet('colors.chart.categorical.5.default')CSS: --fk-chart-categorical-5 | chart/categorical/5/default | For data visualisation only. Follow numbered sequence. | #003d75 | |
chart.categorical.5.hovered | React: themeGet('colors.chart.categorical.5.hovered')CSS: --fk-chart-categorical-5-hovered | chart/categorical/5/hovered | Hovered state of color.chart.categorical.5. | #00284d | |
chart.categorical.6.default | React: themeGet('colors.chart.categorical.6.default')CSS: --fk-chart-categorical-6 | chart/categorical/6/default | For data visualisation only. Follow numbered sequence. Reference: --shareable-color, --color-purple, --color-amethyst | #a25ddc | |
chart.categorical.6.hovered | React: themeGet('colors.chart.categorical.6.hovered')CSS: --fk-chart-categorical-6-hovered | chart/categorical/6/hovered | Hovered state of color.chart.categorical.6. | #904acf | |
chart.categorical.7.default | React: themeGet('colors.chart.categorical.7.default')CSS: --fk-chart-categorical-7 | chart/categorical/7/default | For data visualisation only. Follow numbered sequence. | #610f39 | |
chart.categorical.7.hovered | React: themeGet('colors.chart.categorical.7.hovered')CSS: --fk-chart-categorical-7-hovered | chart/categorical/7/hovered | Hovered state of color.chart.categorical.7. | #4b0c2c | |
chart.categorical.8.default | React: themeGet('colors.chart.categorical.8.default')CSS: --fk-chart-categorical-8 | chart/categorical/8/default | For data visualisation only. Follow numbered sequence. | #aa7909 | |
chart.categorical.8.hovered | React: themeGet('colors.chart.categorical.8.hovered')CSS: --fk-chart-categorical-8-hovered | chart/categorical/8/hovered | Hovered state of color.chart.categorical.8. | #7c5803 | |
chart.blue.bold.default | React: themeGet('colors.chart.blue.bold.default')CSS: --fk-chart-blue-bold | chart/blue/bold/default | For data visualisation only. | #1e89fa | |
chart.blue.bold.hovered | React: themeGet('colors.chart.blue.bold.hovered')CSS: --fk-chart-blue-bold-hovered | chart/blue/bold/hovered | Hovered state of color.chart.blue.bold. Reference: --color-basic_blue, --primary-color, --brand-color, --primary-on-secondary-color | #0073ea | |
chart.blue.bolder.default | React: themeGet('colors.chart.blue.bolder.default')CSS: --fk-chart-blue-bolder | chart/blue/bolder/default | For data visualisation only. | #1f76db | |
chart.blue.bolder.hovered | React: themeGet('colors.chart.blue.bolder.hovered')CSS: --fk-chart-blue-bolder-hovered | chart/blue/bolder/hovered | Hovered state of color.chart.blue.bolder. | #1f76c2 | |
chart.blue.boldest.default | React: themeGet('colors.chart.blue.boldest.default')CSS: --fk-chart-blue-boldest | chart/blue/boldest/default | For data visualisation only. Reference: --color-dark_blue, --primary-hover-color, --brand-hover-color, --primary-hover-on-secondary-color | #0060b9 | |
chart.blue.boldest.hovered | React: themeGet('colors.chart.blue.boldest.hovered')CSS: --fk-chart-blue-boldest-hovered | chart/blue/boldest/hovered | Hovered state of color.chart.blue.boldest. | #003d75 | |
chart.red.bold.default | React: themeGet('colors.chart.red.bold.default')CSS: --fk-chart-red-bold | chart/red/bold/default | For data visualisation only. | #dd5569 | |
chart.red.bold.hovered | React: themeGet('colors.chart.red.bold.hovered')CSS: --fk-chart-red-bold-hovered | chart/red/bold/hovered | Hovered state of color.chart.red.bold. Reference: --color-error, --negative-color | #d83a52 | |
chart.red.bolder.default | React: themeGet('colors.chart.red.bolder.default')CSS: --fk-chart-red-bolder | chart/red/bolder/default | For data visualisation only. | #c53a4c | |
chart.red.bolder.hovered | React: themeGet('colors.chart.red.bolder.hovered')CSS: --fk-chart-red-bolder-hovered | chart/red/bolder/hovered | Hovered state of color.chart.red.bolder. Reference: --color-error-hover, --negative-color-hover | #b63546 | |
chart.red.boldest.default | React: themeGet('colors.chart.red.boldest.default')CSS: --fk-chart-red-boldest | chart/red/boldest/default | For data visualisation only. | #76232e | |
chart.red.boldest.hovered | React: themeGet('colors.chart.red.boldest.hovered')CSS: --fk-chart-red-boldest-hovered | chart/red/boldest/hovered | Hovered state of color.chart.red.boldest. | #4b161d | |
chart.orange.bold.default | React: themeGet('colors.chart.orange.bold.default')CSS: --fk-chart-orange-bold | chart/orange/bold/default | For data visualisation only. Reference: --warning-color-hover | #eaaa15 | |
chart.orange.bold.hovered | React: themeGet('colors.chart.orange.bold.hovered')CSS: --fk-chart-orange-bold-hovered | chart/orange/bold/hovered | Hovered state of color.chart.orange.bold. | #c58f12 | |
chart.orange.bolder.default | React: themeGet('colors.chart.orange.bolder.default')CSS: --fk-chart-orange-bolder | chart/orange/bolder/default | For data visualisation only. | #c58f12 | |
chart.orange.bolder.hovered | React: themeGet('colors.chart.orange.bolder.hovered')CSS: --fk-chart-orange-bolder-hovered | chart/orange/bolder/hovered | Hovered state of color.chart.orange.bolder. | #aa7909 | |
chart.orange.boldest.default | React: themeGet('colors.chart.orange.boldest.default')CSS: --fk-chart-orange-boldest | chart/orange/boldest/default | For data visualisation only. | #aa7909 | |
chart.orange.boldest.hovered | React: themeGet('colors.chart.orange.boldest.hovered')CSS: --fk-chart-orange-boldest-hovered | chart/orange/boldest/hovered | Hovered state of color.chart.orange.boldest. | #7c5803 | |
chart.yellow.bold.default | React: themeGet('colors.chart.yellow.bold.default')CSS: --fk-chart-yellow-bold | chart/yellow/bold/default | For data visualisation only. | #e5b700 | |
chart.yellow.bold.hovered | React: themeGet('colors.chart.yellow.bold.hovered')CSS: --fk-chart-yellow-bold-hovered | chart/yellow/bold/hovered | Hovered state of color.chart.yellow.bold. | #dbaf00 | |
chart.yellow.bolder.default | React: themeGet('colors.chart.yellow.bolder.default')CSS: --fk-chart-yellow-bolder | chart/yellow/bolder/default | For data visualisation only. | #dbaf00 | |
chart.yellow.bolder.hovered | React: themeGet('colors.chart.yellow.bolder.hovered')CSS: --fk-chart-yellow-bolder-hovered | chart/yellow/bolder/hovered | Hovered state of color.chart.yellow.bolder. Reference: --color-egg_yolk-hover | #c29e11 | |
chart.yellow.boldest.default | React: themeGet('colors.chart.yellow.boldest.default')CSS: --fk-chart-yellow-boldest | chart/yellow/boldest/default | For data visualisation only. Reference: Reference: --color-egg_yolk-hover | #c29e11 | |
chart.yellow.boldest.hovered | React: themeGet('colors.chart.yellow.boldest.hovered')CSS: --fk-chart-yellow-boldest-hovered | chart/yellow/boldest/hovered | Hovered state of color.chart.yellow.boldest. | #755f0a | |
chart.green.bold.default | React: themeGet('colors.chart.green.bold.default')CSS: --fk-chart-green-bold | chart/green/bold/default | For data visualisation only. Reference: --color-success, --positive-color | #00854d | |
chart.green.bold.hovered | React: themeGet('colors.chart.green.bold.hovered')CSS: --fk-chart-green-bold-hovered | chart/green/bold/hovered | Hovered state of color.chart.green.bold. | #007a41 | |
chart.green.bolder.default | React: themeGet('colors.chart.green.bolder.default')CSS: --fk-chart-green-bolder | chart/green/bolder/default | For data visualisation only. | #007a41 | |
chart.green.bolder.hovered | React: themeGet('colors.chart.green.bolder.hovered')CSS: --fk-chart-green-bolder-hovered | chart/green/bolder/hovered | Hovered state of color.chart.green.bolder. Reference: --color-success-hover, --positive-color-hover | #007038 | |
chart.green.boldest.default | React: themeGet('colors.chart.green.boldest.default')CSS: --fk-chart-green-boldest | chart/green/boldest/default | For data visualisation only. Reference: --color-success-hover, --positive-color-hover | #007038 | |
chart.green.boldest.hovered | React: themeGet('colors.chart.green.boldest.hovered')CSS: --fk-chart-green-boldest-hovered | chart/green/boldest/hovered | Hovered state of color.chart.green.boldest. | #006130 | |
chart.teal.bold.default | React: themeGet('colors.chart.teal.bold.default')CSS: --fk-chart-teal-bold | chart/teal/bold/default | For data visualisation only. | #2696a6 | |
chart.teal.bold.hovered | React: themeGet('colors.chart.teal.bold.hovered')CSS: --fk-chart-teal-bold-hovered | chart/teal/bold/hovered | Hovered state of color.chart.teal.bold. | #1d717c | |
chart.teal.bolder.default | React: themeGet('colors.chart.teal.bolder.default')CSS: --fk-chart-teal-bolder | chart/teal/bolder/default | For data visualisation only. | #1d717c | |
chart.teal.bolder.hovered | React: themeGet('colors.chart.teal.bolder.hovered')CSS: --fk-chart-teal-bolder-hovered | chart/teal/bolder/hovered | Hovered state of color.chart.teal.bolder. Reference: --color-teal | #175a63 | |
chart.teal.boldest.default | React: themeGet('colors.chart.teal.boldest.default')CSS: --fk-chart-teal-boldest | chart/teal/boldest/default | For data visualisation only. Reference: --color-teal | #175a63 | |
chart.teal.boldest.hovered | React: themeGet('colors.chart.teal.boldest.hovered')CSS: --fk-chart-teal-boldest-hovered | chart/teal/boldest/hovered | Hovered state of color.chart.teal.boldest. Reference: --color-teal-hover | #12484f | |
chart.purple.bold.default | React: themeGet('colors.chart.purple.bold.default')CSS: --fk-chart-purple-bold | chart/purple/bold/default | For data visualisation only. Reference: --shareable-color, --color-purple, --color-amethyst | #a25ddc | |
chart.purple.bold.hovered | React: themeGet('colors.chart.purple.bold.hovered')CSS: --fk-chart-purple-bold-hovered | chart/purple/bold/hovered | Hovered state of color.chart.purple.bold. | #904acf | |
chart.purple.bolder.default | React: themeGet('colors.chart.purple.bolder.default')CSS: --fk-chart-purple-bolder | chart/purple/bolder/default | For data visualisation only. | #904acf | |
chart.purple.bolder.hovered | React: themeGet('colors.chart.purple.bolder.hovered')CSS: --fk-chart-purple-bolder-hovered | chart/purple/bolder/hovered | Hovered state of color.chart.purple.bolder. Reference: --color-purple-hover | #8050ab | |
chart.purple.boldest.default | React: themeGet('colors.chart.purple.boldest.default')CSS: --fk-chart-purple-boldest | chart/purple/boldest/default | For data visualisation only. | #68418b | |
chart.purple.boldest.hovered | React: themeGet('colors.chart.purple.boldest.hovered')CSS: --fk-chart-purple-boldest-hovered | chart/purple/boldest/hovered | Hovered state of color.chart.purple.boldest. | #4e3168 | |
chart.magenta.bold.default | React: themeGet('colors.chart.magenta.bold.default')CSS: --fk-chart-magenta-bold | chart/magenta/bold/default | For data visualisation only. | #ff3399 | |
chart.magenta.bold.hovered | React: themeGet('colors.chart.magenta.bold.hovered')CSS: --fk-chart-magenta-bold-hovered | chart/magenta/bold/hovered | Hovered state of color.chart.magenta.bold. Reference: --color-sofia_pink, --color-dark-pink | #ff158a | |
chart.magenta.bolder.default | React: themeGet('colors.chart.magenta.bolder.default')CSS: --fk-chart-magenta-bolder | chart/magenta/bolder/default | For data visualisation only. Reference: --color-sofia_pink, --color-dark-pink | #ff158a | |
chart.magenta.bolder.hovered | React: themeGet('colors.chart.magenta.bolder.hovered')CSS: --fk-chart-magenta-bolder-hovered | chart/magenta/bolder/hovered | Hovered state of color.chart.magenta.bolder. | #e1197e | |
chart.magenta.boldest.default | React: themeGet('colors.chart.magenta.boldest.default')CSS: --fk-chart-magenta-boldest | chart/magenta/boldest/default | For data visualisation only. Reference: --color-sofia_pink-hover | #c21e71 | |
chart.magenta.boldest.hovered | React: themeGet('colors.chart.magenta.boldest.hovered')CSS: --fk-chart-magenta-boldest-hovered | chart/magenta/boldest/hovered | Hovered state of color.chart.magenta.boldest. | #610f39 | |
chart.gray.bold.default | React: themeGet('colors.chart.gray.bold.default')CSS: --fk-chart-gray-bold | chart/gray/bold/default | For data visualisation only. | #878ca1 | |
chart.gray.bold.hovered | React: themeGet('colors.chart.gray.bold.hovered')CSS: --fk-chart-gray-bold-hovered | chart/gray/bold/hovered | Hovered state of color.chart.gray.bold. | #73788c | |
chart.gray.bolder.default | React: themeGet('colors.chart.gray.bolder.default')CSS: --fk-chart-gray-bolder | chart/gray/bolder/default | For data visualisation only. | #73788c | |
chart.gray.bolder.hovered | React: themeGet('colors.chart.gray.bolder.hovered')CSS: --fk-chart-gray-bolder-hovered | chart/gray/bolder/hovered | Hovered state of color.chart.gray.bolder. Reference: --color-asphalt | #676879 | |
chart.gray.boldest.default | React: themeGet('colors.chart.gray.boldest.default')CSS: --fk-chart-gray-boldest | chart/gray/boldest/default | For data visualisation only. | #555a6d | |
chart.gray.boldest.hovered | React: themeGet('colors.chart.gray.boldest.hovered')CSS: --fk-chart-gray-boldest-hovered | chart/gray/boldest/hovered | Hovered state of color.chart.gray.boldest. Reference: --color-mud_black, --inverted-color-background | #323338 | |
chart.lime.bold.default | React: themeGet('colors.chart.lime.bold.default')CSS: --fk-chart-lime-bold | chart/lime/bold/default | For data visualisation only. Reference: --color-bright-green, --color-lime-green | #9cd326 | |
chart.lime.bold.hovered | React: themeGet('colors.chart.lime.bold.hovered')CSS: --fk-chart-lime-bold-hovered | chart/lime/bold/hovered | Hovered state of color.chart.lime.bold. | #89ba21 | |
chart.lime.bolder.default | React: themeGet('colors.chart.lime.bolder.default')CSS: --fk-chart-lime-bolder | chart/lime/bolder/default | For data visualisation only. | #89ba21 | |
chart.lime.bolder.hovered | React: themeGet('colors.chart.lime.bolder.hovered')CSS: --fk-chart-lime-bolder-hovered | chart/lime/bolder/hovered | Hovered state of color.chart.lime.bolder. Reference: --color-bright-green-hover | #7ca32b | |
chart.lime.boldest.default | React: themeGet('colors.chart.lime.boldest.default')CSS: --fk-chart-lime-boldest | chart/lime/boldest/default | For data visualisation only. Reference: --color-bright-green-hover | #7ca32b | |
chart.lime.boldest.hovered | React: themeGet('colors.chart.lime.boldest.hovered')CSS: --fk-chart-lime-boldest-hovered | chart/lime/boldest/hovered | Hovered state of color.chart.lime.boldest. | #4d651b |
monday--Size
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
space.0 | React: themeGet('space.0')CSS: --fk-space-0 | 0px | |||
space.1 | React: themeGet('space.1')CSS: --fk-space-1 | 4px | |||
space.2 | React: themeGet('space.2')CSS: --fk-space-2 | 8px | |||
space.3 | React: themeGet('space.3')CSS: --fk-space-3 | 12px | |||
space.4 | React: themeGet('space.4')CSS: --fk-space-4 | 16px | |||
space.5 | React: themeGet('space.5')CSS: --fk-space-5 | 20px | |||
space.6 | React: themeGet('space.6')CSS: --fk-space-6 | 24px | |||
space.7 | React: themeGet('space.7')CSS: --fk-space-7 | 32px | |||
space.8 | React: themeGet('space.8')CSS: --fk-space-8 | 40px | |||
space.9 | React: themeGet('space.9')CSS: --fk-space-9 | 48px | |||
space.10 | React: themeGet('space.10')CSS: --fk-space-10 | 56px | |||
space.11 | React: themeGet('space.11')CSS: --fk-space-11 | 64px | |||
space.12 | React: themeGet('space.12')CSS: --fk-space-12 | 96px |
monday--Border Radius
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
radii.0 | React: themeGet('radii.0')CSS: --fk-radii-0 | 0px | |||
radii.1 | React: themeGet('radii.1')CSS: --fk-radii-1 | 4px | |||
radii.2 | React: themeGet('radii.2')CSS: --fk-radii-2 | 8px | |||
radii.3 | React: themeGet('radii.3')CSS: --fk-radii-3 | 16px | |||
radii.4 | React: themeGet('radii.4')CSS: --fk-radii-4 | 20px | |||
radii.5 | React: themeGet('radii.5')CSS: --fk-radii-5 | 99999px |
monday--Typography
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
Light the way | font.title.xxsmall | React: themeGet('font.title.xxsmall')CSS: --fk-font-title-xxsmall | 600 16px/24px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.title.xsmall | React: themeGet('font.title.xsmall')CSS: --fk-font-title-xsmall | normal 500 18px/24px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.title.small | React: themeGet('font.title.small')CSS: --fk-font-title-small | normal 500 18px/24px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.title.medium | React: themeGet('font.title.medium')CSS: --fk-font-title-medium | normal 300 16px/32px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.title.large | React: themeGet('font.title.large')CSS: --fk-font-title-large | normal 500 24px/40px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.title.xlarge | React: themeGet('font.title.xlarge')CSS: --fk-font-title-xlarge | normal 500 30px/40px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.title.xxlarge | React: themeGet('font.title.xxlarge')CSS: --fk-font-title-xxlarge | normal 500 32px/40px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.body.default | React: themeGet('font.body.default')CSS: --fk-font-body | normal 400 14px/20px Figtree, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.body.small | React: themeGet('font.body.small')CSS: --fk-font-body-small | normal 400 14px/18px Figtree, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.body.medium | React: themeGet('font.body.medium')CSS: --fk-font-body-medium | normal 400 14px/24px Figtree, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.body.large | React: themeGet('font.body.large')CSS: --fk-font-body-large | normal 700 16px/22px Figtree, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.body.xlarge | React: themeGet('font.body.xlarge')CSS: --fk-font-body-xlarge | 500 16px/22px Poppins, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.ui.default | React: themeGet('font.ui.default')CSS: --fk-font-ui | normal 400 14px/24px Figtree, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.ui.small | React: themeGet('font.ui.small')CSS: --fk-font-ui-small | 400 13px/1 Figtree, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.caption.default | React: themeGet('font.caption.default')CSS: --fk-font-caption | normal 400 14px/18px Figtree, Roboto, Rubik, "Noto Kufi Arabic", "Noto Sans JP", sans-serif | ||
Light the way | font.code.default | React: themeGet('font.code.default')CSS: --fk-font-code | 400 0.875em/1 Menlo |
Formula
formula--Colors
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
elevation.surface.default.[default] | React: themeGet('colors.elevation.surface.default.default')CSS: --fk-surface | elevation/surface/default/default | Use as the primary background for the UI. Reference: --backgroundColor | #ffffff | |
elevation.surface.default.hovered | React: themeGet('colors.elevation.surface.default.hovered')CSS: --fk-surface-hovered | elevation/surface/default/hovered | Hovered state of elevation.surface | #f4f4f4 | |
elevation.surface.default.pressed | React: themeGet('colors.elevation.surface.default.pressed')CSS: --fk-surface-pressed | elevation/surface/default/pressed | Pressed state of elevation.surface | #efefef | |
elevation.surface.sunken | React: themeGet('colors.elevation.surface.sunken')CSS: --fk-surface-sunken | elevation/surface/sunken | A secondary background for the UI commonly used for grouping items, such as Jira cards in columns. | #f8f8f8 | |
elevation.surface.raised.default | React: themeGet('colors.elevation.surface.raised.default')CSS: --fk-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 | #ffffff | |
elevation.surface.raised.hovered | React: themeGet('colors.elevation.surface.raised.hovered')CSS: --fk-surface-raised-hovered | elevation/surface/raised/hovered | Hovered state of elevation.surface.raised | #f4f4f4 | |
elevation.surface.raised.pressed | React: themeGet('colors.elevation.surface.raised.pressed')CSS: --fk-surface-raised-pressed | elevation/surface/raised/pressed | Pressed state of elevation.surface.raised | #deecf9 | |
elevation.surface.overlay.default | React: themeGet('colors.elevation.surface.overlay.default')CSS: --fk-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: --fk-surface-overlay-hovered | elevation/surface/overlay/hovered | Hovered state of elevation.surface.overlay | #f4f4f4 | |
elevation.surface.overlay.pressed | React: themeGet('colors.elevation.surface.overlay.pressed')CSS: --fk-surface-overlay-pressed | elevation/surface/overlay/pressed | Pressed state of elevation.surface.overlay | #efefef | |
elevation.shadow.raised | React: themeGet('colors.elevation.shadow.raised')CSS: --fk-shadow-raised | elevation/shadow/raised | Use for the box shadow of raised card elements, such as cards on a Kanban board. Combine with elevation.surface.raised | 0px 1.6px 3.6px 0px #00000022, 0px 0.3px 0.9px 0px #0000001c | |
elevation.shadow.overlay | React: themeGet('colors.elevation.shadow.overlay')CSS: --fk-shadow-overlay | elevation/shadow/overlay | Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay. Also use for the box shadow of raised cards in a dragged state. | 0px 6.4px 14.4px 0px #00000022, 0px 1.2px 3.6px 0px #0000001c | |
elevation.shadow.overflow.default | React: themeGet('colors.elevation.shadow.overflow.default')CSS: --fk-shadow-overflow | elevation/shadow/overflow/default | Use to create a shadow when content scolls under other content. | 0px 0px 12px 0px #0304048f, 0px 0px 1px 0px #03040480 | |
elevation.shadow.overflow.spread | React: themeGet('colors.elevation.shadow.overflow.spread')CSS: --fk-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: --fk-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 | |
border.default | React: themeGet('colors.border.default')CSS: --fk-border | border/default | Use to visually group or separate UI elements, such as flat cards or side panel dividers. Reference: --palette-neutral-8 | #eaeaea | |
border.selected | React: themeGet('colors.border.selected')CSS: --fk-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. | #0078d4 | |
border.focused | React: themeGet('colors.border.focused')CSS: --fk-border-focused | border/focused | Use for focus rings of elements in a focus state. Reference: --focus-border-color | #0078d4 | |
border.subtle | React: themeGet('colors.border.subtle')CSS: --fk-border-subtle | border/subtle | Use for secondary borders to visually group or separate UI elements, such as flat cards or side panel dividers. Reference: --border-subtle-color | #00000014 | |
border.input | React: themeGet('colors.border.input')CSS: --fk-border-input | border/input | Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons. | #0000008c | |
border.inverse | React: themeGet('colors.border.inverse')CSS: --fk-border-inverse | border/inverse | Use for borders on bold backgrounds. | #ffffff | |
border.disabled | React: themeGet('colors.border.disabled')CSS: --fk-border-disabled | border/disabled | Use for borders of elements in a disabled state. | #0000001a | |
border.brand | React: themeGet('colors.border.brand')CSS: --fk-border-brand | border/brand | Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons. | #0078d4 | |
border.danger | React: themeGet('colors.border.danger')CSS: --fk-border-danger | border/danger | Use for borders communicating critical information, such as the borders on invalid text fields. Reference: --component-errorBoundary-border-color | #da0a00 | |
border.warning | React: themeGet('colors.border.warning')CSS: --fk-border-warning | border/warning | Use for borders communicating caution. | #d67730 | |
border.success | React: themeGet('colors.border.success')CSS: --fk-border-success | border/success | Use for borders communicating a favourable outcome, such as the borders on validated text fields. | #55a362 | |
border.discovery | React: themeGet('colors.border.discovery')CSS: --fk-border-discovery | border/discovery | Use for borders communicating change or something new, such as the borders in onboarding spotlights. | #881798 | |
border.information | React: themeGet('colors.border.information')CSS: --fk-border-information | border/information | Use for borders communicating information or something in-progress. | #0067b5 | |
border.accent.blue | React: themeGet('colors.border.accent.blue')CSS: --fk-border-accent-blue | border/accent/blue | Use for blue borders on non-bold backgrounds when there is no meaning tied to the color. | #0067b5 | |
border.accent.red | React: themeGet('colors.border.accent.red')CSS: --fk-border-accent-red | border/accent/red | Use for red borders on non-bold backgrounds when there is no meaning tied to the color. | #e81123 | |
border.accent.orange | React: themeGet('colors.border.accent.orange')CSS: --fk-border-accent-orange | border/accent/orange | Use for orange borders on non-bold backgrounds when there is no meaning tied to the color. | #d67730 | |
border.accent.yellow | React: themeGet('colors.border.accent.yellow')CSS: --fk-border-accent-yellow | border/accent/yellow | Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color. | #dfc800 | |
border.accent.green | React: themeGet('colors.border.accent.green')CSS: --fk-border-accent-green | border/accent/green | Use for green borders on non-bold backgrounds when there is no meaning tied to the color. | #55a362 | |
border.accent.magenta | React: themeGet('colors.border.accent.magenta')CSS: --fk-border-accent-magenta | border/accent/magenta | Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color. | #cc007e | |
border.accent.purple | React: themeGet('colors.border.accent.purple')CSS: --fk-border-accent-purple | border/accent/purple | Use for purple borders on non-bold backgrounds when there is no meaning tied to the color. | #881798 | |
border.accent.teal | React: themeGet('colors.border.accent.teal')CSS: --fk-border-accent-teal | border/accent/teal | Use for teal borders on non-bold backgrounds when there is no meaning tied to the color. | #00b7c3 | |
border.accent.gray | React: themeGet('colors.border.accent.gray')CSS: --fk-border-accent-gray | border/accent/gray | Use for borders on non-bold gray accent backgrounds. | #c8c8c8 | |
border.table.default | React: themeGet('colors.border.table.default')CSS: --fk-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. | #00000014 | |
background.accent.blue.subtlest | React: themeGet('colors.background.accent.blue.subtlest')CSS: --fk-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. | #eff6fc | |
background.accent.blue.subtler | React: themeGet('colors.background.accent.blue.subtler')CSS: --fk-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. | #deecf9 | |
background.accent.blue.subtle | React: themeGet('colors.background.accent.blue.subtle')CSS: --fk-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. | #2b88d8 | |
background.accent.blue.bolder | React: themeGet('colors.background.accent.blue.bolder')CSS: --fk-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. | #0067b5 | |
background.accent.red.subtlest | React: themeGet('colors.background.accent.red.subtlest')CSS: --fk-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. | #f9ebeb | |
background.accent.red.subtler | React: themeGet('colors.background.accent.red.subtler')CSS: --fk-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. | #fbcfcf | |
background.accent.red.subtle | React: themeGet('colors.background.accent.red.subtle')CSS: --fk-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. | #e81123 | |
background.accent.red.bolder | React: themeGet('colors.background.accent.red.bolder')CSS: --fk-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. | #cb0f1f | |
background.accent.orange.subtlest | React: themeGet('colors.background.accent.orange.subtlest')CSS: --fk-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. | #fbf2ec | |
background.accent.orange.subtler | React: themeGet('colors.background.accent.orange.subtler')CSS: --fk-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. | #ffeec5 | |
background.accent.orange.subtle | React: themeGet('colors.background.accent.orange.subtle')CSS: --fk-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. | #ffd265 | |
background.accent.orange.bolder | React: themeGet('colors.background.accent.orange.bolder')CSS: --fk-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. | #d67730 | |
background.accent.yellow.subtlest | React: themeGet('colors.background.accent.yellow.subtlest')CSS: --fk-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. | #fffbdc | |
background.accent.yellow.subtler | React: themeGet('colors.background.accent.yellow.subtler')CSS: --fk-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. | #fef7b2 | |
background.accent.yellow.subtle | React: themeGet('colors.background.accent.yellow.subtle')CSS: --fk-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. | #fded68 | |
background.accent.yellow.bolder | React: themeGet('colors.background.accent.yellow.bolder')CSS: --fk-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. | #dfc800 | |
background.accent.green.subtlest | React: themeGet('colors.background.accent.green.subtlest')CSS: --fk-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. | #dff6dd | |
background.accent.green.subtler | React: themeGet('colors.background.accent.green.subtler')CSS: --fk-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. | #dfe9df | |
background.accent.green.subtle | React: themeGet('colors.background.accent.green.subtle')CSS: --fk-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. | #bad80a | |
background.accent.green.bolder | React: themeGet('colors.background.accent.green.bolder')CSS: --fk-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. | #55a362 | |
background.accent.purple.subtlest | React: themeGet('colors.background.accent.purple.subtlest')CSS: --fk-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. | #f4def7 | |
background.accent.purple.subtler | React: themeGet('colors.background.accent.purple.subtler')CSS: --fk-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. | #e6b6ec | |
background.accent.purple.subtle | React: themeGet('colors.background.accent.purple.subtle')CSS: --fk-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. | #c75cd6 | |
background.accent.purple.bolder | React: themeGet('colors.background.accent.purple.bolder')CSS: --fk-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. | #881798 | |
background.accent.teal.subtlest | React: themeGet('colors.background.accent.teal.subtlest')CSS: --fk-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. | #def4f4 | |
background.accent.teal.subtler | React: themeGet('colors.background.accent.teal.subtler')CSS: --fk-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. | #caedec | |
background.accent.teal.subtle | React: themeGet('colors.background.accent.teal.subtle')CSS: --fk-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. | #70e2df | |
background.accent.teal.bolder | React: themeGet('colors.background.accent.teal.bolder')CSS: --fk-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. | #00757c | |
background.accent.magenta.subtlest | React: themeGet('colors.background.accent.magenta.subtlest')CSS: --fk-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. | #fee7f5 | |
background.accent.magenta.subtler | React: themeGet('colors.background.accent.magenta.subtler')CSS: --fk-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. | #fbb6e1 | |
background.accent.magenta.subtle | React: themeGet('colors.background.accent.magenta.subtle')CSS: --fk-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. | #f53dae | |
background.accent.magenta.bolder | React: themeGet('colors.background.accent.magenta.bolder')CSS: --fk-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. | #b2006e | |
background.accent.lime.subtlest | React: themeGet('colors.background.accent.lime.subtlest')CSS: --fk-background-accent-lime-subtlest | background/accent/lime/subtlest | Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #edf9d1 | |
background.accent.lime.subtler | React: themeGet('colors.background.accent.lime.subtler')CSS: --fk-background-accent-lime-subtler | background/accent/lime/subtler | Use for for backgrounds when there is no meaning tied to the color, such as colored tags. | #dcf4a4 | |
background.accent.lime.subtle | React: themeGet('colors.background.accent.lime.subtle')CSS: --fk-background-accent-lime-subtle | background/accent/lime/subtle | Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags. | #b9e84a | |
background.accent.lime.bolder | React: themeGet('colors.background.accent.lime.bolder')CSS: --fk-background-accent-lime-bolder | background/accent/lime/bolder | Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #769f14 | |
background.accent.gray.subtlest | React: themeGet('colors.background.accent.gray.subtlest')CSS: --fk-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. | #f4f4f4 | |
background.accent.gray.subtler | React: themeGet('colors.background.accent.gray.subtler')CSS: --fk-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. | #efefef | |
background.accent.gray.subtle | React: themeGet('colors.background.accent.gray.subtle')CSS: --fk-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. | #dadada | |
background.accent.gray.bolder | React: themeGet('colors.background.accent.gray.bolder')CSS: --fk-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. | #a6a6a6 | |
background.input.default | React: themeGet('colors.background.input.default')CSS: --fk-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: --fk-background-input-hovered | background/input/hovered | Hovered state for color.background.input | #f8f8f8 | |
background.input.pressed | React: themeGet('colors.background.input.pressed')CSS: --fk-background-input-pressed | background/input/pressed | Pressed state for color.background.input | #ffffff | |
background.inverse.subtle.default | React: themeGet('colors.background.inverse.subtle.default')CSS: --fk-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: --fk-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: --fk-background-inverse-subtle-pressed | background/inverse/subtle/pressed | Use for the pressed state of color.background.inverse.subtle | #00000052 | |
background.neutral.default.[default] | React: themeGet('colors.background.neutral.default.default')CSS: --fk-background-neutral | background/neutral/default/default | The default background for neutral elements, such as default buttons. | #0000000f | |
background.neutral.default.hovered | React: themeGet('colors.background.neutral.default.hovered')CSS: --fk-background-neutral-hovered | background/neutral/default/hovered | Hovered state for color.background.neutral | #0000001a | |
background.neutral.default.pressed | React: themeGet('colors.background.neutral.default.pressed')CSS: --fk-background-neutral-pressed | background/neutral/default/pressed | Pressed state for color.background.neutral | #00000033 | |
background.neutral.subtle.default | React: themeGet('colors.background.neutral.subtle.default')CSS: --fk-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: --fk-background-neutral-subtle-hovered | background/neutral/subtle/hovered | Hovered state for color.background.neutral.subtle | #0000000f | |
background.neutral.subtle.pressed | React: themeGet('colors.background.neutral.subtle.pressed')CSS: --fk-background-neutral-subtle-pressed | background/neutral/subtle/pressed | Pressed state for color.background.neutral.subtle | #00000033 | |
background.neutral.bold.default | React: themeGet('colors.background.neutral.bold.default')CSS: --fk-background-neutral-bold | background/neutral/bold/default | A vibrant background option for neutral UI elements, such as announcement banners. | #666666 | |
background.neutral.bold.hovered | React: themeGet('colors.background.neutral.bold.hovered')CSS: --fk-background-neutral-bold-hovered | background/neutral/bold/hovered | Hovered state of color.background.neutral.bold | #4c4c4c | |
background.neutral.bold.pressed | React: themeGet('colors.background.neutral.bold.pressed')CSS: --fk-background-neutral-bold-pressed | background/neutral/bold/pressed | Pressed state of color.background.neutral.bold | #333333 | |
background.brand.subtlest.default | React: themeGet('colors.background.brand.subtlest.default')CSS: --fk-background-brand-subtlest | background/brand/subtlest/default | Use for the background of elements used to reinforce our brand, but with less emphasis. | #eff6fc | |
background.brand.subtlest.hovered | React: themeGet('colors.background.brand.subtlest.hovered')CSS: --fk-background-brand-subtlest-hovered | background/brand/subtlest/hovered | Hovered state of color.background.brand.subtlest | #deecf9 | |
background.brand.subtlest.pressed | React: themeGet('colors.background.brand.subtlest.pressed')CSS: --fk-background-brand-subtlest-pressed | background/brand/subtlest/pressed | Pressed state of color.background.brand.subtlest | #c7e0f4 | |
background.brand.bold.default | React: themeGet('colors.background.brand.bold.default')CSS: --fk-background-brand-bold | background/brand/bold/default | Use for the background of elements used to reinforce our brand, but with more emphasis. Reference: --palette-primary | #0078d4 | |
background.brand.bold.hovered | React: themeGet('colors.background.brand.bold.hovered')CSS: --fk-background-brand-bold-hovered | background/brand/bold/hovered | Hovered state of color.background.brand.bold | #106ebe | |
background.brand.bold.pressed | React: themeGet('colors.background.brand.bold.pressed')CSS: --fk-background-brand-bold-pressed | background/brand/bold/pressed | Pressed state of color.background.brand.bold | #0067b5 | |
background.brand.boldest.default | React: themeGet('colors.background.brand.boldest.default')CSS: --fk-background-brand-boldest | background/brand/boldest/default | Use for the background of elements used to reinforce our brand, that need to stand out a lot. | #004578 | |
background.brand.boldest.hovered | React: themeGet('colors.background.brand.boldest.hovered')CSS: --fk-background-brand-boldest-hovered | background/brand/boldest/hovered | Hovered state of color.background.brand.boldest | #005ba1 | |
background.brand.boldest.pressed | React: themeGet('colors.background.brand.boldest.pressed')CSS: --fk-background-brand-boldest-pressed | background/brand/boldest/pressed | Pressed state of color.background.brand.boldest | #005a9e | |
background.selected.default.[default] | React: themeGet('colors.background.selected.default.default')CSS: --fk-background-selected | background/selected/default/default | Use for the background of elements in a selected state, such as in opened dropdown buttons. | #deecf9 | |
background.selected.default.hovered | React: themeGet('colors.background.selected.default.hovered')CSS: --fk-background-selected-hovered | background/selected/default/hovered | Hovered state for color.background.selected | #c7e0f4 | |
background.selected.default.pressed | React: themeGet('colors.background.selected.default.pressed')CSS: --fk-background-selected-pressed | background/selected/default/pressed | Pressed state for color.background.selected | #2b88d8 | |
background.selected.bold.default | React: themeGet('colors.background.selected.bold.default')CSS: --fk-background-selected-bold | background/selected/bold/default | Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. | #0067b5 | |
background.selected.bold.hovered | React: themeGet('colors.background.selected.bold.hovered')CSS: --fk-background-selected-bold-hovered | background/selected/bold/hovered | Hovered state of color.background.selected.bold | #005a9e | |
background.selected.bold.pressed | React: themeGet('colors.background.selected.bold.pressed')CSS: --fk-background-selected-bold-pressed | background/selected/bold/pressed | Pressed state of color.background.selected.bold | #005ba1 | |
background.disabled | React: themeGet('colors.background.disabled')CSS: --fk-background-disabled | background/disabled | Use for backgrounds of elements in a disabled state. | #f4f4f4 | |
background.information.default.[default] | React: themeGet('colors.background.information.default.default')CSS: --fk-background-information | background/information/default/default | Use for backgrounds communicating information or something in-progress, such as in information section messages. | #deecf9 | |
background.information.default.hovered | React: themeGet('colors.background.information.default.hovered')CSS: --fk-background-information-hovered | background/information/default/hovered | Hovered state of color.background.information | #c7e0f4 | |
background.information.default.pressed | React: themeGet('colors.background.information.default.pressed')CSS: --fk-background-information-pressed | background/information/default/pressed | Pressed state of color.background.information | #2b88d8 | |
background.information.bold.default | React: themeGet('colors.background.information.bold.default')CSS: --fk-background-information-bold | background/information/bold/default | A vibrant background option for communicating information or something in-progress. Reference: --status-info-background, --component-status-info | #0078d4 | |
background.information.bold.hovered | React: themeGet('colors.background.information.bold.hovered')CSS: --fk-background-information-bold-hovered | background/information/bold/hovered | Hovered state of color.background.information.bold | #106ebe | |
background.information.bold.pressed | React: themeGet('colors.background.information.bold.pressed')CSS: --fk-background-information-bold-pressed | background/information/bold/pressed | Pressed state of color.background.information.bold | #0067b5 | |
background.danger.default.[default] | React: themeGet('colors.background.danger.default.default')CSS: --fk-background-danger | background/danger/default/default | Use for backgrounds communicating critical information, such in error section messages. Reference: --status-error-background | #f9ebeb | |
background.danger.default.hovered | React: themeGet('colors.background.danger.default.hovered')CSS: --fk-background-danger-hovered | background/danger/default/hovered | Hovered state for color.background.danger | #fbcfcf | |
background.danger.default.pressed | React: themeGet('colors.background.danger.default.pressed')CSS: --fk-background-danger-pressed | background/danger/default/pressed | Pressed state for color.background.danger | #f09c9c | |
background.danger.bold.default | React: themeGet('colors.background.danger.bold.default')CSS: --fk-background-danger-bold | background/danger/bold/default | A vibrant background option for communicating critical information, such as in danger buttons and error banners. Reference: --component-status-error | #cd4a45 | |
background.danger.bold.hovered | React: themeGet('colors.background.danger.bold.hovered')CSS: --fk-background-danger-bold-hovered | background/danger/bold/hovered | Hovered state of color.background.danger.bold | #b80e1c | |
background.danger.bold.pressed | React: themeGet('colors.background.danger.bold.pressed')CSS: --fk-background-danger-bold-pressed | background/danger/bold/pressed | Pressed state of color.background.danger.bold | #a80000 | |
background.success.default.[default] | React: themeGet('colors.background.success.default.default')CSS: --fk-background-success | background/success/default/default | Use for backgrounds communicating a favourable outcome, such as in success section messages. Reference: --status-success-background | #dff6dd | |
background.success.default.hovered | React: themeGet('colors.background.success.default.hovered')CSS: --fk-background-success-hovered | background/success/default/hovered | Hovered state for color.background.success | #dfe9df | |
background.success.default.pressed | React: themeGet('colors.background.success.default.pressed')CSS: --fk-background-success-pressed | background/success/default/pressed | Pressed state for color.background.success | #c7e0c7 | |
background.success.bold.default | React: themeGet('colors.background.success.bold.default')CSS: --fk-background-success-bold | background/success/bold/default | A vibrant background option for communicating a favourable outcome, such as in checked toggles. Reference: --component-status-success | #55a362 | |
background.success.bold.hovered | React: themeGet('colors.background.success.bold.hovered')CSS: --fk-background-success-bold-hovered | background/success/bold/hovered | Hovered state of color.background.success.bold | #107c10 | |
background.success.bold.pressed | React: themeGet('colors.background.success.bold.pressed')CSS: --fk-background-success-bold-pressed | background/success/bold/pressed | Pressed state of color.background.success.bold | #014f01 | |
background.discovery.default.[default] | React: themeGet('colors.background.discovery.default.default')CSS: --fk-background-discovery | background/discovery/default/default | Use for backgrounds communicating change or something new, such as in discovery section messages. | #f4def7 | |
background.discovery.default.hovered | React: themeGet('colors.background.discovery.default.hovered')CSS: --fk-background-discovery-hovered | background/discovery/default/hovered | Hover state for color.background.discovery | #e6b6ec | |
background.discovery.default.pressed | React: themeGet('colors.background.discovery.default.pressed')CSS: --fk-background-discovery-pressed | background/discovery/default/pressed | Pressed state for color.background.discovery | #d585e0 | |
background.discovery.bold.default | React: themeGet('colors.background.discovery.bold.default')CSS: --fk-background-discovery-bold | background/discovery/bold/default | A vibrant background option communicating change or something new, such as in onboarding spotlights. | #881798 | |
background.discovery.bold.hovered | React: themeGet('colors.background.discovery.bold.hovered')CSS: --fk-background-discovery-bold-hovered | background/discovery/bold/hovered | Hovered state of color.background.discovery.bold | #690976 | |
background.discovery.bold.pressed | React: themeGet('colors.background.discovery.bold.pressed')CSS: --fk-background-discovery-bold-pressed | background/discovery/bold/pressed | Pressed state of color.background.discovery.bold | #54075f | |
background.warning.default.[default] | React: themeGet('colors.background.warning.default.default')CSS: --fk-background-warning | background/warning/default/default | Use for backgrounds communicating caution, such as in warning section messages. Reference: --status-warning-background | #fbf2ec | |
background.warning.default.hovered | React: themeGet('colors.background.warning.default.hovered')CSS: --fk-background-warning-hovered | background/warning/default/hovered | Hovered state for color.background.warning | #ffeec5 | |
background.warning.default.pressed | React: themeGet('colors.background.warning.default.pressed')CSS: --fk-background-warning-pressed | background/warning/default/pressed | Pressed state for color.background.warning | #ffeec5 | |
background.warning.bold.default | React: themeGet('colors.background.warning.bold.default')CSS: --fk-background-warning-bold | background/warning/bold/default | A vibrant background option for communicating caution, such as in warning buttons and warning banners. Reference: --component-status-warning | #d67f3c | |
background.warning.bold.hovered | React: themeGet('colors.background.warning.bold.hovered')CSS: --fk-background-warning-bold-hovered | background/warning/bold/hovered | Hovered state of color.background.warning.bold | #d67730 | |
background.warning.bold.pressed | React: themeGet('colors.background.warning.bold.pressed')CSS: --fk-background-warning-bold-pressed | background/warning/bold/pressed | Pressed state of color.background.warning.bold | #b85e06 | |
blanket.default | React: themeGet('colors.blanket.default')CSS: --fk-blanket | blanket/default | Use for the screen overlay that appears with modal dialogs | #00000033 | |
blanket.selected | React: themeGet('colors.blanket.selected')CSS: --fk-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: --fk-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 | |
text.default | React: themeGet('colors.text.default')CSS: --fk-text | text/default | Use for primary text, such as body copy, sentence case headers, and buttons. Reference: --primary-text, --text-primary-color | #000000e6 | |
text.subtle | React: themeGet('colors.text.subtle')CSS: --fk-text-subtle | text/subtle | Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings. Reference: --secondary-text | #0000008c | |
text.subtlest | React: themeGet('colors.text.subtlest')CSS: --fk-text-subtlest | text/subtlest | Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text. | #4c4c4c | |
text.disabled | React: themeGet('colors.text.disabled')CSS: --fk-text-disabled | text/disabled | Use for text in a disabled state. Reference: --text-disabled-color, --disabled-text | #00000061 | |
text.selected | React: themeGet('colors.text.selected')CSS: --fk-text-selected | text/selected | Use for text in selected or opened states, such as tabs and dropdown buttons. | #005ba1 | |
text.inverse | React: themeGet('colors.text.inverse')CSS: --fk-text-inverse | text/inverse | Use for text on bold backgrounds. Reference: --text-on-communication-background | #ffffff | |
text.success | React: themeGet('colors.text.success')CSS: --fk-text-success | text/success | Use for text to communicate a favourable outcome, such as input field success messaging. Reference: --status-success-text | #7fb800 | |
text.danger | React: themeGet('colors.text.danger')CSS: --fk-text-danger | text/danger | Use for critical text, such as input field error messaging. Reference: --status-error-text | #da0a00 | |
text.information | React: themeGet('colors.text.information')CSS: --fk-text-information | text/information | Use for informative text or to communicate something is in progress, such as in-progress lozenges. | #005a9e | |
text.warning.default | React: themeGet('colors.text.warning.default')CSS: --fk-text-warning | text/warning/default | Use for text to emphasize caution, such as in moved lozenges. Reference: --status-warning-text | #b85e06 | |
text.warning.inverse | React: themeGet('colors.text.warning.inverse')CSS: --fk-text-warning-inverse | text/warning/inverse | Use for text when on bold warning backgrounds. | #333333 | |
text.discovery | React: themeGet('colors.text.discovery')CSS: --fk-text-discovery | text/discovery | Use for text to emphasize change or something new, such as in new lozenges. | #690976 | |
text.brand | React: themeGet('colors.text.brand')CSS: --fk-text-brand | text/brand | Use for text that reinforces our brand. | #0067b5 | |
text.accent.blue.default | React: themeGet('colors.text.accent.blue.default')CSS: --fk-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. | #005a9e | |
text.accent.blue.bolder | React: themeGet('colors.text.accent.blue.bolder')CSS: --fk-text-accent-blue-bolder | text/accent/blue/bolder | Use on bold blue accent backgrounds. | #005ba1 | |
text.accent.red.default | React: themeGet('colors.text.accent.red.default')CSS: --fk-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. | #b80e1c | |
text.accent.red.bolder | React: themeGet('colors.text.accent.red.bolder')CSS: --fk-text-accent-red-bolder | text/accent/red/bolder | Use on bold red accent backgrounds. | #a80000 | |
text.accent.orange.default | React: themeGet('colors.text.accent.orange.default')CSS: --fk-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. | #b85e06 | |
text.accent.orange.bolder | React: themeGet('colors.text.accent.orange.bolder')CSS: --fk-text-accent-orange-bolder | text/accent/orange/bolder | Use on bold orange accent backgrounds. | #ab6630 | |
text.accent.yellow.default | React: themeGet('colors.text.accent.yellow.default')CSS: --fk-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. | #b18525 | |
text.accent.yellow.bolder | React: themeGet('colors.text.accent.yellow.bolder')CSS: --fk-text-accent-yellow-bolder | text/accent/yellow/bolder | Use on bold yellow accent backgrounds. | #986f0b | |
text.accent.green.default | React: themeGet('colors.text.accent.green.default')CSS: --fk-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. | #107c10 | |
text.accent.green.bolder | React: themeGet('colors.text.accent.green.bolder')CSS: --fk-text-accent-green-bolder | text/accent/green/bolder | Use on bold green accent backgrounds. | #014f01 | |
text.accent.purple.default | React: themeGet('colors.text.accent.purple.default')CSS: --fk-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. | #690976 | |
text.accent.purple.bolder | React: themeGet('colors.text.accent.purple.bolder')CSS: --fk-text-accent-purple-bolder | text/accent/purple/bolder | Use on bold purple accent backgrounds. | #54075f | |
text.accent.teal.default | React: themeGet('colors.text.accent.teal.default')CSS: --fk-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. | #006167 | |
text.accent.teal.bolder | React: themeGet('colors.text.accent.teal.bolder')CSS: --fk-text-accent-teal-bolder | text/accent/teal/bolder | Use on bold teal accent backgrounds. | #004d51 | |
text.accent.magenta.default | React: themeGet('colors.text.accent.magenta.default')CSS: --fk-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. | #9b0062 | |
text.accent.magenta.bolder | React: themeGet('colors.text.accent.magenta.bolder')CSS: --fk-text-accent-magenta-bolder | text/accent/magenta/bolder | Use on bold magenta accent backgrounds. | #660040 | |
text.accent.gray.default | React: themeGet('colors.text.accent.gray.default')CSS: --fk-text-accent-gray | text/accent/gray/default | Use for text on non-bold gray accent backgrounds, such as colored tags. | #666666 | |
text.accent.gray.bolder | React: themeGet('colors.text.accent.gray.bolder')CSS: --fk-text-accent-gray-bolder | text/accent/gray/bolder | Use for text and icons on gray subtle accent backgrounds. | #000000 | |
text.accent.lime.default | React: themeGet('colors.text.accent.lime.default')CSS: --fk-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. | #54710e | |
text.accent.lime.bolder | React: themeGet('colors.text.accent.lime.bolder')CSS: --fk-text-accent-lime-bolder | text/accent/lime/bolder | Use on bold lime accent backgrounds. | #425a0c | |
link.default | React: themeGet('colors.link.default')CSS: --fk-link | link/default | Use for links in a default or hovered state. Reference: --palette-primary-shade-10 | #106ebe | |
link.hovered | React: themeGet('colors.link.hovered')CSS: --fk-link-hovered | link/hovered | Use for links in a hovered state. Reference: --palette-primary-shade-10 | #106ebe | |
link.pressed | React: themeGet('colors.link.pressed')CSS: --fk-link-pressed | link/pressed | Use for links in a pressed state. Reference: --palette-primary-shade-10 | #106ebe | |
link.visited | React: themeGet('colors.link.visited')CSS: --fk-link-visited | link/visited | Use for links in a visited state. Reference: --palette-primary-shade-10 | #106ebe | |
icon.accent.blue | React: themeGet('colors.icon.accent.blue')CSS: --fk-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. | #106ebe | |
icon.accent.red | React: themeGet('colors.icon.accent.red')CSS: --fk-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. | #cd4a45 | |
icon.accent.orange | React: themeGet('colors.icon.accent.orange')CSS: --fk-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. | #d67f3c | |
icon.accent.yellow | React: themeGet('colors.icon.accent.yellow')CSS: --fk-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. | #eed604 | |
icon.accent.green | React: themeGet('colors.icon.accent.green')CSS: --fk-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. | #7fb800 | |
icon.accent.purple | React: themeGet('colors.icon.accent.purple')CSS: --fk-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. | #9f1bb1 | |
icon.accent.teal | React: themeGet('colors.icon.accent.teal')CSS: --fk-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. | #00b7c3 | |
icon.accent.magenta | React: themeGet('colors.icon.accent.magenta')CSS: --fk-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. | #cc007e | |
icon.accent.gray | React: themeGet('colors.icon.accent.gray')CSS: --fk-icon-accent-gray | icon/accent/gray | Use for icons on non-bold gray accent backgrounds, such as file type icons. | #c8c8c8 | |
icon.accent.lime | React: themeGet('colors.icon.accent.lime')CSS: --fk-icon-accent-lime | icon/accent/lime | Use for icons on non-bold lime accent backgrounds, such as file type icons. | #8cbd18 | |
icon.default | React: themeGet('colors.icon.default')CSS: --fk-icon | icon/default | Use for icon-only buttons, or icons paired with color.text | #666666 | |
icon.subtle | React: themeGet('colors.icon.subtle')CSS: --fk-icon-subtle | icon/subtle | Use for icons paired with color.text.subtle | #a6a6a6 | |
icon.inverse | React: themeGet('colors.icon.inverse')CSS: --fk-icon-inverse | icon/inverse | Use for icons on bold backgrounds. | #ffffff | |
icon.disabled | React: themeGet('colors.icon.disabled')CSS: --fk-icon-disabled | icon/disabled | Use for icons in a disabled state. | #dadada | |
icon.brand | React: themeGet('colors.icon.brand')CSS: --fk-icon-brand | icon/brand | Use for icons that reinforce our brand. | #0078d4 | |
icon.selected | React: themeGet('colors.icon.selected')CSS: --fk-icon-selected | icon/selected | Use for icons in selected or opened states, such as those used in dropdown buttons. | #005a9e | |
icon.danger | React: themeGet('colors.icon.danger')CSS: --fk-icon-danger | icon/danger | Use for icons communicating critical information, such as those used in error handing. Reference: --status-error-foreground | #cd4a45 | |
icon.success | React: themeGet('colors.icon.success')CSS: --fk-icon-success | icon/success | Use for icons communicating a favourable outcome, such as those used in success section messaged. Reference: --status-success-foreground | #55a362 | |
icon.discovery | React: themeGet('colors.icon.discovery')CSS: --fk-icon-discovery | icon/discovery | Use for icons communicating change or something new, such as discovery section messages. | #881798 | |
icon.information | React: themeGet('colors.icon.information')CSS: --fk-icon-information | icon/information | Use for icons communicating information or something in-progress, such as information section messages. Reference: --status-info-foreground | #0078d4 | |
icon.warning.default | React: themeGet('colors.icon.warning.default')CSS: --fk-icon-warning | icon/warning/default | Use for icons communicating caution, such as those used in warning section messages. Reference: --status-warning-foreground | #d67f3c | |
icon.warning.inverse | React: themeGet('colors.icon.warning.inverse')CSS: --fk-icon-warning-inverse | icon/warning/inverse | Use for icons when on bold warning backgrounds. | #333333 | |
interaction.hovered | React: themeGet('colors.interaction.hovered')CSS: --fk-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: --fk-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: --fk-skeleton | skeleton/default | Use for skeleton loading states | #0000000f | |
skeleton.subtle | React: themeGet('colors.skeleton.subtle')CSS: --fk-skeleton-subtle | skeleton/subtle | Use for the pulse or shimmer effect in skeleton loading states | #0000000a | |
chart.brand.default | React: themeGet('colors.chart.brand.default')CSS: --fk-chart-brand | chart/brand/default | Our primary color for data visualisation. Use when only one color is required. | #106ebe | |
chart.brand.hovered | React: themeGet('colors.chart.brand.hovered')CSS: --fk-chart-brand-hovered | chart/brand/hovered | Hovered state of color.chart.brand. | #0067b5 | |
chart.neutral.default | React: themeGet('colors.chart.neutral.default')CSS: --fk-chart-neutral | chart/neutral/default | A secondary color for data visualisation or to communicate 'to-do' statues. | #dadada | |
chart.neutral.hovered | React: themeGet('colors.chart.neutral.hovered')CSS: --fk-chart-neutral-hovered | chart/neutral/hovered | Hovered state of color.chart.neutral. | #c8c8c8 | |
chart.success.default.[default] | React: themeGet('colors.chart.success.default.default')CSS: --fk-chart-success | chart/success/default/default | For data visualisation communicating positive information, such as 'on track'. | #7fb800 | |
chart.success.default.hovered | React: themeGet('colors.chart.success.default.hovered')CSS: --fk-chart-success-hovered | chart/success/default/hovered | Hovered state of color.chart.success. | #55a362 | |
chart.success.bold.default | React: themeGet('colors.chart.success.bold.default')CSS: --fk-chart-success-bold | chart/success/bold/default | A stronger emphasis option of color.chart.success. | #107c10 | |
chart.success.bold.hovered | React: themeGet('colors.chart.success.bold.hovered')CSS: --fk-chart-success-bold-hovered | chart/success/bold/hovered | Hovered state of color.chart.success.bold. | #014f01 | |
chart.danger.default.[default] | React: themeGet('colors.chart.danger.default.default')CSS: --fk-chart-danger | chart/danger/default/default | For data visualisation communicating negative information, such as 'off track'. | #da0a00 | |
chart.danger.default.hovered | React: themeGet('colors.chart.danger.default.hovered')CSS: --fk-chart-danger-hovered | chart/danger/default/hovered | Hovered state of color.chart.danger. | #cd4a45 | |
chart.danger.bold.default | React: themeGet('colors.chart.danger.bold.default')CSS: --fk-chart-danger-bold | chart/danger/bold/default | A stronger emphasis option of color.chart.danger. | #b80e1c | |
chart.danger.bold.hovered | React: themeGet('colors.chart.danger.bold.hovered')CSS: --fk-chart-danger-bold-hovered | chart/danger/bold/hovered | Hovered state of color.chart.danger.bold. | #a80000 | |
chart.warning.default.[default] | React: themeGet('colors.chart.warning.default.default')CSS: --fk-chart-warning | chart/warning/default/default | For data visualisation communicating caution, such as 'at risk' statuses. | #eed604 | |
chart.warning.default.hovered | React: themeGet('colors.chart.warning.default.hovered')CSS: --fk-chart-warning-hovered | chart/warning/default/hovered | Hovered state of color.chart.warning. | #dfc800 | |
chart.warning.bold.default | React: themeGet('colors.chart.warning.bold.default')CSS: --fk-chart-warning-bold | chart/warning/bold/default | A stronger emphasis option of color.chart.warning. | #b18525 | |
chart.warning.bold.hovered | React: themeGet('colors.chart.warning.bold.hovered')CSS: --fk-chart-warning-bold-hovered | chart/warning/bold/hovered | Hovered state of color.chart.warning.bold. | #986f0b | |
chart.information.default.[default] | React: themeGet('colors.chart.information.default.default')CSS: --fk-chart-information | chart/information/default/default | For data visualisation communicating low priority or in-progress statuses. | #106ebe | |
chart.information.default.hovered | React: themeGet('colors.chart.information.default.hovered')CSS: --fk-chart-information-hovered | chart/information/default/hovered | Hovered state of color.chart.information. | #0067b5 | |
chart.information.bold.default | React: themeGet('colors.chart.information.bold.default')CSS: --fk-chart-information-bold | chart/information/bold/default | A stronger emphasis option of color.chart.information. | #005a9e | |
chart.information.bold.hovered | React: themeGet('colors.chart.information.bold.hovered')CSS: --fk-chart-information-bold-hovered | chart/information/bold/hovered | Hovered state of color.chart.information.bold. | #005ba1 | |
chart.discovery.default.[default] | React: themeGet('colors.chart.discovery.default.default')CSS: --fk-chart-discovery | chart/discovery/default/default | For data visualisation communicating 'new' statuses. | #b933cc | |
chart.discovery.default.hovered | React: themeGet('colors.chart.discovery.default.hovered')CSS: --fk-chart-discovery-hovered | chart/discovery/default/hovered | Hovered state of color.chart.discovery. | #9f1bb1 | |
chart.discovery.bold.default | React: themeGet('colors.chart.discovery.bold.default')CSS: --fk-chart-discovery-bold | chart/discovery/bold/default | A stronger emphasis option of color.chart.discovery. | #690976 | |
chart.discovery.bold.hovered | React: themeGet('colors.chart.discovery.bold.hovered')CSS: --fk-chart-discovery-bold-hovered | chart/discovery/bold/hovered | Hovered state of color.chart.discovery.bold. | #54075f | |
chart.categorical.1.default | React: themeGet('colors.chart.categorical.1.default')CSS: --fk-chart-categorical-1 | chart/categorical/1/default | For data visualisation only. Follow numbered sequence. | #00b7c3 | |
chart.categorical.1.hovered | React: themeGet('colors.chart.categorical.1.hovered')CSS: --fk-chart-categorical-1-hovered | chart/categorical/1/hovered | Hovered state of color.chart.categorical.1. | #00757c | |
chart.categorical.2.default | React: themeGet('colors.chart.categorical.2.default')CSS: --fk-chart-categorical-2 | chart/categorical/2/default | For data visualisation only. Follow numbered sequence. | #690976 | |
chart.categorical.2.hovered | React: themeGet('colors.chart.categorical.2.hovered')CSS: --fk-chart-categorical-2-hovered | chart/categorical/2/hovered | Hovered state of color.chart.categorical.2. | #54075f | |
chart.categorical.3.default | React: themeGet('colors.chart.categorical.3.default')CSS: --fk-chart-categorical-3 | chart/categorical/3/default | For data visualisation only. Follow numbered sequence. | #d67f3c | |
chart.categorical.3.hovered | React: themeGet('colors.chart.categorical.3.hovered')CSS: --fk-chart-categorical-3-hovered | chart/categorical/3/hovered | Hovered state of color.chart.categorical.3. | #d67730 | |
chart.categorical.4.default | React: themeGet('colors.chart.categorical.4.default')CSS: --fk-chart-categorical-4 | chart/categorical/4/default | For data visualisation only. Follow numbered sequence. | #9b0062 | |
chart.categorical.4.hovered | React: themeGet('colors.chart.categorical.4.hovered')CSS: --fk-chart-categorical-4-hovered | chart/categorical/4/hovered | Hovered state of color.chart.categorical.4. | #660040 | |
chart.categorical.5.default | React: themeGet('colors.chart.categorical.5.default')CSS: --fk-chart-categorical-5 | chart/categorical/5/default | For data visualisation only. Follow numbered sequence. | #005ba1 | |
chart.categorical.5.hovered | React: themeGet('colors.chart.categorical.5.hovered')CSS: --fk-chart-categorical-5-hovered | chart/categorical/5/hovered | Hovered state of color.chart.categorical.5. | #004578 | |
chart.categorical.6.default | React: themeGet('colors.chart.categorical.6.default')CSS: --fk-chart-categorical-6 | chart/categorical/6/default | For data visualisation only. Follow numbered sequence. | #b933cc | |
chart.categorical.6.hovered | React: themeGet('colors.chart.categorical.6.hovered')CSS: --fk-chart-categorical-6-hovered | chart/categorical/6/hovered | Hovered state of color.chart.categorical.6. | #9f1bb1 | |
chart.categorical.7.default | React: themeGet('colors.chart.categorical.7.default')CSS: --fk-chart-categorical-7 | chart/categorical/7/default | For data visualisation only. Follow numbered sequence. | #660040 | |
chart.categorical.7.hovered | React: themeGet('colors.chart.categorical.7.hovered')CSS: --fk-chart-categorical-7-hovered | chart/categorical/7/hovered | Hovered state of color.chart.categorical.7. | #4d0030 | |
chart.categorical.8.default | React: themeGet('colors.chart.categorical.8.default')CSS: --fk-chart-categorical-8 | chart/categorical/8/default | For data visualisation only. Follow numbered sequence. | #b85e06 | |
chart.categorical.8.hovered | React: themeGet('colors.chart.categorical.8.hovered')CSS: --fk-chart-categorical-8-hovered | chart/categorical/8/hovered | Hovered state of color.chart.categorical.8. | #ab6630 | |
chart.blue.bold.default | React: themeGet('colors.chart.blue.bold.default')CSS: --fk-chart-blue-bold | chart/blue/bold/default | For data visualisation only. | #0078d4 | |
chart.blue.bold.hovered | React: themeGet('colors.chart.blue.bold.hovered')CSS: --fk-chart-blue-bold-hovered | chart/blue/bold/hovered | Hovered state of color.chart.blue.bold. | #0078d4 | |
chart.blue.bolder.default | React: themeGet('colors.chart.blue.bolder.default')CSS: --fk-chart-blue-bolder | chart/blue/bolder/default | For data visualisation only. | #106ebe | |
chart.blue.bolder.hovered | React: themeGet('colors.chart.blue.bolder.hovered')CSS: --fk-chart-blue-bolder-hovered | chart/blue/bolder/hovered | Hovered state of color.chart.blue.bolder. | #0067b5 | |
chart.blue.boldest.default | React: themeGet('colors.chart.blue.boldest.default')CSS: --fk-chart-blue-boldest | chart/blue/boldest/default | For data visualisation only. | #005a9e | |
chart.blue.boldest.hovered | React: themeGet('colors.chart.blue.boldest.hovered')CSS: --fk-chart-blue-boldest-hovered | chart/blue/boldest/hovered | Hovered state of color.chart.blue.boldest. | #005ba1 | |
chart.red.bold.default | React: themeGet('colors.chart.red.bold.default')CSS: --fk-chart-red-bold | chart/red/bold/default | For data visualisation only. | #da0a00 | |
chart.red.bold.hovered | React: themeGet('colors.chart.red.bold.hovered')CSS: --fk-chart-red-bold-hovered | chart/red/bold/hovered | Hovered state of color.chart.red.bold. | #cd4a45 | |
chart.red.bolder.default | React: themeGet('colors.chart.red.bolder.default')CSS: --fk-chart-red-bolder | chart/red/bolder/default | For data visualisation only. | #cd4a45 | |
chart.red.bolder.hovered | React: themeGet('colors.chart.red.bolder.hovered')CSS: --fk-chart-red-bolder-hovered | chart/red/bolder/hovered | Hovered state of color.chart.red.bolder. | #cb0f1f | |
chart.red.boldest.default | React: themeGet('colors.chart.red.boldest.default')CSS: --fk-chart-red-boldest | chart/red/boldest/default | For data visualisation only. | #b80e1c | |
chart.red.boldest.hovered | React: themeGet('colors.chart.red.boldest.hovered')CSS: --fk-chart-red-boldest-hovered | chart/red/boldest/hovered | Hovered state of color.chart.red.boldest. | #a80000 | |
chart.orange.bold.default | React: themeGet('colors.chart.orange.bold.default')CSS: --fk-chart-orange-bold | chart/orange/bold/default | For data visualisation only. | #d67f3c | |
chart.orange.bold.hovered | React: themeGet('colors.chart.orange.bold.hovered')CSS: --fk-chart-orange-bold-hovered | chart/orange/bold/hovered | Hovered state of color.chart.orange.bold. | #d67730 | |
chart.orange.bolder.default | React: themeGet('colors.chart.orange.bolder.default')CSS: --fk-chart-orange-bolder | chart/orange/bolder/default | For data visualisation only. | #d67730 | |
chart.orange.bolder.hovered | React: themeGet('colors.chart.orange.bolder.hovered')CSS: --fk-chart-orange-bolder-hovered | chart/orange/bolder/hovered | Hovered state of color.chart.orange.bolder. | #b85e06 | |
chart.orange.boldest.default | React: themeGet('colors.chart.orange.boldest.default')CSS: --fk-chart-orange-boldest | chart/orange/boldest/default | For data visualisation only. | #b85e06 | |
chart.orange.boldest.hovered | React: themeGet('colors.chart.orange.boldest.hovered')CSS: --fk-chart-orange-boldest-hovered | chart/orange/boldest/hovered | Hovered state of color.chart.orange.boldest. | #ab6630 | |
chart.yellow.bold.default | React: themeGet('colors.chart.yellow.bold.default')CSS: --fk-chart-yellow-bold | chart/yellow/bold/default | For data visualisation only. | #eed604 | |
chart.yellow.bold.hovered | React: themeGet('colors.chart.yellow.bold.hovered')CSS: --fk-chart-yellow-bold-hovered | chart/yellow/bold/hovered | Hovered state of color.chart.yellow.bold. | #dfc800 | |
chart.yellow.bolder.default | React: themeGet('colors.chart.yellow.bolder.default')CSS: --fk-chart-yellow-bolder | chart/yellow/bolder/default | For data visualisation only. | #dfc800 | |
chart.yellow.bolder.hovered | React: themeGet('colors.chart.yellow.bolder.hovered')CSS: --fk-chart-yellow-bolder-hovered | chart/yellow/bolder/hovered | Hovered state of color.chart.yellow.bolder. | #b18525 | |
chart.yellow.boldest.default | React: themeGet('colors.chart.yellow.boldest.default')CSS: --fk-chart-yellow-boldest | chart/yellow/boldest/default | For data visualisation only. | #b18525 | |
chart.yellow.boldest.hovered | React: themeGet('colors.chart.yellow.boldest.hovered')CSS: --fk-chart-yellow-boldest-hovered | chart/yellow/boldest/hovered | Hovered state of color.chart.yellow.boldest. | #986f0b | |
chart.green.bold.default | React: themeGet('colors.chart.green.bold.default')CSS: --fk-chart-green-bold | chart/green/bold/default | For data visualisation only. | #7fb800 | |
chart.green.bold.hovered | React: themeGet('colors.chart.green.bold.hovered')CSS: --fk-chart-green-bold-hovered | chart/green/bold/hovered | Hovered state of color.chart.green.bold. | #55a362 | |
chart.green.bolder.default | React: themeGet('colors.chart.green.bolder.default')CSS: --fk-chart-green-bolder | chart/green/bolder/default | For data visualisation only. | #55a362 | |
chart.green.bolder.hovered | React: themeGet('colors.chart.green.bolder.hovered')CSS: --fk-chart-green-bolder-hovered | chart/green/bolder/hovered | Hovered state of color.chart.green.bolder. | #107c10 | |
chart.green.boldest.default | React: themeGet('colors.chart.green.boldest.default')CSS: --fk-chart-green-boldest | chart/green/boldest/default | For data visualisation only. | #107c10 | |
chart.green.boldest.hovered | React: themeGet('colors.chart.green.boldest.hovered')CSS: --fk-chart-green-boldest-hovered | chart/green/boldest/hovered | Hovered state of color.chart.green.boldest. | #014f01 | |
chart.teal.bold.default | React: themeGet('colors.chart.teal.bold.default')CSS: --fk-chart-teal-bold | chart/teal/bold/default | For data visualisation only. | #00b7c3 | |
chart.teal.bold.hovered | React: themeGet('colors.chart.teal.bold.hovered')CSS: --fk-chart-teal-bold-hovered | chart/teal/bold/hovered | Hovered state of color.chart.teal.bold. | #00757c | |
chart.teal.bolder.default | React: themeGet('colors.chart.teal.bolder.default')CSS: --fk-chart-teal-bolder | chart/teal/bolder/default | For data visualisation only. | #00757c | |
chart.teal.bolder.hovered | React: themeGet('colors.chart.teal.bolder.hovered')CSS: --fk-chart-teal-bolder-hovered | chart/teal/bolder/hovered | Hovered state of color.chart.teal.bolder. | #006167 | |
chart.teal.boldest.default | React: themeGet('colors.chart.teal.boldest.default')CSS: --fk-chart-teal-boldest | chart/teal/boldest/default | For data visualisation only. | #006167 | |
chart.teal.boldest.hovered | React: themeGet('colors.chart.teal.boldest.hovered')CSS: --fk-chart-teal-boldest-hovered | chart/teal/boldest/hovered | Hovered state of color.chart.teal.boldest. | #004d51 | |
chart.purple.bold.default | React: themeGet('colors.chart.purple.bold.default')CSS: --fk-chart-purple-bold | chart/purple/bold/default | For data visualisation only. | #b933cc | |
chart.purple.bold.hovered | React: themeGet('colors.chart.purple.bold.hovered')CSS: --fk-chart-purple-bold-hovered | chart/purple/bold/hovered | Hovered state of color.chart.purple.bold. | #9f1bb1 | |
chart.purple.bolder.default | React: themeGet('colors.chart.purple.bolder.default')CSS: --fk-chart-purple-bolder | chart/purple/bolder/default | For data visualisation only. | #9f1bb1 | |
chart.purple.bolder.hovered | React: themeGet('colors.chart.purple.bolder.hovered')CSS: --fk-chart-purple-bolder-hovered | chart/purple/bolder/hovered | Hovered state of color.chart.purple.bolder. | #881798 | |
chart.purple.boldest.default | React: themeGet('colors.chart.purple.boldest.default')CSS: --fk-chart-purple-boldest | chart/purple/boldest/default | For data visualisation only. | #690976 | |
chart.purple.boldest.hovered | React: themeGet('colors.chart.purple.boldest.hovered')CSS: --fk-chart-purple-boldest-hovered | chart/purple/boldest/hovered | Hovered state of color.chart.purple.boldest. | #54075f | |
chart.magenta.bold.default | React: themeGet('colors.chart.magenta.bold.default')CSS: --fk-chart-magenta-bold | chart/magenta/bold/default | For data visualisation only. | #e3008c | |
chart.magenta.bold.hovered | React: themeGet('colors.chart.magenta.bold.hovered')CSS: --fk-chart-magenta-bold-hovered | chart/magenta/bold/hovered | Hovered state of color.chart.magenta.bold. | #cc007e | |
chart.magenta.bolder.default | React: themeGet('colors.chart.magenta.bolder.default')CSS: --fk-chart-magenta-bolder | chart/magenta/bolder/default | For data visualisation only. | #cc007e | |
chart.magenta.bolder.hovered | React: themeGet('colors.chart.magenta.bolder.hovered')CSS: --fk-chart-magenta-bolder-hovered | chart/magenta/bolder/hovered | Hovered state of color.chart.magenta.bolder. | #b2006e | |
chart.magenta.boldest.default | React: themeGet('colors.chart.magenta.boldest.default')CSS: --fk-chart-magenta-boldest | chart/magenta/boldest/default | For data visualisation only. | #9b0062 | |
chart.magenta.boldest.hovered | React: themeGet('colors.chart.magenta.boldest.hovered')CSS: --fk-chart-magenta-boldest-hovered | chart/magenta/boldest/hovered | Hovered state of color.chart.magenta.boldest. | #660040 | |
chart.gray.bold.default | React: themeGet('colors.chart.gray.bold.default')CSS: --fk-chart-gray-bold | chart/gray/bold/default | For data visualisation only. | #dadada | |
chart.gray.bold.hovered | React: themeGet('colors.chart.gray.bold.hovered')CSS: --fk-chart-gray-bold-hovered | chart/gray/bold/hovered | Hovered state of color.chart.gray.bold. | #c8c8c8 | |
chart.gray.bolder.default | React: themeGet('colors.chart.gray.bolder.default')CSS: --fk-chart-gray-bolder | chart/gray/bolder/default | For data visualisation only. | #c8c8c8 | |
chart.gray.bolder.hovered | React: themeGet('colors.chart.gray.bolder.hovered')CSS: --fk-chart-gray-bolder-hovered | chart/gray/bolder/hovered | Hovered state of color.chart.gray.bolder. | #a6a6a6 | |
chart.gray.boldest.default | React: themeGet('colors.chart.gray.boldest.default')CSS: --fk-chart-gray-boldest | chart/gray/boldest/default | For data visualisation only. | #666666 | |
chart.gray.boldest.hovered | React: themeGet('colors.chart.gray.boldest.hovered')CSS: --fk-chart-gray-boldest-hovered | chart/gray/boldest/hovered | Hovered state of color.chart.gray.boldest. | #4c4c4c | |
chart.lime.bold.default | React: themeGet('colors.chart.lime.bold.default')CSS: --fk-chart-lime-bold | chart/lime/bold/default | For data visualisation only. | #8cbd18 | |
chart.lime.bold.hovered | React: themeGet('colors.chart.lime.bold.hovered')CSS: --fk-chart-lime-bold-hovered | chart/lime/bold/hovered | Hovered state of color.chart.lime.bold. | #769f14 | |
chart.lime.bolder.default | React: themeGet('colors.chart.lime.bolder.default')CSS: --fk-chart-lime-bolder | chart/lime/bolder/default | For data visualisation only. | #769f14 | |
chart.lime.bolder.hovered | React: themeGet('colors.chart.lime.bolder.hovered')CSS: --fk-chart-lime-bolder-hovered | chart/lime/bolder/hovered | Hovered state of color.chart.lime.bolder. | #54710e | |
chart.lime.boldest.default | React: themeGet('colors.chart.lime.boldest.default')CSS: --fk-chart-lime-boldest | chart/lime/boldest/default | For data visualisation only. | #54710e | |
chart.lime.boldest.hovered | React: themeGet('colors.chart.lime.boldest.hovered')CSS: --fk-chart-lime-boldest-hovered | chart/lime/boldest/hovered | Hovered state of color.chart.lime.boldest. | #425a0c |
formula--Size
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
space.0 | React: themeGet('space.0')CSS: --fk-space-0 | 0px | |||
space.1 | React: themeGet('space.1')CSS: --fk-space-1 | 4px | |||
space.2 | React: themeGet('space.2')CSS: --fk-space-2 | 8px | |||
space.3 | React: themeGet('space.3')CSS: --fk-space-3 | 12px | |||
space.4 | React: themeGet('space.4')CSS: --fk-space-4 | 16px | |||
space.5 | React: themeGet('space.5')CSS: --fk-space-5 | 20px | |||
space.6 | React: themeGet('space.6')CSS: --fk-space-6 | 24px | |||
space.7 | React: themeGet('space.7')CSS: --fk-space-7 | 32px | |||
space.8 | React: themeGet('space.8')CSS: --fk-space-8 | 40px | |||
space.9 | React: themeGet('space.9')CSS: --fk-space-9 | 48px | |||
space.10 | React: themeGet('space.10')CSS: --fk-space-10 | 56px | |||
space.11 | React: themeGet('space.11')CSS: --fk-space-11 | 64px | |||
space.12 | React: themeGet('space.12')CSS: --fk-space-12 | 96px |
formula--Border Radius
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
radii.0 | React: themeGet('radii.0')CSS: --fk-radii-0 | 0px | |||
radii.1 | React: themeGet('radii.1')CSS: --fk-radii-1 | 2px | |||
radii.2 | React: themeGet('radii.2')CSS: --fk-radii-2 | 4px | |||
radii.3 | React: themeGet('radii.3')CSS: --fk-radii-3 | 6px | |||
radii.4 | React: themeGet('radii.4')CSS: --fk-radii-4 | 8px | |||
radii.5 | React: themeGet('radii.5')CSS: --fk-radii-5 | 99999px |
formula--Typography
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
Light the way | font.title.xxsmall | React: themeGet('font.title.xxsmall')CSS: --fk-font-title-xxsmall | normal 600 15px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.title.xsmall | React: themeGet('font.title.xsmall')CSS: --fk-font-title-xsmall | normal 600 15px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.title.small | React: themeGet('font.title.small')CSS: --fk-font-title-small | normal 600 17px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.title.medium | React: themeGet('font.title.medium')CSS: --fk-font-title-medium | normal 600 28px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.title.large | React: themeGet('font.title.large')CSS: --fk-font-title-large | normal 700 28px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.title.xlarge | React: themeGet('font.title.xlarge')CSS: --fk-font-title-xlarge | normal 700 28px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.title.xxlarge | React: themeGet('font.title.xxlarge')CSS: --fk-font-title-xxlarge | normal 700 56px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.body.default | React: themeGet('font.body.default')CSS: --fk-font-body | 400 14px/20px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.body.small | React: themeGet('font.body.small')CSS: --fk-font-body-small | 400 12px/16px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.body.medium | React: themeGet('font.body.medium')CSS: --fk-font-body-medium | 400 14px/20px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.body.large | React: themeGet('font.body.large')CSS: --fk-font-body-large | 400 15px/20px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.body.xlarge | React: themeGet('font.body.xlarge')CSS: --fk-font-body-xlarge | 400 17px/24px "Segoe UI VSS (Regular)", "Segoe UI", -apple-system, "system-ui", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
Light the way | font.code.default | React: themeGet('font.code.default')CSS: --fk-font-code | 400 12px/1 Menlo | ||
Light the way | font.code.xsmall | React: themeGet('font.code.xsmall')CSS: --fk-font-code-xsmall | 400 12px/16px Menlo | ||
Light the way | font.code.small | React: themeGet('font.code.small')CSS: --fk-font-code-small | 400 12px/20px Menlo | ||
Light the way | font.code.medium | React: themeGet('font.code.medium')CSS: --fk-font-code-medium | 400 13px/20px Menlo |