Carbon Design System

Tokens are a method of applying color in a consistent, reusable, and scalable way. They are used in place of hard coded values, like hex codes.

Core Tokens
Component Tokens
AI Tokens

Core Tokens

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
Layer
Layer accent
Field
Border
Text
Link
Syntax
Icon
Support
Focus
Miscellaneous

Background

Token	Role	Value
`$background`	Default page background; UI Shell base color	White — #ffffff
`$layer-background-01`	Default page background; Automatically matches contextual layer background	White — #ffffff
`$background-hover`	Hover color for $background; Hover color for transparent backgrounds	Gray 50, 12% — #8d8d8d @ 12%
`$background-active`	Active color for $background	Gray 50, 50% — #8d8d8d @ 50%
`$background-selected`	Selected color for $background	Gray 50, 20% — #8d8d8d @ 20%
`$background-selected-hover`	Hover color for $background-selected	Gray 50, 32% — #8d8d8d @ 32%
`$background-inverse`	High contrast backgrounds; High contrast elements	Gray 80 — #393939
`$background-inverse-hover`	Hover color for $background-inverse	Gray 80 hover — #4c4c4c
`$background-brand`	Feature background color	Blue 60 — #0f62fe

Layer

Token	Role	Value
`$layer-01`	Container color on $background; Secondary page background	Gray 10 — #f4f4f4
`$layer-02`	Container color on $layer-01	White — #ffffff
`$layer-03`	Container color on $layer-02	Gray 10 — #f4f4f4
`$layer-background-02`	Container color on $layer-background-01; Automatically matches contextual layer background	Gray 10 — #f4f4f4
`$layer-background-03`	Container color on $layer-background-02; Automatically matches contextual layer background	White — #ffffff
`$layer-hover-01`	Hover color for $layer-01	Gray 10 hover — #e8e8e8
`$layer-hover-02`	Hover color for $layer-02	Gray 10 hover — #e8e8e8
`$layer-hover-03`	Hover color for $layer-03	Gray 10 hover — #e8e8e8
`$layer-active-01`	Active color for $layer-01	Gray 30 — #c6c6c6
`$layer-active-02`	Active color for $layer-02	Gray 30 — #c6c6c6
`$layer-active-03`	Active color for $layer-03	Gray 30 — #c6c6c6
`$layer-selected-01`	Selected color for $layer-01	Gray 20 — #e0e0e0
`$layer-selected-02`	Selected color for $layer-02	Gray 20 — #e0e0e0
`$layer-selected-03`	Selected color for $layer-03	Gray 20 — #e0e0e0
`$layer-selected-hover-01`	Hover color for $layer-selected-01	Gray 20 hover — #d1d1d1
`$layer-selected-hover-02`	Hover color for $layer-selected-02	Gray 20 hover — #d1d1d1
`$layer-selected-hover-03`	Hover color for $layer-selected-03	Gray 20 hover — #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-01`	Tertiary background paired with $layer-01	Gray 20 — #e0e0e0
`$layer-accent-02`	Tertiary background paired with $layer-02	Gray 20 — #e0e0e0
`$layer-accent-03`	Tertiary background paired with $layer-03	Gray 20 — #e0e0e0
`$layer-accent-hover-01`	Hover color for $layer-accent-01	Gray 20 hover — #cacaca
`$layer-accent-hover-02`	Hover color for $layer-accent-02	Gray 20 hover — #cacaca
`$layer-accent-hover-03`	Hover color for $layer-accent-03	Gray 20 hover — #cacaca
`$layer-accent-active-01`	Active color for $layer-accent-01	Gray 40 — #a8a8a8
`$layer-accent-active-02`	Active color for $layer-accent-02	Gray 40 — #a8a8a8
`$layer-accent-active-03`	Active color for $layer-accent-03	Gray 40 — #a8a8a8

Field

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

Border

