| Apricot | Secondary accent color, active navigation menu item, active tab |
|---|
| Ultramarine | Primary accent color, primary buttons, primary links, text buttons, selected checkboxes, selected radio buttons |
|---|
| Midnight | Primary text, non-functional icons |
|---|
| Coconut | Knockout text, knockout icons, backgrounds |
|---|
| Cobalt | Backgrounds |
|---|
| Blueberry | Primary button hover, secondary button hover, text button hover, secondary badge fill |
|---|
| Cornflower | Selected toggle fill, backgrounds |
|---|
| Ice | Backgrounds |
|---|
| Storm | Secondary text, disabled text buttons, disabled field inputs, disabled labels, unselected toggle fill |
|---|
| Haze | Backgrounds, borders |
|---|
| Cloud | Primary badge fill, disabled button fill, backgrounds |
|---|
| Mist | Backgrounds |
|---|
| Shamrock | Success messaging and icons, success badge fill |
|---|
| Clementine | Alert messaging and icons |
|---|
| Tomato | Error messaging and icons, warnings |
|---|
| Brick | Warning/destructive action hover |
|---|
| Primary dropshadow | Modals, overlay messaging, log in screens |
|---|
| Secondary dropshadow | Dashboard cards, dashboard tiles, tooltips |
|---|
| Tertiary dropshadow | Expanded dropdown menus, expanded date/time pickers |
|---|
| Primary navigation dropshadow | Primary (top) navigation dropshadow |
|---|
| Default focus | Default focus indicator |
|---|
| Default focus (inset) | Tabs focus indicator |
|---|
| Warning focus | Warning/destructive focus indicator |
|---|
| Readonly focus | Readonly focus indicator |
|---|