Brand Colors
Used for highliting important elements on a page, such as buttons and navigation states. Each color contains color variations, used for different states and elements laying upon the main color.
UI colors
Used for interface elements.
Functional colors
Functional colors are used as the main colors in various messages accross our applications and websites. Usally as the font color, as a background a lighter variation will be used.
Available as Custom Properties
Each color is exposed as an CSS variable (custom property) on the root, so you can use them in your own styles. You can use them by using the var() statement, for example: color: var(--ox-color-primary).