Token	Role	Value
`$border-interactive`	3:1 AA contrast; Selected borders; Active borders	Blue 60 — #0f62fe
`$border-subtle-00`	Subtle borders paired with $background	Gray 20 — #e0e0e0
`$border-subtle-01`	Subtle borders paired with $layer-01	Gray 30 — #c6c6c6
`$border-subtle-02`	Subtle borders paired with $layer-02	Gray 20 — #e0e0e0
`$border-subtle-03`	Subtle borders paired with $layer-03	Gray 30 — #c6c6c6
`$border-subtle-selected-01`	Selected color for $border-subtle-01	Gray 30 — #c6c6c6
`$border-subtle-selected-02`	Selected color for $border-subtle-02	Gray 30 — #c6c6c6
`$border-subtle-selected-03`	Selected color for $border-subtle-03	Gray 30 — #c6c6c6
`$border-strong-01`	Medium contrast border; Border-bottom paired with $field-01; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-02`	Medium contrast border; Border-bottom paired with $field-02; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-03`	Medium contrast border; Border-bottom paired with $field-03; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-tile-01`	Operable tile indicator paired with $layer-01	Gray 30 — #c6c6c6
`$border-tile-02`	Operable tile indicator paired with $layer-02	Gray 40 — #a8a8a8
`$border-tile-03`	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 40 — #a8a8a8
`$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% — #161616 – 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 — #8a3ffc
`$syntax-definition-keyword`	Definition keywords	Cyan 70 — #00bcd4
`$syntax-module-keyword`	Module/import keywords	Purple 70 — #8a3ffc
`$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 — #00bcd4
`$syntax-attribute-name`	Attribute name	Cyan 70 — #00bcd4
`$syntax-property-name`	Property name	Cyan 70 — #00bcd4
`$syntax-tag`	Tag delimiters	Teal 60 — #009d9a
`$syntax-tag-name`	Tag name	Teal 60 — #009d9a
`$syntax-type`	Type	Teal 60 — #009d9a
`$syntax-type-name`	Type name	Teal 60 — #009d9a
`$syntax-class-name`	Class name	Teal 60 — #009d9a
`$syntax-namespace`	Namespace	Teal 60 — #009d9a
`$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 — #009d9a
`$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 — #a56eff
`$syntax-regexp`	RegExp	Purple 70 — #8a3ffc
`$syntax-escape`	Escape sequence	Cool Gray 80 — #8d8d8d
`$syntax-url`	URL literal	Cool Gray 80 — #8d8d8d
`$syntax-color`	Color literal	Gray 100 — #161616
`$syntax-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-deref-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-arithmetic-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-logic-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-bitwise-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-compare-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-update-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-definition-operator`	Color literal	Cyan 70 — #0072c3
`$syntax-type-operator`	Color literal	Teal 60 — #009d9a
`$syntax-control-operator`	Color literal	Purple 60 — #8a3ffc
`$syntax-modifier`	Color literal	Magenta 60 — #d02670
`$syntax-punctuation`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-separator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-bracket`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-angle-bracket`	Color literal	Cool Gray 60 — #6f6f6f
`$syntax-square-bracket`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-paren`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-brace`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-content`	Color literal	Gray 100 — #161616
`$syntax-list`	Color literal	Gray 100 — #161616
`$syntax-emphasis`	Color literal	Gray 100 — #161616
`$syntax-strong`	Color literal	Gray 100 — #161616
`$syntax-monospace`	Color literal	Gray 100 — #161616
`$syntax-strikethrough`	Color literal	Gray 100 — #161616
`$syntax-heading`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-1`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-2`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-3`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-4`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-5`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-6`	Color literal	Cyan 70 — #0072c3
`$syntax-content-separator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-quote`	Color literal	Gray 60 — #6f6f6f
`$syntax-link`	Color literal	Blue 60 — #0f62fe
`$syntax-invalid`	Color literal	Red 60 — #da1e28
`$syntax-meta`	Color literal	Green 60 — #24a148
`$syntax-document-meta`	Color literal	Green 60 — #24a148
`$syntax-annotation`	Color literal	Teal 60 — #009d9a
`$syntax-processing-instruction`	Color literal	Purple 60 — #8a3ffc
`$syntax-definition`	Color literal	Cyan 70 — #0072c3
`$syntax-constant`	Color literal	Blue 60 — #0f62fe
`$syntax-function`	Color literal	Yellow 60 — #f1c21b
`$syntax-standard`	Color literal	Blue 60 — #0f62fe
`$syntax-local`	Color literal	Blue 60 — #0f62fe
`$syntax-special`	Color literal	Blue 60 — #0f62fe
`$syntax-deleted`	Color literal	Red 20 — #ffd7d9
`$syntax-inserted`	Color literal	Green 20 — #a7f0ba

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% — #161616 – 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 — #000000 @ 60%
`$skeleton-element`	Skeleton color for text and UI elements	Gray 30 — #c6c6c6
`$skeleton-background`	Skeleton color for containers	Gray 10 hover — #e5e5e5

