Core color tokens
| Token | Role | Value |
|---|
$ui-background | | |
$interactive-01 | - Primary interactive color;
- Primary buttons
| |
$interactive-02 | - Secondary interactive color;
- Secondary button
| |
$interactive-03 | - 4.5:1 AA contrast;
- Tertiary button
| |
$interactive-04 | - 3:1 AA contrast;
- Selected elements;
- Active elements;
- Accent icons
| |
$ui-01 | - Primary container background;
- Secondary page background
| |
$ui-02 | - Primary page background;
- Secondary container background
| |
$ui-03 | - Subtle border;
- Tertiary background color
| |
$ui-04 | - 3:1 AA element contrast;
- Medium contrast border
| |
$ui-05 | - 4.5:1 AA element contrast;
- High contrast border;
- Emphasis elements
| |
$text-01 | - Primary text;
- Body copy;
- Headers;
- Hover text color for text-02
| |
$text-02 | - Secondary text;
- Input labels;
- Help text
| |
$text-03 | | |
$text-04 | - Text on interactive colors
| |
$link-01 | - Primary links;
- Ghost button
| |
$inverse-link | - Links on $inverse-02 backgrounds
| |
$icon-01 | | |
$icon-02 | | |
$icon-03 | - Tertiary icons;
- Icons on interactive colors;
- Icons on non-ui colors
| |
$field-01 | - Default input fields;
- Field color on $ui-backgrounds
| |
$field-02 | - Input field color on $ui-02 backgrounds
| |
$inverse-01 | - Inverse text color;
- Inverse icon color
| |
$inverse-02 | - High contrast backgrounds;
- High contrast elements
| |
$support-01 | | |
$support-02 | | |
$support-03 | | |
$support-04 | | |
$inverse-support-01 | - Danger in high contrast moments
| |
$inverse-support-02 | - Success in high contrast moments
| |
$inverse-support-03 | - Warning in high contrast moments
| |
$inverse-support-04 | - Information in high contrast moments
| |
$overlay-01 | | |
Interactive color tokens
| Token | Role | Value |
|---|
$focus | - Focus border;
- Focus underline
| |
$hover-primary | | |
$hover-primary-text | - $interactive-01 text hover
| |
$hover-secondary | | |
$hover-tertiary | - $interactive-03 hover;
- $inverse-01 hover
| |
$hover-ui | - $ui-01 hover;
- $ui-02 hover;
- Transparent background hover
| |
$hover-selected-ui | | |
$hover-danger | - Danger hover;
- $support-01 hover
| |
$hover-row | | |
$inverse-hover-ui | | |
$active-primary | | |
$active-secondary | - $interactive-02 active;
- $inverse-01 active
| |
$active-tertiary | | |
$active-ui | - $ui-01 active;
- $ui-02 active
| |
$active-danger | - Danger active;
- $support-01 active
| |
$selected-ui | | |
$highlight | - $interactive-01 highlight
| |
$skeleton-01 | - Skeleton state of graphics
| |
$skeleton-02 | | |
$visited-link | | |
$disabled-01 | - Disabled fields;
- Disabled backgrounds;
- Disabled border
| |
$disabled-02 | - Disabled elements on $disabled-01;
- Disabled label;
- Disabled text on $disabled-01;
- Disabled icons;
- Disabled border
| |
$disabled-03 | - Disabled text on $disabled-02;
- Disabled icons on $disabled-02
| |
Color and accessibility