Brand Colours

• Brand
• Supplementary
• Interactive
• Link
• Icon

Brand

Primary, Secondary and Accent colours directly represent the Brand’s visual identity. Their hierarchy reflects their prominence within the brand and should be applied accordingly.

Each colour set consists of the default colour and extended colours including shades and contrasting colours for accessible UI design. Check out colour sets for more information and examples.

Primary

Secondary

Accent

CSS Usage

color: var(--color-foundation-primary-default);

ClassName Usage

Tailwind CSS is required for using Tailwind classnames. Refer to the Start Developing to install Tailwind.

<div className="bg-primary"></div>