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
Type 2 - Carousels
Type 3 - Promotional panels
Type 4 - Header panels
Type 5 - Underlines on headings
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.
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
