mode.color.none
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.ai.stop-1
#00d639rgb(0, 214, 57)({core.color.AI.vibrant.pea})
mode.color.ai.stop-2
#00d6dergb(0, 214, 222)({core.color.AI.vibrant.aqua})
mode.color.ai.stop-3
#9d60ffrgb(157, 96, 255)({core.color.AI.vibrant.lilac})
mode.color.ai.alt.stop-1
#00d639rgb(0, 214, 57)({core.color.AI.vibrant.pea})
mode.color.ai.alt.stop-2
#00d6dergb(0, 214, 222)({core.color.AI.vibrant.aqua})
mode.color.ai.alt.stop-3
#9d60ffrgb(157, 96, 255)({core.color.AI.vibrant.lilac})
mode.color.brand.default
#00d639rgb(0, 214, 57)({core.color.brand.50})
mode.color.brand.defaultAlt
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.brand.withDefaultAlt
#000000rgb(0, 0, 0)({core.color.black})
mode.color.brand.inverse.default
#000000rgb(0, 0, 0)({core.color.black})
mode.color.brand.inverse.defaultAlt
#000000rgb(0, 0, 0)({core.color.black})
mode.color.brand.inverse.withDefaultAlt
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.brand.copilot.default
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.brand.copilot.withDefault
#00d639rgb(0, 214, 57)({core.color.brand.50})
mode.color.brand.copilot.monochrome
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.brand.copilot.inverse.default
#000000rgb(0, 0, 0)({core.color.black})
mode.color.brand.copilot.inverse.monochrome
#000000rgb(0, 0, 0)({core.color.black})
mode.color.brand.copilot.inverse.withDefault
not accessible on white if it is intended to provide meaning
#00d639rgb(0, 214, 57)({core.color.brand.50})
mode.color.colorcode.blue.intense
#58a2ffrgb(88, 162, 255)({core.color.azure.20})
mode.color.colorcode.blue.harsh
#007fd9rgb(0, 127, 217)({core.color.azure.40})
mode.color.colorcode.blue.soft
#0063adrgb(0, 99, 173)({core.color.azure.70})
mode.color.colorcode.blue.faint
#001932rgb(0, 25, 50)({core.color.azure.90})
mode.color.colorcode.teal.intense
#25B2B0rgb(37, 178, 176)({core.color.petrol.20})
mode.color.colorcode.teal.harsh
#008B8Argb(0, 139, 138)({core.color.petrol.40})
mode.color.colorcode.teal.soft
#006D6Crgb(0, 109, 108)({core.color.petrol.70})
mode.color.colorcode.teal.faint
#001C1Crgb(0, 28, 28)({core.color.petrol.90})
mode.color.colorcode.green.intense
#30b843rgb(48, 184, 67)({core.color.emerald.20})
mode.color.colorcode.green.harsh
#019127rgb(1, 145, 39)({core.color.emerald.40})
mode.color.colorcode.green.soft
#007219rgb(0, 114, 25)({core.color.emerald.70})
mode.color.colorcode.green.faint
#001f03rgb(0, 31, 3)({core.color.emerald.90})
mode.color.colorcode.lime.intense
#92aa3crgb(146, 170, 60)({core.color.lime.20})
mode.color.colorcode.lime.harsh
#718524rgb(113, 133, 36)({core.color.lime.40})
mode.color.colorcode.lime.soft
#576900rgb(87, 105, 0)({core.color.lime.70})
mode.color.colorcode.lime.faint
#141a00rgb(20, 26, 0)({core.color.lime.90})
mode.color.colorcode.orange.intense
#f68029rgb(246, 128, 41)({core.color.tangerine.20})
mode.color.colorcode.orange.harsh
#e24300rgb(226, 67, 0)({core.color.tangerine.40})
mode.color.colorcode.orange.soft
#b33400rgb(179, 52, 0)({core.color.tangerine.70})
mode.color.colorcode.orange.faint
#360900rgb(54, 9, 0)({core.color.tangerine.90})
mode.color.colorcode.red.intense
#ff728drgb(255, 114, 141)({core.color.blush.20})
mode.color.colorcode.red.harsh
#f50059rgb(245, 0, 89)({core.color.blush.40})
mode.color.colorcode.red.soft
#c40044rgb(196, 0, 68)({core.color.blush.70})
mode.color.colorcode.red.faint
#3c000frgb(60, 0, 15)({core.color.blush.90})
mode.color.colorcode.pink.intense
#f571c7rgb(245, 113, 199)({core.color.flamingo.20})
mode.color.colorcode.pink.harsh
#d046a4rgb(208, 70, 164)({core.color.flamingo.40})
mode.color.colorcode.pink.soft
#b02086rgb(176, 32, 134)({core.color.flamingo.70})
mode.color.colorcode.pink.faint
#350426rgb(53, 4, 38)({core.color.flamingo.90})
mode.color.colorcode.purple.intense
#b190e8rgb(177, 144, 232)({core.color.plum.20})
mode.color.colorcode.purple.harsh
#9463d7rgb(148, 99, 215)({core.color.plum.40})
mode.color.colorcode.purple.soft
#803ec5rgb(128, 62, 197)({core.color.plum.70})
mode.color.colorcode.purple.faint
#220c3argb(34, 12, 58)({core.color.plum.90})
mode.color.colorcode.slate.intense
#e8eaecrgb(232, 234, 236)({core.color.storm.10})
mode.color.colorcode.slate.harsh
#bac1c7rgb(186, 193, 199)({core.color.storm.30})
mode.color.colorcode.slate.soft
#475a6argb(71, 90, 106)({core.color.storm.80})
mode.color.colorcode.slate.faint
#253b4ergb(37, 59, 78)({core.color.storm.95})
mode.color.colorcode.gray.intense
#eeeeeergb(238, 238, 238)({core.color.smoke.10})
mode.color.colorcode.gray.harsh
#8b8b8brgb(139, 139, 139)({core.color.smoke.30})
mode.color.colorcode.gray.soft
#616161rgb(97, 97, 97)({core.color.smoke.70})
mode.color.colorcode.gray.faint
#181818rgb(24, 24, 24)({core.color.smoke.90})
mode.color.colorcode.yellow.intense
#ffd274rgb(255, 210, 116)({core.color.gold.20})
mode.color.colorcode.yellow.harsh
#ffbf22rgb(255, 191, 34)({core.color.gold.40})
mode.color.colorcode.yellow.soft
#926709rgb(146, 103, 9)({core.color.gold.70})
mode.color.colorcode.yellow.faint
#231500rgb(35, 21, 0)({core.color.gold.90})
mode.color.generic.bg.nought
#000000rgb(0, 0, 0)({core.color.black})
mode.color.generic.bg.faint
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.generic.bg.delicate
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.generic.bg.soft
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.generic.bg.inverse.nought
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.generic.bg.inverse.faint
#f4f5f6rgb(244, 245, 246)({core.color.storm.5})
mode.color.generic.bg.inverse.delicate
#e8eaecrgb(232, 234, 236)({core.color.storm.10})
mode.color.generic.bg.inverse.soft
#dde0e3rgb(221, 224, 227)({core.color.storm.15})
mode.color.generic.txt.extreme
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.generic.txt.severe
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.generic.txt.moderate
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.generic.txt.soft
was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible.
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.generic.txt.delicate
accessible OBJECT against white.
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.generic.txt.inverse.extreme
#000000rgb(0, 0, 0)({core.color.black})
mode.color.generic.txt.inverse.severe
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.generic.txt.inverse.moderate
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.generic.txt.inverse.soft
was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible.
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.generic.txt.inverse.delicate
accessible OBJECT against white.
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.generic.fg.nought
#000000rgb(0, 0, 0)({core.color.black})
mode.color.generic.fg.soft
table dividers and borders
#505050rgb(80, 80, 80)({core.color.smoke.80})
mode.color.generic.fg.moderate
#616161rgb(97, 97, 97)({core.color.smoke.70})
mode.color.generic.fg.firm
#6f6f6frgb(111, 111, 111)({core.color.smoke.60})
mode.color.generic.fg.inverse.nought
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.generic.fg.inverse.soft
table dividers and borders
#a3adb5rgb(163, 173, 181)({core.color.storm.40})
mode.color.generic.fg.inverse.moderate
#8c98a2rgb(140, 152, 162)({core.color.storm.50})
mode.color.generic.fg.inverse.firm
#75838frgb(117, 131, 143)({core.color.storm.60})
mode.color.generic.surface.nought
used on full page backgrounds
#000000rgb(0, 0, 0)({core.color.black})
mode.color.generic.surface.trace
used on full page backgrounds as an alternative option
#253b4ergb(37, 59, 78)({core.color.storm.95})
mode.color.generic.surface.faint
table header hover color
#304658rgb(48, 70, 88)({core.color.storm.90})
mode.color.generic.surface.harsh
#d1d6dargb(209, 214, 218)({core.color.storm.20})
mode.color.generic.surface.severe
#e8eaecrgb(232, 234, 236)({core.color.storm.10})
mode.color.generic.surface.acute
#f4f5f6rgb(244, 245, 246)({core.color.storm.5})
mode.color.action.ai.grad.active
linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)(linear-gradient(90deg, {mode.color.action.ai.active.stop-1} 0%, {mode.color.action.ai.active.stop-2} 40%, {mode.color.action.ai.active.stop-3} 90%))
mode.color.action.ai.grad.hover
linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)(linear-gradient(90deg, {mode.color.action.ai.hover.stop-1} 0%, {mode.color.action.ai.hover.stop-2} 40%, {mode.color.action.ai.hover.stop-3} 90%))
mode.color.action.ai.grad.default
linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)(linear-gradient(90deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))
mode.color.action.ai.active.stop-1
#00d639rgb(0, 214, 57)({mode.color.ai.stop-1})
mode.color.action.ai.active.stop-2
#00d6dergb(0, 214, 222)({mode.color.ai.stop-2})
mode.color.action.ai.active.stop-3
#9d60ffrgb(157, 96, 255)({mode.color.ai.stop-3})
mode.color.action.ai.hover.stop-1
#00d639rgb(0, 214, 57)({mode.color.ai.stop-1})
mode.color.action.ai.hover.stop-2
#00d6dergb(0, 214, 222)({mode.color.ai.stop-2})
mode.color.action.ai.hover.stop-3
#9d60ffrgb(157, 96, 255)({mode.color.ai.stop-3})
mode.color.action.danger.active
active button on dark
#ff728drgb(255, 114, 141)({core.color.blush.20})
mode.color.action.danger.default
#f50059rgb(245, 0, 89)({core.color.blush.40})
mode.color.action.danger.defaultAlt
for links in datatables
#ff3e6argb(255, 62, 106)({core.color.blush.30})
mode.color.action.danger.hover
#ff3e6argb(255, 62, 106)({core.color.blush.30})
mode.color.action.danger.hoverAlt
used on secondary-button hover states
#f50059rgb(245, 0, 89)({core.color.blush.40})
mode.color.action.danger.hoverAlt2
for links in datatables
#ff728drgb(255, 114, 141)({core.color.blush.20})
mode.color.action.danger.withActive
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.danger.withDefault
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.danger.inverse.active
used on pill hover states
#a30037rgb(163, 0, 55)({core.color.blush.80})
mode.color.action.danger.inverse.default
#db004ergb(219, 0, 78)({core.color.blush.60})
mode.color.action.danger.inverse.defaultAlt
For links in datatables
#c40044rgb(196, 0, 68)({core.color.blush.70})
mode.color.action.danger.inverse.hover
used on solid-pill and primary-button hover states
#c40044rgb(196, 0, 68)({core.color.blush.70})
mode.color.action.danger.inverse.hoverAlt
used on secondary-button hover states
#db004ergb(219, 0, 78)({core.color.blush.60})
mode.color.action.danger.inverse.hoverAlt2
used on link hover state
#a30037rgb(163, 0, 55)({core.color.blush.80})
mode.color.action.danger.inverse.withActive
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.danger.inverse.withDefault
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.dataEntry.default
Input backgrounds.
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.dataEntry.withActive
checkbox tick icon or radio handle
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.dataEntry.withActiveAlt
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.dataEntry.withHover
txt for draggable area on file input
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.dataEntry.hoverAlt
bg hover for draggable area on file input
#253b4ergb(37, 59, 78)({core.color.storm.95})
mode.color.action.dataEntry.withDefault
Input borders.
#a3adb5rgb(163, 173, 181)({core.color.storm.40})
mode.color.action.dataEntry.defaultAlt
Input footer bgs (e.g txt editor)
#304658rgb(48, 70, 88)({core.color.storm.90})
mode.color.action.dataEntry.txt
Input txt
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.severe})
mode.color.action.dataEntry.txtAlt
Hint txt, placeholder txt, character count etc
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.soft})
mode.color.action.dataEntry.inverse.default
Input backgrounds.
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.dataEntry.inverse.withDefault
Input borders.
#75838frgb(117, 131, 143)({core.color.storm.60})
mode.color.action.dataEntry.inverse.txt
Input txt
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.severe})
mode.color.action.dataEntry.inverse.txtAlt
Hint txt, placeholder txt, character count etc
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.soft})
mode.color.action.focus.default
#FFB500rgb(255, 181, 0)({core.color.gold.50})
mode.color.action.focus.txt
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.focus.withDefault
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.focus.withDefaultAlt
#885e00rgb(136, 94, 0)({core.color.gold.80})
mode.color.action.focus.inverse.default
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.focus.inverse.txt
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.focus.inverse.withDefault
#FFB500rgb(255, 181, 0)({core.color.gold.50})
mode.color.action.focus.inverse.withDefaultAlt
#ffd274rgb(255, 210, 116)({core.color.gold.20})
mode.color.action.inactive.default
Disabled form secondary, tertiary and input borders borders.
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.inactive.mask
full screen takeover token for modal dimmer
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.inactive.defaultAlt
Disabled input and switch backgrounds. Deliberately a solid color value as opposed to alpha based so it works within switch.
#181818rgb(24, 24, 24)({core.color.smoke.90})
mode.color.action.inactive.txt
Disabled txt inside buttons
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.delicate})
mode.color.action.inactive.txtAlt
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.action.inactive.icon
Disabled icon inside buttons and form inputs.
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.delicate})
mode.color.action.inactive.iconAlt
Readonly icon inside form inputs.
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.soft})
mode.color.action.inactive.inverse.default
Disabled form secondary, tertiary and input borders borders.
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.inactive.inverse.txt
inversed disabled txt inside buttons and form inputs.
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.delicate})
mode.color.action.inactive.inverse.txtAlt
Disabled labels inside buttons and Switch.
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.action.grayscale.active
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.grayscale.activeAlt
#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.active})
mode.color.action.grayscale.default
#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.active})
mode.color.action.grayscale.defaultAlt
subtle and toggle button txt
#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.active})
mode.color.action.grayscale.hoverAlt
Accordion, secondary, tertiary, menu bg on hover
#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.active})
mode.color.action.grayscale.hover
subtle table header hover
#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.active})
mode.color.action.grayscale.withActive
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.grayscale.withActiveAlt
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.grayscale.withDefault
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.grayscale.withHover
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.grayscale.inverse.active
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.grayscale.inverse.activeAlt
#000000rgb(0, 0, 0)({mode.color.action.grayscale.inverse.active})
mode.color.action.grayscale.inverse.default
#181818rgb(24, 24, 24)({core.color.smoke.90})
mode.color.action.grayscale.inverse.defaultAlt
subtle and toggle button txt
#000000rgb(0, 0, 0)({mode.color.action.grayscale.inverse.active})
mode.color.action.grayscale.inverse.hoverAlt
Accordion, secondary, tertiary, menu bg on hover
#000000rgb(0, 0, 0)({mode.color.action.grayscale.inverse.active})
mode.color.action.grayscale.inverse.hover
subtle table header hover
#000000rgb(0, 0, 0)({mode.color.action.grayscale.inverse.active})
mode.color.action.grayscale.inverse.withActive
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.grayscale.inverse.withActiveAlt
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.grayscale.inverse.withDefault
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.grayscale.inverse.withHover
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.nav.active
active bg for nav items
#005e14rgb(0, 94, 20)({core.color.brand.80})
mode.color.action.nav.default
default bg for global nav
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.nav.defaultAlt
default bg for left nav container
#181818rgb(24, 24, 24)({core.color.smoke.90})
mode.color.action.nav.child
#505050rgb(80, 80, 80)({core.color.smoke.80})
mode.color.action.nav.childAlt
#616161rgb(97, 97, 97)({core.color.smoke.70})
mode.color.action.nav.hover
hover bg for nav items
#007219rgb(0, 114, 25)({core.color.brand.70})
mode.color.action.nav.withActive
txt and icons on top of active bgs in nav contxts
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.nav.withDefault
hover bg for nav items
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.severe})
mode.color.action.nav.withHover
hov bg for nav items
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.nav.inverse.active
active bg for nav items
#005e14rgb(0, 94, 20)({core.color.brand.80})
mode.color.action.nav.inverse.default
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.nav.inverse.defaultAlt
#f4f5f6rgb(244, 245, 246)({core.color.storm.5})
mode.color.action.nav.inverse.child
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.nav.inverse.childAlt
#e8eaecrgb(232, 234, 236)({core.color.storm.10})
mode.color.action.nav.inverse.hover
hover bg for nav items
#007219rgb(0, 114, 25)({core.color.brand.70})
mode.color.action.nav.inverse.withActive
txt and icons on top of active bgs in nav contxts
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.nav.inverse.withDefault
hover bg for nav items
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.severe})
mode.color.action.nav.inverse.withHover
hover bg for nav items
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.main.active
#8fff98rgb(143, 255, 152)({core.color.brand.20})
mode.color.action.main.activeAlt
Active color for inverse secondary and tertiary buttons
#00f142rgb(0, 241, 66)({mode.color.action.main.default})
mode.color.action.main.default
#00f142rgb(0, 241, 66)({core.color.brand.40})
mode.color.action.main.defaultAlt
border color for secondary and tertiary inverse buttons
#00f142rgb(0, 241, 66)({mode.color.action.main.default})
mode.color.action.main.defaultAlt2
default color for links
#46fb5ergb(70, 251, 94)({core.color.brand.30})
mode.color.action.main.defaultAlt3
default background color of inverse secondary buttons
#00f142rgb(0, 241, 66)({mode.color.action.main.default})
mode.color.action.main.hover
#46fb5ergb(70, 251, 94)({core.color.brand.30})
mode.color.action.main.hoverAlt
hover for inverse secondary and tertiary buttons
#00f142rgb(0, 241, 66)({mode.color.action.main.default})
mode.color.action.main.hoverAlt2
hover for links
#8fff98rgb(143, 255, 152)({core.color.brand.20})
mode.color.action.main.withActive
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.main.withDefault
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.main.withHover
#000000rgb(0, 0, 0)({core.color.black})
mode.color.action.main.inverse.active
#005e14rgb(0, 94, 20)({core.color.brand.80})
mode.color.action.main.inverse.activeAlt
Active color for secondary and tertiary buttons
#00811frgb(0, 129, 31)({mode.color.action.main.inverse.default})
mode.color.action.main.inverse.default
#00811frgb(0, 129, 31)({core.color.brand.60})
mode.color.action.main.inverse.defaultAlt
border color for secondary and tertiary buttons
#00811frgb(0, 129, 31)({mode.color.action.main.inverse.default})
mode.color.action.main.inverse.defaultAlt2
default value for links
#007219rgb(0, 114, 25)({core.color.brand.70})
mode.color.action.main.inverse.defaultAlt3
default background color of secondary button
#00811frgb(0, 129, 31)({mode.color.action.main.inverse.default})
mode.color.action.main.inverse.hover
#007219rgb(0, 114, 25)({core.color.brand.70})
mode.color.action.main.inverse.hoverAlt
hover for secondary and tertiary buttons
#00811frgb(0, 129, 31)({mode.color.action.main.inverse.default})
mode.color.action.main.inverse.hoverAlt2
hover for links
#005e14rgb(0, 94, 20)({core.color.brand.80})
mode.color.action.main.inverse.withActive
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.main.inverse.withDefault
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.action.main.inverse.withHover
#FFFFFFrgb(255, 255, 255)({core.color.white})
mode.color.status.ai.default
#000000rgb(0, 0, 0)({mode.color.generic.bg.nought})
mode.color.status.ai.defaultAlt
bg for contxtual message comp
#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.inverse.nought})
mode.color.status.ai.withDefaultAlt
#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.inverse.nought})
mode.color.status.ai.default-horizontal
linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)(linear-gradient(90deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))
mode.color.status.ai.default-vertical
linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)(linear-gradient(180deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))
mode.color.status.ai.inverse.default-horizontal
linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)(linear-gradient(90deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))
mode.color.status.ai.inverse.default-vertical
linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)(linear-gradient(180deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))
mode.color.status.callout.defaultAlt
used for marketing banners
#001001rgb(0, 16, 1)({core.color.brand.95})
mode.color.status.callout.hoverAlt
marketing banner hover
#001e03rgb(0, 30, 3)({core.color.brand.90})
mode.color.status.skeleton.stop-1
#a3adb5rgb(163, 173, 181)({core.color.storm.40})
mode.color.status.skeleton.stop-2
#475a6argb(71, 90, 106)({core.color.storm.80})
mode.color.status.warning.default
#e24300rgb(226, 67, 0)({core.color.tangerine.40})
mode.color.status.warning.defaultAlt
Subtle message bg
#1d0300rgb(29, 3, 0)({core.color.tangerine.95})
mode.color.status.warning.withDefaultAlt
#e24300rgb(226, 67, 0)({core.color.tangerine.40})
mode.color.status.warning.hover
used on pill hover states
#e5631crgb(229, 99, 28)({core.color.tangerine.30})
mode.color.status.warning.hoverAlt
used on pill hover states and message bg
#360900rgb(54, 9, 0)({core.color.tangerine.90})
mode.color.status.warning.txt
#e5631crgb(229, 99, 28)({core.color.tangerine.30})
mode.color.status.warning.inverse.default
#d64309rgb(214, 67, 9)({core.color.tangerine.60})
mode.color.status.warning.inverse.defaultAlt
Subtle message bg
#fff7ebrgb(255, 247, 235)({core.color.tangerine.5})
mode.color.status.warning.inverse.hover
used on pill hover states
#b33400rgb(179, 52, 0)({core.color.tangerine.70})
mode.color.status.warning.inverse.hoverAlt
used on pill hover states and message bg
#ffeacargb(255, 234, 202)({core.color.tangerine.10})
mode.color.status.warning.inverse.txt
#b33400rgb(179, 52, 0)({core.color.tangerine.70})
mode.color.status.txt.withDefault
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.status.txt.withDefaultAlt
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.severe})
mode.color.status.txt.withHover
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.status.txt.withHoverAlt
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.status.txt.loading
used on skeleton txt
#747474rgb(116, 116, 116)({core.color.smoke.50})
mode.color.status.txt.inverse.withDefault
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.status.txt.inverse.withDefaultAlt
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.severe})
mode.color.status.txt.inverse.withHover
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.extreme})
mode.color.status.txt.inverse.withHoverAlt
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.extreme})
mode.color.status.custom.blue.default
For pills. Not accessible with white txt.
#007fd9rgb(0, 127, 217)({core.color.azure.40})
mode.color.status.custom.blue.defaultAlt
Pill bg
#000b1crgb(0, 11, 28)({core.color.azure.95})
mode.color.status.custom.blue.hover
used on pill hover states
#008ef4rgb(0, 142, 244)({core.color.azure.30})
mode.color.status.custom.blue.hoverAlt
used on pill hover states
#001932rgb(0, 25, 50)({core.color.azure.90})
mode.color.status.custom.teal.default
For pills. Not accessible with white txt.
#008B8Argb(0, 139, 138)({core.color.petrol.40})
mode.color.status.custom.teal.defaultAlt
Pill bg
#000E0Ergb(0, 14, 14)({core.color.petrol.95})
mode.color.status.custom.teal.hover
used on pill hover states
#009B99rgb(0, 155, 153)({core.color.petrol.30})
mode.color.status.custom.teal.hoverAlt
used on pill hover states
#001C1Crgb(0, 28, 28)({core.color.petrol.90})
mode.color.status.custom.green.default
For pills. Not accessible with white txt.
#019127rgb(1, 145, 39)({core.color.emerald.40})
mode.color.status.custom.green.defaultAlt
Pill bg
#001001rgb(0, 16, 1)({core.color.emerald.95})
mode.color.status.custom.green.hover
used on pill hover states
#1BA12Brgb(27, 161, 43)({core.color.emerald.30})
mode.color.status.custom.green.hoverAlt
used on pill hover states
#001f03rgb(0, 31, 3)({core.color.emerald.90})
mode.color.status.custom.lime.default
For pills. Not accessible with white txt.
#718524rgb(113, 133, 36)({core.color.lime.40})
mode.color.status.custom.lime.defaultAlt
Pill bg
#0a0e00rgb(10, 14, 0)({core.color.lime.95})
mode.color.status.custom.lime.hover
used on pill hover states
#7d9428rgb(125, 148, 40)({core.color.lime.30})
mode.color.status.custom.lime.hoverAlt
used on pill hover states
#141a00rgb(20, 26, 0)({core.color.lime.90})
mode.color.status.custom.orange.default
For pills. Not accessible with white txt.
#e24300rgb(226, 67, 0)({core.color.tangerine.40})
mode.color.status.custom.orange.defaultAlt
Pill bg
#1d0300rgb(29, 3, 0)({core.color.tangerine.95})
mode.color.status.custom.orange.hover
used on pill hover states
#e5631crgb(229, 99, 28)({core.color.tangerine.30})
mode.color.status.custom.orange.hoverAlt
used on pill hover states
#360900rgb(54, 9, 0)({core.color.tangerine.90})
mode.color.status.custom.orange.txt
used in portrait
#e24300rgb(226, 67, 0)({core.color.tangerine.40})
mode.color.status.custom.red.default
For pills. Not accessible with white txt.
#f50059rgb(245, 0, 89)({core.color.blush.40})
mode.color.status.custom.red.defaultAlt
Pill bg
#1e0005rgb(30, 0, 5)({core.color.blush.95})
mode.color.status.custom.red.hover
used on pill hover states
#ff3e6argb(255, 62, 106)({core.color.blush.30})
mode.color.status.custom.red.hoverAlt
used on pill hover states
#3c000frgb(60, 0, 15)({core.color.blush.90})
mode.color.status.custom.pink.default
For pills. Not accessible with white txt.
#d046a4rgb(208, 70, 164)({core.color.flamingo.40})
mode.color.status.custom.pink.defaultAlt
Pill bg
#1e0115rgb(30, 1, 21)({core.color.flamingo.95})
mode.color.status.custom.pink.hover
used on pill hover states
#E84DB5rgb(232, 77, 181)({core.color.flamingo.30})
mode.color.status.custom.pink.hoverAlt
used on pill hover states
#350426rgb(53, 4, 38)({core.color.flamingo.90})
mode.color.status.custom.purple.default
For pills. Not accessible with white txt.
#9463d7rgb(148, 99, 215)({core.color.plum.40})
mode.color.status.custom.purple.defaultAlt
Pill bg
#10041frgb(16, 4, 31)({core.color.plum.95})
mode.color.status.custom.purple.hover
used on pill hover states
#a375ddrgb(163, 117, 221)({core.color.plum.30})
mode.color.status.custom.purple.hoverAlt
used on pill hover states
#220c3argb(34, 12, 58)({core.color.plum.90})
mode.color.status.custom.gray.default
For pills. Not accessible with white txt.
#7c7c7crgb(124, 124, 124)({core.color.smoke.40})
mode.color.status.custom.gray.defaultAlt
Pill bg
#0b0b0brgb(11, 11, 11)({core.color.smoke.95})
mode.color.status.custom.gray.hover
used on pill hover states
#8b8b8brgb(139, 139, 139)({core.color.smoke.30})
mode.color.status.custom.gray.hoverAlt
used on pill hover states
#181818rgb(24, 24, 24)({core.color.smoke.90})
mode.color.status.custom.slate.default
For pills. Not accessible with white txt.
#6a7986rgb(106, 121, 134)({core.color.storm.65})
mode.color.status.custom.slate.defaultAlt
Pill bg
#253b4ergb(37, 59, 78)({core.color.storm.95})
mode.color.status.custom.slate.hover
used on pill hover states
#75838frgb(117, 131, 143)({core.color.storm.60})
mode.color.status.custom.slate.hoverAlt
used on pill hover states
#304658rgb(48, 70, 88)({core.color.storm.90})
mode.color.status.priority.default
#9463d7rgb(148, 99, 215)({core.color.plum.40})
mode.color.status.priority.defaultAlt
Subtle message bg
#10041frgb(16, 4, 31)({core.color.plum.95})
mode.color.status.priority.hover
used on pill hover states
#a375ddrgb(163, 117, 221)({core.color.plum.30})
mode.color.status.priority.hoverAlt
used on pill hover states and message bg
#220c3argb(34, 12, 58)({core.color.plum.90})
mode.color.status.priority.inverse.default
For tile status keylines to show if something is of high importance.
#8f4bd7rgb(143, 75, 215)({core.color.plum.60})
mode.color.status.priority.inverse.defaultAlt
Subtle message bg
#f9f6ffrgb(249, 246, 255)({core.color.plum.5})
mode.color.status.priority.inverse.hover
used on pill hover states
#803ec5rgb(128, 62, 197)({core.color.plum.70})
mode.color.status.priority.inverse.hoverAlt
used on pill hover states and message bg
#F3EBFErgb(243, 235, 254)({core.color.plum.10})
mode.color.status.inactive.default
For readonly pill bg and border
#6f6f6frgb(111, 111, 111)({mode.color.generic.fg.firm})
mode.color.status.inactive.withDefault
For readonly filled pill txt
#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.soft})
mode.color.status.inactive.inverse.default
For readonly pill bg and border
#75838frgb(117, 131, 143)({mode.color.generic.fg.inverse.firm})
mode.color.status.inactive.inverse.withDefault
For readonly filled pill txt
#000000rgb(0, 0, 0)({mode.color.generic.txt.inverse.soft})
mode.color.status.info.default
#007fd9rgb(0, 127, 217)({core.color.azure.40})
mode.color.status.info.defaultAlt
Subtle message bg
#000b1crgb(0, 11, 28)({core.color.azure.95})
mode.color.status.info.withDefaultAlt
#007fd9rgb(0, 127, 217)({core.color.azure.40})
mode.color.status.info.hover
used on pill hover states
#008ef4rgb(0, 142, 244)({core.color.azure.30})
mode.color.status.info.hoverAlt
used on pill hover states and message bg
#001932rgb(0, 25, 50)({core.color.azure.90})
mode.color.status.info.inverse.default
#0071c3rgb(0, 113, 195)({core.color.azure.60})
mode.color.status.info.inverse.defaultAlt
Subtle message bg
#f5f8ffrgb(245, 248, 255)({core.color.azure.5})
mode.color.status.info.inverse.hover
used on pill hover states
#0063adrgb(0, 99, 173)({core.color.azure.70})
mode.color.status.info.inverse.hoverAlt
used on pill hover states and message bg
#e4eeffrgb(228, 238, 255)({core.color.azure.10})
mode.color.status.negative.default
#f50059rgb(245, 0, 89)({core.color.blush.40})
mode.color.status.negative.defaultAlt
Subtle message bg
#1e0005rgb(30, 0, 5)({core.color.blush.95})
mode.color.status.negative.hover
used on pill hover states
#ff3e6argb(255, 62, 106)({core.color.blush.30})
mode.color.status.negative.hoverAlt
used on pill hover states and message bg
#3c000frgb(60, 0, 15)({core.color.blush.90})
mode.color.status.negative.inverse.default
#db004ergb(219, 0, 78)({core.color.blush.60})
mode.color.status.negative.inverse.defaultAlt
Subtle message bg
#fff5f6rgb(255, 245, 246)({core.color.blush.5})
mode.color.status.negative.inverse.hover
used on pill hover states
#c40044rgb(196, 0, 68)({core.color.blush.70})
mode.color.status.negative.inverse.hoverAlt
used on pill hover states and message bg
#ffe8eargb(255, 232, 234)({core.color.blush.10})
mode.color.status.neutral.default
#7c7c7crgb(124, 124, 124)({core.color.smoke.40})
mode.color.status.neutral.defaultAlt
Subtle message bg
#0b0b0brgb(11, 11, 11)({core.color.smoke.95})
mode.color.status.neutral.hover
used on pill hover states
#8b8b8brgb(139, 139, 139)({core.color.smoke.30})
mode.color.status.neutral.hoverAlt
used on pill hover states and message bg
#181818rgb(24, 24, 24)({core.color.smoke.90})
mode.color.status.neutral.inverse.default
#6f6f6frgb(111, 111, 111)({core.color.smoke.60})
mode.color.status.neutral.inverse.defaultAlt
Subtle message bg
#f8f8f8rgb(248, 248, 248)({core.color.smoke.5})
mode.color.status.neutral.inverse.hover
used on pill hover states
#616161rgb(97, 97, 97)({core.color.smoke.70})
mode.color.status.neutral.inverse.hoverAlt
used on pill hover states and message bg
#eeeeeergb(238, 238, 238)({core.color.smoke.10})
mode.color.status.positive.default
#019127rgb(1, 145, 39)({core.color.emerald.40})
mode.color.status.positive.defaultAlt
Subtle message bg
#001001rgb(0, 16, 1)({core.color.emerald.95})
mode.color.status.positive.withDefaultAlt
#019127rgb(1, 145, 39)({core.color.emerald.40})
mode.color.status.positive.hover
used on pill hover states
#1BA12Brgb(27, 161, 43)({core.color.emerald.30})
mode.color.status.positive.hoverAlt
used on pill hover states and message bg
#001f03rgb(0, 31, 3)({core.color.emerald.90})
mode.color.status.positive.inverse.default
#00811Frgb(0, 129, 31)({core.color.emerald.60})
mode.color.status.positive.inverse.defaultAlt
Subtle message bg
#EEFCEFrgb(238, 252, 239)({core.color.emerald.5})
mode.color.status.positive.inverse.hover
used on pill hover states
#007219rgb(0, 114, 25)({core.color.emerald.70})
mode.color.status.positive.inverse.hoverAlt
used on pill hover states and message bg
#D1F6D6rgb(209, 246, 214)({core.color.emerald.10})