A NSW Government website
Design System v3.2.0

Theming

The 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 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 black and white.


Grey 01

#22272B
Green 01

#004000
Teal 01

#0B3F47
Blue 01

#002664
Purple 01

#441170
Pink 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
Pink 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
Pink 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
Pink 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.
  • 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 (#C3EBFD)

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).
  • 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 as required. Where possible, it is indicated in the guidance on the Components page.