Use to emphasise primary content in relation to other elements nearby.

Use for most body text, and in supportive elements that give context to content that's close to it.

Use in form inputs for placeholders, and for the label that says a field is ‘Optional’. Avoid using elsewhere.

Use for links and for external link icons that appear in line with link text.

Conveys interactivity. Use for neutral interactive elements, or for emphasising active items within an interactive list.

Use sparingly as a pop of accent colour in interactive elements. For example, the background for primary buttons.

Use for de-emphasised interactivity, like the borders on inputs and checkboxes, and the clear button on a search input. Do not use on text.

Use in components for text and icons that sit on a Bright Green Interactive Accent surface colour. This keeps them visible when users switch to dark mode. Can also be used for surfaces if needed.

Use in components for text and icons that sit on a Forest Green Interactive Primary surface colour. This keeps them visible when users switch to dark mode.

The lowest level background used in most screens.

Use for elevated surfaces that partially show the content behind it, like bottom sheets and sidebars.

Use for delineating areas without using borders, like neutral alerts and avatars.

Use for faintly darkening an area, for example on loading shimmers.

Use in most separators, for example in the section header and tabs components.

Use on the edges of images to differentiate them from the background, such as flags in avatars.

Indicates negative sentiment, for example on error states or destructive actions. Can be used as text or as a background.

Indicates positive sentiment, for example in positive alerts. Can be used as text or as a background.

Indicates warning sentiment, for example on alerts. Should only be used as a background colour and is not accessible as text.

Use for copy on negative buttons. Turns dark on dark mode to keep elements visible.

Use in informational or interactive elements where white is needed, or where other colours would be too prominent in the hierarchy.

Use in informational or interactive elements where a dark colour is needed.