Components

badge.none

transparent override used for hiding colors when needed.

#FFFFFFrgb(255, 255, 255)({mode.color.none})

badge.bg-default

Used in global nav notification badges

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

badge.border-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

badge.bg-alt

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

badge.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.extreme})

badge.label-alt

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.extreme})

badge.inverse.bg-default

Used in global nav notification badges

#f50059rgb(245, 0, 89)({mode.color.status.negative.inverse.default})

badge.inverse.border-default

#000000rgb(0, 0, 0)({mode.color.generic.bg.inverse.nought})

badge.inverse.bg-alt

#007fd9rgb(0, 127, 217)({mode.color.status.info.inverse.default})

badge.inverse.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.extreme})

badge.inverse.label-alt

#000000rgb(0, 0, 0)({mode.color.generic.txt.extreme})

button.none

transparent override used for hiding colors when needed.

#FFFFFFrgb(255, 255, 255)({mode.color.none})

button.ai.bg-active

linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)({mode.color.action.ai.grad.active})

button.ai.bg-hover

linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)({mode.color.action.ai.grad.hover})

button.ai.border-active

linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)(linear-gradient(90deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))

button.ai.border-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.ai.border-default

linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)(linear-gradient(90deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))

button.ai.border-hover

linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)(linear-gradient(90deg, {mode.color.ai.stop-1} 0%, {mode.color.ai.stop-2} 40%, {mode.color.ai.stop-3} 90%))

button.ai.label-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withActiveAlt})

button.ai.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

button.ai.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

button.ai.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

button.destructive.primary.bg-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.destructive.primary.bg-default

#db004ergb(219, 0, 78)({mode.color.action.danger.default})

button.destructive.primary.bg-hover

#c40044rgb(196, 0, 68)({mode.color.action.danger.hover})

button.destructive.primary.label-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.txtAlt})

button.destructive.primary.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.danger.withDefault})

button.destructive.primary.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.danger.withDefault})

button.destructive.secondary.bg-hover

#db004ergb(219, 0, 78)({mode.color.action.danger.hoverAlt})

button.destructive.secondary.border-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.destructive.secondary.border-default

#db004ergb(219, 0, 78)({mode.color.action.danger.default})

button.destructive.secondary.border-hover

#c40044rgb(196, 0, 68)({mode.color.action.danger.hover})

button.destructive.secondary.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

button.destructive.secondary.label-default

#db004ergb(219, 0, 78)({mode.color.action.danger.default})

button.destructive.secondary.label-hover

#c40044rgb(196, 0, 68)({mode.color.action.danger.hover})

button.typical.primary.bg-active

#005e14rgb(0, 94, 20)({mode.color.action.main.active})

button.typical.primary.border-default

For spacer in Split button

#FFFFFFrgb(255, 255, 255)({mode.color.action.main.withDefault})

button.typical.primary.bg-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.typical.primary.bg-default

#00811frgb(0, 129, 31)({mode.color.action.main.default})

button.typical.primary.bg-hover

#007219rgb(0, 114, 25)({mode.color.action.main.hover})

button.typical.primary.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.main.withActive})

button.typical.primary.label-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.txtAlt})

button.typical.primary.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.main.withDefault})

button.typical.primary.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.main.withDefault})

button.typical.primary.inverse.bg-active

#8fff98rgb(143, 255, 152)({mode.color.action.main.inverse.active})

button.typical.primary.inverse.border-default

For spacer in Split button

#000000rgb(0, 0, 0)({mode.color.action.main.inverse.withDefault})

button.typical.primary.inverse.bg-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.inverse.default})

button.typical.primary.inverse.bg-default

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.default})

button.typical.primary.inverse.bg-hover

#46fb5ergb(70, 251, 94)({mode.color.action.main.inverse.hover})

button.typical.primary.inverse.label-active

#000000rgb(0, 0, 0)({mode.color.action.main.inverse.withActive})

button.typical.primary.inverse.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.inverse.txtAlt})

button.typical.primary.inverse.label-default

#000000rgb(0, 0, 0)({mode.color.action.main.inverse.withDefault})

button.typical.primary.inverse.label-hover

#000000rgb(0, 0, 0)({mode.color.action.main.inverse.withDefault})

button.typical.secondary.bg-active

#00811frgb(0, 129, 31)({mode.color.action.main.activeAlt})

button.typical.secondary.bg-default

#00811frgb(0, 129, 31)({mode.color.action.main.defaultAlt3})

button.typical.secondary.bg-hover

#00811frgb(0, 129, 31)({mode.color.action.main.hoverAlt})

button.typical.secondary.border-active

#005e14rgb(0, 94, 20)({mode.color.action.main.active})

button.typical.secondary.border-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.typical.secondary.border-default

#00811frgb(0, 129, 31)({mode.color.action.main.defaultAlt})

button.typical.secondary.border-hover

#007219rgb(0, 114, 25)({mode.color.action.main.hover})

button.typical.secondary.label-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withActiveAlt})

button.typical.secondary.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

button.typical.secondary.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

button.typical.secondary.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

button.typical.secondary.inverse.bg-active

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.activeAlt})

button.typical.secondary.inverse.bg-default

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.defaultAlt3})

button.typical.secondary.inverse.bg-hover

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.hoverAlt})

button.typical.secondary.inverse.border-active

#8fff98rgb(143, 255, 152)({mode.color.action.main.inverse.active})

button.typical.secondary.inverse.border-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.inverse.default})

button.typical.secondary.inverse.border-default

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.defaultAlt})

button.typical.secondary.inverse.border-hover

#46fb5ergb(70, 251, 94)({mode.color.action.main.inverse.hover})

button.typical.secondary.inverse.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.withActiveAlt})

button.typical.secondary.inverse.label-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.inverse.txt})

button.typical.secondary.inverse.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.default})

button.typical.secondary.inverse.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.withHover})

button.typical.tertiary.bg-active

#00811frgb(0, 129, 31)({mode.color.action.main.activeAlt})

button.typical.tertiary.bg-default

#FFFFFFrgb(255, 255, 255)({button.none})

button.typical.tertiary.bg-hover

#00811frgb(0, 129, 31)({mode.color.action.main.hoverAlt})

button.typical.tertiary.border-active

#005e14rgb(0, 94, 20)({mode.color.action.main.active})

button.typical.tertiary.border-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.typical.tertiary.border-default

#00811frgb(0, 129, 31)({mode.color.action.main.defaultAlt})

button.typical.tertiary.border-hover

#007219rgb(0, 114, 25)({mode.color.action.main.hover})

button.typical.tertiary.label-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withActiveAlt})

button.typical.tertiary.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

button.typical.tertiary.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

button.typical.tertiary.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

button.typical.tertiary.inverse.bg-active

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.activeAlt})

button.typical.tertiary.inverse.bg-default

#FFFFFFrgb(255, 255, 255)({button.none})

button.typical.tertiary.inverse.bg-hover

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.hoverAlt})

button.typical.tertiary.inverse.border-active

#8fff98rgb(143, 255, 152)({mode.color.action.main.inverse.active})

button.typical.tertiary.inverse.border-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.inverse.default})

button.typical.tertiary.inverse.border-default

#00f142rgb(0, 241, 66)({mode.color.action.main.inverse.defaultAlt})

button.typical.tertiary.inverse.border-hover

#46fb5ergb(70, 251, 94)({mode.color.action.main.inverse.hover})

button.typical.tertiary.inverse.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.withActiveAlt})

button.typical.tertiary.inverse.label-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.inverse.txt})

button.typical.tertiary.inverse.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.default})

button.typical.tertiary.inverse.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.withHover})

button.typical.subtle.bg-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.activeAlt})

button.typical.subtle.bg-hover

#e8eaecrgb(232, 234, 236)({mode.color.generic.bg.delicate})

button.typical.subtle.label-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withActiveAlt})

button.typical.subtle.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

button.typical.subtle.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

button.typical.subtle.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

button.typical.subtle.inverse.bg-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.activeAlt})

button.typical.subtle.inverse.bg-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.hoverAlt})

button.typical.subtle.inverse.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.withActiveAlt})

button.typical.subtle.inverse.label-disabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.inverse.txt})

button.typical.subtle.inverse.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.default})

button.typical.subtle.inverse.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.withHover})

button.typical.toggle.bg-activeDisabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.typical.toggle.label-activeDisabled

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.txtAlt})

button.typical.toggle.bg-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

button.typical.toggle.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withDefault})

button.typical.toggle.bg-hover

#e8eaecrgb(232, 234, 236)({mode.color.generic.bg.delicate})

button.typical.toggle.border-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

button.typical.toggle.border-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

button.typical.toggle.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

button.typical.toggle.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

button.typical.toggle.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.defaultAlt})

button.typical.toggle.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

