Skip to main content

Brand Colours

Guidance​

Brand colours express a brands visual identity and create a robust base for white-label UI design.

These include:

  • Primary, Secondary and Accent: Colours directly from the brand’s visual identity.

  • Interactive: A brand colour selected as a preferred shade for interactive form components.

  • Link: Brand colours for all text links on light and dark backgrounds.

  • Icon: Brand colours for icon accessibility on dark and light backgrounds.

CSS Usage​

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

ClassName Usage​

info

The tailwind classnames requires Tailwind CSS. Refer to the getting started documentation to add styling

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