Our colour system is a structured set of colours used consistently throughout a user interface to help you create visual harmony, hierarchy, and meaning.
We use descriptive colour names for our tokens to help you understand how and where we have applied them. Each token is assigned two colour values, one for light mode and one for dark mode. Furthermore, you have the option to customise and override the default brand colour values to align seamlessly with your unique identity.
The primary colour is the most frequently used colour, strengthening the brand identity of your product.
The secondary colour highlights the interactive elements such as links, focus indicators and form controls like checkboxes or radio buttons.
The neutral colour forms the majority of your user interfaces. They affect the majority of text styles or surfaces such as pages, cards and popover containers. As well as defining the supporting elements and effects such as dividers or most of the shadows.
The supporting colours help you to convey messages and can be applied to objects such as badges, alert and critical message boxes, or areas and sections that require immediate action.