Carbon Design System

Tokens by theme

Background

Token	Role	Value
`$background`	Default page background; UI Shell base color	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-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 — #cacaca
`$layer-selected-hover-02`	Hover color for $layer-selected-02	Gray 20 hover — #cacaca
`$layer-selected-hover-03`	Hover color for $layer-selected-03	Gray 20 hover — #cacaca
`$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

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%

Button

Token	Role	Value
`$button-primary`	Primary button color	Blue 60 — #0f62fe
`$button-primary-hover`	Hover color for $button-primary	Blue 60 hover — #0353e9
`$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	Gray 80 hover — #4c4c4c
`$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	Blue 60 hover — #0353e9
`$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	Red 60 hover — #ba1b23
`$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

Support

Token	Role	Value
`$support-error`	Error; Invalid state	Red 60 — #da1e28
`$support-success`	Success; On	Green 50 — #24a148
`$support-warning`	Warning; Caution	Yellow — #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 — #f1c21b
`$support-info-inverse`	Information in high contrast moments	Blue 50 — #4589ff

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

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	Gray 20 hover — #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	Cool gray 20 hover — #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	Warm gray 20 hover — #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	Red 20 hover — #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	Magenta 20 hover — #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	Purple 20 hover — #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	Blue 20 hover — #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	Cyan 20 hover — #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	Teal 20 hover — #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	Green 20 hover — #74e792
`$tag-border-green`	Green tag border for operational tag	Green 40 — #42be65

AI

Token	Role	Value
`$ai-aura-start`	Linear gradient start value for large AI layers	Blue 50, 10% — #4589ff @ 10%
`$ai-aura-start-sm`	Linear gradient start value for small AI layers	Blue 50, 16% — #4589ff @ 16%
`$ai-aura-end`	Linear gradient start value for all AI layers	White, 0% — #ffffff @ 0%
`$ai-aura-hover-start`	Linear gradient start value for the AI aura hover	Blue 50, 32% — #4589ff
`$ai-aura-hover-end`	Linear gradient end value for the AI aura hover	White, 0% — #ffffff @ 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% — #a6c8ff @ 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% — #0f62fe @ 10%
`$ai-inner-shadow`	Inner shadow for the AI layer	Blue 50, 10% — #4589ff @ 10%
`$ai-popover-background`	Background color for the AI explainability popover	White — #ffffff
`$ai-popover-shadow-outer-01`	1 of 2 shadow colors for the AI explainability popover	Blue 70, 6% — #0043ce @ 6%
`$ai-popover-shadow-outer-02`	2 of 2 shadow colors for the AI explainability popover	Black, 4% — #000000 @ 4%
`$ai-skeleton-element`	Skeleton color for AI text and UI elements	Blue 50 — #4589ff
`$ai-skeleton-background`	Skeleton color for AI containers	Blue 20 — #d0e2ff
`$ai-overlay`	Background overlay for AI components	Blue 100, 50% — #001141 @ 50%

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-border`	Chat bubble border color for agents	Gray 20 — #e0e0e0
`$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% — #f4f4f4 @ 0%
`$chat-shell-background`	Chat shell background color	White — #ffffff
`$chat-header-background`	Chat header background color	White — #ffffff

Chat button

Token	Role	Value
`$chat-button`	Chat quick action button color	$link-primary — #0f62fe
`$chat-button-hover`	Hover color for $chat-button	$background-hover — #8d8d8d @ 12%
`$chat-button-text-hover`	Text color for hovered chat button	$link-primary-hover — #0043ce
`$chat-button-active`	Active color for $chat-button	$background-active — #8d8d8d @ 50%
`$chat-button-selected`	Selected color for $chat-button	$background-selected — #8d8d8d @ 20%
`$chat-button-text-selected`	Text color for selected chat-button	$text-secondary — #525252

Edit this page on GitHub

Color: Usage

Color: Code