Design

Research and rationale

The design of the global alert component is based on a combination of the MyGov website design, the Federal Department of Health site and NSW Designs System.

The structure of the alert banner includes an:

• icon
• title
• body text
• action button or link
• option to dismiss or close the banner.

This is also consistent with the structure of alert messages seen in other major Design Systems such as Microsoft Fluent and Shopify’s Polaris.

Most designs systems use multiple global alerts, categorised by their significance.

Our design follows this practice and is divided into 3 categories defined by colour and icons.

Queensland Government’s categories are:

• critical (red)
• warning (amber)
• general (pale blue).

We’ve used red as the colour for critical alerts. This is in line with The Queensland Government guidelines colour for state wide emergency department signage. The icon for critical alerts is based on a stop sign to command the attention of the user.

The warning alert colour is bright amber. The Australian signage standards 1319 uses amber, black text and a triangular icon for hazards not considered to be life threatening.

The general alert is a neutral pale blue colour. Pale blue is commonly associated with information signage which ties into the purpose of this alert. The icon for the general alert uses the international symbol for information. The square shape was chosen to further distinguish it from the other 2 categories.

The global alert colours are based on Australian and international standards and won’t change across sites regardless of where those sites sit within the brand architecture. Global alerts should look the same across all Queensland Government sites.