Skip to main content

System Colours

Status​

Status colours support the communication of Error, Success, Warning and Information.

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.

Error

Success

Warning

Information

CSS Usage​

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

ClassName Usage​

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

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