The NSW Design System has a built-in framework for how colours are used and inherited to ensure a consistent and accessible user experience. The following guidance walks through how each branding classification can apply colour to its digital products and services using the NSW Design System.
The NSW Government colour palette has been developed to accommodate the wide range of expression required by our brand. The palette contains 10 colours sets (columns), each with four different tones, plus white.
Black and off-white have been added to the digital palette to allow for greater contrast to be applied.
The Design System has a built in framework for how colours are used and inherited to ensure a consistent and accessible user experience.
Colours are classified as either a:
Brand colour palettes denote the connection to NSW Government or brand and have four core usage guidelines and applications:
The Design System default colour theme reflects masterbrand corporate colour usage. It uses blues, reds and greys from the NSW Government wider colour palette to communicate a strong association with NSW Government.
Swatch |
Colour |
Value |
---|---|---|
Brand dark |
Blue 01 ( |
|
Brand light |
Blue 04 ( |
|
Brand supplementary |
Blue 02 ( |
|
Brand accent |
Red 02 ( |
The only defined colour for masterbrand corporate is Brand Dark (Blue 01). Brand Light, Supplementary and Accent are variable colours and can be altered if required. If you wish to change a variable brand colour, it must be selected from the blue, red or grey colour sets and:
Guidance on applying these in Figma can be found on the Colour page of the Figma UI Kit.
Masterbrand non-corporate, co-brand and independent have access to the full colour palette for all brand colours.
As per brand guidelines, you may select up to two colour sets, plus the grey colour set:
For programs and co-brand agencies, these colour sets become your available colour palette. You cannot re-select colour sets once you have chosen.
For campaigns, colour sets may be re-selected with new iterations of that campaign (e.g. for a new year of a campaign, the available colours may change.)
Colour selection rules:
Guidance on applying your new brand colours in Figma can be found on the Colour page of the Figma UI Kit.
As core styles and components inherit colours from the base colour theme, changing a brand colour will automatically filter down to all instances where that colour is used. Alternatively, colour instances can be updated on an individual basis as required. Where possible, it is indicated in the guidance on the Components page.