Theming

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.

NSW Government colour palette

The default 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.

NSW Government Aboriginal colour palette

The NSW Government Aboriginal colour palette reflects the rich cultural heritage and storytelling traditions of First Nations peoples. It includes a carefully curated selection of earth-inspired tones that draw from the Australian landscape, such as deep ochres, warm reds, and natural greens. This palette ensures authenticity and respect in design applications while maintaining accessibility and versatility.

Black, white and off-white are also included to enhance contrast and readability in digital and print formats.

Use this palette on its own to ensure authenticity and cultural respect.

Visit the Brand Toolbox – Aboriginal Branding Guidelines for more information.

View theming examples

• NSW Government default palette: Full page, Content-only
• NSW Government Aboriginal colour palette: Full page, Content-only

Colour framework

The Design System has a built in framework for how colours are used and inherited to ensure a consistent and accessible user experience.

Colour classifications

Colours are classified as either a:

• Dark colour: colours that meet 4.5:1 contrast ratio with Text Light #FFFFFF.
• Light colour: colours that meet 4.5:1 contrast ratio with Text Dark #22272B.

Brand Colour Palette

Brand colour palettes denote the connection to NSW Government or brand and have four core usage guidelines and applications:

• Brand Dark - the primary interaction colour and is used for buttons, text links, icons, dark variants of components and backgrounds. To ensure the required 4.5:1 contrast ratio for accessibility, this colour must always be selected from row 01 of the NSW Government colour palette.
• Brand Light - your contrasting colour to Brand Dark and is used for secondary buttons, light variants of components, backgrounds and content sections. To ensure the required 4.5:1 contrast ratio for accessibility, this colour must be a light colour. Acceptable colour options for Brand Light include rows 03 or 04 of the NSW Government colour palette.
• Brand Supplementary - an optional third colour which should be used sparingly in instances such as pictograms, dark variants of components and background. To ensure the required 4.5:1 contrast ratio for accessibility, this colour must be a dark colour.
• Brand Accent - the highlight colour to capture attention and draw the users eye. You’ll find its use in highlight bars and pictograms. This colour has different selection rules depending on your brand classification.

NSW Design System Default colour theme

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.

Masterbrand corporate

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:

• Brand Light must be a light colour (accessible with Text Dark).
• Brand Supplementary must be a dark colour (accessible with Text Light).
• Brand Accent can be selected from any row in wider colour palette (row 02 and 03 recommended).

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

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 brands that have existing equity, select a combination that is closest to the existing palette.
• For brands that require a strong connection to the NSW Government, select a colour combination that includes core red or blue.

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:

• Brand Dark must be selected from row 01.
• Brand Light must be a light colour (accessible with Text Dark, row 03 and 04 recommended).
• Brand Supplementary must be a dark colour (accessible with Text Light). This is an additional colour option only available if your Brand Light is not from row 02.
• Brand Accent can be selected from any row from your chosen colour sets (row 02 and 03 recommended).

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 within the chosen colour sets as required. Where possible, it is indicated in the guidance on the Components page.