button.video.bg-blur

#000000rgb(0, 0, 0)({mode.color.action.grayscale.hoverAlt})

button.video.primary.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withDefault})

button.video.primary.bg-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withDefault})

button.video.primary.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

button.video.primary.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

button.video.secondary.bg-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withDefault})

button.video.secondary.border-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withDefault})

button.video.secondary.border-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withDefault})

button.video.secondary.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withDefault})

button.video.secondary.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

Color

container.action.bgFooter-activated

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

container.action.bgFooter-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

container.action.border-activated

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

container.action.bgFooter-default

tile footer bg color

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

container.action.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

container.action.bg-disabled

#eeeeeergb(238, 238, 238)({mode.color.action.inactive.defaultAlt})

container.action.bg-hover

Used for accordion hov backgrounds

#e8eaecrgb(232, 234, 236)({mode.color.generic.bg.delicate})

container.action.border-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

container.action.border-alt

Link preview.

#8c98a2rgb(140, 152, 162)({mode.color.generic.fg.moderate})

container.action.borderalt-hover

For hov border on Link preview.

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

container.action.border-inactive

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

container.action.border-default

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

container.action.icon-active

Active chevron for any accordion.

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

container.action.icon-default

Enabled chevron for any accordion.

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

container.action.iconAlt-default

Enabled label for subtle accordion.

#000000rgb(0, 0, 0)({mode.color.action.grayscale.defaultAlt})

container.action.icon-hover

hov chevron for any accordion.

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

container.action.labelFooter-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

container.action.labelFooter-activated

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

container.action.txt-active

Active label for any accordion.

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

container.action.txt-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

container.action.txt-default

Enabled label for standard accordion.

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

container.action.txtAlt-default

Enabled label for subtle accordion.

#000000rgb(0, 0, 0)({mode.color.generic.txt.moderate})

container.action.txt-hover

hov label for any accordion.

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

container.action.detailedicon.bg

#00811Frgb(0, 129, 31)({mode.color.status.custom.green.default})

container.action.target.bg-default

draggable drop target background color

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

container.scrollbar.bg-default

#f4f5f6rgb(244, 245, 246)({mode.color.generic.bg.faint})

container.scrollbar.fg-default

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

container.scrollbar.inverse.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.inverse.soft})

container.scrollbar.inverse.fg-default

#6f6f6frgb(111, 111, 111)({mode.color.generic.fg.inverse.firm})

container.standard.bg-alt

#f4f5f6rgb(244, 245, 246)({mode.color.generic.bg.faint})

container.standard.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

container.standard.bgFooter-default

tile footer bg color

#f4f5f6rgb(244, 245, 246)({mode.color.generic.bg.faint})

container.standard.border-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

container.standard.border-AiH

top border for AI dialog component

linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)({mode.color.status.ai.inverse.default-horizontal})

container.standard.border-AiV

left and right border for AI nudge message component

linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)({mode.color.status.ai.inverse.default-vertical})

container.standard.border-alt

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

container.standard.border-default

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

container.standard.dimmer

dimmed mask for dialogs

#000000rgb(0, 0, 0)({mode.color.action.inactive.mask})

container.standard.txt-alt

for subheadings etc

#000000rgb(0, 0, 0)({mode.color.generic.txt.moderate})

container.standard.txt-default

for headings, paragraph txt etc

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

container.standard.icon

Link preview image thumbnail

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

container.standard.inverse.bg-alt

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.inverse.delicate})

container.standard.inverse.border-alt

#6f6f6frgb(111, 111, 111)({mode.color.generic.fg.inverse.firm})

container.standard.inverse.bg-default

#000000rgb(0, 0, 0)({mode.color.generic.bg.inverse.nought})

container.standard.inverse.border-default

#505050rgb(80, 80, 80)({mode.color.generic.fg.inverse.soft})

container.standard.inverse.txt-alt

for subheadings etc

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.moderate})

container.standard.inverse.txt-default

for headings, paragraph txt etc

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.severe})

container.standard.inverse.icon

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.severe})

container.standard.priority.bg-ai

linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)({mode.color.status.ai.inverse.default-vertical})

container.standard.priority.bg-caution

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

container.standard.priority.bg-negative

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

container.standard.priority.bg-prio

#8f4bd7rgb(143, 75, 215)({mode.color.status.priority.default})

container.standard.priority.bg-info

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

container.standard.priority.bg-neutral

#6f6f6frgb(111, 111, 111)({mode.color.status.neutral.default})

container.standard.priority.bg-positive

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

container.standard.priority.inverse.bg-ai

linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)({mode.color.status.ai.inverse.default-vertical})

container.standard.priority.inverse.bg-caution

#e24300rgb(226, 67, 0)({mode.color.status.warning.inverse.default})

container.standard.priority.inverse.bg-negative

#f50059rgb(245, 0, 89)({mode.color.status.negative.inverse.default})

container.standard.priority.inverse.bg-prio

#9463d7rgb(148, 99, 215)({mode.color.status.priority.inverse.default})

container.standard.priority.inverse.bg-info

#007fd9rgb(0, 127, 217)({mode.color.status.info.inverse.default})

container.standard.priority.inverse.bg-neutral

#7c7c7crgb(124, 124, 124)({mode.color.status.neutral.inverse.default})

container.standard.priority.inverse.bg-positive

#019127rgb(1, 145, 39)({mode.color.status.positive.inverse.default})

container.quote.border

#00811frgb(0, 129, 31)({mode.color.action.main.default})

Sizing

Name	Value	Description
container.size.fluidItems.2XS	80	min and max widths for responsive tile items
container.size.fluidItems.XS	128	min and max widths for responsive tile items
container.size.fluidItems.S	160	min and max widths for responsive tile items. Min width for Tile select txt wrapper.
container.size.fluidItems.M	200	min and max widths for responsive tile items
container.size.fluidItems.L	240	min and max widths for responsive tile items
container.size.fluidItems.XL	288	Small screen mid width inside page margins.
container.size.fluidItems.2XL	320	Small screen full page width.
container.size.fluidItems.3XL	560	min and max widths for responsive tile items
container.size.fluidItems.4XL	760	Max width for single line of txt.
container.size.dialog.maxwidth.S	540	max width for small dialog
container.size.dialog.maxwidth.M	850	max width for medium dialog
container.size.dialog.maxwidth.L	1080	max width for large dialog

dataviz.chart.bar.fuchsia.bg-alt

#fee8f5rgb(254, 232, 245)({mode.color.colorcode.pink.faint})

dataviz.chart.bar.fuchsia.bg-default

#921a6ergb(146, 26, 110)({mode.color.colorcode.pink.intense})

dataviz.chart.bar.fuchsia.border

#921a6ergb(146, 26, 110)({mode.color.colorcode.pink.intense})

dataviz.chart.bar.fuchsia.pattern

#921a6ergb(146, 26, 110)({mode.color.colorcode.pink.intense})

dataviz.chart.bar.red.bg-alt

#ffe8eargb(255, 232, 234)({mode.color.colorcode.red.faint})

dataviz.chart.bar.red.bg-default

#a30037rgb(163, 0, 55)({mode.color.colorcode.red.intense})

dataviz.chart.bar.red.border

#a30037rgb(163, 0, 55)({mode.color.colorcode.red.intense})

dataviz.chart.bar.red.pattern

#a30037rgb(163, 0, 55)({mode.color.colorcode.red.intense})

dataviz.chart.bar.pink.bg-alt

#ffe8eargb(255, 232, 234)({mode.color.colorcode.red.faint})

dataviz.chart.bar.pink.bg-default

#ff3e6argb(255, 62, 106)({mode.color.colorcode.red.soft})

dataviz.chart.bar.pink.border

#ff3e6argb(255, 62, 106)({mode.color.colorcode.red.soft})

dataviz.chart.bar.pink.pattern

#ff3e6argb(255, 62, 106)({mode.color.colorcode.red.soft})

dataviz.chart.bar.orange.bg-alt

#ffeacargb(255, 234, 202)({mode.color.colorcode.orange.faint})

dataviz.chart.bar.orange.bg-default

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.chart.bar.orange.border

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.chart.bar.orange.pattern

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.chart.bar.gold.bg-alt

#ffedb8rgb(255, 237, 184)({mode.color.colorcode.yellow.faint})

dataviz.chart.bar.gold.bg-default

#ffca35rgb(255, 202, 53)({mode.color.colorcode.yellow.soft})

dataviz.chart.bar.gold.border

#9f7000rgb(159, 112, 0)({mode.color.colorcode.yellow.harsh})

dataviz.chart.bar.gold.pattern

#9f7000rgb(159, 112, 0)({mode.color.colorcode.yellow.harsh})

dataviz.chart.bar.lime.bg-alt

