Semantic colours

Background

BgBase, BgBaseHigh, and BgBaseHighest

BgBase serves as the primary background colour within the interface. BgBaseHigh and BgBaseHighest, play a vital role to establish visual separation between sections and enhance the prominence of sections. These base colours are instrumental in maintaining a well-defined structure and visual hierarchy throughout the interface.

For light and dark themes, BgBase is assigned to Surface 0, BgBaseHigh is assigned to Surface 1, and BgBaseHighest is assigned to Surface 2.

BgSelected

BgSelected serves as the primary background colour for selected elements within the interface. This colour is used to clearly communicate to the user an element is selected.

For light and dark themes, BgSelected is assigned to Accent 0.

BgBaseHover, BgBorderHover, BgSelectedHover

Background hover colours are used to provide visual feedback and indicate interactivity to users. This subtle change in colour helps improve the user experience by providing a clear indication of available actions and increasing the overall usability and interactivity of the interface.

For light and dark themes, BgBaseHover is assigned to Surface 3, BgBorderHover is assigned to Elevated 0, and BgSelectedHover is assigned to Accent 1.

BgBaseDivider

BgBaseDivider is more faint than BgBorder and used for element or section borders which the user can’t interact with.

For light and dark themes, BgBaseDivider is assigned to Surface 4.

BgBorder, BgSelectedBorder

Background border colour have a higher contrast to the background base colours compared to BgBaseDivider. These colours are used for element or section borders which the user can interact with, such as fields, buttons, and cards.

For light and dark themes, BgBorder is assigned to Surface 6, BgSelectedBorder is assigned to Accent 2.

Text

TextTitle

With the highest contrast to BgBase, TextTitle is employed to make important headings and text stand out prominently. By using this colour, designers create visual hierarchy, ensuring that crucial information catches users' attention and guides their focus effectively.

For light and dark themes, TextTitle is assigned to Elevated 6.

TextBase

Serving as the primary text colour, TextBase is chosen to provide optimal readability and legibility within the interface. This colour is carefully selected to maintain a balance between prominence and readability, making it suitable for most of the textual content.

For light and dark themes, TextBase is assigned to Elevated 4.

TextFaint

Designed for secondary or less important text, TextFaint helps establish a visual distinction between primary and supporting information. By using this colour, designers can reduce the prominence of secondary text while maintaining readability, allowing users to focus on the more important content.

For light and dark themes, TextFaint is assigned to Elevated 2.

Control

ContBg, ContBgHover

ContBg serves as the primary accent colour in the interface and is used to emphasise the most important interactive elements. ContBgHover compliments ContBg to provide visual feedback and indicate interactivity to users.

For light and dark themes, ContBg is assigned to Accent 4, ContBgHover is assigned to Accent 5.

ContBgSecondary, ContBgSecondaryHover

ContBgSecondary serves as the secondary accent colour in the interface and is used to emphasise less important interactive elements. ContBgSecondaryHover compliments ContBgSecondary to provide visual feedback and indicate interactivity to users.

For light and dark themes, ContBgSecondary is assigned to Accent 1, ContBgSecondaryHover is assigned to Accent 2.

ContText, ContSecondaryText

ContText serves as the text colour for the most important interactive elements. ContSecondaryText serves as the text colour for the less important interactive elements.

For light themes, ContText is assigned to Surface 0, ContSecondaryText is assigned to Accent 5.

For dark themes, ContText is assigned to Elevated 0, ContSecondaryText is assigned to Elevated 4.

ContLink

With its high contrast to BgBase, ContLink serves as the text colour for text buttons.

For light themes, ContLink is assigned to Accent 4 with saturation increased to 89%.

For dark themes, ContLink is assigned to Accent 4 with saturation increased to 79.5% and lightness changed to 64.5%.

ContDisabled

ContDisabled is used to communicate an interactive element is disabled.

For light and dark themes, ContDisabled is assigned to Surface 4.

Alert & Warn

AlertContBg, AlertContBgHover, AlertBgBase, AlertText

Alert colours are used to communicate harmful risks, negative outcomes, or destructive actions.

For light and dark themes, AlertContBg is assigned to Accent 4 with hue changed to 5, AlertContBgHover is assigned to Accent 5 with hue changed to 5, and AlertBgBase is assigned to Surface 3 with hue changed to 5.

For light themes, AlertText is assigned to Elevated 3 with hue changed to 5 and lightness changed to 26.5%.

For dark themes, AlertText is assigned to Elevated 3 with hue changed to 5 and lightness changed to 86.5%.

WarnContBg, WarnContBgHover, WarnBgBase, WarnText

Warn colours are used to communicate less harmful risks, pending or incomplete states.

For light themes, WarnContBg is assigned to Accent 4 with hue changed to 55, WarnContBgHover is assigned to Accent 5 with hue changed to 55, and WarnBgBase is assigned to Surface 3 with hue changed to 55.

For light themes, WarnText is assigned to Elevated 3 with hue changed to 55 and lightness changed to 26.5%.

For dark themes, WarnText is assigned to Elevated 3 with hue changed to 55 and lightness changed to 86.5%.

Gradient

GradientBgBase, GradBaseHigh, GradBgBaseHighest

Gradients serve no functional purpose, and are used to make the interface more engaging and visually appealing.