Component Tokens

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
Content switcher
Tag
Notification

Background

Token	Role	Value
`$background`	Default page background; UI Shell base color	White — #ffffff
`$layer-background-01`	Default page background; Automatically matches contextual layer background	White — #ffffff
`$background-hover`	Hover color for $background; Hover color for transparent backgrounds	Gray 50, 12% — #8d8d8d @ 12%
`$background-active`	Active color for $background	Gray 50, 50% — #8d8d8d @ 50%
`$background-selected`	Selected color for $background	Gray 50, 20% — #8d8d8d @ 20%
`$background-selected-hover`	Hover color for $background-selected	Gray 50, 32% — #8d8d8d @ 32%
`$background-inverse`	High contrast backgrounds; High contrast elements	Gray 80 — #393939
`$background-inverse-hover`	Hover color for $background-inverse	Gray 80 hover — #4c4c4c
`$background-brand`	Feature background color	Blue 60 — #0f62fe

Layer

Token	Role	Value
`$layer-01`	Container color on $background; Secondary page background	Gray 10 — #f4f4f4
`$layer-02`	Container color on $layer-01	White — #ffffff
`$layer-03`	Container color on $layer-02	Gray 10 — #f4f4f4
`$layer-background-02`	Container color on $layer-background-01; Automatically matches contextual layer background	Gray 10 — #f4f4f4
`$layer-background-03`	Container color on $layer-background-02; Automatically matches contextual layer background	White — #ffffff
`$layer-hover-01`	Hover color for $layer-01	Gray 10 hover — #e8e8e8
`$layer-hover-02`	Hover color for $layer-02	Gray 10 hover — #e8e8e8
`$layer-hover-03`	Hover color for $layer-03	Gray 10 hover — #e8e8e8
`$layer-active-01`	Active color for $layer-01	Gray 30 — #c6c6c6
`$layer-active-02`	Active color for $layer-02	Gray 30 — #c6c6c6
`$layer-active-03`	Active color for $layer-03	Gray 30 — #c6c6c6
`$layer-selected-01`	Selected color for $layer-01	Gray 20 — #e0e0e0
`$layer-selected-02`	Selected color for $layer-02	Gray 20 — #e0e0e0
`$layer-selected-03`	Selected color for $layer-03	Gray 20 — #e0e0e0
`$layer-selected-hover-01`	Hover color for $layer-selected-01	Gray 20 hover — #d1d1d1
`$layer-selected-hover-02`	Hover color for $layer-selected-02	Gray 20 hover — #d1d1d1
`$layer-selected-hover-03`	Hover color for $layer-selected-03	Gray 20 hover — #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-01`	Tertiary background paired with $layer-01	Gray 20 — #e0e0e0
`$layer-accent-02`	Tertiary background paired with $layer-02	Gray 20 — #e0e0e0
`$layer-accent-03`	Tertiary background paired with $layer-03	Gray 20 — #e0e0e0
`$layer-accent-hover-01`	Hover color for $layer-accent-01	Gray 20 hover — #cacaca
`$layer-accent-hover-02`	Hover color for $layer-accent-02	Gray 20 hover — #cacaca
`$layer-accent-hover-03`	Hover color for $layer-accent-03	Gray 20 hover — #cacaca
`$layer-accent-active-01`	Active color for $layer-accent-01	Gray 40 — #a8a8a8
`$layer-accent-active-02`	Active color for $layer-accent-02	Gray 40 — #a8a8a8
`$layer-accent-active-03`	Active color for $layer-accent-03	Gray 40 — #a8a8a8

Field

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

Border