#e8f1d4rgb(232, 241, 212)({mode.color.colorcode.lime.faint})

dataviz.chart.bar.lime.bg-default

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.chart.bar.lime.border

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.chart.bar.lime.pattern

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.chart.bar.green.bg-alt

#D1F6D6rgb(209, 246, 214)({mode.color.colorcode.green.faint})

dataviz.chart.bar.green.bg-default

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.chart.bar.green.border

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.chart.bar.green.pattern

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.chart.bar.teal.bg-alt

#C8F5F5rgb(200, 245, 245)({mode.color.colorcode.teal.faint})

dataviz.chart.bar.teal.bg-default

#009B99rgb(0, 155, 153)({mode.color.colorcode.teal.soft})

dataviz.chart.bar.teal.border

#009B99rgb(0, 155, 153)({mode.color.colorcode.teal.soft})

dataviz.chart.bar.teal.pattern

#009B99rgb(0, 155, 153)({mode.color.colorcode.teal.soft})

dataviz.chart.bar.blue.bg-alt

#e4eeffrgb(228, 238, 255)({mode.color.colorcode.blue.faint})

dataviz.chart.bar.blue.bg-default

#008ef4rgb(0, 142, 244)({mode.color.colorcode.blue.soft})

dataviz.chart.bar.blue.border

#008ef4rgb(0, 142, 244)({mode.color.colorcode.blue.soft})

dataviz.chart.bar.blue.pattern

#008ef4rgb(0, 142, 244)({mode.color.colorcode.blue.soft})

dataviz.chart.bar.navy.bg-alt

#e4eeffrgb(228, 238, 255)({mode.color.colorcode.blue.faint})

dataviz.chart.bar.navy.bg-default

#00528frgb(0, 82, 143)({mode.color.colorcode.blue.intense})

dataviz.chart.bar.navy.border

#00528frgb(0, 82, 143)({mode.color.colorcode.blue.intense})

dataviz.chart.bar.navy.pattern

#00528frgb(0, 82, 143)({mode.color.colorcode.blue.intense})

dataviz.chart.bar.purple.bg-alt

#F3EBFErgb(243, 235, 254)({mode.color.colorcode.purple.faint})

dataviz.chart.bar.purple.bg-default

#6a32a6rgb(106, 50, 166)({mode.color.colorcode.purple.intense})

dataviz.chart.bar.purple.border

#6a32a6rgb(106, 50, 166)({mode.color.colorcode.purple.intense})

dataviz.chart.bar.purple.pattern

#6a32a6rgb(106, 50, 166)({mode.color.colorcode.purple.intense})

dataviz.chart.bar.slate.bg-alt

#e4eff5rgb(228, 239, 245)({mode.color.colorcode.slate.faint})

dataviz.chart.bar.slate.bg-default

#304658rgb(48, 70, 88)({mode.color.colorcode.slate.intense})

dataviz.chart.bar.slate.border

#304658rgb(48, 70, 88)({mode.color.colorcode.slate.intense})

dataviz.chart.bar.slate.pattern

#304658rgb(48, 70, 88)({mode.color.colorcode.slate.intense})

dataviz.chart.donut.fuchsia.bg-alt

#fee8f5rgb(254, 232, 245)({mode.color.colorcode.pink.faint})

dataviz.chart.donut.fuchsia.bg-default

#921a6ergb(146, 26, 110)({mode.color.colorcode.pink.intense})

dataviz.chart.donut.fuchsia.border

#921a6ergb(146, 26, 110)({mode.color.colorcode.pink.intense})

dataviz.chart.donut.fuchsia.pattern

#921a6ergb(146, 26, 110)({mode.color.colorcode.pink.intense})

dataviz.chart.donut.red.bg-alt

#ffe8eargb(255, 232, 234)({mode.color.colorcode.red.faint})

dataviz.chart.donut.red.bg-default

#a30037rgb(163, 0, 55)({mode.color.colorcode.red.intense})

dataviz.chart.donut.red.border

#a30037rgb(163, 0, 55)({mode.color.colorcode.red.intense})

dataviz.chart.donut.red.pattern

#a30037rgb(163, 0, 55)({mode.color.colorcode.red.intense})

dataviz.chart.donut.pink.bg-alt

#ffe8eargb(255, 232, 234)({mode.color.colorcode.red.faint})

dataviz.chart.donut.pink.bg-default

#ff3e6argb(255, 62, 106)({mode.color.colorcode.red.soft})

dataviz.chart.donut.pink.border

#ff3e6argb(255, 62, 106)({mode.color.colorcode.red.soft})

dataviz.chart.donut.pink.pattern

#ff3e6argb(255, 62, 106)({mode.color.colorcode.red.soft})

dataviz.chart.donut.orange.bg-alt

#ffeacargb(255, 234, 202)({mode.color.colorcode.orange.faint})

dataviz.chart.donut.orange.bg-default

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.chart.donut.orange.border

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.chart.donut.orange.pattern

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.chart.donut.gold.bg-alt

#ffedb8rgb(255, 237, 184)({mode.color.colorcode.yellow.faint})

dataviz.chart.donut.gold.bg-default

#ffca35rgb(255, 202, 53)({mode.color.colorcode.yellow.soft})

dataviz.chart.donut.gold.border

#9f7000rgb(159, 112, 0)({mode.color.colorcode.yellow.harsh})

dataviz.chart.donut.gold.pattern

#9f7000rgb(159, 112, 0)({mode.color.colorcode.yellow.harsh})

dataviz.chart.donut.lime.bg-alt

#e8f1d4rgb(232, 241, 212)({mode.color.colorcode.lime.faint})

dataviz.chart.donut.lime.bg-default

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.chart.donut.lime.border

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.chart.donut.lime.pattern

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.chart.donut.green.bg-alt

#D1F6D6rgb(209, 246, 214)({mode.color.colorcode.green.faint})

dataviz.chart.donut.green.bg-default

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.chart.donut.green.border

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.chart.donut.green.pattern

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.chart.donut.teal.bg-alt

#C8F5F5rgb(200, 245, 245)({mode.color.colorcode.teal.faint})

dataviz.chart.donut.teal.bg-default

#009B99rgb(0, 155, 153)({mode.color.colorcode.teal.soft})

dataviz.chart.donut.teal.border

#009B99rgb(0, 155, 153)({mode.color.colorcode.teal.soft})

dataviz.chart.donut.teal.pattern

#009B99rgb(0, 155, 153)({mode.color.colorcode.teal.soft})

dataviz.chart.donut.blue.bg-alt

#e4eeffrgb(228, 238, 255)({mode.color.colorcode.blue.faint})

dataviz.chart.donut.blue.bg-default

#008ef4rgb(0, 142, 244)({mode.color.colorcode.blue.soft})

dataviz.chart.donut.blue.border

#008ef4rgb(0, 142, 244)({mode.color.colorcode.blue.soft})

dataviz.chart.donut.blue.pattern

#008ef4rgb(0, 142, 244)({mode.color.colorcode.blue.soft})

dataviz.chart.donut.navy.bg-alt

#e4eeffrgb(228, 238, 255)({mode.color.colorcode.blue.faint})

dataviz.chart.donut.navy.bg-default

#00528frgb(0, 82, 143)({mode.color.colorcode.blue.intense})

dataviz.chart.donut.navy.border

#00528frgb(0, 82, 143)({mode.color.colorcode.blue.intense})

dataviz.chart.donut.navy.pattern

#00528frgb(0, 82, 143)({mode.color.colorcode.blue.intense})

dataviz.chart.donut.purple.bg-alt

#F3EBFErgb(243, 235, 254)({mode.color.colorcode.purple.faint})

dataviz.chart.donut.purple.bg-default

#6a32a6rgb(106, 50, 166)({mode.color.colorcode.purple.intense})

dataviz.chart.donut.purple.border

#6a32a6rgb(106, 50, 166)({mode.color.colorcode.purple.intense})

dataviz.chart.donut.purple.pattern

#6a32a6rgb(106, 50, 166)({mode.color.colorcode.purple.intense})

dataviz.chart.donut.slate.bg-alt

#e4eff5rgb(228, 239, 245)({mode.color.colorcode.slate.faint})

dataviz.chart.donut.slate.bg-default

#304658rgb(48, 70, 88)({mode.color.colorcode.slate.intense})

dataviz.chart.donut.slate.border

#304658rgb(48, 70, 88)({mode.color.colorcode.slate.intense})

dataviz.chart.donut.slate.pattern

#304658rgb(48, 70, 88)({mode.color.colorcode.slate.intense})

dataviz.chart.line.fuchsia

#921a6ergb(146, 26, 110)({mode.color.colorcode.pink.intense})

dataviz.chart.line.red

#a30037rgb(163, 0, 55)({mode.color.colorcode.red.intense})

dataviz.chart.line.pink

#ff3e6argb(255, 62, 106)({mode.color.colorcode.red.soft})

dataviz.chart.line.orange

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.chart.line.gold

#9f7000rgb(159, 112, 0)({mode.color.colorcode.yellow.harsh})

dataviz.chart.line.lime

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.chart.line.green

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.chart.line.teal

#009B99rgb(0, 155, 153)({mode.color.colorcode.teal.soft})

dataviz.chart.line.blue

#008ef4rgb(0, 142, 244)({mode.color.colorcode.blue.soft})

dataviz.chart.line.navy

#00528frgb(0, 82, 143)({mode.color.colorcode.blue.intense})

dataviz.chart.line.purple

#6a32a6rgb(106, 50, 166)({mode.color.colorcode.purple.intense})

dataviz.chart.line.slate

#304658rgb(48, 70, 88)({mode.color.colorcode.slate.intense})

dataviz.generic.label-alt

Accessible on colorpicker bg-alt colors.

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.extreme})

dataviz.generic.label-default

Accessible on colorpicker bg-default colors.

#000000rgb(0, 0, 0)({mode.color.generic.txt.extreme})

dataviz.generic.pending.bg-default

bg on all pending events

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

dataviz.generic.blue.bg-alt

#0071c3rgb(0, 113, 195)({mode.color.colorcode.blue.harsh})

dataviz.generic.blue.bg-default

#e4eeffrgb(228, 238, 255)({mode.color.colorcode.blue.faint})

dataviz.generic.blue.border

#0071c3rgb(0, 113, 195)({mode.color.colorcode.blue.harsh})

dataviz.generic.blue.pattern

#0071c3rgb(0, 113, 195)({mode.color.colorcode.blue.harsh})

dataviz.generic.teal.bg-alt

#007C7Brgb(0, 124, 123)({mode.color.colorcode.teal.harsh})

dataviz.generic.teal.bg-default

#C8F5F5rgb(200, 245, 245)({mode.color.colorcode.teal.faint})

dataviz.generic.teal.border

#007C7Brgb(0, 124, 123)({mode.color.colorcode.teal.harsh})

dataviz.generic.teal.pattern

#007C7Brgb(0, 124, 123)({mode.color.colorcode.teal.harsh})

dataviz.generic.green.bg-alt

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.generic.green.bg-default

#D1F6D6rgb(209, 246, 214)({mode.color.colorcode.green.faint})

dataviz.generic.green.border

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.generic.green.pattern

#00811Frgb(0, 129, 31)({mode.color.colorcode.green.harsh})

dataviz.generic.lime.bg-alt

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.generic.lime.bg-default

#e8f1d4rgb(232, 241, 212)({mode.color.colorcode.lime.faint})

dataviz.generic.lime.border

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.generic.lime.pattern

#627600rgb(98, 118, 0)({mode.color.colorcode.lime.harsh})

dataviz.generic.orange.bg-alt

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.generic.orange.bg-default

#ffeacargb(255, 234, 202)({mode.color.colorcode.orange.faint})

dataviz.generic.orange.border

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.generic.orange.pattern

#d64309rgb(214, 67, 9)({mode.color.colorcode.orange.harsh})

dataviz.generic.red.bg-alt

#db004ergb(219, 0, 78)({mode.color.colorcode.red.harsh})

dataviz.generic.red.bg-default

#ffe8eargb(255, 232, 234)({mode.color.colorcode.red.faint})

dataviz.generic.red.border

#db004ergb(219, 0, 78)({mode.color.colorcode.red.harsh})

dataviz.generic.red.pattern

#db004ergb(219, 0, 78)({mode.color.colorcode.red.harsh})

dataviz.generic.pink.bg-alt

#c72699rgb(199, 38, 153)({mode.color.colorcode.pink.harsh})

dataviz.generic.pink.bg-default

#fee8f5rgb(254, 232, 245)({mode.color.colorcode.pink.faint})

dataviz.generic.pink.border

#c72699rgb(199, 38, 153)({mode.color.colorcode.pink.harsh})

dataviz.generic.pink.pattern

#c72699rgb(199, 38, 153)({mode.color.colorcode.pink.harsh})

dataviz.generic.purple.bg-alt

#8f4bd7rgb(143, 75, 215)({mode.color.colorcode.purple.harsh})

dataviz.generic.purple.bg-default

#F3EBFErgb(243, 235, 254)({mode.color.colorcode.purple.faint})

dataviz.generic.purple.border

#8f4bd7rgb(143, 75, 215)({mode.color.colorcode.purple.harsh})

dataviz.generic.purple.pattern

#8f4bd7rgb(143, 75, 215)({mode.color.colorcode.purple.harsh})

dataviz.generic.gray.bg-alt

#6f6f6frgb(111, 111, 111)({mode.color.colorcode.gray.harsh})

dataviz.generic.gray.bg-default

#eeeeeergb(238, 238, 238)({mode.color.colorcode.gray.faint})

dataviz.generic.gray.border

#6f6f6frgb(111, 111, 111)({mode.color.colorcode.gray.harsh})

dataviz.generic.gray.pattern

#6f6f6frgb(111, 111, 111)({mode.color.colorcode.gray.harsh})

dataviz.generic.slate.bg-alt

#5e6f7drgb(94, 111, 125)({mode.color.colorcode.slate.harsh})

dataviz.generic.slate.bg-default

#e4eff5rgb(228, 239, 245)({mode.color.colorcode.slate.faint})

dataviz.generic.slate.border

#5e6f7drgb(94, 111, 125)({mode.color.colorcode.slate.harsh})

dataviz.generic.slate.pattern

#5e6f7drgb(94, 111, 125)({mode.color.colorcode.slate.harsh})

Color

focus.bg

#ffd274rgb(255, 210, 116)({mode.color.action.focus.withDefaultAlt})

focus.borderalt

#000000rgb(0, 0, 0)({mode.color.action.focus.default})

focus.border

#FFB500rgb(255, 181, 0)({mode.color.action.focus.withDefault})

focus.label

#000000rgb(0, 0, 0)({mode.color.action.focus.txt})

focus.inverse.bg

#885e00rgb(136, 94, 0)({mode.color.action.focus.inverse.withDefaultAlt})

focus.inverse.borderalt

#FFB500rgb(255, 181, 0)({mode.color.action.focus.inverse.default})

focus.inverse.border

#000000rgb(0, 0, 0)({mode.color.action.focus.inverse.withDefault})

focus.inverse.label

#FFFFFFrgb(255, 255, 255)({mode.color.action.focus.inverse.txt})

Boxshadow

Name	Value
focus.shadow.default	[object Object],[object Object]
focus.shadow.inset	[object Object],[object Object]

input.calendar.bg-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

input.calendar.bg-disabled

#eeeeeergb(238, 238, 238)({mode.color.action.inactive.defaultAlt})

input.calendar.bg-duration

#f4f5f6rgb(244, 245, 246)({mode.color.action.dataEntry.hoverAlt})

input.calendar.bg-hover

#f4f5f6rgb(244, 245, 246)({mode.color.action.dataEntry.hoverAlt})

input.calendar.border-duration

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

input.calendar.txt-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

input.calendar.txt-alt

Days of the week subheaders

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txtAlt})

input.calendar.txt-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

input.calendar.txt-duration

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.calendar.txt-default

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.calendar.txt-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

input.calendar.txtAlt-default

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txtAlt})

input.dropdown.bg-hover

REF POPOVER

#f4f5f6rgb(244, 245, 246)({mode.color.action.dataEntry.hoverAlt})

input.dropdown.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

input.dropdown.label-alt

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.dropdown.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

input.dropdown.label-default

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txtAlt})

input.dropdown.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

input.dropdown.label-subtxt

Option subtxt.

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txtAlt})

input.labelset.label-required

#db004ergb(219, 0, 78)({mode.color.action.danger.default})

input.labelset.label-default

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.labelset.label-alt

used for '(optional)' txt and hint txt.

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txtAlt})

input.labelset.label-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

input.labelset.label-readOnly

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.labelset.inverse.label-required

#f50059rgb(245, 0, 89)({mode.color.action.danger.inverse.default})

input.labelset.inverse.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.dataEntry.inverse.txt})

input.labelset.inverse.label-alt

used for '(optional)' txt and hint txt.

#FFFFFFrgb(255, 255, 255)({mode.color.action.dataEntry.inverse.txtAlt})

input.typical.bg-alt

progress bar bg, txt editor preview and txt editor footer

#e8eaecrgb(232, 234, 236)({mode.color.action.dataEntry.defaultAlt})

input.typical.bg-disabled

#eeeeeergb(238, 238, 238)({mode.color.action.inactive.defaultAlt})

input.typical.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.dataEntry.default})

input.typical.bg-hover

