Color
Every colour the system draws with. The values below are read from the page as you see it, so they follow the theme in the top bar. Surfaces are separated by a border or a shadow rather than by a step in grey.
Surfaces
The planes content sits on.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-surface | #ffffff | The page, and every container on it. | |
| --wr-surface-sunken | #f8f8f8 | A well a value is drawn inside. | |
| --wr-surface-overlay | #ffffff | Menus, popups, modals and drawers. | |
| --wr-surface-raised | #ffffff | A card that sits above the page. It separates from the page in dark. |
Neutrals
The grounds quiet controls take, all of them translucent so they work on any surface.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-neutral-subtle | transparent | A quiet control at rest. | |
| --wr-neutral-subtle-hovered | #0515240f | A quiet control under the pointer. | |
| --wr-neutral | #0515240f | The default button and the lozenge ground. | |
| --wr-neutral-hovered | #0b120e24 | The default button under the pointer. | |
| --wr-neutral-pressed | #080f214a | The default button while pressed. | |
| --wr-neutral-subtle-pressed | #0b120e24 | A quiet control while pressed. | |
| --wr-disabled | #0515240f | The ground of a control that cannot be used. |
Text
Foreground colours, from body text down to disabled.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-text | #292a2e | Body and headings. | |
| --wr-text-subtle | #3d4046 | Field labels, subtle buttons, supporting text. | |
| --wr-text-subtlest | #54575e | Helper text and breadcrumbs. | |
| --wr-text-inverse | #ffffff | Text on a bold ground. | |
| --wr-text-disabled | #080f214a | A control that cannot be used. | |
| --wr-text-selected | #1558bc | The current item in a rail or a menu. | |
| --wr-text-link | #1868db | A link. | |
| --wr-text-danger | #ae2e24 | An error message. |
Bold grounds
The filled appearances. Text on these is the inverse colour, which is white in light and near black in dark.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-brand-bold | #1868db | The primary button, the selected tab, a meter fill. | |
| --wr-brand-bold-hovered | #1558bc | Primary under the pointer. | |
| --wr-selected | #e9f2fe | The pale ground under a selected item. | |
| --wr-warning-bold | #a85c00 | The warning button and banner. | |
| --wr-danger-bold | #c9372c | The danger button and banner. | |
| --wr-discovery-bold | #964ac0 | The discovery button. | |
| --wr-brand-bold-pressed | #144794 | Primary while pressed. | |
| --wr-selected-hovered | #cfe1fd | A selected item under the pointer. | |
| --wr-warning-bold-hovered | #8f4e00 | Warning under the pointer. | |
| --wr-warning-text | #ffffff | Text on the warning ground. Inverse, like the other bold grounds. | |
| --wr-danger-bold-hovered | #ae2e24 | Danger under the pointer. | |
| --wr-discovery-bold-hovered | #803fa5 | Discovery under the pointer. |
Accents
Ten hue families for status and category. Each has a ground and the text that sits on it, and in dark the two trade places.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-accent-blue-subtlest | #e9f2fe | The information section message ground. | |
| --wr-accent-blue-subtler | #cfe1fd | The in progress lozenge, the blue tag and tile. | |
| --wr-accent-blue-bolder | #123263 | Text on either blue ground. | |
| --wr-accent-green-subtler | #baf3db | The success lozenge, the green tag and tile. | |
| --wr-accent-green-bolder | #164b35 | Text on the green ground. | |
| --wr-accent-lime-subtlest | #efffd6 | The success section message ground. | |
| --wr-accent-lime-subtler | #d3f1a7 | The added badge, the lime tag. | |
| --wr-accent-lime-bolder | #37471f | Text on either lime ground. | |
| --wr-accent-yellow-subtlest | #fff5db | The warning section message ground. | |
| --wr-accent-yellow-subtler | #f5e989 | The yellow lozenge and tag. | |
| --wr-accent-yellow-bolder | #533f04 | Text on either yellow ground. | |
| --wr-accent-orange-subtler | #fce4a6 | The moved lozenge, the important badge, the orange tag. | |
| --wr-accent-orange-bolder | #693200 | Text on the orange ground. | |
| --wr-accent-red-subtlest | #ffeceb | The error section message ground. | |
| --wr-accent-red-subtler | #ffd5d2 | The removed lozenge and badge, the red tag and tile. | |
| --wr-accent-red-bolder | #5d1f1a | Text on either red ground. | |
| --wr-accent-magenta-subtler | #fdd0ec | The magenta lozenge and tag. | |
| --wr-accent-magenta-bolder | #50253f | Text on the magenta ground. | |
| --wr-accent-purple-subtlest | #f8eefe | The discovery section message ground. | |
| --wr-accent-purple-subtler | #eed7fc | The new lozenge, the purple tag and tile. | |
| --wr-accent-purple-bolder | #48245d | Text on either purple ground. | |
| --wr-accent-teal-subtler | #c6edfb | The teal lozenge and tag. | |
| --wr-accent-teal-bolder | #164555 | Text on the teal ground. | |
| --wr-accent-gray-subtler | #dddee1 | The default badge, the tag ground, an avatar with no image. |
Hue fills
Saturated colours used for a mark rather than a ground.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-green-bold | #1f845a | The success flag, a healthy meter, a confirmation icon. | |
| --wr-green-bright | #22a06b | An online presence dot. | |
| --wr-lime-bold | #5b7f24 | A completed progress bar, a story glyph. | |
| --wr-yellow-bold | #b38600 | A warning icon, a meter under caution. | |
| --wr-purple-bold | #803fa5 | A visited link, the spotlight ground. | |
| --wr-gray-bold | #8c8f97 | An offline presence dot. |
Other grounds
The planes that are not part of the neutral scale.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-neutral-bold | #6b6e76 | A toggle that is off. | |
| --wr-neutral-boldest | #292a2e | A tooltip, an announcement banner, an info flag. Inverted, so it goes light in dark. | |
| --wr-neutral-strong | #05152429 | An unvisited progress indicator dot. | |
| --wr-skeleton-shimmer | #0515241f | The bright pass of a loading skeleton. | |
| --wr-track-inverse | #00000029 | A progress bar track on a bold ground. | |
| --wr-blanket | #050c1f75 | The dimmed page behind a modal or a drawer. | |
| --wr-divider-inverse | #ffffff4d | The rule between the halves of a split button. |
Borders
Outlines, dividers and the focus ring.
| Colour | Token | Value | Used for |
|---|---|---|---|
| --wr-border | #8c8f97 | A field outline. | |
| --wr-divider | #0b120e24 | A divider, a table rule, a card edge. | |
| --wr-border-focused | #4688ec | The focus ring, 2px with a 2px offset. |