Token	Role	Value
`$border-interactive`	3:1 AA contrast; Selected borders; Active borders	Blue 60 — #0f62fe
`$border-subtle-00`	Subtle borders paired with $background	Gray 20 — #e0e0e0
`$border-subtle-01`	Subtle borders paired with $layer-01	Gray 30 — #c6c6c6
`$border-subtle-02`	Subtle borders paired with $layer-02	Gray 20 — #e0e0e0
`$border-subtle-03`	Subtle borders paired with $layer-03	Gray 30 — #c6c6c6
`$border-subtle-selected-01`	Selected color for $border-subtle-01	Gray 30 — #c6c6c6
`$border-subtle-selected-02`	Selected color for $border-subtle-02	Gray 30 — #c6c6c6
`$border-subtle-selected-03`	Selected color for $border-subtle-03	Gray 30 — #c6c6c6
`$border-strong-01`	Medium contrast border; Border-bottom paired with $field-01; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-02`	Medium contrast border; Border-bottom paired with $field-02; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-03`	Medium contrast border; Border-bottom paired with $field-03; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-tile-01`	Operable tile indicator paired with $layer-01	Gray 30 — #c6c6c6
`$border-tile-02`	Operable tile indicator paired with $layer-02	Gray 40 — #a8a8a8
`$border-tile-03`	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 40 — #a8a8a8
`$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% — #161616 – 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 — #8a3ffc
`$syntax-definition-keyword`	Definition keywords	Cyan 70 — #00bcd4
`$syntax-module-keyword`	Module/import keywords	Purple 70 — #8a3ffc
`$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 — #00bcd4
`$syntax-attribute-name`	Attribute name	Cyan 70 — #00bcd4
`$syntax-property-name`	Property name	Cyan 70 — #00bcd4
`$syntax-tag`	Tag delimiters	Teal 60 — #009d9a
`$syntax-tag-name`	Tag name	Teal 60 — #009d9a
`$syntax-type`	Type	Teal 60 — #009d9a
`$syntax-type-name`	Type name	Teal 60 — #009d9a
`$syntax-class-name`	Class name	Teal 60 — #009d9a
`$syntax-namespace`	Namespace	Teal 60 — #009d9a
`$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 — #009d9a
`$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 — #a56eff
`$syntax-regexp`	RegExp	Purple 70 — #8a3ffc
`$syntax-escape`	Escape sequence	Cool Gray 80 — #8d8d8d
`$syntax-url`	URL literal	Cool Gray 80 — #8d8d8d
`$syntax-color`	Color literal	Gray 100 — #161616
`$syntax-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-deref-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-arithmetic-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-logic-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-bitwise-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-compare-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-update-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-definition-operator`	Color literal	Cyan 70 — #0072c3
`$syntax-type-operator`	Color literal	Teal 60 — #009d9a
`$syntax-control-operator`	Color literal	Purple 60 — #8a3ffc
`$syntax-modifier`	Color literal	Magenta 60 — #d02670
`$syntax-punctuation`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-separator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-bracket`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-angle-bracket`	Color literal	Cool Gray 60 — #6f6f6f
`$syntax-square-bracket`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-paren`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-brace`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-content`	Color literal	Gray 100 — #161616
`$syntax-list`	Color literal	Gray 100 — #161616
`$syntax-emphasis`	Color literal	Gray 100 — #161616
`$syntax-strong`	Color literal	Gray 100 — #161616
`$syntax-monospace`	Color literal	Gray 100 — #161616
`$syntax-strikethrough`	Color literal	Gray 100 — #161616
`$syntax-heading`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-1`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-2`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-3`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-4`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-5`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-6`	Color literal	Cyan 70 — #0072c3
`$syntax-content-separator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-quote`	Color literal	Gray 60 — #6f6f6f
`$syntax-link`	Color literal	Blue 60 — #0f62fe
`$syntax-invalid`	Color literal	Red 60 — #da1e28
`$syntax-meta`	Color literal	Green 60 — #24a148
`$syntax-document-meta`	Color literal	Green 60 — #24a148
`$syntax-annotation`	Color literal	Teal 60 — #009d9a
`$syntax-processing-instruction`	Color literal	Purple 60 — #8a3ffc
`$syntax-definition`	Color literal	Cyan 70 — #0072c3
`$syntax-constant`	Color literal	Blue 60 — #0f62fe
`$syntax-function`	Color literal	Yellow 60 — #f1c21b
`$syntax-standard`	Color literal	Blue 60 — #0f62fe
`$syntax-local`	Color literal	Blue 60 — #0f62fe
`$syntax-special`	Color literal	Blue 60 — #0f62fe
`$syntax-deleted`	Color literal	Red 20 — #ffd7d9
`$syntax-inserted`	Color literal	Green 20 — #a7f0ba

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% — #161616 – 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 — #000000 @ 60%
`$skeleton-element`	Skeleton color for text and UI elements	Gray 30 — #c6c6c6
`$skeleton-background`	Skeleton color for containers	Gray 10 hover — #e5e5e5

AI Tokens

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
Chat
Chat button

