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

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

What to know before picking your colours

The colours of your website can only be changed although 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 of the carousels, callouts etc.

Picking your 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

What does it actually do on the site?

Some examples of where these colours. 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.

Navigation highlight

Image of navigation highlight


Image of colours on carousel

Promotional panels

Image of colours on promotional panels

Header panels

Image of use of colours on header panels

Underlines on headings

Image of use of colours on undelines and heradings

Change the colours of 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: