Colour
Each colour 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.
Primary
The primary colour is the most frequently used colour, strengthening the brand identity of your product.
Secondary
The secondary colour highlights the interactive elements such as links, focus indicators and form controls like checkboxes or radio buttons.
Neutrals
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.
Supporting
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.