#f4f5f6rgb(244, 245, 246)({mode.color.action.dataEntry.hoverAlt})

input.typical.bg-readOnly

#eeeeeergb(238, 238, 238)({mode.color.action.inactive.defaultAlt})

input.typical.border-alt

deprecation candidate

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.typical.border-default

#75838frgb(117, 131, 143)({mode.color.action.dataEntry.withDefault})

input.typical.border-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.typical.border-hover

File input draggable border state

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.withHover})

input.typical.border-readOnly

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.typical.icon-active

used on tick in color picker and selected tick on dropdowns

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.withActive})

input.typical.icon-default

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.typical.icon-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.icon})

input.typical.icon-hover

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.withHover})

input.typical.icon-readOnly

#000000rgb(0, 0, 0)({mode.color.action.inactive.iconAlt})

input.typical.iconAlt-active

used on tick in color picker

#FFFFFFrgb(255, 255, 255)({mode.color.action.dataEntry.withActiveAlt})

input.typical.txt-active

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.typical.txt-alt

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txtAlt})

input.typical.txt-default

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.typical.txt-disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.txt})

input.typical.txt-hover

txt hover state when dragging a file over file input

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.withHover})

input.typical.txt-readOnly

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

input.typical.inverse.bg-default

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.inverse.default})

input.typical.inverse.border-default

#a3adb5rgb(163, 173, 181)({mode.color.action.dataEntry.inverse.withDefault})

input.typical.inverse.txt-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.dataEntry.inverse.txt})

input.switch.bg-active

background of switch in active state

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

input.switch.bg-activateDisabled

background of switch in active when disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.switch.bg-disabled

background of switch when disabled in off state

#eeeeeergb(238, 238, 238)({mode.color.action.inactive.defaultAlt})

input.switch.bg-default

background of switch in off state

#FFFFFFrgb(255, 255, 255)({mode.color.action.dataEntry.default})

input.switch.border-active

border of switch in active state

transparent

input.switch.border-activeDisabled

border of switch inactive and disabled state

transparent

input.switch.border-disabled

border of disabled switch in off state

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.switch.border-default

border of switch in off state

#75838frgb(117, 131, 143)({mode.color.action.dataEntry.withDefault})

input.switch.fg-active

switch knob in active state

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

input.switch.fg-activateDisabled

switch knob in active but disabled state.

#FFFFFFrgb(255, 255, 255)({mode.color.action.inactive.txtAlt})

input.switch.fg-disabled

switch knob in off disabled state

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.switch.fg-default

switch knob in off state

#75838frgb(117, 131, 143)({mode.color.action.dataEntry.withDefault})

input.switch.label-active

label to right of switch when switch is active

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txt})

input.switch.label-activateDisabled

label to right of switch when switch is active but disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.switch.label-disabled

label to right of switch when switch is off but disabled

#000000rgb(0, 0, 0)({mode.color.action.inactive.default})

input.switch.label-default

label to right of switch when switch is off

#000000rgb(0, 0, 0)({mode.color.action.dataEntry.txtAlt})

input.validation.border-error

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

input.validation.bar-error

error bar to left of inputs

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

input.validation.bar-warn

warning bar to left of inputs

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

input.validation.label-error

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

input.validation.label-success

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

input.validation.label-warn

#b33400rgb(179, 52, 0)({mode.color.status.warning.txt})

input.validation.inverse.border-error

#f50059rgb(245, 0, 89)({mode.color.status.negative.inverse.default})

input.validation.inverse.bar-error

error bar to left of inputs

#f50059rgb(245, 0, 89)({mode.color.status.negative.inverse.default})

input.validation.inverse.label-error

#f50059rgb(245, 0, 89)({mode.color.status.negative.inverse.default})

link.destructive.label-default

#c40044rgb(196, 0, 68)({mode.color.action.danger.defaultAlt})

link.destructive.label-hover

#a30037rgb(163, 0, 55)({mode.color.action.danger.hoverAlt2})

link.destructive.inverse.label-default

#ff3e6argb(255, 62, 106)({mode.color.action.danger.inverse.defaultAlt})

link.destructive.inverse.label-hover

#ff728drgb(255, 114, 141)({mode.color.action.danger.inverse.hoverAlt2})

link.typical.label-default

#007219rgb(0, 114, 25)({mode.color.action.main.defaultAlt2})

link.typical.label-hover

#005e14rgb(0, 94, 20)({mode.color.action.main.hoverAlt2})

link.typical.inverse.label-default

#46fb5ergb(70, 251, 94)({mode.color.action.main.inverse.defaultAlt2})

link.typical.inverse.label-hover

#8fff98rgb(143, 255, 152)({mode.color.action.main.inverse.hoverAlt2})

link.subtle.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

link.subtle.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

link.subtle.inverse.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.default})

link.subtle.inverse.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.inverse.active})

logo.sage.bg-default

sage logo

#000000rgb(0, 0, 0)({mode.color.brand.default})

logo.sage.bg-alt

#000000rgb(0, 0, 0)({mode.color.brand.defaultAlt})

logo.sage.inverse.bg-default

sage logo

#00d639rgb(0, 214, 57)({mode.color.brand.inverse.default})

logo.sage.inverse.bg-alt

#FFFFFFrgb(255, 255, 255)({mode.color.brand.inverse.defaultAlt})

logo.copilot.noBg.fg-default

#000000rgb(0, 0, 0)({mode.color.brand.copilot.monochrome})

logo.AiSparkle.bg-dot

#00d639rgb(0, 214, 57)({mode.color.brand.copilot.withDefault})

logo.AiSparkle.bg-star

star bg color

#000000rgb(0, 0, 0)({mode.color.brand.copilot.default})

logo.AiSparkle.outline

star outline variant

#000000rgb(0, 0, 0)({mode.color.brand.copilot.default})

logo.AiSparkle.inverse.bg-dot

star outline variant

#00d639rgb(0, 214, 57)({mode.color.brand.copilot.inverse.withDefault})

logo.AiSparkle.inverse.bg-star

star outline variant

#FFFFFFrgb(255, 255, 255)({mode.color.brand.copilot.inverse.default})

logo.AiSparkle.inverse.outline

star outline variant

#FFFFFFrgb(255, 255, 255)({mode.color.brand.copilot.inverse.default})

message.none

transparent override used for hiding colors when needed.

#FFFFFFrgb(255, 255, 255)({mode.color.none})

message.contextual.bg

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

message.contextual.icon

decorative icon on standard contxtual messages

#ffffffrgb(255, 255, 255)

message.contextual.icon-alt

icon on neutral status dialogs

#6f6f6frgb(111, 111, 111)({mode.color.status.neutral.default})

message.contextual.txt

Message txt.

#000000rgb(0, 0, 0)({mode.color.status.txt.withHoverAlt})

message.contextual.AI.bg-default

#000000rgb(0, 0, 0)({mode.color.status.ai.defaultAlt})

message.contextual.AI.bgAlt

#f8f8f8rgb(248, 248, 248)({mode.color.status.neutral.defaultAlt})

message.contextual.AI.border-default

#000000rgb(0, 0, 0)({mode.color.status.ai.defaultAlt})

message.contextual.AI.border-alt

#000000rgb(0, 0, 0)({mode.color.status.ai.withDefaultAlt})

message.contextual.callout.bgAlt

Subtle message bg

#e0ffe2rgb(224, 255, 226)({mode.color.status.callout.defaultAlt})

message.contextual.callout.icon

#000000rgb(0, 0, 0)({mode.color.status.txt.withDefaultAlt})

message.contextual.error.bg-default

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

message.contextual.error.bgAlt

Subtle message bg

#fff5f6rgb(255, 245, 246)({mode.color.status.negative.defaultAlt})

message.contextual.error.border-default

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

message.contextual.error.icon

Icon on tinted bgs

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

message.contextual.info.bg-default

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

message.contextual.info.bgAlt

Subtle message bg

#f5f8ffrgb(245, 248, 255)({mode.color.status.info.defaultAlt})

message.contextual.info.border-default

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

message.contextual.info.border-alt

#0071c3rgb(0, 113, 195)({mode.color.status.info.withDefaultAlt})

message.contextual.info.icon

Icon on tinted bgs

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

message.contextual.success.bg-default

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

message.contextual.success.bgAlt

Subtle message bg

#EEFCEFrgb(238, 252, 239)({mode.color.status.positive.defaultAlt})

message.contextual.success.border-default

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

message.contextual.success.border-alt

#00811Frgb(0, 129, 31)({mode.color.status.positive.withDefaultAlt})

message.contextual.success.icon

Icon on tinted bgs

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

message.contextual.warning.bg-default

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

message.contextual.warning.bgAlt

Subtle message bg

#fff7ebrgb(255, 247, 235)({mode.color.status.warning.defaultAlt})

