NSW Design System
NSW Design system is a collection of reusable UI components used on the NSW government websites.
See live examples of NSW Digital Design system components and guidance on how to use them on you website at NSW Design System.
Using the design system
How you use the NSW Design System depends on your team's capabilities. We recommend using
npm but also provided in a CDN, and a downloadable starter kit which includes all the compiled assets.
Installing with NPM
npm is a package manager for Node-based projects. We recommend
npm packages because it makes it easy to update and install the design system from the command line.
- More information can be found via the nodejs Installation guides
package.jsonfile using the
npm initcommand in the terminal. You will be prompted to enter several pieces of information, like the name of your application, version, description etc.
nsw-design-systemto your project’s
npm install --save nsw-design-system
Importing styles into your project
The NSW Design System styles need to be added to the main Sass file in your project.
Use the below snippet to import the NSW Design System (ideally placed before any other imports or sass):
Adding the font and the icons
In your main html document add this line of code inside the
<head> tag. Make sure that it's placed before the NSW Design System styles import.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="path/to/main.js"></script> <script>window.NSW.initSite()</script> </body> </html>
Depending on your project set up, you might wish to copy the file into your project from
node_modules or add the reference to your build workflow.
Using JSDelivr CDN
The bundled css and js files are also hosted in JSDelivr.
You can add the files to your main html document
<html> <head> ... <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nsw-design-system@2/dist/css/main.css"> </head> <body> ... <script src="https://cdn.jsdelivr.net/npm/nsw-design-system@2/dist/js/main.min.js"></script> <script>window.NSW.initSite()</script> </body> </html>
Download starter kit
Design System Figma UI kit
Get access to the latest Design System UI patterns and styles via the Design System Figma UI kit.