Background

Token	Role	Value
`$background`	Default page background; UI Shell base color	White — #ffffff
`$layer-background-01`	Default page background; Automatically matches contextual layer background	White — #ffffff
`$background-hover`	Hover color for $background; Hover color for transparent backgrounds	Gray 50, 12% — #8d8d8d @ 12%
`$background-active`	Active color for $background	Gray 50, 50% — #8d8d8d @ 50%
`$background-selected`	Selected color for $background	Gray 50, 20% — #8d8d8d @ 20%
`$background-selected-hover`	Hover color for $background-selected	Gray 50, 32% — #8d8d8d @ 32%
`$background-inverse`	High contrast backgrounds; High contrast elements	Gray 80 — #393939
`$background-inverse-hover`	Hover color for $background-inverse	Gray 80 hover — #4c4c4c
`$background-brand`	Feature background color	Blue 60 — #0f62fe

Layer

Token	Role	Value
`$layer-01`	Container color on $background; Secondary page background	Gray 10 — #f4f4f4
`$layer-02`	Container color on $layer-01	White — #ffffff
`$layer-03`	Container color on $layer-02	Gray 10 — #f4f4f4
`$layer-background-02`	Container color on $layer-background-01; Automatically matches contextual layer background	Gray 10 — #f4f4f4
`$layer-background-03`	Container color on $layer-background-02; Automatically matches contextual layer background	White — #ffffff
`$layer-hover-01`	Hover color for $layer-01	Gray 10 hover — #e8e8e8
`$layer-hover-02`	Hover color for $layer-02	Gray 10 hover — #e8e8e8
`$layer-hover-03`	Hover color for $layer-03	Gray 10 hover — #e8e8e8
`$layer-active-01`	Active color for $layer-01	Gray 30 — #c6c6c6
`$layer-active-02`	Active color for $layer-02	Gray 30 — #c6c6c6
`$layer-active-03`	Active color for $layer-03	Gray 30 — #c6c6c6
`$layer-selected-01`	Selected color for $layer-01	Gray 20 — #e0e0e0
`$layer-selected-02`	Selected color for $layer-02	Gray 20 — #e0e0e0
`$layer-selected-03`	Selected color for $layer-03	Gray 20 — #e0e0e0
`$layer-selected-hover-01`	Hover color for $layer-selected-01	Gray 20 hover — #d1d1d1
`$layer-selected-hover-02`	Hover color for $layer-selected-02	Gray 20 hover — #d1d1d1
`$layer-selected-hover-03`	Hover color for $layer-selected-03	Gray 20 hover — #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-01`	Tertiary background paired with $layer-01	Gray 20 — #e0e0e0
`$layer-accent-02`	Tertiary background paired with $layer-02	Gray 20 — #e0e0e0
`$layer-accent-03`	Tertiary background paired with $layer-03	Gray 20 — #e0e0e0
`$layer-accent-hover-01`	Hover color for $layer-accent-01	Gray 20 hover — #cacaca
`$layer-accent-hover-02`	Hover color for $layer-accent-02	Gray 20 hover — #cacaca
`$layer-accent-hover-03`	Hover color for $layer-accent-03	Gray 20 hover — #cacaca
`$layer-accent-active-01`	Active color for $layer-accent-01	Gray 40 — #a8a8a8
`$layer-accent-active-02`	Active color for $layer-accent-02	Gray 40 — #a8a8a8
`$layer-accent-active-03`	Active color for $layer-accent-03	Gray 40 — #a8a8a8

Field

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

Border