message.contextual.warning.border-default

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

message.contextual.warning.border-alt

#d64309rgb(214, 67, 9)({mode.color.status.warning.withDefaultAlt})

message.contextual.warning.icon

Icon on tinted bgs

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

message.global.label-default

#000000rgb(0, 0, 0)({mode.color.status.txt.withDefaultAlt})

message.global.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

message.global.callout.bg-default

Global message bg

#e0ffe2rgb(224, 255, 226)({mode.color.status.callout.defaultAlt})

message.global.callout.bg-hover

global message bg hover

#b7ffbdrgb(183, 255, 189)({mode.color.status.callout.hoverAlt})

message.global.callout.icon

Icon on tinted bgs

#000000rgb(0, 0, 0)({mode.color.status.txt.withDefaultAlt})

message.global.info.bg-default

Global message bg

#f5f8ffrgb(245, 248, 255)({mode.color.status.info.defaultAlt})

message.global.info.bg-hover

#e4eeffrgb(228, 238, 255)({mode.color.status.info.hoverAlt})

message.global.info.icon

Icon on tinted bgs

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

message.global.warning.bg-default

Global message bg

#fff7ebrgb(255, 247, 235)({mode.color.status.warning.defaultAlt})

message.global.warning.bg-hover

#ffeacargb(255, 234, 202)({mode.color.status.warning.hoverAlt})

message.global.warning.icon

Icon on tinted bgs

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

nav.primary.bg-active

#005e14rgb(0, 94, 20)({mode.color.action.nav.active})

nav.primary.bg-default

#000000rgb(0, 0, 0)({mode.color.generic.bg.inverse.nought})

nav.primary.bg-hover

#007219rgb(0, 114, 25)({mode.color.action.nav.hover})

nav.primary.bg-child

#505050rgb(80, 80, 80)({mode.color.action.nav.inverse.child})

nav.primary.bg-childAlt

#616161rgb(97, 97, 97)({mode.color.action.nav.inverse.childAlt})

nav.primary.bg-selected

selected keyline under item

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

nav.primary.border-default

parent container border

#505050rgb(80, 80, 80)({mode.color.generic.fg.inverse.soft})

nav.primary.divider

divider within child menus

#6f6f6frgb(111, 111, 111)({mode.color.generic.fg.inverse.firm})

nav.primary.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.withActive})

nav.primary.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.inverse.withDefault})

nav.primary.label-defaultAlt

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.moderate})

nav.primary.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.withHover})

nav.secondary.bg-active

#005e14rgb(0, 94, 20)({mode.color.action.nav.active})

nav.secondary.bg-default

#181818rgb(24, 24, 24)({mode.color.action.nav.inverse.defaultAlt})

nav.secondary.bg-hover

#007219rgb(0, 114, 25)({mode.color.action.nav.hover})

nav.secondary.bg-selected

selected keyline under item

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

nav.secondary.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.withActive})

nav.secondary.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.inverse.withDefault})

nav.secondary.label-defaultAlt

subheader text within a menu

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.moderate})

nav.secondary.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.withHover})

nav.tertiary.bg-active

#005e14rgb(0, 94, 20)({mode.color.action.nav.active})

nav.tertiary.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

nav.tertiary.bg-hover

#007219rgb(0, 114, 25)({mode.color.action.nav.hover})

nav.tertiary.bg-child

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.child})

nav.tertiary.bg-childAlt

#e8eaecrgb(232, 234, 236)({mode.color.action.nav.childAlt})

nav.tertiary.bg-selected

selected keyline under item

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

nav.tertiary.border-default

parent container border

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

nav.tertiary.divider

divider within child menus

#dde0e3rgb(221, 224, 227)({mode.color.generic.bg.soft})

nav.tertiary.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.withActive})

nav.tertiary.label-default

#000000rgb(0, 0, 0)({mode.color.action.nav.withDefault})

nav.tertiary.label-defaultAlt

subheader text within a menu

#000000rgb(0, 0, 0)({mode.color.generic.txt.moderate})

nav.tertiary.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.action.nav.withHover})

page.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.surface.nought})

page.bg-alt

#f4f5f6rgb(244, 245, 246)({mode.color.generic.surface.trace})

page.txt-alt

for subheadings etc

#000000rgb(0, 0, 0)({mode.color.generic.txt.moderate})

page.txt-default

for headings, paragraph txt etc

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

pill.generic.none

transparent override used for hiding colors when needed.

#FFFFFFrgb(255, 255, 255)({mode.color.none})

pill.generic.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.status.txt.withDefault})

pill.generic.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.status.txt.withHover})

pill.generic.labelAlt-default

#000000rgb(0, 0, 0)({mode.color.status.txt.withDefaultAlt})

pill.generic.labelAlt-hover

#000000rgb(0, 0, 0)({mode.color.status.txt.withDefaultAlt})

pill.generic.inverse.label-default

#000000rgb(0, 0, 0)({mode.color.status.txt.inverse.withDefault})

pill.generic.inverse.label-hover

#000000rgb(0, 0, 0)({mode.color.status.txt.inverse.withHover})

pill.generic.inverse.labelAlt-default

#FFFFFFrgb(255, 255, 255)({mode.color.status.txt.inverse.withDefaultAlt})

pill.generic.inverse.labelAlt-hover

#FFFFFFrgb(255, 255, 255)({mode.color.status.txt.inverse.withDefaultAlt})

pill.blue.bg-default

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

pill.blue.bgAlt-default

outline pill bg

#f5f8ffrgb(245, 248, 255)({mode.color.status.info.defaultAlt})

pill.blue.bgAlt-hover

#e4eeffrgb(228, 238, 255)({mode.color.status.info.hoverAlt})

pill.blue.bg-hover

#0063adrgb(0, 99, 173)({mode.color.status.info.hover})

pill.blue.border-default

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

pill.blue.inverse.bg-default

#007fd9rgb(0, 127, 217)({mode.color.status.info.inverse.default})

pill.blue.inverse.bgAlt-default

outline pill bg

#000b1crgb(0, 11, 28)({mode.color.status.info.inverse.defaultAlt})

pill.blue.inverse.bgAlt-hover

#001932rgb(0, 25, 50)({mode.color.status.info.inverse.hoverAlt})

pill.blue.inverse.bg-hover

#008ef4rgb(0, 142, 244)({mode.color.status.info.inverse.hover})

pill.blue.inverse.border-default

#007fd9rgb(0, 127, 217)({mode.color.status.info.inverse.default})

pill.green.bg-default

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

pill.green.bgAlt-default

outline pill bg

#EEFCEFrgb(238, 252, 239)({mode.color.status.positive.defaultAlt})

pill.green.bgAlt-hover

#D1F6D6rgb(209, 246, 214)({mode.color.status.positive.hoverAlt})

pill.green.bg-hover

#007219rgb(0, 114, 25)({mode.color.status.positive.hover})

pill.green.border-default

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

pill.green.inverse.bg-default

#019127rgb(1, 145, 39)({mode.color.status.positive.inverse.default})

pill.green.inverse.bgAlt-default

outline pill bg

#001001rgb(0, 16, 1)({mode.color.status.positive.inverse.defaultAlt})

pill.green.inverse.bgAlt-hover

#001f03rgb(0, 31, 3)({mode.color.status.positive.inverse.hoverAlt})

pill.green.inverse.bg-hover

#007219rgb(0, 114, 25)({mode.color.status.positive.inverse.hover})

pill.green.inverse.border-default

#019127rgb(1, 145, 39)({mode.color.status.positive.inverse.default})

pill.gray.bg-default

#6f6f6frgb(111, 111, 111)({mode.color.status.neutral.default})

pill.gray.bgAlt-default

outline pill bg

#f8f8f8rgb(248, 248, 248)({mode.color.status.neutral.defaultAlt})

pill.gray.bgAlt-hover

#eeeeeergb(238, 238, 238)({mode.color.status.neutral.hoverAlt})

pill.gray.bg-hover

#616161rgb(97, 97, 97)({mode.color.status.neutral.hover})

pill.gray.border-default

#6f6f6frgb(111, 111, 111)({mode.color.status.neutral.default})

pill.gray.inverse.bg-default

#7c7c7crgb(124, 124, 124)({mode.color.status.neutral.inverse.default})

pill.gray.inverse.bgAlt-default

outline pill bg

#0b0b0brgb(11, 11, 11)({mode.color.status.neutral.inverse.defaultAlt})

pill.gray.inverse.bgAlt-hover

#181818rgb(24, 24, 24)({mode.color.status.neutral.inverse.hoverAlt})

pill.gray.inverse.bg-hover

#8b8b8brgb(139, 139, 139)({mode.color.status.neutral.inverse.hover})

pill.gray.inverse.border-default

#7c7c7crgb(124, 124, 124)({mode.color.status.neutral.inverse.default})

pill.lime.bg-default

#627600rgb(98, 118, 0)({mode.color.status.custom.lime.default})

pill.lime.bgAlt-default

outline pill bg

#f6f9f0rgb(246, 249, 240)({mode.color.status.custom.lime.defaultAlt})

pill.lime.bgAlt-hover

#e8f1d4rgb(232, 241, 212)({mode.color.status.custom.lime.hoverAlt})

pill.lime.bg-hover

#576900rgb(87, 105, 0)({mode.color.status.custom.lime.hover})

pill.lime.border-default

#627600rgb(98, 118, 0)({mode.color.status.custom.lime.default})

pill.orange.bg-default

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

pill.orange.bgAlt-default

Global message bg

#fff7ebrgb(255, 247, 235)({mode.color.status.warning.defaultAlt})

pill.orange.bgAlt-hover

#ffeacargb(255, 234, 202)({mode.color.status.warning.hoverAlt})

pill.orange.bg-hover

#b33400rgb(179, 52, 0)({mode.color.status.warning.hover})

pill.orange.border-default

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

pill.orange.inverse.bg-default

#e24300rgb(226, 67, 0)({mode.color.status.warning.inverse.default})

pill.orange.inverse.bgAlt-default

Global message bg

#1d0300rgb(29, 3, 0)({mode.color.status.warning.inverse.defaultAlt})

pill.orange.inverse.bgAlt-hover

#360900rgb(54, 9, 0)({mode.color.status.warning.inverse.hoverAlt})

pill.orange.inverse.bg-hover

#e5631crgb(229, 99, 28)({mode.color.status.warning.inverse.hover})

pill.orange.inverse.border-default

#e24300rgb(226, 67, 0)({mode.color.status.warning.inverse.default})

pill.pink.bg-default

#c72699rgb(199, 38, 153)({mode.color.status.custom.pink.default})

pill.pink.bgAlt-default

outline pill bg

#fff5fargb(255, 245, 250)({mode.color.status.custom.pink.defaultAlt})

pill.pink.bgAlt-hover

#fee8f5rgb(254, 232, 245)({mode.color.status.custom.pink.hoverAlt})

pill.pink.bg-hover

#b02086rgb(176, 32, 134)({mode.color.status.custom.pink.hover})

pill.pink.border-default

#c72699rgb(199, 38, 153)({mode.color.status.custom.pink.default})

pill.purple.bg-default

#8f4bd7rgb(143, 75, 215)({mode.color.status.priority.default})

pill.purple.bgAlt-default

outline pill bg

#f9f6ffrgb(249, 246, 255)({mode.color.status.priority.defaultAlt})

pill.purple.bgAlt-hover

#F3EBFErgb(243, 235, 254)({mode.color.status.priority.hoverAlt})

pill.purple.bg-hover

#803ec5rgb(128, 62, 197)({mode.color.status.priority.hover})

pill.purple.border-default

#8f4bd7rgb(143, 75, 215)({mode.color.status.priority.default})

pill.purple.inverse.bg-default

#8f4bd7rgb(143, 75, 215)({mode.color.status.priority.default})

pill.purple.inverse.bgAlt-default

outline pill bg

#10041frgb(16, 4, 31)({mode.color.status.priority.inverse.defaultAlt})

pill.purple.inverse.bgAlt-hover

#220c3argb(34, 12, 58)({mode.color.status.priority.inverse.hoverAlt})

pill.purple.inverse.bg-hover

#803ec5rgb(128, 62, 197)({mode.color.status.priority.hover})

pill.purple.inverse.border-default

#8f4bd7rgb(143, 75, 215)({mode.color.status.priority.default})

pill.red.bg-default

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

pill.red.bgAlt-default

outline pill bg

#fff5f6rgb(255, 245, 246)({mode.color.status.negative.defaultAlt})

pill.red.bgAlt-hover

#ffe8eargb(255, 232, 234)({mode.color.status.negative.hoverAlt})

pill.red.bg-hover

#c40044rgb(196, 0, 68)({mode.color.status.negative.hover})

pill.red.border-default

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

pill.red.inverse.bg-default

#f50059rgb(245, 0, 89)({mode.color.status.negative.inverse.default})

pill.red.inverse.bgAlt-default

outline pill bg

#1e0005rgb(30, 0, 5)({mode.color.status.negative.inverse.defaultAlt})

pill.red.inverse.bgAlt-hover

#3c000frgb(60, 0, 15)({mode.color.status.negative.inverse.hoverAlt})

pill.red.inverse.bg-hover

#ff3e6argb(255, 62, 106)({mode.color.status.negative.inverse.hover})

pill.red.inverse.border-default

#f50059rgb(245, 0, 89)({mode.color.status.negative.inverse.default})

pill.slate.bg-default

#536574rgb(83, 101, 116)({mode.color.status.custom.slate.default})

pill.slate.bgAlt-default

outline pill bg

#f4f5f6rgb(244, 245, 246)({mode.color.status.custom.slate.defaultAlt})

pill.slate.bgAlt-hover

#e8eaecrgb(232, 234, 236)({mode.color.status.custom.slate.hoverAlt})

pill.slate.bg-hover

#475a6argb(71, 90, 106)({mode.color.status.custom.slate.hover})

pill.slate.border-default

#536574rgb(83, 101, 116)({mode.color.status.custom.slate.default})

pill.teal.bg-default

#007C7Brgb(0, 124, 123)({mode.color.status.custom.teal.default})

pill.teal.bgAlt-default

outline pill bg

#E8FCFCrgb(232, 252, 252)({mode.color.status.custom.teal.defaultAlt})

pill.teal.bgAlt-hover

#C8F5F5rgb(200, 245, 245)({mode.color.status.custom.teal.hoverAlt})

pill.teal.bg-hover

#006D6Crgb(0, 109, 108)({mode.color.status.custom.teal.hover})

pill.teal.border-default

#007C7Brgb(0, 124, 123)({mode.color.status.custom.teal.default})

Sizing

Name	Value	Resolved value	Description
profile.size.outside.XS	{global.size.XS}	24	XS Portraits
profile.size.outside.S	{global.size.S}	32	S Portraits
profile.size.outside.M	{global.size.M}	40	M Portraits
profile.size.outside.ML	56		L Portraits
profile.size.outside.L	{global.size.4XL}	80	XL Portraits
profile.size.outside.XL	104		XL Portraits
profile.size.outside.XXL	128		XXL Portraits
profile.size.inside.XS	{global.size.3XS}	16	XS Portrait icons
profile.size.inside.S	{global.size.2XS}	20	S Portrait icons
profile.size.inside.M	{global.size.XS}	24	M Portrait icons
profile.size.inside.ML	{global.size.S}	32	L Portrait icons
profile.size.inside.L	{global.size.L}	48	XL Portrait icons
profile.size.inside.XL	{global.size.2XL}	64	XL Portrait icons
profile.size.inside.XXL	{global.size.4XL}	80	XXL Portraits

Color

profile.bg-alt

For portrait image

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

profile.bg-def

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

profile.border-default

#8c98a2rgb(140, 152, 162)({mode.color.generic.fg.moderate})

profile.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

profile.swatches.blue.bg-default

#f5f8ffrgb(245, 248, 255)({mode.color.status.custom.blue.defaultAlt})

profile.swatches.blue.label-default

#0071c3rgb(0, 113, 195)({mode.color.status.custom.blue.default})

profile.swatches.teal.bg-default

#E8FCFCrgb(232, 252, 252)({mode.color.status.custom.teal.defaultAlt})

profile.swatches.teal.label-default

#007C7Brgb(0, 124, 123)({mode.color.status.custom.teal.default})

profile.swatches.green.bg-default

#EEFCEFrgb(238, 252, 239)({mode.color.status.custom.green.defaultAlt})

profile.swatches.green.label-default

#00811Frgb(0, 129, 31)({mode.color.status.custom.green.default})

profile.swatches.lime.bg-default

#f6f9f0rgb(246, 249, 240)({mode.color.status.custom.lime.defaultAlt})

profile.swatches.lime.label-default

#627600rgb(98, 118, 0)({mode.color.status.custom.lime.default})

profile.swatches.orange.bg-default

#fff7ebrgb(255, 247, 235)({mode.color.status.custom.orange.defaultAlt})

profile.swatches.orange.label-default

#b33400rgb(179, 52, 0)({mode.color.status.custom.orange.txt})

profile.swatches.red.bg-default

#fff5f6rgb(255, 245, 246)({mode.color.status.custom.red.defaultAlt})

profile.swatches.red.label-default

#db004ergb(219, 0, 78)({mode.color.status.custom.red.default})

profile.swatches.pink.bg-default

