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

Grey 01

#22272B

Green 01

#004000

Teal 01

#0B3F47

Blue 01

#002664

Purple 01

#441170

Fuchsia 01

#65004D

Red 01

#630019

Orange 01

#941B00

Yellow 01

#694800

Brown 01

#523719

Black

#000000

Grey 02

#495054

Green 02

#00AA45

Teal 02

#2E808E

Blue 02

#146CFD

Purple 02

#8055F1

Fuchsia 02

#D912AE

Red 02

#D7153A

Orange 02

#F3631B

Yellow 02

#FAAF05

Brown 02

#B68D5D

White

#FFFFFF

Grey 03

#CDD3D6

Green 03

#A8EDB3

Teal 03

#8CDBE5

Blue 03

#8CE0FF

Purple 03

#CEBFFF

Fuchsia 03

#F4B5E6

Red 03

#FFB8C1

Orange 03

#FFCE99

Yellow 03

#FDE79A

Brown 03

#E8D0B5

Off-white

#F2F2F2

Grey 04

#EBEBEB

Green 04

#DBFADF

Teal 04

#D1EEEA

Blue 04

#CBEDFD

Purple 04

#E6E1FD

Fuchsia 04

#FDDEF2

Red 04

#FFE6EA

Orange 04

#FDEDDF

Yellow 04

#FFF4CF

Brown 04

#EDE3D7

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.

Swatch	Colour	Value
	Brand dark	Blue 01 (`#002664`)
	Brand light	Blue 04 (`#CBEDFD`)
	Brand supplementary	Blue 02 (`#146CFD`)
	Brand accent	Red 02 (`#D7153A`)

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.