Fuegokit Tokensv0.16.2

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

Appfire

appfire--Colors

DemoToken nameCodeFigma usageDescriptionValue
text.brand
React:themeGet('text.brand')
CSS: --text-brand
text/brandUse for text that reinforces our brand.#397bff
text.inverse
React:themeGet('text.inverse')
CSS: --text-inverse
text/inverseUse for text on bold backgrounds.#090a0f
text.default
React:themeGet('text.default')
CSS: --text
text/defaultUse 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/defaultUse 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/inverseUse 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/defaultUse 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/inverseUse 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/defaultUse for critical text, such as input field error messaging.#f44343
text.danger.inverse
React:themeGet('text.danger.inverse')
CSS: --text-danger-inverse
text/danger/inverseUse for critical text in inverse contexts, such as input field error messaging. Use with background.danger.inverse or on surface.inverse.#c33636
text.warning.default.[default]
React:themeGet('text.warning.default.default')
CSS: --text-warning
text/warning/default/defaultUse for backgrounds communicating caution, such as in warning section messages.#181608
text.warning.default.hovered
React:themeGet('text.warning.default.hovered')
CSS: --text-warning-hovered
text/warning/default/hoveredHovered state for color.background.warning#484117
text.warning.default.pressed
React:themeGet('text.warning.default.pressed')
CSS: --text-warning-pressed
text/warning/default/pressedPressed state for color.background.warning#90832f
text.warning.bold.default
React:themeGet('text.warning.bold.default')
CSS: --text-warning-bold
text/warning/bold/defaultA vibrant background option for communicating caution, such as in warning buttons and warning banners.#fff8c5
text.warning.bold.hovered
React:themeGet('text.warning.bold.hovered')
CSS: --text-warning-bold-hovered
text/warning/bold/hoveredHovered state of color.background.warning.bold#fff6b6
text.warning.bold.pressed
React:themeGet('text.warning.bold.pressed')
CSS: --text-warning-bold-pressed
text/warning/bold/pressedPressed state of color.background.warning.bold#ffee70
text.warning.inverse
React:themeGet('text.warning.inverse')
CSS: --text-warning-inverse
text/warning/inverseUse for inverse backgrounds communicating caution, such as in warning section messages.#fffef8
text.success.default
React:themeGet('text.success.default')
CSS: --text-success
text/success/defaultUse 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/inverseUse for text on inverse success backgrounds that communicates a favourable outcome, such as input field success messaging. Use with background.success.inverse or surface.inverse.#358238
text.disabled
React:themeGet('text.disabled')
CSS: --text-disabled
text/disabledUse for text in a disabled state.#5c5b5e
text.selected
React:themeGet('text.selected')
CSS: --text-selected
text/selectedUse for text in selected or opened states, such as tabs and dropdown buttons.#173166
text.accent.blue.default
React:themeGet('text.accent.blue.default')
CSS: --text-accent-blue
text/accent/blue/defaultUse for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#397bff
text.accent.blue.bolder
React:themeGet('text.accent.blue.bolder')
CSS: --text-accent-blue-bolder
text/accent/blue/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#b0caff
text.accent.red.default
React:themeGet('text.accent.red.default')
CSS: --text-accent-red
text/accent/red/defaultUse for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#f44343
text.accent.red.bolder
React:themeGet('text.accent.red.bolder')
CSS: --text-accent-red-bolder
text/accent/red/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#feecec
text.accent.orange.default
React:themeGet('text.accent.orange.default')
CSS: --text-accent-orange
text/accent/orange/defaultUse for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#ff996c
text.accent.orange.bolder
React:themeGet('text.accent.orange.bolder')
CSS: --text-accent-orange-bolder
text/accent/orange/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#ffd6c4
text.accent.yellow.default
React:themeGet('text.accent.yellow.default')
CSS: --text-accent-yellow
text/accent/yellow/defaultUse for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#ffee70
text.accent.yellow.bolder
React:themeGet('text.accent.yellow.bolder')
CSS: --text-accent-yellow-bolder
text/accent/yellow/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#fffbe2
text.accent.green.default
React:themeGet('text.accent.green.default')
CSS: --text-accent-green
text/accent/green/defaultUse for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#4caf50
text.accent.green.bolder
React:themeGet('text.accent.green.bolder')
CSS: --text-accent-green-bolder
text/accent/green/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#b7dfb9
text.accent.purple.default
React:themeGet('text.accent.purple.default')
CSS: --text-accent-purple
text/accent/purple/defaultUse for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#9871e6
text.accent.purple.bolder
React:themeGet('text.accent.purple.bolder')
CSS: --text-accent-purple-bolder
text/accent/purple/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#ddcbff
text.accent.teal.default
React:themeGet('text.accent.teal.default')
CSS: --text-accent-teal
text/accent/teal/defaultUse for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#8dfcf1
text.accent.teal.bolder
React:themeGet('text.accent.teal.bolder')
CSS: --text-accent-teal-bolder
text/accent/teal/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#d1fef9
text.accent.gray.default
React:themeGet('text.accent.gray.default')
CSS: --text-accent-gray
text/accent/gray/defaultUse 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/bolderUse for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags.#cfccd4
link.default
React:themeGet('link.default')
CSS: --link
link/defaultUse for links in a default state.#397bff
link.hovered
React:themeGet('link.hovered')
CSS: --link-hovered
link/hoveredUse for links in a hovered state.#397bff
link.pressed
React:themeGet('link.pressed')
CSS: --link-pressed
link/pressedUse for links in a pressed state.#6195ff
link.visited
React:themeGet('link.visited')
CSS: --link-visited
link/visitedUse for links in a visited state.#ba97ff
icon.brand
React:themeGet('icon.brand')
CSS: --icon-brand
icon/brandUse for icons that reinforce our brand.#397bff
icon.inverse
React:themeGet('icon.inverse')
CSS: --icon-inverse
icon/inverseUse for icons on bold backgrounds.#121213
icon.danger.default
React:themeGet('icon.danger.default')
CSS: --icon-danger
icon/danger/defaultUse 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/inverseUse for icons in inverse contexts that communicate critical information, such as input field error messaging. Use with background.danger.inverse or on surface.inverse.#c33636
icon.success.default
React:themeGet('icon.success.default')
CSS: --icon-success
icon/success/defaultUse 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/inverseUse for icons in inverse contexts communicating a favourable outcome, such as those used in success section messages. Use with background.success.inverse or surface.inverse.#358238
icon.disabled
React:themeGet('icon.disabled')
CSS: --icon-disabled
icon/disabledUse for icons in a disabled state.#8a888e
icon.accent.blue.default
React:themeGet('icon.accent.blue.default')
CSS: --icon-accent-blue
icon/accent/blue/defaultUse for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#397bff
icon.accent.blue.bolder
React:themeGet('icon.accent.blue.bolder')
CSS: --icon-accent-blue-bolder
icon/accent/blue/bolderUse on bold blue accent backgrounds.#b0caff
icon.accent.red.default
React:themeGet('icon.accent.red.default')
CSS: --icon-accent-red
icon/accent/red/defaultUse for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#f44343
icon.accent.red.bolder
React:themeGet('icon.accent.red.bolder')
CSS: --icon-accent-red-bolder
icon/accent/red/bolderUse on bold red accent backgrounds.#feecec
icon.accent.orange.default
React:themeGet('icon.accent.orange.default')
CSS: --icon-accent-orange
icon/accent/orange/defaultUse for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#ff996c
icon.accent.orange.bolder
React:themeGet('icon.accent.orange.bolder')
CSS: --icon-accent-orange-bolder
icon/accent/orange/bolderUse on bold orange accent backgrounds.#ffd6c4
icon.accent.yellow.default
React:themeGet('icon.accent.yellow.default')
CSS: --icon-accent-yellow
icon/accent/yellow/defaultUse for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#ffee70
icon.accent.yellow.bolder
React:themeGet('icon.accent.yellow.bolder')
CSS: --icon-accent-yellow-bolder
icon/accent/yellow/bolderUse on bold yellow accent backgrounds.#fffbe2
icon.accent.green.default
React:themeGet('icon.accent.green.default')
CSS: --icon-accent-green
icon/accent/green/defaultUse for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#4caf50
icon.accent.green.bolder
React:themeGet('icon.accent.green.bolder')
CSS: --icon-accent-green-bolder
icon/accent/green/bolderUse on bold green accent backgrounds.#b7dfb9
icon.accent.purple.default
React:themeGet('icon.accent.purple.default')
CSS: --icon-accent-purple
icon/accent/purple/defaultUse for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#9871e6
icon.accent.purple.bolder
React:themeGet('icon.accent.purple.bolder')
CSS: --icon-accent-purple-bolder
icon/accent/purple/bolderUse on bold purple accent backgrounds.#ddcbff
icon.accent.teal.default
React:themeGet('icon.accent.teal.default')
CSS: --icon-accent-teal
icon/accent/teal/defaultUse for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.#7fe3d9
icon.accent.teal.bolder
React:themeGet('icon.accent.teal.bolder')
CSS: --icon-accent-teal-bolder
icon/accent/teal/bolderUse on bold teal accent backgrounds.#d1fef9
icon.accent.gray.default
React:themeGet('icon.accent.gray.default')
CSS: --icon-accent-gray
icon/accent/gray/defaultUse 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/bolderUse for text on gray subtle accent backgrounds.#cfccd4
icon.default
React:themeGet('icon.default')
CSS: --icon
icon/defaultUse for icon-only buttons, or icons paired with color.text.default#ffffff
border.brand
React:themeGet('border.brand')
CSS: --border-brand
border/brandUse for borders or visual indicators of elements that reinforce our brand, such as section dividers or card borders.#397bff
border.inverse
React:themeGet('border.inverse')
CSS: --border-inverse
border/inverseUse for borders on bold backgrounds.#090a0f
border.focused.default
React:themeGet('border.focused.default')
CSS: --border-focused
border/focused/defaultUse for focus rings of elements in a focus state.#6195ff
border.focused.inverse
React:themeGet('border.focused.inverse')
CSS: --border-focused-inverse
border/focused/inverseUse for focus rings of elements in a focus state.#173166
border.danger.default
React:themeGet('border.danger.default')
CSS: --border-danger
border/danger/defaultUse 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/inverseUse for borders in inverse background contexts that communicate critical information, such as the borders on invalid text fields. Use with background.danger.inverse or on surface.inverse.#c33636
border.success.default
React:themeGet('border.success.default')
CSS: --border-success
border/success/defaultUse 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/inverseUse for borders in inverse contexts that communicate a favourable outcome, such as the borders on validated text fields. Use with background.success.inverse or surface.inverse.#358238
border.input.default
React:themeGet('border.input.default')
CSS: --border-input
border/input/defaultUse 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/hoveredHovered state for border.input#397bff
border.disabled
React:themeGet('border.disabled')
CSS: --border-disabled
border/disabledUse for borders of elements in a disabled state.#b8b6bd78
border.default
React:themeGet('border.default')
CSS: --border
border/defaultUse 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/blueUse 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/redUse 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/orangeUse 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/yellowUse 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/greenUse 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/purpleUse 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/tealUse 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/grayUse for borders on non-bold gray accent backgrounds.#8a888e
border.subtle.default
React:themeGet('border.subtle.default')
CSS: --border-subtle
border/subtle/defaultundefined#5c5b5e
border.subtle.inverse
React:themeGet('border.subtle.inverse')
CSS: --border-subtle-inverse
border/subtle/inverseundefined#cfccd4
background.brand.bold.default
React:themeGet('background.brand.bold.default')
CSS: --background-brand-bold
background/brand/bold/defaultUse for the background of elements used to reinforce our brand, but with more emphasis.#336fe6
background.brand.bold.hovered
React:themeGet('background.brand.bold.hovered')
CSS: --background-brand-bold-hovered
background/brand/bold/hoveredHovered 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/pressedPressed state of color.background.brand.bold#224a99
background.brand.default.[default]
React:themeGet('background.brand.default.default')
CSS: --background-brand
background/brand/default/defaultUse for the background of elements used to reinforce our brand.#336fe6
background.brand.default.hovered
React:themeGet('background.brand.default.hovered')
CSS: --background-brand-hovered
background/brand/default/hoveredHovered state of color.background.brand#397bff
background.brand.default.pressed
React:themeGet('background.brand.default.pressed')
CSS: --background-brand-pressed
background/brand/default/pressedPressed state of color.background.brand#6195ff
background.disabled
React:themeGet('background.disabled')
CSS: --background-disabled
background/disabledUse for backgrounds of elements in a disabled state.#b8b6bd1a
background.success.default
React:themeGet('background.success.default')
CSS: --background-success
background/success/defaultUse 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/inverseUse for inverse backgrounds communicating a favourable outcome, such as success section messages. Use with backgrounds for text.success.inverse or icon.success.inverse.#edf7ee
background.danger.default.[default]
React:themeGet('background.danger.default.default')
CSS: --background-danger
background/danger/default/defaultUse for backgrounds communicating critical information, such as in error messages.#310e0e
background.danger.default.hovered
React:themeGet('background.danger.default.hovered')
CSS: --background-danger-hovered
background/danger/default/hoveredHovered state for color.background.danger#621b1b
background.danger.default.pressed
React:themeGet('background.danger.default.pressed')
CSS: --background-danger-pressed
background/danger/default/pressedPressed state for color.background.danger#922828
background.danger.bold.default
React:themeGet('background.danger.bold.default')
CSS: --background-danger-bold
background/danger/bold/defaultA vibrant background option for communicating critical information, such as in danger buttons and error banners.#f44343
background.danger.bold.hovered
React:themeGet('background.danger.bold.hovered')
CSS: --background-danger-bold-hovered
background/danger/bold/hoveredHovered state of color.background.danger.bold#f66969
background.danger.bold.pressed
React:themeGet('background.danger.bold.pressed')
CSS: --background-danger-bold-pressed
background/danger/bold/pressedPressed state of color.background.danger.bold#fbb4b4
background.danger.inverse
React:themeGet('background.danger.inverse')
CSS: --background-danger-inverse
background/danger/inverseUse for inverse backgrounds communicating critical information, such as in error messages. Use with backgrounds for text.danger.inverse or icon.danger.inverse.#feecec
background.warning.default.[default]
React:themeGet('background.warning.default.default')
CSS: --background-warning
background/warning/default/defaultUse for backgrounds communicating caution, such as in warning section messages.#484117
background.warning.default.hovered
React:themeGet('background.warning.default.hovered')
CSS: --background-warning-hovered
background/warning/default/hoveredHovered state for color.background.warning#90832f
background.warning.default.pressed
React:themeGet('background.warning.default.pressed')
CSS: --background-warning-pressed
background/warning/default/pressedPressed state for color.background.warning#c0ae3e
background.warning.bold.default
React:themeGet('background.warning.bold.default')
CSS: --background-warning-bold
background/warning/bold/defaultA vibrant background option for communicating caution, such as in warning buttons and warning banners.#fff6b6
background.warning.bold.hovered
React:themeGet('background.warning.bold.hovered')
CSS: --background-warning-bold-hovered
background/warning/bold/hoveredHovered state of color.background.warning.bold#fff8c5
background.warning.bold.pressed
React:themeGet('background.warning.bold.pressed')
CSS: --background-warning-bold-pressed
background/warning/bold/pressedPressed state of color.background.warning.bold#fffbe2
background.warning.inverse
React:themeGet('background.warning.inverse')
CSS: --background-warning-inverse
background/warning/inverseUse for inverse backgrounds communicating caution, such as in warning section messages.#fffef8
background.accent.blue.subtlest
React:themeGet('background.accent.blue.subtlest')
CSS: --background-accent-blue-subtlest
background/accent/blue/subtlestUse for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#0c1933
background.accent.blue.subtler
React:themeGet('background.accent.blue.subtler')
CSS: --background-accent-blue-subtler
background/accent/blue/subtlerUse for blue backgrounds when there is no meaning tied to the color, such as coloured tags.#224a99
background.accent.blue.subtle
React:themeGet('background.accent.blue.subtle')
CSS: --background-accent-blue-subtle
background/accent/blue/subtleUse for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.#2256c5
background.accent.blue.bolder
React:themeGet('background.accent.blue.bolder')
CSS: --background-accent-blue-bolder
background/accent/blue/bolderUse for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#397bff
background.accent.red.subtlest
React:themeGet('background.accent.red.subtlest')
CSS: --background-accent-red-subtlest
background/accent/red/subtlestUse for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#310e0e
background.accent.red.subtler
React:themeGet('background.accent.red.subtler')
CSS: --background-accent-red-subtler
background/accent/red/subtlerUse for red backgrounds when there is no meaning tied to the color, such as colored tags.#621b1b
background.accent.red.subtle
React:themeGet('background.accent.red.subtle')
CSS: --background-accent-red-subtle
background/accent/red/subtleUse for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.#922828
background.accent.red.bolder
React:themeGet('background.accent.red.bolder')
CSS: --background-accent-red-bolder
background/accent/red/bolderUse for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#f44343
background.accent.orange.subtlest
React:themeGet('background.accent.orange.subtlest')
CSS: --background-accent-orange-subtlest
background/accent/orange/subtlestUse for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#2f190f
background.accent.orange.subtler
React:themeGet('background.accent.orange.subtler')
CSS: --background-accent-orange-subtler
background/accent/orange/subtlerUse for orange backgrounds when there is no meaning tied to the color, such as colored tags.#8e4a2c
background.accent.orange.subtle
React:themeGet('background.accent.orange.subtle')
CSS: --background-accent-orange-subtle
background/accent/orange/subtleUse for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.#be633b
background.accent.orange.bolder
React:themeGet('background.accent.orange.bolder')
CSS: --background-accent-orange-bolder
background/accent/orange/bolderUse for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#ff996c
background.accent.yellow.subtlest
React:themeGet('background.accent.yellow.subtlest')
CSS: --background-accent-yellow-subtlest
background/accent/yellow/subtlestUse for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#484117
background.accent.yellow.subtler
React:themeGet('background.accent.yellow.subtler')
CSS: --background-accent-yellow-subtler
background/accent/yellow/subtlerUse for yellow backgrounds when there is no meaning tied to the color, such as colored tags.#c0ae3e
background.accent.yellow.subtle
React:themeGet('background.accent.yellow.subtle')
CSS: --background-accent-yellow-subtle
background/accent/yellow/subtleUse for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.#f0da4e
background.accent.yellow.bolder
React:themeGet('background.accent.yellow.bolder')
CSS: --background-accent-yellow-bolder
background/accent/yellow/bolderUse for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#fff6b6
background.accent.green.subtlest
React:themeGet('background.accent.green.subtlest')
CSS: --background-accent-green-subtlest
background/accent/green/subtlestUse for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#0f2310
background.accent.green.subtler
React:themeGet('background.accent.green.subtler')
CSS: --background-accent-green-subtler
background/accent/green/subtlerUse for green backgrounds when there is no meaning tied to the color, such as colored tags.#2e6930
background.accent.green.subtle
React:themeGet('background.accent.green.subtle')
CSS: --background-accent-green-subtle
background/accent/green/subtleUse for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.#358238
background.accent.green.bolder
React:themeGet('background.accent.green.bolder')
CSS: --background-accent-green-bolder
background/accent/green/bolderUse for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#4caf50
background.accent.teal.subtlest
React:themeGet('background.accent.teal.subtlest')
CSS: --background-accent-teal-subtlest
background/accent/teal/subtlestUse for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#1c3330
background.accent.teal.subtler
React:themeGet('background.accent.teal.subtler')
CSS: --background-accent-teal-subtler
background/accent/teal/subtlerUse for teal backgrounds when there is no meaning tied to the color, such as colored tags.#559791
background.accent.teal.subtle
React:themeGet('background.accent.teal.subtle')
CSS: --background-accent-teal-subtle
background/accent/teal/subtleUse for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.#71cac1
background.accent.teal.bolder
React:themeGet('background.accent.teal.bolder')
CSS: --background-accent-teal-bolder
background/accent/teal/bolderUse for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#8dfcf1
background.accent.purple.subtlest
React:themeGet('background.accent.purple.subtlest')
CSS: --background-accent-purple-subtlest
background/accent/purple/subtlestUse for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#221933
background.accent.purple.subtler
React:themeGet('background.accent.purple.subtler')
CSS: --background-accent-purple-subtler
background/accent/purple/subtlerUse for purple backgrounds when there is no meaning tied to the color, such as colored tags.#654b99
background.accent.purple.subtle
React:themeGet('background.accent.purple.subtle')
CSS: --background-accent-purple-subtle
background/accent/purple/subtleUse for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.#8764cc
background.accent.purple.bolder
React:themeGet('background.accent.purple.bolder')
CSS: --background-accent-purple-bolder
background/accent/purple/bolderUse for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#a97dff
background.accent.gray.subtlest
React:themeGet('background.accent.gray.subtlest')
CSS: --background-accent-gray-subtlest
background/accent/gray/subtlestUse for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#1c1b1c
background.accent.gray.subtler
React:themeGet('background.accent.gray.subtler')
CSS: --background-accent-gray-subtler
background/accent/gray/subtlerUse for gray backgrounds when there is no meaning tied to the color, such as colored tags.#2e2d2f
background.accent.gray.subtle
React:themeGet('background.accent.gray.subtle')
CSS: --background-accent-gray-subtle
background/accent/gray/subtleUse for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.#8a888e
background.accent.gray.bolder
React:themeGet('background.accent.gray.bolder')
CSS: --background-accent-gray-bolder
background/accent/gray/bolderUse for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#b8b6bd
background.accent.gradient.orangeYellow
React:themeGet('background.accent.gradient.orangeYellow')
CSS: --background-accent-gradient-orangeYellow
background/accent/gradient/orangeYellowUse for accent gradients from orange to yellowlinear-gradient(90deg, #FF996C 0%, #FFF6B6 100%)
background.accent.gradient.yellowPurple
React:themeGet('background.accent.gradient.yellowPurple')
CSS: --background-accent-gradient-yellowPurple
background/accent/gradient/yellowPurpleUse for accent gradients from yellow to purplelinear-gradient(90deg, #FFF6B6 0%, #A97DFF 100%)
background.accent.gradient.bluePurple
React:themeGet('background.accent.gradient.bluePurple')
CSS: --background-accent-gradient-bluePurple
background/accent/gradient/bluePurpleUse for accent gradients from blue to purplelinear-gradient(90deg, #397BFF 0%, #A97DFF 100%)
background.accent.gradient.yellowBlue
React:themeGet('background.accent.gradient.yellowBlue')
CSS: --background-accent-gradient-yellowBlue
background/accent/gradient/yellowBlueUse for accent gradients from yellow to bluelinear-gradient(90deg, #FFF6B6 0%, #397BFF 100%)
background.accent.gradient.orangeTeal
React:themeGet('background.accent.gradient.orangeTeal')
CSS: --background-accent-gradient-orangeTeal
background/accent/gradient/orangeTealUse for accent gradients from orange to teallinear-gradient(90deg, #FF996C 0%, #8DFCF1 99%)
background.accent.gradient.orangePurple
React:themeGet('background.accent.gradient.orangePurple')
CSS: --background-accent-gradient-orangePurple
background/accent/gradient/orangePurpleUse for accent gradients from orange to purplelinear-gradient(90deg, #FF996C 0%, #A97DFF 100%)
background.accent.gradient.blueOrange
React:themeGet('background.accent.gradient.blueOrange')
CSS: --background-accent-gradient-blueOrange
background/accent/gradient/blueOrangeUse for accent gradients from blue to orangelinear-gradient(90deg, #397BFF 0%, #FF996C 99%)
background.accent.gradient.purpleTeal
React:themeGet('background.accent.gradient.purpleTeal')
CSS: --background-accent-gradient-purpleTeal
background/accent/gradient/purpleTealUse for accent gradients from purple to teallinear-gradient(90deg, #A97DFF 0%, #8DFCF1 99%)
background.accent.gradient.tealBlue
React:themeGet('background.accent.gradient.tealBlue')
CSS: --background-accent-gradient-tealBlue
background/accent/gradient/tealBlueUse for accent gradients from teal to bluelinear-gradient(90deg, #8DFCF1 0%, #397BFF 100%)
background.accent.gradient.tealYellow
React:themeGet('background.accent.gradient.tealYellow')
CSS: --background-accent-gradient-tealYellow
background/accent/gradient/tealYellowUse for accent gradients from teal to yellowlinear-gradient(90deg, #8DFCF1 0%, #FFF6B6 100%)
background.neutral.subtle.default
React:themeGet('background.neutral.subtle.default')
CSS: --background-neutral-subtle
background/neutral/subtle/defaultUse for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.#00000000
background.neutral.subtle.hovered
React:themeGet('background.neutral.subtle.hovered')
CSS: --background-neutral-subtle-hovered
background/neutral/subtle/hoveredHovered state for color.background.neutral.subtle#b8b6bd1a
background.neutral.subtle.pressed
React:themeGet('background.neutral.subtle.pressed')
CSS: --background-neutral-subtle-pressed
background/neutral/subtle/pressedPressed state for color.background.neutral.subtle#b8b6bd33
background.selected.default.[default]
React:themeGet('background.selected.default.default')
CSS: --background-selected
background/selected/default/defaultUse for the background of elements in a selected state, such as in opened dropdown buttons.#6195ff
background.selected.default.hovered
React:themeGet('background.selected.default.hovered')
CSS: --background-selected-hovered
background/selected/default/hoveredHovered state for color.background.selected#397bff
background.selected.default.pressed
React:themeGet('background.selected.default.pressed')
CSS: --background-selected-pressed
background/selected/default/pressedPressed state for color.background.selected#336fe6
background.selected.bold.default
React:themeGet('background.selected.bold.default')
CSS: --background-selected-bold
background/selected/bold/defaultUse for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.#224a99
background.selected.bold.hovered
React:themeGet('background.selected.bold.hovered')
CSS: --background-selected-bold-hovered
background/selected/bold/hoveredHovered state of color.background.selected.bold#173166
background.selected.bold.pressed
React:themeGet('background.selected.bold.pressed')
CSS: --background-selected-bold-pressed
background/selected/bold/pressedPressed state of color.background.selected.bold#0c1933
surface.default
React:themeGet('surface.default')
CSS: --
surface/defaultUse as the primary background for the UI.#090a0f
surface.inverse
React:themeGet('surface.inverse')
CSS: --inverse
surface/inverseUse 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/defaultUse 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/hoveredUse 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/pressedUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#2e2d2f
elevation.surface.inverse.default
React:themeGet('elevation.surface.inverse.default')
CSS: --surface-inverse
elevation/surface/inverse/defaultUse for surfaces that should be the inverse of the primary surface of the UI.#ffffff
elevation.surface.default.[default]
React:themeGet('elevation.surface.default.default')
CSS: --surface
elevation/surface/default/defaultUse as the primary background for the UI.#090a0f
elevation.surface.default.hovered
React:themeGet('elevation.surface.default.hovered')
CSS: --surface-hovered
elevation/surface/default/hoveredHovered state of elevation.surface#1c1b1c
elevation.surface.default.pressed
React:themeGet('elevation.surface.default.pressed')
CSS: --surface-pressed
elevation/surface/default/pressedPressed state of elevation.surface#2e2d2f
elevation.surface.raised.default
React:themeGet('elevation.surface.raised.default')
CSS: --surface-raised
elevation/surface/raised/defaultUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#121213
elevation.surface.raised.hovered
React:themeGet('elevation.surface.raised.hovered')
CSS: --surface-raised-hovered
elevation/surface/raised/hoveredUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#1c1b1c
elevation.surface.raised.pressed
React:themeGet('elevation.surface.raised.pressed')
CSS: --surface-raised-pressed
elevation/surface/raised/pressedUse for the background of raised cards, such as cards. Combine with elevation.shadow.raised#2e2d2f

appfire--Typography

DemoToken nameCodeFigma usageDescriptionValue
Light the way
font.heading.xxsmall
React:themeGet('font.heading.xxsmall')
CSS: --font-heading-xxsmall
600 12px/16px "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.heading.xsmall
React:themeGet('font.heading.xsmall')
CSS: --font-heading-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.heading.small
React:themeGet('font.heading.small')
CSS: --font-heading-small
600 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.heading.medium
React:themeGet('font.heading.medium')
CSS: --font-heading-medium
600 20px/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.heading.large
React:themeGet('font.heading.large')
CSS: --font-heading-large
600 24px/28px "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.heading.xlarge
React:themeGet('font.heading.xlarge')
CSS: --font-heading-xlarge
600 28px/32px "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.heading.xxlarge
React:themeGet('font.heading.xxlarge')
CSS: --font-heading-xxlarge
600 36px/40px "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.body.default
React:themeGet('font.body.default')
CSS: --font-body
500 14px/20px "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
500 12px/16px "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
500 14px/20px "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
500 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.xlarge
React:themeGet('font.body.xlarge')
CSS: --font-body-xlarge
500 18px/28px "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.ui.default
React:themeGet('font.ui.default')
CSS: --font-ui
600 14px/16px "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.ui.small
React:themeGet('font.ui.small')
CSS: --font-ui-small
600 12px/16px "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.caption.default
React:themeGet('font.caption.default')
CSS: --font-caption
normal 500 12px/20px "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.code.default
React:themeGet('font.code.default')
CSS: --font-code
400 14px SF Mono
Light the way
font.code.xsmall
React:themeGet('font.code.xsmall')
CSS: --font-code-xsmall
400 12px SF Mono
Light the way
font.code.small
React:themeGet('font.code.small')
CSS: --font-code-small
400 14px SF Mono
Light the way
font.code.medium
React:themeGet('font.code.medium')
CSS: --font-code-medium
400 16px SF Mono
Light the way
font.display.default
React:themeGet('font.display.default')
CSS: --font-display
300 62px "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 47px "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

DemoToken nameCodeFigma usageDescriptionValue
elevation.surface.default.[default]
React:themeGet('colors.elevation.surface.default.default')
CSS: --fk-surface
elevation/surface/default/defaultUse as the primary background for the UI.#ffffff
elevation.surface.default.hovered
React:themeGet('colors.elevation.surface.default.hovered')
CSS: --fk-surface-hovered
elevation/surface/default/hoveredHovered state of elevation.surface#f1f2f4
elevation.surface.default.pressed
React:themeGet('colors.elevation.surface.default.pressed')
CSS: --fk-surface-pressed
elevation/surface/default/pressedPressed state of elevation.surface#dcdfe4
elevation.surface.sunken
React:themeGet('colors.elevation.surface.sunken')
CSS: --fk-surface-sunken
elevation/surface/sunkenA secondary background for the UI commonly used for grouping items, such as Jira cards in columns.#f7f8f9
elevation.surface.raised.default
React:themeGet('colors.elevation.surface.raised.default')
CSS: --fk-surface-raised
elevation/surface/raised/defaultUse 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/hoveredHovered 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/pressedPressed state of elevation.surface.raised#f1f2f4
elevation.surface.overlay.default
React:themeGet('colors.elevation.surface.overlay.default')
CSS: --fk-surface-overlay
elevation/surface/overlay/defaultUse for the background of elements that sit on top of the UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay.#ffffff
elevation.surface.overlay.hovered
React:themeGet('colors.elevation.surface.overlay.hovered')
CSS: --fk-surface-overlay-hovered
elevation/surface/overlay/hoveredHovered state of elevation.surface.overlay#f1f2f4
elevation.surface.overlay.pressed
React:themeGet('colors.elevation.surface.overlay.pressed')
CSS: --fk-surface-overlay-pressed
elevation/surface/overlay/pressedPressed state of elevation.surface.overlay#dcdfe4
elevation.shadow.raised
React:themeGet('colors.elevation.shadow.raised')
CSS: --fk-shadow-raised
elevation/shadow/raisedUse for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised0px 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/defaultUse 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/spreadUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.#091e4229
elevation.shadow.overflow.perimeter
React:themeGet('colors.elevation.shadow.overflow.perimeter')
CSS: --fk-shadow-overflow-perimeter
elevation/shadow/overflow/perimeterUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.#091e421f
elevation.shadow.overlay
React:themeGet('colors.elevation.shadow.overlay')
CSS: --fk-shadow-overlay
elevation/shadow/overlayUse 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/defaultUse 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/selectedUse 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/focusedUse for focus rings of elements in a focus state.#388bff
border.subtle
React:themeGet('colors.border.subtle')
CSS: --fk-border-subtle
border/subtleUse 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/inputUse 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/inverseUse for borders on bold backgrounds.#ffffff
border.disabled
React:themeGet('colors.border.disabled')
CSS: --fk-border-disabled
border/disabledUse for borders of elements in a disabled state.#091e420f
border.brand
React:themeGet('colors.border.brand')
CSS: --fk-border-brand
border/brandUse 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/dangerUse 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/warningUse for borders communicating caution.#e56910
border.success
React:themeGet('colors.border.success')
CSS: --fk-border-success
border/successUse for borders communicating a favourable outcome, such as the borders on validated text fields.#22a06b
border.discovery
React:themeGet('colors.border.discovery')
CSS: --fk-border-discovery
border/discoveryUse for borders communicating change or something new, such as the borders in onboarding spotlights.#8270db
border.information
React:themeGet('colors.border.information')
CSS: --fk-border-information
border/informationUse 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/blueUse for blue borders on non-bold backgrounds when there is no meaning tied to the color.#1d7afc
border.accent.red
React:themeGet('colors.border.accent.red')
CSS: --fk-border-accent-red
border/accent/redUse 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/orangeUse 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/yellowUse for yellow borders on non-bold backgrounds when there is no meaning tied to the color.#b38600
border.accent.green
React:themeGet('colors.border.accent.green')
CSS: --fk-border-accent-green
border/accent/greenUse for green borders on non-bold backgrounds when there is no meaning tied to the color.#22a06b
border.accent.magenta
React:themeGet('colors.border.accent.magenta')
CSS: --fk-border-accent-magenta
border/accent/magentaUse for magenta borders on non-bold backgrounds when there is no meaning tied to the color.#cd519d
border.accent.purple
React:themeGet('colors.border.accent.purple')
CSS: --fk-border-accent-purple
border/accent/purpleUse for purple borders on non-bold backgrounds when there is no meaning tied to the color.#8270db
border.accent.teal
React:themeGet('colors.border.accent.teal')
CSS: --fk-border-accent-teal
border/accent/tealUse 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/grayUse for borders on non-bold gray accent backgrounds.#8590a2
border.table.default
React:themeGet('colors.border.table.default')
CSS: --fk-border-table
border/table/defaultUse for the default borders in table elements, such as the visual divider between table headers or footers and table content.#091e4224
background.accent.blue.subtlest
React:themeGet('colors.background.accent.blue.subtlest')
CSS: --fk-background-accent-blue-subtlest
background/accent/blue/subtlestUse for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#e9f2ff
background.accent.blue.subtler
React:themeGet('colors.background.accent.blue.subtler')
CSS: --fk-background-accent-blue-subtler
background/accent/blue/subtlerUse 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/subtleUse 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/bolderUse for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#0c66e4
background.accent.red.subtlest
React:themeGet('colors.background.accent.red.subtlest')
CSS: --fk-background-accent-red-subtlest
background/accent/red/subtlestUse for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#ffeceb
background.accent.red.subtler
React:themeGet('colors.background.accent.red.subtler')
CSS: --fk-background-accent-red-subtler
background/accent/red/subtlerUse 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/subtleUse 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/bolderUse 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/subtlestUse 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/subtlerUse 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/subtleUse 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/bolderUse 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/subtlestUse for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#fff7d6
background.accent.yellow.subtler
React:themeGet('colors.background.accent.yellow.subtler')
CSS: --fk-background-accent-yellow-subtler
background/accent/yellow/subtlerUse for yellow backgrounds when there is no meaning tied to the color, such as colored tags.#f8e6a0
background.accent.yellow.subtle
React:themeGet('colors.background.accent.yellow.subtle')
CSS: --fk-background-accent-yellow-subtle
background/accent/yellow/subtleUse for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.#f5cd47
background.accent.yellow.bolder
React:themeGet('colors.background.accent.yellow.bolder')
CSS: --fk-background-accent-yellow-bolder
background/accent/yellow/bolderUse for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#946f00
background.accent.green.subtlest
React:themeGet('colors.background.accent.green.subtlest')
CSS: --fk-background-accent-green-subtlest
background/accent/green/subtlestUse for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#dcfff1
background.accent.green.subtler
React:themeGet('colors.background.accent.green.subtler')
CSS: --fk-background-accent-green-subtler
background/accent/green/subtlerUse for green backgrounds when there is no meaning tied to the color, such as colored tags.#baf3db
background.accent.green.subtle
React:themeGet('colors.background.accent.green.subtle')
CSS: --fk-background-accent-green-subtle
background/accent/green/subtleUse for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.#4bce97
background.accent.green.bolder
React:themeGet('colors.background.accent.green.bolder')
CSS: --fk-background-accent-green-bolder
background/accent/green/bolderUse for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.#1f845a
background.accent.purple.subtlest
React:themeGet('colors.background.accent.purple.subtlest')
CSS: --fk-background-accent-purple-subtlest
background/accent/purple/subtlestUse for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.#f3f0ff
background.accent.purple.subtler
React:themeGet('colors.background.accent.purple.subtler')
CSS: --fk-background-accent-purple-subtler
background/accent/purple/subtlerUse for purple backgrounds when there is no meaning tied to the color, such as colored tags.#dfd8fd
background.accent.purple.subtle
React:themeGet('colors.background.accent.purple.subtle')
CSS: --fk-background-accent-purple-subtle