Color – Carbon Design System

Tokens by theme

Core color tokens

Token	Role	Value
`$background`	Default page background	White — #ffffff
`$background-inverse`	High contrast backgrounds; High contrast elements	Gray 80 — #393939
`$background-brand`	Primary interactive color	Blue 60 — #0f62fe
`$interactive`	3:1 AA contrast; Selected elements; Active elements; Accent icons	Blue 60 — #0f62fe
`$button-primary`	Primary interactive color; Primary buttons	Blue 60 — #0f62fe
`$button-secondary`	Secondary interactive color; Secondary button	Gray 80 — #393939
`$button-tertiary`	4.5:1 AA contrast; Tertiary button	Blue 60 — #0f62fe
`$button-danger-primary`	Danger button background; 3:1 AA contrast	Red 60 — #da1e28
`$button-danger-secondary`	Danger button variant; Text; Icon; Border	Red 60 — #da1e28
`$button-separator`	3:1 aa element contrast; Fluid button separator	Gray 20 — #e0e0e0
`$layer-01`	Container background on $background; Secondary page background	Gray 10 — #f4f4f4
`$layer-02`	Container background on $layer-01	White — #ffffff
`$layer-03`	Container background on $layer-02	Gray 10 — #f4f4f4
`$layer-selected-inverse`	4.5:1 aa element contrast; Emphasis elements	Gray 100 — #161616
`$layer-accent-01`	Tertiary background	Gray 20 — #e0e0e0
`$layer-accent-02`	Tertiary background	Gray 20 — #e0e0e0
`$layer-accent-03`	Tertiary background	Gray 20 — #e0e0e0
`$toggle-off`	3:1 aa element contrast	Gray 50 — #8d8d8d
`$border-interactive`	3:1 AA contrast; Selected elements; Active elements; Accent icons	Blue 60 — #0f62fe
`$border-subtle-00`	Subtle border	Gray 20 — #e0e0e0
`$border-subtle-01`	Subtle border	Gray 20 — #e0e0e0
`$border-subtle-02`	“Light” variant elements	Gray 20 — #e0e0e0
`$border-subtle-03`	“Light” variant elements	Gray 20 — #e0e0e0
`$border-strong-01`	3:1 aa element contrast; Medium contrast border	Gray 50 — #8d8d8d
`$border-strong-02`	3:1 aa element contrast; Medium contrast border	Gray 50 — #8d8d8d
`$border-strong-03`	3:1 aa element contrast; Medium contrast border	Gray 50 — #8d8d8d
`$border-inverse`	4.5:1 aa element contrast; High contrast border	Gray 100 — #161616
`$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	White — #ffffff
`$text-helper`	Tertiary text; Help text	Gray 60 — #6f6f6f
`$text-error`	Error message text	Red 60 — #da1e28
`$text-inverse`	Inverse text color	White — #ffffff
`$link-primary`	Primary links	Blue 60 — #0f62fe
`$link-secondary`	Secondary link color for lower contrast backgrounds	Blue 70 — #0043ce
`$link-inverse`	Links on $background-inverse backgrounds	Blue 40 — #78a9ff
`$icon-primary`	Primary icons	Gray 100 — #161616
`$icon-secondary`	Secondary icons	Gray 70 — #525252
`$icon-on-color`	Icons on interactive colors; Icons on non-ui colors	White — #ffffff
`$icon-inverse`	Inverse icon color	White — #ffffff
`$field-01`	Default input fields; Fields on $ui-backgrounds	Gray 10 — #f4f4f4
`$field-02`	“Light” variant input fields; Fields on $ui-01 backgrounds	White — #ffffff
`$field-03`	“Light” variant input fields; Fields on $ui-01 backgrounds	Gray 10 — #f4f4f4
`$focus-inset`	Inverse text color; Inverse icon color	White — #ffffff
`$support-error`	Error	Red 60 — #da1e28
`$support-success`	Success	Green 60 — #198038
`$support-warning`	Warning	Yellow — #f1c21b
`$support-info`	Information	Blue 70 — #0043ce
`$support-error-inverse`	Danger 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
`$overlay`	Background overlay	Gray 100 — #161616 @ 50%

Interactive color tokens

Token	Role	Value
`$focus`	Focus border; Focus underline	Blue 60 — #0f62fe
`$focus-inverse`	Focus on high contrast moments	White — #ffffff
`$button-primary-hover`	$button-primary hover	Blue 60 hover — #0353e9
`$button-secondary-hover`	$button-secondary hover	Gray 80 hover — #4c4c4c
`$button-tertiary-hover`	$button-tertiary hover	Blue 60 hover — #0353e9
`$button-danger-hover`	Danger hover; $support-01 hover	Red 60 hover — #ba1b23
`$button-primary-active`	$button-primary active	Blue 80 — #002d9c
`$button-secondary-active`	$button-secondary active	Gray 60 — #6f6f6f
`$button-tertiary-active`	$button-tertiary active	Blue 80 — #002d9c
`$button-danger-active`	Danger active; $support-error active	Red 80 — #750e13
`$button-disabled`	Disabled elements	Gray 30 — #c6c6c6
`$background-hover`	$background hover; Transparent background hover	Gray 10 hover — #e5e5e5
`$background-selected-hover`	Selected row hover	Gray 20 hover — #cacaca
`$background-inverse-hover`	Hover for $background-inverse	Gray 80 hover — #4c4c4c
`$background-active`	$background active	Gray 30 — #c6c6c6
`$background-selected`	Selected UI elements	Gray 20 — #e0e0e0
`$layer-hover-01`	$layer-01 hover; Transparent background hover	Gray 10 hover — #e5e5e5
`$layer-hover-02`	$layer-02 hover	Gray 10 hover — #e5e5e5
`$layer-hover-03`	$layer-03 hover	Gray 10 hover — #e5e5e5
`$layer-accent-hover-01`	Selected row hover	Gray 20 hover — #cacaca
`$layer-accent-hover-02`	Selected row hover	Gray 20 hover — #cacaca
`$layer-accent-hover-03`	Selected row hover	Gray 20 hover — #cacaca
`$layer-selected-hover-01`	Selected row hover	Gray 20 hover — #cacaca
`$layer-selected-hover-02`	Selected row hover	Gray 20 hover — #cacaca
`$layer-selected-hover-03`	Selected row hover	Gray 20 hover — #cacaca
`$layer-active-01`	$layer-01 active	Gray 30 — #c6c6c6
`$layer-active-02`	$layer-02 active	Gray 30 — #c6c6c6
`$layer-active-03`	$layer-02 active	Gray 30 — #c6c6c6
`$layer-selected-01`	Selected UI elements	Gray 20 — #e0e0e0
`$layer-selected-02`	$layer-02 selected	Gray 20 — #e0e0e0
`$layer-selected-03`	$layer-02 selected	Gray 20 — #e0e0e0
`$layer-accent-active-01`	$layer-accent-01 active	Gray 30 — #c6c6c6
`$layer-accent-active-02`	$layer-accent-02 active	Gray 40 — #a8a8a8
`$layer-accent-active-03`	$layer-accent-03 active	Gray 40 — #a8a8a8
`$layer-selected-disabled`	Disabled selected layer	Gray 50 — #8d8d8d
`$field-hover-01`	$field-01 hover; Transparent background hover	Gray 10 hover — #e5e5e5
`$field-hover-02`	$field-02 hover; Transparent background hover	Gray 10 hover — #e5e5e5
`$field-hover-03`	$field-02 hover; Transparent background hover	Gray 10 hover — #e5e5e5
`$highlight`	$interactive-01 highlight	Blue 20 — #d0e2ff
`$skeleton-background`	Skeleton state of graphics	Gray 10 hover — #e5e5e5
`$skeleton-element`	Skeleton state of texts	Gray 30 — #c6c6c6
`$link-primary-hover`	$button-primary text hover	Blue 70 — #0043ce
`$link-visited`	Visited links	Purple 60 — #8a3ffc
`$border-subtle-selected-01`	$border-subtle-01 selected	Gray 30 — #c6c6c6
`$border-subtle-selected-02`	$border-subtle-02 selected	Gray 30 — #c6c6c6
`$border-subtle-selected-03`	$border-subtle-03 selected	Gray 30 — #c6c6c6
`$border-disabled`	Disabled border	Gray 30 — #c6c6c6
`$text-disabled`	Disabled text	Gray 30 — #c6c6c6
`$icon-disabled`	Disabled icons	Gray 30 — #c6c6c6
`$icon-on-color-disabled`	Disabled icon	Gray 50 — #8d8d8d
`$text-on-color-disabled`	Disabled text	Gray 50 — #8d8d8d

Edit this page on GitHub

Color: Overview

Color: Code