Overview

The template uses a powerful metadata-based system to make changes to colours that filter throughout the entire site.

It uses a locked primary colour, a footer background colour and a standard grey across all template-based sites.

Feature showcase

Below you can see examples of where these colours appear. Please note: Sometimes a transparent version or variant of the defined colour is used as overlays on certain colour treatments to create interesting effects and styles.

Type 1 - Navigation highlight

Image of navigation highlight

Type 2 - Carousels

Image of colours on carousel

Type 3 - Promotional panels

Image of colours on promotional panels

Type 4 - Header panels

Image of use of colours on header panels

Type 5 - Underlines on headings

Image of use of colours on undelines and heradings

What to know before choosing your brand colours

The colours of your website can only be changed under certain circumstances. The primary colour can be changed for a single site but there needs to be a business case to justify this request.

If a request is supported, for example by an agency Chief Executive, there are accessibility guidelines a request would need to meet.

This is because Website Design System has been built in consultation with Vision Australia to ensure it meets the standards required of South Australian Government agencies. If we change the primary colour of your site to a non-accessible alternative there will be instances of text disappearing on your site in certain configurations.

Choosing colours

Secondary and tertiary colours are defined by site switches in the site metadata.

The secondary and tertiary colours generally are the branding colours that are required by the branding guidelines of the site owners.

Image of colours palette

Add this feature to your site

Guide to changing secondary and tertiary colours (requires log-in)

Top accessibility tip

Make sure your designs are accessible. Check your colour combinations by using an automated tool:
accessibility.sa.gov.au/your-role/development/colour-and-contrast