Color

Core tokens are global colors that are used across components. They are named and grouped by the common UI element that they are applied to.

Background

Token	Role	Value
`$background`	Default page background; UI Shell base color	White — #ffffff
`$layer-background-0-1`	Default page background; Automatically matches contextual layer background	White — #ffffff
`$background-hover`	Hover color for $background; Hover color for transparent backgrounds	Gray 50, 12% — rgba(141, 141, 141, 0.12)
`$background-active`	Active color for $background	Gray 50, 50% — rgba(141, 141, 141, 0.5)
`$background-selected`	Selected color for $background	Gray 50, 20% — rgba(141, 141, 141, 0.2)
`$background-selected-hover`	Hover color for $background-selected	Gray 50, 32% — rgba(141, 141, 141, 0.32)
`$background-inverse`	High contrast backgrounds; High contrast elements	Gray 80 — #393939
`$background-inverse-hover`	Hover color for $background-inverse	#474747 — #474747
`$background-brand`	Feature background color	Blue 60 — #0f62fe

Layer

Token	Role	Value
`$layer-0-1`	Container color on $background; Secondary page background	Gray 10 — #f4f4f4
`$layer-0-2`	Container color on $layer-01	White — #ffffff
`$layer-0-3`	Container color on $layer-02	Gray 10 — #f4f4f4
`$layer-background-0-2`	Container color on $layer-background-01; Automatically matches contextual layer background	Gray 10 — #f4f4f4
`$layer-background-0-3`	Container color on $layer-background-02; Automatically matches contextual layer background	White — #ffffff
`$layer-hover-0-1`	Hover color for $layer-01	#e8e8e8 — #e8e8e8
`$layer-hover-0-2`	Hover color for $layer-02	#e8e8e8 — #e8e8e8
`$layer-hover-0-3`	Hover color for $layer-03	#e8e8e8 — #e8e8e8
`$layer-active-0-1`	Active color for $layer-01	Gray 30 — #c6c6c6
`$layer-active-0-2`	Active color for $layer-02	Gray 30 — #c6c6c6
`$layer-active-0-3`	Active color for $layer-03	Gray 30 — #c6c6c6
`$layer-selected-0-1`	Selected color for $layer-01	Gray 20 — #e0e0e0
`$layer-selected-0-2`	Selected color for $layer-02	Gray 20 — #e0e0e0
`$layer-selected-0-3`	Selected color for $layer-03	Gray 20 — #e0e0e0
`$layer-selected-hover-0-1`	Hover color for $layer-selected-01	#d1d1d1 — #d1d1d1
`$layer-selected-hover-0-2`	Hover color for $layer-selected-02	#d1d1d1 — #d1d1d1
`$layer-selected-hover-0-3`	Hover color for $layer-selected-03	#d1d1d1 — #d1d1d1
`$layer-selected-inverse`	High contrast elements; 4.5:1 AA element contrast	Gray 100 — #161616
`$layer-selected-disabled`	Disabled color for selected layers	Gray 50 — #8d8d8d

Layer accent

Token	Role	Value
`$layer-accent-0-1`	Tertiary background paired with $layer-01	Gray 20 — #e0e0e0
`$layer-accent-0-2`	Tertiary background paired with $layer-02	Gray 20 — #e0e0e0
`$layer-accent-0-3`	Tertiary background paired with $layer-03	Gray 20 — #e0e0e0
`$layer-accent-hover-0-1`	Hover color for $layer-accent-01	#d1d1d1 — #d1d1d1
`$layer-accent-hover-0-2`	Hover color for $layer-accent-02	#d1d1d1 — #d1d1d1
`$layer-accent-hover-0-3`	Hover color for $layer-accent-03	#d1d1d1 — #d1d1d1
`$layer-accent-active-0-1`	Active color for $layer-accent-01	Gray 40 — #a8a8a8
`$layer-accent-active-0-2`	Active color for $layer-accent-02	Gray 40 — #a8a8a8
`$layer-accent-active-0-3`	Active color for $layer-accent-03	Gray 40 — #a8a8a8

