Skip to main content

Colour System

The relationship between the brand color, neutral color(shades of grey), accessible color and visualization color create a scalable foundation for AEMO’s color palette in the design system.

Purple - Shades of primary color

Purple is the brand color of AEMO. You can see the logo of AEMO using the brand color apart from some situational white for lighter usage. In the design token, the purple color is also termed as primary color with 7 different shades.

The purple color is strictly reserved for logo and call to action items including buttons and links. This ensures that the designs are not cluttered with overuse of purple and focus is given to the most important item that pops out easily.

Primary color

Grey - Shades of slate

GEL uses 9 shades of grey in the color system. These shades of grey are also termed as slate color or tertiary color. Each shade of the slate color can be used for different scenarios ensuring any new concept or design element can fit with the existing components in harmony.

We have ensured that all these shades pass the WCAG 2.0 level of 4.5:1 contrast ratio for normal text and 3.1 for large text.

Tertiary color Contrast

Tertiary color Contrast

Accessible color

Accessible color can be used in a variety of ways to communicate meaning. They are also termed as secondary color in GEL’s color palette. GEL accessible color meaning include informative, accent, danger, warning and success. These color are used in conjunction with text or icon to ensure that the meaning is not lost for users who are unable to see or differentiate color.

Assigning generic meaning to a subset of color sets consistent expectations for the users. These meanings are embedded into the components and codified in design tokens.

Similar to shades of slate color, we have ensured that these accessible color has the contrast ratio of 4.5:1 for normal text and 3.1 for large text to meet the standard of WCAG 2.0.

BlueBlue indicates a current or active state. It communicates management, progress, connectivity, or organization.
GreenGreen indicates success. It communicates save, create, add, available, done, approved, or resolved.
OrangeOrange indicates attention is required. It communicates warning, pending, missing, or impeded progress.
RedRed indicates a problem. It communicates a critical state, destructive action, error, failure, removal, stop, or decline.


See also