Color
Tokens
Background
| Token | Role | Value | Example |
|---|---|---|---|
| $background | Default page background | #FFFFFF |  |
| $background-secondary | Subtle color for background | #F1EFF7v |  |
| $background-secondary-light | Subtle color for background | #F9F8FC |  |
| $background-inverse | Feature background color | #0C0D17 |  |
| $background-brand | Feature background color | #000F7E |  |
| $background-gradient | Feature background color | #08198E–#05023C |  |
| $background-utility | Utility background color | #5D5E68 |  |
Text
| Token | Role | Value | Example |
|---|---|---|---|
| $text-primary | Primary body copy; Headers; Hover text color for $text-secondary; Selected text color | #0C0D17 | |
| $text-secondary | Secondary text color; Input labels color; Unselected text color | #5D5E68 |  |
| $text-placeholder | Placeholder text | #A6ABB2 |  |
| $text-on-color | Text on interactive colors | #FFFFFF | |
| $text-helper | Helper text | #868D97 |  |
| $text-error | Error message text | #ED0515 |  |
| $text-inverse | Text color on $background-inverse | #FFFFFF | |
| $text-disabled | Disabled text color; Disabled label | #868D97 | |
Button
| Token | Role | Value | Example |
|---|---|---|---|
| $button-primary | Primary button background color | #0070C1 |  |
| $button-primary-hover | Hover color for $button-primary | #0053A5 |  |
| $button-primary-active | Active color for $button-primary | #000F7E | |
| $button-danger-primary | Primary danger button background color | #ED0515 | |
| $button-danger-primary-hover | Hover state color for danger buttons | #C70412 |  |
| $button-disabled | Disabled state color for buttons | #DADDE0 |  |
| $button-disabled-02 | Disabled state color for buttons | #DAEAF6 |  |
| $button-disabled-03 | Disabled state color for buttons | #B4D5ED |  |
| $button-inverse | Inverse button background color | #FFFFFF | |
| $button-inverse-hover | Hover color for $button-inverse | #0C0D17 | |
Border
| Token | Role | Value | Example |
|---|---|---|---|
| $border-subtle-01 | Subtle border color on $background | #CDD1E2 |  |
| $border-subtle-02 | Subtle border color on $background | #EAEBEE |  |
| $border-strong-01 | Strong border color on $background | #5D5E68 | |
| $border-strong-02 | Strong border color on $background | #0C0D17 | |
| $border-error-01 | Border for error states | #FB4653 |  |
| $border-interactive | Interactive or selected border color | #3296DC |  |
| $border-disabled | Disabled state color for borders (excluding border-subtles | #C5C9CD |  |
Link
| Token | Role | Value | Example |
|---|---|---|---|
| $link-primary | Primary links; Ghost button | #0070C1 | |
| $link-primary-hover | Hover state color for $link-primary | #0053A5 | |
| $link-secondary | Secondary link color | #000F7E | |
| $link-inverse | Links on $background-inverse | #96D5FF |  |
Icon
| Token | Role | Value | Example |
|---|---|---|---|
| $icon-primary | Primary icons | #0C0D17 | |
| $icon-secondary | Secondary icons | #5D5E68 | |
| $icon-brand | Branded icons | #0070C1 | |
| $icon-disabled | Disabled state for icons | #DADDE0 |  |
| $icon-inverse | Inverse text color; Inverse icon color | #FFFFFF | |
| $icon-on-color | Icons on interactive colors; Icons on non-ui colors | #C5C9CD | |