Semantic colours
Background colours
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 that 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 field, buttons, and cards.
For light and dark themes, BgBorder is assigned to Surface 6, BgSelectedBorder is assigned to Accent 2.
Text colours
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 colours
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.
ContDisabled
ContDisabled is used to communicate an interactive element is disabled.
For light and dark themes, ContDisabled is assigned to Surface 4.
Alert and Warn colours
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%.
Gradients
GradientBgBase, GradBaseHigh, GradBgBaseHighest
Gradients serve no functional purpose, and are used to make the interface more engaging and visually appealing.
