Patterns

Distinctly NSW out of the box

NSW Design System patterns apply reusable UI elements that are distinctly NSW out of the box. They have been carefully considered and tested to meet the needs of digital creators when developing citizen-centred products and services.

The Design System patterns are available as design assets in Sketch and in production ready code. They are responsive and meet WCAG 2.1 AA accessibility guidelines.

  • Sketch Logo

    Design System Sketch UI kit


    Download the Design System Sketch UI kit to get started. NSWDesignSystem V2.6.sketch.zip (10MB last updated 9 March 2020). A full log of changes for this release is available in the Sketch document and on Github.

Using the Sketch file

It is recommended you use Sketch version 60 or above to make the best use of the library. The Design System Sketch files use the Montserrat font family. To use the typeface in Sketch, download and install Montserrat.

First time install

  1. Download the NSW Design System Sketch file and store in a convenient location.
  2. If you are not customising the highlight colour, please skip to point 4.
  3. If you are customising the highlight colour, open the Sketch file and follow the instructions to update the highlight colour on the ‘typography/colour’ page.
  4. Open Sketch and add the NSW Design System as a library (see ‘How to use as a design library’ on the welcome page if you’re not sure).
  5. You’re all set.

Version update

  1. Open Sketch and remove the old version of the NSW Design System as a library.
  2. Download the updated version of the design system and store in the same location as the old file (please keep the file name the same).
  3. If you are not customising the highlight colour, please skip to point 5.
  4. If you are customising the highlight colour, open the Sketch file and follow the instructions to update the highlight colour on the ‘typography/colour’ page (please note you will have to do this each time you update, to retain your custom highlight colour).
  5. Open Sketch and add the updated NSW Design System as a library through preferences (again, please keep the file name the same).
  6. You’re all set.

Don't have Sketch or use a PC?

The Sketch file can be opened in Figma, a browser based application that has a free version you can use to get started.

Join our community

If you would like to keep in touch, or be involved in the testing the new pattern library, please contact us at digital@customerservice.nsw.gov.au or join our community.

Last updated