Token	Role	Value
`$border-interactive`	3:1 AA contrast; Selected borders; Active borders	Blue 60 — #0f62fe
`$border-subtle-00`	Subtle borders paired with $background	Gray 20 — #e0e0e0
`$border-subtle-01`	Subtle borders paired with $layer-01	Gray 30 — #c6c6c6
`$border-subtle-02`	Subtle borders paired with $layer-02	Gray 20 — #e0e0e0
`$border-subtle-03`	Subtle borders paired with $layer-03	Gray 30 — #c6c6c6
`$border-subtle-selected-01`	Selected color for $border-subtle-01	Gray 30 — #c6c6c6
`$border-subtle-selected-02`	Selected color for $border-subtle-02	Gray 30 — #c6c6c6
`$border-subtle-selected-03`	Selected color for $border-subtle-03	Gray 30 — #c6c6c6
`$border-strong-01`	Medium contrast border; Border-bottom paired with $field-01; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-02`	Medium contrast border; Border-bottom paired with $field-02; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-03`	Medium contrast border; Border-bottom paired with $field-03; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-tile-01`	Operable tile indicator paired with $layer-01	Gray 30 — #c6c6c6
`$border-tile-02`	Operable tile indicator paired with $layer-02	Gray 40 — #a8a8a8
`$border-tile-03`	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 40 — #a8a8a8
`$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% — #161616 – 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 — #8a3ffc
`$syntax-definition-keyword`	Definition keywords	Cyan 70 — #00bcd4
`$syntax-module-keyword`	Module/import keywords	Purple 70 — #8a3ffc
`$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 — #00bcd4
`$syntax-attribute-name`	Attribute name	Cyan 70 — #00bcd4
`$syntax-property-name`	Property name	Cyan 70 — #00bcd4
`$syntax-tag`	Tag delimiters	Teal 60 — #009d9a
`$syntax-tag-name`	Tag name	Teal 60 — #009d9a
`$syntax-type`	Type	Teal 60 — #009d9a
`$syntax-type-name`	Type name	Teal 60 — #009d9a
`$syntax-class-name`	Class name	Teal 60 — #009d9a
`$syntax-namespace`	Namespace	Teal 60 — #009d9a
`$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 — #009d9a
`$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 — #a56eff
`$syntax-regexp`	RegExp	Purple 70 — #8a3ffc
`$syntax-escape`	Escape sequence	Cool Gray 80 — #8d8d8d
`$syntax-url`	URL literal	Cool Gray 80 — #8d8d8d
`$syntax-color`	Color literal	Gray 100 — #161616
`$syntax-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-deref-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-arithmetic-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-logic-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-bitwise-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-compare-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-update-operator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-definition-operator`	Color literal	Cyan 70 — #0072c3
`$syntax-type-operator`	Color literal	Teal 60 — #009d9a
`$syntax-control-operator`	Color literal	Purple 60 — #8a3ffc
`$syntax-modifier`	Color literal	Magenta 60 — #d02670
`$syntax-punctuation`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-separator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-bracket`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-angle-bracket`	Color literal	Cool Gray 60 — #6f6f6f
`$syntax-square-bracket`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-paren`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-brace`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-content`	Color literal	Gray 100 — #161616
`$syntax-list`	Color literal	Gray 100 — #161616
`$syntax-emphasis`	Color literal	Gray 100 — #161616
`$syntax-strong`	Color literal	Gray 100 — #161616
`$syntax-monospace`	Color literal	Gray 100 — #161616
`$syntax-strikethrough`	Color literal	Gray 100 — #161616
`$syntax-heading`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-1`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-2`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-3`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-4`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-5`	Color literal	Cyan 70 — #0072c3
`$syntax-heading-6`	Color literal	Cyan 70 — #0072c3
`$syntax-content-separator`	Color literal	Cool Gray 80 — #8d8d8d
`$syntax-quote`	Color literal	Gray 60 — #6f6f6f
`$syntax-link`	Color literal	Blue 60 — #0f62fe
`$syntax-invalid`	Color literal	Red 60 — #da1e28
`$syntax-meta`	Color literal	Green 60 — #24a148
`$syntax-document-meta`	Color literal	Green 60 — #24a148
`$syntax-annotation`	Color literal	Teal 60 — #009d9a
`$syntax-processing-instruction`	Color literal	Purple 60 — #8a3ffc
`$syntax-definition`	Color literal	Cyan 70 — #0072c3
`$syntax-constant`	Color literal	Blue 60 — #0f62fe
`$syntax-function`	Color literal	Yellow 60 — #f1c21b
`$syntax-standard`	Color literal	Blue 60 — #0f62fe
`$syntax-local`	Color literal	Blue 60 — #0f62fe
`$syntax-special`	Color literal	Blue 60 — #0f62fe
`$syntax-deleted`	Color literal	Red 20 — #ffd7d9
`$syntax-inserted`	Color literal	Green 20 — #a7f0ba

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% — #161616 – 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 — #000000 @ 60%
`$skeleton-element`	Skeleton color for text and UI elements	Gray 30 — #c6c6c6
`$skeleton-background`	Skeleton color for containers	Gray 10 hover — #e5e5e5

Edit this page on GitHub

Color: Usage

Color: Code