Design
Research and rationale
How we developed our colour matrix
When adopting the Digital Transformation Agency's (DTA) Design System as our base we investigated how they implemented their colour palette and if it would meet our requirements. In general, it was a great foundation and there was room for improvement.
What the issues were
The DTA system was limited to incorporating one or two brand colours at most.
It had classes and different background colours, but they were implemented as shades of only 2 primary background colours and these colours were generated automatically limiting the ability for customisation.
The existing colour classes weren't robust enough and didn't cover items such as icon colours, headings colours, hover colours, decorative elements and underlines.
Our solution
We solved these issues by doing the following:
- creating a colour matrix (visual guide) so we could see what colour interactions occurred and how things would need to be made accessible. This allowed us to provide designers a way of customising all colours at once
- we chose to remove the automation of colours and instead create a dedicated set of colours variables that could be customised with more control
- adding a secondary action class which let us incorporate an additional primary brand colour, this also gave us a colour that could be used for interactive iconography
- adding an accent colour class to allow a safe space for decorative brand colour (with no impact on usability)
- adding hover classes so we could improve interactive elements including accessibility and usability
- adding heading classes so that titles could use colour to stand out slightly from text
- adding underline colours to further improve the usability of our hyperlink styles.
We used many of our early website designs to test, refine and iterate on this approach and continue to build and refine this system adding functionality and features.
In recent updates we have also meticulously reviewed and updated all colour variable names and values. And introduced a new colour theme for many components, aiming to offer more versatility and customisation options whilst future proofing our colour system. You can explore the details for the most recent updates via our release notes.
Why was this important
Our solution enables us to have a colour palette that could easily accommodate any brand but still be accessible. It's a system that allows you to set and forget. Because every component is based on the colour matrix and the rules that underpin it you know that once you get it right, every element on current and future designs is going to be accessible. Improving the customisation and flexibility of colours also enables designers to create sites that appear more visually distinct and that can more easily align with existing branding which has assisted with the uptake of the Design System from stakeholders.
Why we needed a default colour palette
The 2 main reasons were to give us something to build and test with and also to give us a framework of colours that would support our brand architecture model.
What was evident from the brand audits was that we needed default colours that would create consistency across our key channels and products. Setting even a few default web colours would greatly reduce the variety of colours used and mean we could help ensure accessibility.
Where do our default colours come from
Our default colour palette was created in alignment with our Queensland Government Brand Book. The Brand Book safeguards and promotes a consistent and coherent visual identity across all advertising, marketing and communications, and other public facing assets.