#fff5fargb(255, 245, 250)({mode.color.status.custom.pink.defaultAlt})

profile.swatches.pink.label-default

#c72699rgb(199, 38, 153)({mode.color.status.custom.pink.default})

profile.swatches.purple.bg-default

#f9f6ffrgb(249, 246, 255)({mode.color.status.custom.purple.defaultAlt})

profile.swatches.purple.label-default

#8f4bd7rgb(143, 75, 215)({mode.color.status.custom.purple.default})

profile.swatches.slate.bg-default

#f4f5f6rgb(244, 245, 246)({mode.color.status.custom.slate.defaultAlt})

profile.swatches.slate.label-default

#536574rgb(83, 101, 116)({mode.color.status.custom.slate.default})

profile.swatches.gray.bg-default

#f8f8f8rgb(248, 248, 248)({mode.color.status.custom.gray.defaultAlt})

profile.swatches.gray.label-default

#6f6f6frgb(111, 111, 111)({mode.color.status.custom.gray.default})

Typography

Aa — profile.font.initials.XS

[object Object]

Aa — profile.font.initials.S

[object Object]

Aa — profile.font.initials.M

[object Object]

Aa — profile.font.initials.ML

[object Object]

Aa — profile.font.initials.L

[object Object]

Aa — profile.font.initials.XL

[object Object]

Aa — profile.font.initials.XXL

[object Object]

Aa — profile.font.heading.XS

[object Object]

Aa — profile.font.heading.S

[object Object]

Aa — profile.font.heading.M

[object Object]

Aa — profile.font.heading.ML

[object Object]

Aa — profile.font.heading.L

[object Object]

Aa — profile.font.heading.XL

[object Object]

Aa — profile.font.heading.XXL

[object Object]

Aa — profile.font.fluid.initials.XS

[object Object]

Aa — profile.font.fluid.initials.S

[object Object] · Small Viewports: 16, Large Viewports: 16

Aa — profile.font.fluid.initials.M

[object Object] · Small Viewports: 18.66, Large Viewports: 21.53

Aa — profile.font.fluid.initials.ML

[object Object] · Small Viewports: 21.77, Large Viewports: 28.97

Aa — profile.font.fluid.initials.L

[object Object] · Small Viewports: 25.39, Large Viewports: 38.98

Aa — profile.font.fluid.initials.XL

[object Object] · Small Viewports: 29.61, Large Viewports: 52.45

Aa — profile.font.fluid.initials.XXL

[object Object] · Small Viewports: 34.54, Large Viewports: 70.58

Aa — profile.font.fluid.heading.XS

[object Object]

Aa — profile.font.fluid.heading.S

[object Object]

Aa — profile.font.fluid.heading.M

[object Object]

Aa — profile.font.fluid.heading.ML

[object Object]

Aa — profile.font.fluid.heading.L

[object Object]

Aa — profile.font.fluid.heading.XL

[object Object]

Aa — profile.font.fluid.heading.XXL

[object Object]

progress.none

transparent override used for hiding colors when needed.

#FFFFFFrgb(255, 255, 255)({mode.color.none})

progress.bg-default

#e8eaecrgb(232, 234, 236)({mode.color.generic.bg.delicate})

progress.border-default

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

progress.fg-alt

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

progress.fg-alt2

#000000rgb(0, 0, 0)({mode.color.generic.txt.soft})

progress.fg-caution

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

progress.fg-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

progress.fg-error

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

progress.fg-info

#0071c3rgb(0, 113, 195)({mode.color.status.info.default})

progress.label-alt

#000000rgb(0, 0, 0)({mode.color.generic.txt.moderate})

progress.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

progress.dataviz.fg-default

#007C7Brgb(0, 124, 123)({mode.color.status.custom.teal.default})

progress.inverse.label-alt

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.soft})

progress.loader.bg-default

#e8eaecrgb(232, 234, 236)({mode.color.generic.bg.delicate})

progress.loader.bg-skeleton

linear-gradient(135deg, #75838f 15%, #d1d6da 85%)(linear-gradient(135deg, {mode.color.status.skeleton.stop-1} 15%, {mode.color.status.skeleton.stop-2} 85%))

progress.loader.fg-default

used for loader standard loader spinner

#000000rgb(0, 0, 0)({mode.color.generic.fg.inverse.nought})

progress.loader.fg-error

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

progress.loader.fg-complete

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

progress.loader.inverse.bg-default

used for inverse loader bgs

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.inverse.delicate})

progress.loader.inverse.fg-default

used on inverse loading spinner

#FFFFFFrgb(255, 255, 255)({mode.color.generic.fg.nought})

progress.stepflow.bg-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

progress.stepflow.bg-complete

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

progress.stepflow.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.fg.nought})

progress.stepflow.border-active-inner

#FFFFFFrgb(255, 255, 255)({mode.color.generic.fg.nought})

progress.stepflow.border-active-outer

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

progress.stepflow.border-default

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

progress.stepflow.label-alt

#000000rgb(0, 0, 0)({mode.color.generic.txt.soft})

progress.stepflow.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

progress.stepindicator.bg-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

progress.stepindicator.bg-complete

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

progress.stepindicator.border-active-outer

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

progress.stepindicator.border-default

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

progress.stepindicator.border-success

#00811Frgb(0, 129, 31)({mode.color.status.positive.default})

progress.stepindicator.label-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

progress.stepindicator.label-complete

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

progress.stepindicator.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

tab.bg-active

#FFFFFFrgb(255, 255, 255)({mode.color.action.grayscale.withActive})

tab.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.none})

tab.bg-hover

For anchor nav, not tab.

#e8eaecrgb(232, 234, 236)({mode.color.generic.bg.delicate})

tab.border-activeAlt

#8c98a2rgb(140, 152, 162)({mode.color.generic.fg.moderate})

tab.border-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

tab.border-default

#8c98a2rgb(140, 152, 162)({mode.color.generic.fg.moderate})

tab.border-hover

#75838frgb(117, 131, 143)({mode.color.generic.fg.firm})

tab.icon-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.defaultAlt})

tab.icon-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

tab.label-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

tab.icon-active

#000000rgb(0, 0, 0)({mode.color.action.grayscale.active})

tab.label-default

#000000rgb(0, 0, 0)({mode.color.action.grayscale.default})

tab.label-hover

#000000rgb(0, 0, 0)({mode.color.action.grayscale.withHover})

tab.nav.bg-default

For previous/next buttons on responsive tabs

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

tab.validation.border-warning

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

tab.validation.border-error

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

tab.validation.icon-error

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

tab.validation.icon-warning

#d64309rgb(214, 67, 9)({mode.color.status.warning.default})

tab.validation.label-error

#db004ergb(219, 0, 78)({mode.color.status.negative.default})

tab.validation.label-warning

#b33400rgb(179, 52, 0)({mode.color.status.warning.txt})

table.header.subtle.bg-alt

header alt

#f4f5f6rgb(244, 245, 246)({mode.color.generic.surface.trace})

table.header.subtle.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.none})

table.header.subtle.bg-hover

#e8eaecrgb(232, 234, 236)({mode.color.generic.surface.faint})

table.header.subtle.border-default

Header borders

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

table.header.subtle.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

table.header.subtle.label-hover

#000000rgb(0, 0, 0)({mode.color.generic.txt.extreme})

table.header.harsh.bg-alt

header alt

#304658rgb(48, 70, 88)({mode.color.generic.surface.severe})

table.header.harsh.bg-default

#475a6argb(71, 90, 106)({mode.color.generic.surface.harsh})

table.header.harsh.bg-hover

#253b4ergb(37, 59, 78)({mode.color.generic.surface.acute})

table.header.harsh.border-default

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

table.header.harsh.label-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.severe})

table.header.harsh.label-hover

#FFFFFFrgb(255, 255, 255)({mode.color.generic.txt.inverse.extreme})

table.row.bg-default

#FFFFFFrgb(255, 255, 255)({mode.color.generic.bg.nought})

table.row.bg-alt

Zebra stripes

#e8eaecrgb(232, 234, 236)({mode.color.generic.bg.delicate})

table.row.bg-alt2

Child rows

#f4f5f6rgb(244, 245, 246)({mode.color.generic.bg.faint})

table.row.bg-selected

#dde0e3rgb(221, 224, 227)({mode.color.generic.bg.soft})

table.row.border-default

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

table.row.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})

table.row.label-selected

#000000rgb(0, 0, 0)({mode.color.generic.txt.extreme})

table.footer.bg-default

#dde0e3rgb(221, 224, 227)({mode.color.generic.bg.soft})

table.footer.border-default

Header borders

#a3adb5rgb(163, 173, 181)({mode.color.generic.fg.soft})

table.footer.label-default

#000000rgb(0, 0, 0)({mode.color.generic.txt.severe})