Base colors are expanded into a range of values to support varying moments within the application/website.
Each color consists of 11 shades, ranging from 50 to 950.
Neutral colors are the main colors used for typography, borders and backgrounds. They are also used to highlight default UI elements, and to communicate neutral actions or statuses.
Brand colors are used to create a consistent visual identity.
Primary is the main brand color. It's used to highlight the most important moments.
Secondary is used for less prominent components in the UI such as filter chips.
Support colors are used to communicate action or status.
Info is used to convey general information, provides context and more details.
Success is used to confirm that an action has been completed successfully. It's also used to convey confirmation messages or statuses that are positive.
Warning is used to highlight actions, statuses or messages that are trending in a negative direction and require attention.
Danger is used to highlight negative actions, statuses or critical errors.
Magic is used on elements that denote the usage of artificial intelligence. It's also used to highlight premium value, trials or new features.