A NSW Government website
Design System v3.0.5

Theming

NSW Design System supports multiple levels of customisation depending on your branding requirements.

Variables

CSS variables allow easy and on the fly customisation whether you have a build setup or a vanilla css implementation. These variables allow customising the following:

  • Colour Variables
  • Font family
  • Font size and line height
  • Border radius

To theme the NSW Design System, make sure to install or download the NSW Design System.

Below are the exposed variables for the NSW Design System's base theme. Simply copy the variables and update the values to match your theming requirements. Please refer here for the available list of brand colours or create a customised palette.scss

With CSS

Enclose the CSS variables in style tag in your html page after the head tag.

For a more local scope, use a selector to target instead of :root. Read more on custom properties here.

With SCSS

The NSW Design System has a theme.scss file that defines its look and feel.

Create your own theme file and import it in your main.scss file