Colors
| Demo | Token name | Code | Figma usage | Description | Value | Reference |
|---|---|---|---|---|---|---|
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 | primary-background-color | |
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 | primary-background-hover-color | |
elevation.surface.default.pressed | React: themeGet('colors.elevation.surface.default.pressed')CSS: --fk-surface-pressed | elevation/surface/default/pressed | Pressed state of elevation.surface. | #dcdfec | primary-selected-color | |
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 cards in columns. | #f6f7fb | grey-background-color | |
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 | secondary-background-color | |
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 | | box-shadow-medium | |
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 | box-shadow-large | |
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. | | box-shadow-xs | |
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 | ui-border-color | |
border.bold | React: themeGet('colors.border.bold')CSS: --fk-border-bold | border/bold | A neutral border option that passes min 3:1 contrast ratios. | #73788c | ui-border-color | |
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 | primary-color | |
border.focused | React: themeGet('colors.border.focused')CSS: --fk-border-focused | border/focused | Use for focus rings of elements in a focus state. | #1e89fa | primary-text-color | |
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 | ui-border-color | |
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 | layout-border-color | |
border.table.container | React: themeGet('colors.border.table.container')CSS: --fk-border-table-container | border/table/container | Use for the containing borders in table elements when the UI requires that different implementation values have different resolved values, such as the visual divider around table content. | #d0d4e4 | layout-border-color | |
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 | negative-color | |
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 | positive-color | |
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.default | React: themeGet('colors.background.accent.gray.subtlest.default')CSS: --fk-background-accent-gray-subtlest | background/accent/gray/subtlest/default | 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 | rgba(0, 0, 0, 0) | |
background.accent.gray.subtlest.hovered | React: themeGet('colors.background.accent.gray.subtlest.hovered')CSS: --fk-background-accent-gray-subtlest-hovered | background/accent/gray/subtlest/hovered | Hovered state of color.background.accent.gray.subtlest. | #eceff8 | primary-background-hover-color | |
background.accent.gray.subtlest.pressed | React: themeGet('colors.background.accent.gray.subtlest.pressed')CSS: --fk-background-accent-gray-subtlest-pressed | background/accent/gray/subtlest/pressed | Pressed state of color.background.accent.gray.subtlest. | #c3c6d4 | primary-background-hover-color | |
background.accent.gray.subtler.default | React: themeGet('colors.background.accent.gray.subtler.default')CSS: --fk-background-accent-gray-subtler | background/accent/gray/subtler/default | 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.subtler.hovered | React: themeGet('colors.background.accent.gray.subtler.hovered')CSS: --fk-background-accent-gray-subtler-hovered | background/accent/gray/subtler/hovered | Hovered state of color.background.accent.gray.subtler. | #c3c6d4 | - | |
background.accent.gray.subtler.pressed | React: themeGet('colors.background.accent.gray.subtler.pressed')CSS: --fk-background-accent-gray-subtler-pressed | background/accent/gray/subtler/pressed | Pressed state of color.background.accent.gray.subtler. | #878ca1 | - | |
background.accent.gray.subtle.default | React: themeGet('colors.background.accent.gray.subtle.default')CSS: --fk-background-accent-gray-subtle | background/accent/gray/subtle/default | Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags. | #878ca1 | - | |
background.accent.gray.subtle.hovered | React: themeGet('colors.background.accent.gray.subtle.hovered')CSS: --fk-background-accent-gray-subtle-hovered | background/accent/gray/subtle/hovered | Hovered state of color.background.accent.gray.subtle. | #73788c | - | |
background.accent.gray.subtle.pressed | React: themeGet('colors.background.accent.gray.subtle.pressed')CSS: --fk-background-accent-gray-subtle-pressed | background/accent/gray/subtle/pressed | Pressed state of color.background.accent.gray.subtle. | #676879 | - | |
background.accent.gray.bolder.default | React: themeGet('colors.background.accent.gray.bolder.default')CSS: --fk-background-accent-gray-bolder | background/accent/gray/bolder/default | 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 | #73788c | - | |
background.accent.gray.bolder.hovered | React: themeGet('colors.background.accent.gray.bolder.hovered')CSS: --fk-background-accent-gray-bolder-hovered | background/accent/gray/bolder/hovered | Hovered state of color.background.accent.gray.bolder. | #676879 | secondary-text-on-secondary-color | |
background.accent.gray.bolder.pressed | React: themeGet('colors.background.accent.gray.bolder.pressed')CSS: --fk-background-accent-gray-bolder-pressed | background/accent/gray/bolder/pressed | Pressed state of color.background.accent.gray.bolder. | #676879 | secondary-text-on-secondary-color | |
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 | allgrey-background-color | |
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 | primary-background-hover-on-secondary-color | |
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 | primary-background-hover-color | |
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 | inverted-color-background | |
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 | secondary-text-on-secondary-color | |
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. | #323338 | primary-hover-color | |
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 | primary-color | |
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 | primary-hover-color | |
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 | primary-hover-color | |
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 | primary-selected-color | |
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 | primary-selected-color | |
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 | disabled-background-color | |
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 | primary-color | |
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 | link-color | |
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 | primary-color | |
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. | #f4c3cb | negative-color-selected | |
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 | #ecb7bf | - | |
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 | #e06c7d | - | |
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 | negative-color | |
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 | negative-color-hover | |
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 | positive-color-selected | |
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 | positive-color | |
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 | positive-color-hover | |
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 | warning-color-selected | |
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 | warning-color-hover | |
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. | #ffcb00 | warning-color | |
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 | warning-color-hover | |
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 | primary-text-color | |
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 | secondary-text-color | |
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 | secondary-text-color | |
text.disabled | React: themeGet('colors.text.disabled')CSS: --fk-text-disabled | text/disabled | Use for text in a disabled state. | #1f222d85 | disabled-text-color | |
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-color-on-primary | |
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 | primary-text-color | |
text.danger | React: themeGet('colors.text.danger')CSS: --fk-text-danger | text/danger | Use for critical text, such as input field error messaging. | #d83a52 | primary-text-color | |
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. | #0060b9 | primary-text-color | |
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 | primary-text-color | |
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 | #1f76c2 | - | |
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-color | |
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 | #323338 | primary-text-color | |
icon.subtle | React: themeGet('colors.icon.subtle')CSS: --fk-icon-subtle | icon/subtle | Use for icons paired with color.text.subtle | #676879 | secondary-text-color | |
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 | text-color-on-primary | |
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 | disabled-text-color | |
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 | - | |
opacity.disabled | React: themeGet('colors.opacity.disabled')CSS: --fk-opacity-disabled | opacity/disabled | Apply to images when in a disabled state. | | disabled-component-opacity | |
opacity.loading | React: themeGet('colors.opacity.loading')CSS: --fk-opacity-loading | opacity/loading | Apply to content that sits under a loading spinner. | | - | |
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 |