Field

Token	Role	Value
`$field-0-1`	Default input fields; Fields on $background	Gray 10 — #f4f4f4
`$field-0-2`	Secondary input fields; Fields on $layer-01	White — #ffffff
`$field-0-3`	Tertiary input fields; Fields on $layer-02	Gray 10 — #f4f4f4
`$field-hover-0-1`	Hover color for $field-01	#e8e8e8 — #e8e8e8
`$field-hover-0-2`	Hover color for $field-02	#e8e8e8 — #e8e8e8
`$field-hover-0-3`	Hover color for $field-03	#e8e8e8 — #e8e8e8

Border

Token	Role	Value
`$border-interactive`	3:1 AA contrast; Selected borders; Active borders	Blue 60 — #0f62fe
`$border-subtle-0-0`	Subtle borders paired with $background	Gray 20 — #e0e0e0
`$border-subtle-0-1`	Subtle borders paired with $layer-01	Gray 30 — #c6c6c6
`$border-subtle-0-2`	Subtle borders paired with $layer-02	Gray 20 — #e0e0e0
`$border-subtle-0-3`	Subtle borders paired with $layer-03	Gray 30 — #c6c6c6
`$border-subtle-selected-0-1`	Selected color for $border-subtle-01	Gray 30 — #c6c6c6
`$border-subtle-selected-0-2`	Selected color for $border-subtle-02	Gray 30 — #c6c6c6
`$border-subtle-selected-0-3`	Selected color for $border-subtle-03	Gray 30 — #c6c6c6
`$border-strong-0-1`	Medium contrast border; Border-bottom paired with $field-01; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-0-2`	Medium contrast border; Border-bottom paired with $field-02; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-0-3`	Medium contrast border; Border-bottom paired with $field-03; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-tile-0-1`	Operable tile indicator paired with $layer-01	Gray 30 — #c6c6c6
`$border-tile-0-2`	Operable tile indicator paired with $layer-02	Gray 40 — #a8a8a8
`$border-tile-0-3`	Operable tile indicator paired with $layer-03	Gray 30 — #c6c6c6
`$border-inverse`	High contrast border; 4.5:1 AA non-text contrast	Gray 100 — #161616
`$border-disabled`	Disabled border color (excluding border-subtles)	Gray 30 — #c6c6c6

Text

Token	Role	Value
`$text-primary`	Primary text; Body copy; Headers; Hover text color for $text-secondary	Gray 100 — #161616
`$text-secondary`	Secondary text; Input labels	Gray 70 — #525252
`$text-placeholder`	Placeholder text	Gray 100, 40% — rgba(22, 22, 22, 0.4)
`$text-on-color`	Text on interactive colors; Text on button colors	White — #ffffff
`$text-on-color-disabled`	Disabled color for $text-on-color	Gray 50 — #8d8d8d
`$text-helper`	Tertiary text; Help text	Gray 60 — #6f6f6f
`$text-error`	Error message text	Red 60 — #da1e28
`$text-inverse`	Inverse text color	White — #ffffff
`$text-disabled`	Disabled text color	Gray 100, 25% — rgba(22, 22, 22, 0.25)

Link

Token	Role	Value
`$link-primary`	Primary links	Blue 60 — #0f62fe
`$link-primary-hover`	Hover color for $link-primary	Blue 70 — #0043ce
`$link-secondary`	Secondary link color for lower contrast backgrounds	Blue 70 — #0043ce
`$link-inverse`	Links on $background-inverse backgrounds	Blue 40 — #78a9ff
`$link-inverse-hover`	Hover color for links on $background-inverse backgrounds	Blue 30 — #a6c8ff
`$link-inverse-active`	Active color for links on $background-inverse backgrounds	Gray 10 — #f4f4f4
`$link-inverse-visited`	Color for visited links on $background-inverse backgrounds	Purple 40 — #be95ff
`$link-visited`	Color for visited links	Purple 60 — #8a3ffc

Syntax

Token	Role	Value
`$syntax-comment`	Default comment text	Green 60 — #198038
`$syntax-line-comment`	Single-line comment	Green 60 — #198038
`$syntax-block-comment`	Block comment	Green 60 — #198038
`$syntax-doc-comment`	Documentation comment	Green 60 — #198038
`$syntax-doc-string`	Docstring	Gray 100 — #161616
`$syntax-keyword`	Keywords	Blue 60 — #0f62fe
`$syntax-operator-keyword`	Operator keywords	Blue 60 — #0f62fe
`$syntax-control-keyword`	Control-flow keywords	Purple 70 — #6929c4
`$syntax-definition-keyword`	Definition keywords	Cyan 70 — #00539a
`$syntax-module-keyword`	Module/import keywords	Purple 70 — #6929c4
`$syntax-variable`	Variable	Blue 60 — #0f62fe
`$syntax-name`	Name	Blue 60 — #0f62fe
`$syntax-variable-name`	Variable name	Blue 60 — #0f62fe
`$syntax-label-name`	Label name	Blue 60 — #0f62fe
`$syntax-attribute`	Attribute	Cyan 70 — #00539a
`$syntax-attribute-name`	Attribute name	Cyan 70 — #00539a
`$syntax-property-name`	Property name	Cyan 70 — #00539a
`$syntax-tag`	Tag delimiters	Teal 60 — #007d79
`$syntax-tag-name`	Tag name	Teal 60 — #007d79
`$syntax-type`	Type	Teal 60 — #007d79
`$syntax-type-name`	Type name	Teal 60 — #007d79
`$syntax-class-name`	Class name	Teal 60 — #007d79
`$syntax-namespace`	Namespace	Teal 60 — #007d79
`$syntax-macro-name`	Macro name	Gray 100 — #161616
`$syntax-atom`	Atom literal	Gray 100 — #161616
`$syntax-literal`	Literal	Gray 100 — #161616
`$syntax-bool`	Boolean	Gray 100 — #161616
`$syntax-null`	Null/undefined	Gray 100 — #161616
`$syntax-self`	Self/this	Teal 60 — #007d79
`$syntax-number`	Number	Green 60 — #198038
`$syntax-integer`	Integer	Green 60 — #198038
`$syntax-float`	Float	Green 60 — #198038
`$syntax-unit`	Unit	Green 60 — #198038
`$syntax-string`	String	Gray 100 — #161616
`$syntax-character`	Character	Gray 100 — #161616
`$syntax-attribute-value`	Attribute value	Gray 100 — #161616
`$syntax-special-string`	Special string	Purple 60 — #8a3ffc
`$syntax-regexp`	RegExp	Purple 70 — #6929c4
`$syntax-escape`	Escape sequence	Cool Gray 80 — #343a3f
`$syntax-url`	URL literal	Cool Gray 80 — #343a3f
`$syntax-color`	Color literal	Gray 100 — #161616
`$syntax-operator`	Operator	Cool Gray 80 — #343a3f
`$syntax-deref-operator`	Dereference operator	Cool Gray 80 — #343a3f
`$syntax-arithmetic-operator`	Arithmetic operator	Cool Gray 80 — #343a3f
`$syntax-logic-operator`	Logic operator	Cool Gray 80 — #343a3f
`$syntax-bitwise-operator`	Bitwise operator	Cool Gray 80 — #343a3f
`$syntax-compare-operator`	Comparison operator	Cool Gray 80 — #343a3f
`$syntax-update-operator`	Update operator	Cool Gray 80 — #343a3f
`$syntax-definition-operator`	Definition operator	Cyan 70 — #00539a
`$syntax-type-operator`	Type operator	Teal 60 — #007d79
`$syntax-control-operator`	Control operator	Purple 70 — #6929c4
`$syntax-modifier`	Modifier	Blue 60 — #0f62fe
`$syntax-punctuation`	Punctuation	Cool Gray 80 — #343a3f
`$syntax-separator`	Separator	Cool Gray 80 — #343a3f
`$syntax-bracket`	Bracket	Cool Gray 80 — #343a3f
`$syntax-angle-bracket`	Angle bracket	Cool Gray 60 — #697077
`$syntax-square-bracket`	Square bracket	Cool Gray 80 — #343a3f
`$syntax-paren`	Parenthesis	Cool Gray 80 — #343a3f
`$syntax-brace`	Brace	Cool Gray 80 — #343a3f
`$syntax-content`	Content	Gray 100 — #161616
`$syntax-list`	List	Gray 100 — #161616
`$syntax-emphasis`	Emphasis	Gray 100 — #161616
`$syntax-strong`	Strong	Gray 100 — #161616
`$syntax-monospace`	Monospace	Gray 100 — #161616
`$syntax-strikethrough`	Strikethrough	Gray 100 — #161616
`$syntax-heading`	Heading	Cyan 70 — #00539a
`$syntax-heading-1`	Heading 1	Cyan 70 — #00539a
`$syntax-heading-2`	Heading 2	Cyan 70 — #00539a
`$syntax-heading-3`	Heading 3	Cyan 70 — #00539a
`$syntax-heading-4`	Heading 4	Cyan 70 — #00539a
`$syntax-heading-5`	Heading 5	Cyan 70 — #00539a
`$syntax-heading-6`	Heading 6	Cyan 70 — #00539a
`$syntax-content-separator`	Content separator	Cool Gray 80 — #343a3f
`$syntax-quote`	Quote	Green 60 — #198038
`$syntax-link`	Link	Blue 60 — #0f62fe
`$syntax-invalid`	Invalid	Red 60 — #da1e28
`$syntax-meta`	Meta	Green 60 — #198038
`$syntax-document-meta`	Document meta	Green 60 — #198038
`$syntax-annotation`	Annotation	Teal 60 — #007d79
`$syntax-processing-instruction`	Processing instruction	Gray 100 — #161616
`$syntax-definition`	Definition	Cyan 70 — #00539a
`$syntax-constant`	Constant	Blue 60 — #0f62fe
`$syntax-function`	Function	Yellow 60 — #8e6a00
`$syntax-standard`	Standard	Blue 60 — #0f62fe
`$syntax-local`	Local	Blue 60 — #0f62fe
`$syntax-special`	Special	Blue 60 — #0f62fe

Icon

Token	Role	Value
`$icon-primary`	Primary icons	Gray 100 — #161616
`$icon-secondary`	Secondary icons	Gray 70 — #525252
`$icon-on-color`	Icons on interactive colors; Icons on non-layer colors	White — #ffffff
`$icon-on-color-disabled`	Disabled color for $icon-on-color	Gray 50 — #8d8d8d
`$icon-interactive`	Icons that indicate operability	Blue 60 — #0f62fe
`$icon-inverse`	Inverse icon color	White — #ffffff
`$icon-disabled`	Disabled icon color	Gray 100, 25% — rgba(22, 22, 22, 0.25)

Support

Token	Role	Value
`$support-error`	Error; Invalid state	Red 60 — #da1e28
`$support-success`	Success; On	Green 50 — #24a148
`$support-warning`	Warning	Yellow 30 — #f1c21b
`$support-info`	Information	Blue 70 — #0043ce
`$support-error-inverse`	Error in high contrast moments	Red 50 — #fa4d56
`$support-success-inverse`	Success in high contrast moments	Green 40 — #42be65
`$support-warning-inverse`	Warning in high contrast moments	Yellow 30 — #f1c21b
`$support-info-inverse`	Information in high contrast moments	Blue 50 — #4589ff
`$support-caution-minor`	Minor caution status	Yellow 30 — #f1c21b
`$support-caution-major`	Major caution status	Orange 40 — #ff832b
`$support-caution-undefined`	Undefined status	Purple 60 — #8a3ffc

Focus

Token	Role	Value
`$focus`	Focus border; Focus underline	Blue 60 — #0f62fe
`$focus-inset`	Contrast border paired with $focus	White — #ffffff
`$focus-inverse`	Focus on high contrast moments	White — #ffffff

Miscellaneous

Token	Role	Value
`$interactive`	3:1 AA contrast; Selected elements; Active elements; Accent icons	Blue 60 — #0f62fe
`$highlight`	Highlight color	Blue 20 — #d0e2ff
`$toggle-off`	Off background; 3:1 AA contrast	Gray 50 — #8d8d8d
`$overlay`	Background overlay	Black 100, 60% — rgba(0, 0, 0, 0.6)
`$skeleton-element`	Skeleton color for text and UI elements	Gray 30 — #c6c6c6
`$skeleton-background`	Skeleton color for containers	#e8e8e8 — #e8e8e8

Some components have their own specific color tokens, known as component tokens. They represent the properties associated with a particular component. They are not global tokens like the core tokens and should never be used for anything other than their own component. For more information on how to use component tokens, see the developer documentation.

Button

Token	Role	Value
`$button-primary`	Primary button color	Blue 60 — #0f62fe
`$button-primary-hover`	Hover color for $button-primary	#0050e6 — #0050e6
`$button-primary-active`	Active color for $button-primary	Blue 80 — #002d9c
`$button-secondary`	Secondary button color	Gray 80 — #393939
`$button-secondary-hover`	Hover color for $button-secondary	#474747 — #474747
`$button-secondary-active`	Active color for $button-secondary	Gray 60 — #6f6f6f
`$button-tertiary`	Tertiary button color; 4.5:1 AA text contrast	Blue 60 — #0f62fe
`$button-tertiary-hover`	Hover color for $button-tertiary	#0050e6 — #0050e6
`$button-tertiary-active`	Active color for $button-tertiary	Blue 80 — #002d9c
`$button-danger-primary`	Primary danger button color; 3:1 AA non-text contrast	Red 60 — #da1e28
`$button-danger-secondary`	Tertiary danger button color; Ghost danger button color; 4.5:1 AA text contrast	Red 60 — #da1e28
`$button-danger-hover`	Hover color for $danger-primary; Hover color for $danger-secondary	#b81921 — #b81921
`$button-danger-active`	Active color for $danger-primary; Active color for $danger-secondary	Red 80 — #750e13
`$button-separator`	Fluid button separator; 3:1 AA non-text contrast	Gray 20 — #e0e0e0
`$button-disabled`	Disabled color for button elements	Gray 30 — #c6c6c6

Content switcher

Token	Role	Value
`$content-switcher-background`	Low contrast background color	Gray 20 — #e0e0e0
`$content-switcher-background-hover`	Low contrast hover color for $content-switcher-background	#d1d1d1 — #d1d1d1
`$content-switcher-selected`	Low contrast selected color	White — #ffffff

Tag

Token	Role	Value
`$tag-background-gray`	Gray tag background	Gray 20 — #e0e0e0
`$tag-color-gray`	Gray tag text; Gray tag icon	Gray 100 — #161616
`$tag-hover-gray`	Gray tag hover for $tag-background-gray	#d1d1d1 — #d1d1d1
`$tag-border-gray`	Gray tag border for operational tag	Gray 40 — #a8a8a8
`$tag-background-cool-gray`	Cool gray tag background	Cool Gray 20 — #dde1e6
`$tag-color-cool-gray`	Cool gray tag text; Cool gray tag icon	Cool Gray 100 — #121619
`$tag-hover-cool-gray`	Cool gray tag hover for $tag-background-cool-gray	#cdd3da — #cdd3da
`$tag-border-cool-gray`	Cool gray tag border for operational tag	Cool Gray 40 — #a2a9b0
`$tag-background-warm-gray`	Warm gray tag background	Warm Gray 20 — #e5e0df
`$tag-color-warm-gray`	Warm gray tag text; Warm gray tag icon	Warm Gray 100 — #171414
`$tag-hover-warm-gray`	Warm gray tag hover for $tag-background-warm-gray	#d8d0cf — #d8d0cf
`$tag-border-warm-gray`	Warm gray tag border for operational tag	Warm Gray 40 — #ada8a8
`$tag-background-red`	Red tag background	Red 20 — #ffd7d9
`$tag-color-red`	Red tag text; Red tag icon	Red 70 — #a2191f
`$tag-hover-red`	Red tag hover for $tag-background-red	#ffc2c5 — #ffc2c5
`$tag-border-red`	Red tag border for operational tag	Red 40 — #ff8389
`$tag-background-magenta`	Magenta tag background	Magenta 20 — #ffd6e8
`$tag-color-magenta`	Magenta tag text; Magenta tag icon	Magenta 70 — #9f1853
`$tag-hover-magenta`	Magenta tag hover for $tag-background-magenta	#ffbdda — #ffbdda
`$tag-border-magenta`	Magenta tag border for operational tag	Magenta 40 — #ff7eb6
`$tag-background-purple`	Purple tag background	Purple 20 — #e8daff
`$tag-color-purple`	Purple tag text; Purple tag icon	Purple 70 — #6929c4
`$tag-hover-purple`	Purple tag hover for $tag-background-purple	#dcc7ff — #dcc7ff
`$tag-border-purple`	Purple tag border for operational tag	Purple 40 — #be95ff
`$tag-background-blue`	Blue tag background	Blue 20 — #d0e2ff
`$tag-color-blue`	Blue tag text; Blue tag icon	Blue 70 — #0043ce
`$tag-hover-blue`	Blue tag hover for $tag-background-blue	#b8d3ff — #b8d3ff
`$tag-border-blue`	Blue tag border for operational tag	Blue 40 — #78a9ff
`$tag-background-cyan`	Cyan tag background	Cyan 20 — #bae6ff
`$tag-color-cyan`	Cyan tag text; Cyan tag icon	Cyan 70 — #00539a
`$tag-hover-cyan`	Cyan tag hover for $tag-background-cyan	#99daff — #99daff
`$tag-border-cyan`	Cyan tag border for operational tag	Cyan 40 — #33b1ff
`$tag-background-teal`	Teal tag background	Teal 20 — #9ef0f0
`$tag-color-teal`	Teal tag text; Teal tag icon	Teal 70 — #005d5d
`$tag-hover-teal`	Teal tag hover for $tag-background-teal	#57e5e5 — #57e5e5
`$tag-border-teal`	Teal tag border for operational tag	Teal 40 — #08bdba
`$tag-background-green`	Green tag background	Green 20 — #a7f0ba
`$tag-color-green`	Green tag text; Green tag icon	Green 70 — #0e6027
`$tag-hover-green`	Green tag hover for $tag-background-green	#74e792 — #74e792
`$tag-border-green`	Green tag border for operational tag	Green 40 — #42be65

Notification

Token	Role	Value
`$notification-background-error`	Error low contrast notification background	Red 10 — #fff1f1
`$notification-background-success`	Success low contrast notification background	Green 10 — #defbe6
`$notification-background-info`	Informational low contrast notification background	Blue 10 — #edf5ff
`$notification-background-warning`	Warning low contrast notification background	Yellow 10 — #fcf4d6
`$notification-action-hover`	Hover for notification ghost button	White — #ffffff
`$notification-action-tertiary-inverse`	Tertiary button color for notification	White — #ffffff
`$notification-action-tertiary-inverse-active`	Active color for tertiary button in notification	Gray 30 — #c6c6c6
`$notification-action-tertiary-inverse-hover`	Hover color for tertiary button in notification	Gray 10 — #f4f4f4
`$notification-action-tertiary-inverse-text`	Text color for tertiary button in notification	Gray 100 — #161616
`$notification-action-tertiary-inverse-text-on-color-disabled`	Disabled color for tertiary button in notification	White, 25% — rgba(255, 255, 255, 0.25)

To accommodate for the new AI styles, we have introduced a new suite of color tokens that can be found within the main Carbon themes. These tokens should only be used when building custom AI components, variants, or instances in your UI. For more information on how to use the AI tokens, see the Carbon for AI documentation.

General AI

Token	Role	Value
`$ai-aura-start`	Linear gradient start value for large AI layers	Blue 50, 10% — rgba(69, 137, 255, 0.1)
`$ai-aura-start-sm`	Linear gradient start value for small AI layers	Blue 50, 16% — rgba(69, 137, 255, 0.16)
`$ai-aura-end`	Linear gradient end value for all AI layers	White, 0% — rgba(255, 255, 255, 0)
`$ai-aura-hover-start`	Linear gradient start value for the AI aura hover	Blue 50, 32% — rgba(69, 137, 255, 0.32)
`$ai-aura-hover-end`	Linear gradient end value for the AI aura hover	White, 0% — rgba(255, 255, 255, 0)
`$ai-aura-hover-background`	Hover background color for AI layers	Blue 10 — #edf5ff
`$ai-border-start`	Linear gradient start value for AI borders	Blue 30, 64% — rgba(166, 200, 255, 0.64)
`$ai-border-end`	Linear gradient end value for AI borders	Blue 40 — #78a9ff
`$ai-border-strong`	Medium contrast border for AI elements; Border-bottom paired with AI fields; 3:1 AA non-text contrast	Blue 50 — #4589ff
`$ai-drop-shadow`	Drop shadow for the AI layer	Blue 60, 10% — rgba(15, 98, 254, 0.1)
`$ai-inner-shadow`	Inner shadow for the AI layer	Blue 50, 10% — rgba(69, 137, 255, 0.1)
`$ai-popover-background`	Background color for the AI explainability popover	White — #ffffff
`$ai-popover-shadow-outer-0-1`	1 of 2 shadow colors for the AI explainability popover	Blue 70, 6% — rgba(0, 67, 206, 0.06)
`$ai-popover-shadow-outer-0-2`	2 of 2 shadow colors for the AI explainability popover	Black 100, 4% — rgba(0, 0, 0, 0.04)
`$ai-skeleton-background`	Skeleton color for AI containers	Blue 20 — #d0e2ff
`$ai-overlay`	Background overlay for AI components	Blue 100, 50% — rgba(0, 17, 65, 0.5)

Chat

Token	Role	Value
`$chat-avatar-bot`	Chat avatar background color for bots	Gray 60 — #6f6f6f
`$chat-avatar-agent`	Chat avatar background color for agents	Gray 80 — #393939
`$chat-avatar-user`	Chat avatar background color for users	Blue 60 — #0f62fe
`$chat-bubble-user`	Chat bubble background color for users	Gray 20 — #e0e0e0
`$chat-bubble-agent`	Chat bubble background color for agents	White — #ffffff
`$chat-bubble-agent-text`	Chat bubble text color for agents	Gray 100 — #161616
`$chat-bubble-border`	Chat bubble border color for agents	Gray 20 — #e0e0e0
`$chat-bubble-user-text`	Chat bubble text color for users	Gray 100 — #161616
`$chat-prompt-background`	Background color for chat prompt input	White — #ffffff
`$chat-prompt-border-start`	Linear gradient start value for chat prompts border	Gray 10 — #f4f4f4
`$chat-prompt-border-end`	Linear gradient end value for chat prompts border	Gray 10, 0% — rgba(244, 244, 244, 0)
`$chat-prompt-text`	Text for chat prompt	Gray 100 — #161616
`$chat-shell-background`	Chat shell background color	White — #ffffff
`$chat-header-background`	Chat header background color	White — #ffffff
`$chat-header-text`	Text / fill for header	Gray 100 — #161616

Chat button

Token	Role	Value
`$chat-button`	Chat quick action button color	Blue 60 — #0f62fe
`$chat-button-hover`	Hover color for $chat-button	Gray 50, 12% — rgba(141, 141, 141, 0.12)
`$chat-button-text-hover`	Text color for hovered chat button	Blue 70 — #0043ce
`$chat-button-active`	Active color for $chat-button	Gray 50, 50% — rgba(141, 141, 141, 0.5)
`$chat-button-selected`	Selected color for $chat-button	Gray 50, 20% — rgba(141, 141, 141, 0.2)
`$chat-button-text-selected`	Text color for selected chat-button	Gray 70 — #525252

Core Tokens