Tokens by theme

Core color tokens

TokenRoleValue
$ui-background
  • Default page background
  • White
  • #ffffff
$interactive-01
  • Primary interactive color;
  • Primary buttons
  • Blue 60
  • #0062ff
$interactive-02
  • Secondary interactive color;
  • Secondary button
  • Gray 100
  • #171717
$interactive-03
  • 4.5:1 AA contrast;
  • Tertiary button
  • Blue 60
  • #0062ff
$interactive-04
  • 3:1 AA contrast;
  • Selected elements;
  • Active elements;
  • Accent icons
  • Blue 60
  • #0062ff
$ui-01
  • Primary container background;
  • Secondary page background
  • Gray 10
  • #f3f3f3
$ui-02
  • Primary page background;
  • Secondary container background
  • White
  • #ffffff
$ui-03
  • Subtle border;
  • Tertiary background color
  • Gray 20
  • #dcdcdc
$ui-04
  • 3:1 AA element contrast;
  • Medium contrast border
  • Gray 50
  • #8c8c8c
$ui-05
  • 4.5:1 AA element contrast;
  • High contrast border;
  • Emphasis elements
  • Gray 100
  • #171717
$text-01
  • Primary text;
  • Body copy;
  • Headers;
  • Hover text color for text-02
  • Gray 100
  • #171717
$text-02
  • Secondary text;
  • Input labels;
  • Help text
  • Gray 70
  • #565656
$text-03
  • Placeholder text
  • Gray 50
  • #8c8c8c
$text-04
  • Text on interactive colors
  • White
  • #ffffff
$link-01
  • Primary links;
  • Ghost button
  • Blue 60
  • #0062ff
$icon-01
  • Primary icons
  • Gray 100
  • #171717
$icon-02
  • Secondary icons
  • Gray 70
  • #565656
$icon-03
  • Tertiary icons;
  • Icons on interactive colors;
  • Icons on non-ui colors
  • White
  • #ffffff
$field-01
  • Default input fields;
  • Field color on $ui-backgrounds
  • Gray 10
  • #f3f3f3
$field-02
  • Input field color on $ui-02 backgrounds
  • White
  • #ffffff
$inverse-01
  • Inverse text color;
  • Inverse icon color
  • White
  • #ffffff
$inverse-02
  • High contrast backgrounds;
  • High contrast elements
  • Gray 80
  • #3d3d3d
$support-01
  • Error
  • Red 60
  • #da1e28
$support-02
  • Success
  • Green 50
  • #24a148
$support-03
  • Warning
  • Yellow
  • #fdd13a
$support-04
  • Information
  • Blue 70
  • #054ada
$overlay-01
  • Background overlay
  • Gray 100
  • #171717 @ 50%

Interactive color tokens

TokenRoleValue
$focus
  • Focus border;
  • Focus underline
  • Blue 60
  • #0062ff
$hover-primary
  • $interactive-01 hover
  • Blue 60 hover
  • #0353e9
$hover-primary-text
  • $interactive-01 text hover
  • Blue 70
  • #054ada
$hover-secondary
  • $interactive-02 hover
  • Gray 80 hover
  • #4c4c4c
$hover-tertiary
  • $interactive-03 hover;
  • $inverse-01 hover
  • Blue 60 hover
  • #0353e9
$hover-ui
  • $ui-01 hover;
  • $ui-02 hover;
  • Transparent background hover
  • Gray 10 hover
  • #e5e5e5
$hover-selected-ui
  • data table selected row hover
  • Gray 20 Hover
  • #cacaca
$hover-danger
  • Danger hover;
  • $support-01 hover
  • Red 60 hover
  • #ba1b23
$hover-row
  • Row hover
  • Gray 10 hover
  • #e5e5e5
$active-primary
  • $interactive-01 active
  • Blue 80
  • #0530ad
$active-secondary
  • $interactive-02 active;
  • $inverse-01 active
  • Gray 60
  • #6f6f6f
$active-tertiary
  • $interactive-03 active
  • Blue 80
  • #0530ad
$active-ui
  • $ui-01 active;
  • $ui-02 active
  • Gray 30
  • #bebebe
$active-danger
  • Danger active;
  • $support-01 active
  • Red 80
  • #750e13
$selected-ui
  • Selected UI elements
  • Gray 20
  • #dcdcdc
$highlight
  • $interactive-01 highlight
  • Blue 20
  • #C9deff
$visited-link
  • Visited links
  • Purple 60
  • #8a3ffc
$disabled-01
  • Disabled fields;
  • Disabled backgrounds;
  • Disabled border
  • Gray 10
  • #f3f3f3
$disabled-02
  • Disabled elements on $disabled-01;
  • Disabled label;
  • Disabled text on $disabled-01;
  • Disabled icons;
  • Disabled border
  • Gray 30
  • #bebebe
$disabled-03
  • Disabled text on $disabled-02;
  • Disabled icons on $disabled-02
  • Gray 50
  • #8c8c8c

Color and accessibility

Check out the accessibility section for complete guidance on color and accessibility in Carbon.