Color – 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% opacity — #8d8d8d @ 12%
`$background-active`	Active color for $background	Gray 50, 32% opacity — #8d8d8d @ 32%
`$background-selected`	Selected color for $background	Gray 50, 20% opacity — #8d8d8d @ 20%
`$background-selected-hover`	Hover color for $background-selected	Gray 50, 32% opacity — #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 — #e5e5e5
`$layer-hover-02`	Hover color for $layer-02	Gray 10 hover — #e5e5e5
`$layer-hover-03`	Hover color for $layer-03	Gray 10 hover — #e5e5e5
`$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 30 — #c6c6c6
`$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 — #e5e5e5
`$field-hover-02`	Hover color for $field-02	Gray 10 hover — #e5e5e5
`$field-hover-03`	Hover color for $field-03	Gray 10 hover — #e5e5e5

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 20 — #e0e0e0
`$border-subtle-02`	Subtle borders paired with $layer-02	Gray 20 — #e0e0e0
`$border-subtle-03`	Subtle borders paired with $layer-03	Gray 20 — #e0e0e0
`$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-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% opacity — #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-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-inverse`	Inverse icon color	White — #ffffff
`$icon-disabled`	Disabled icon color	Gray 100, 25% opacity — #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 60 — #198038
`$support-warning`	Warning; Caution	Yellow — #f1c21b
`$support-info`	Information	Blue 70 — #0043ce
`$support-success-inverse`	Success in high contrast moments	Green 40 — #42be65
`$support-warning-inverse`	Warning in high contrast moments	Yellow — #f1c21b
`$support-error-inverse`	Error in high contrast moments	Red 50 — #fa4d56
`$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 — #161616 @ 50%
`$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: Overview