🔹 Needed for NSW Government Branding
Colour plays an important role in creating a consistent and strong visual identify for NSW Government digital products and services.
The design system contains a colour framework using NSW Government brand colours, which may be changed if your brand classification allows.
The default colours reflect 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.
Instead of using specific hex colours, using the colour framework in the design system means your styles and components will automatically re-theme if you change your core brand colours. Guidance on further theming options are available for Designing and Developing.
Components and core styles inherit these colours to create a consistent yet flexible theme to optimise your user's experience. The default colour palette below reflects masterbrand corporate colour usage. Visit the theming gudiance for Designing and Developing for how you can adapt your brand colour palette based on your brand classification.
Use either CSS variables (below) or, if you're creating a one-off layout, you can use our helper classes for dark, light, and supplementary colours.
By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the Utility classes docs.
| Swatch | Colour | Value (Hex) | CSS variable |
|---|---|---|---|
|
Brand Dark |
Blue 01 ( |
|
|
|
Brand Light |
Blue 04 ( |
|
|
|
Brand Supplementary |
Blue 02 ( |
|
|
|
Brand Accent |
Red 02 ( |
|
Used for backgrounds, borders and divider lines to build contrast within content and components for a structured interface. Additional swatches of black and off white have been added to the digital palette to allow for greater contrast to be applied.
|
Swatch |
Colour |
Hex value |
CSS variable |
|---|---|---|---|
|
Black |
|
|
|
|
Grey 01 |
|
|
|
|
Grey 02 |
#495054 |
--nsw-palette-grey-02 |
|
| Grey 03 | #CDD3D6 |
--nsw-palette-grey-03 |
|
| Grey 04 | #EBEBEB |
--nsw-palette-grey-04 |
|
|
Off white |
|
|
|
|
White |
|
|
This set of text colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point) to met Web Content Accessibility Guidelines (WCAG 2.1).
Interaction colours are in addition to the NSW Government colour palette to maintain consistent and accessible text and not conflict with brand colours.
|
Swatch |
Colour |
Hex value |
CSS variable |
|---|---|---|---|
|
Text dark |
|
|
|
|
Text light |
|
|
|
|
Text focus |
|
|
|
|
Text hover background |
|
|
|
|
Text visited |
|
--nsw-text-visited |
Status colours are only to be used when providing contextual or transactional feedback to the user. Refer to individual colours below for when each should be used. Components using these colours also contain usage guidance.
These are in addition to the NSW Government colour palette to maintain a strong connection to their status and not conflict with brand colours. They should not be used outside their status meaning.
|
Swatch |
Colour |
Hex value |
CSS variable |
|---|---|---|---|
|
Info Blue |
|
|
|
|
Info Blue Bg |
|
|
|
|
Success Green |
|
|
|
| Success Green Bg |
|
|
|
|
Warning Orange |
|
--nsw-status-warning-orange |
|
|
Warning Orange Bg |
|
--nsw-status-warning-orange-bg |
|
|
Error Red |
#B81237 |
--nsw-status-error-red |
|
|
Error Red Bg |
#F7E7EB |
--nsw-status-error-red-bg |
Use these colours to create your own NSW Design System theme. See theming guidance for designers or theming guidance for developers.
|
Swatch |
Colour |
Hex value |
CSS variable |
|---|---|---|---|
|
Grey 01 |
|
|
|
|
Grey 02 |
|
|
|
|
Grey 03 |
|
|
|
|
Grey 04 |
|
|
|
|
Green 01 |
|
|
|
|
Green 02 |
|
|
|
|
Green 03 |
|
|
|
|
Green 04 |
|
|
|
|
Teal 01 |
|
|
|
|
Teal 02 |
|
|
|
|
Teal 03 |
|
|
|
|
Teal 04 |
|
|
|
|
Blue 01 |
|
|
|
|
Blue 02 |
|
|
|
|
Blue 03 |
|
|
|
|
Blue 04 |
|
|
|
|
Purple 01 |
|
|
|
|
Purple 02 |
|
|
|
|
Purple 03 |
|
|
|
|
Purple 04 |
|
|
|
|
Pink 01 |
|
|
|
|
Pink 02 |
|
|
|
|
Pink 03 |
|
|
|
|
Pink 04 |
|
|
|
|
Red 01 |
|
|
|
|
Red 02 |
|
|
|
|
Red 03 |
|
|
|
|
Red 04 |
|
|
|
|
Orange 01 |
|
|
|
|
Orange 02 |
|
|
|
|
Orange 03 |
|
|
|
|
Orange 04 |
|
|
|
|
Yellow 01 |
|
|
|
|
Yellow 02 |
|
|
|
|
Yellow 03 |
|
|
|
|
Yellow 04 |
|
|
|
|
Brown 01 |
|
|
|
|
Brown 02 |
|
|
|
|
Brown 03 |
|
|
|
|
Brown 04 |
|
|
|
|
White |
|
|