dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Design assets in sketch

We provide designers with a sketch file to get started prototyping using the components of the Design System.

Download the sketch design files from the download page.

The design system sketch files use the default system font for OSX, San Francisco. San Francisco is not usable in sketch by default, to use the typeface in sketch you have to download and install San Francisco.

Using the sketch file

Open the file in Sketch, the file contains three pages Design System, Symbols and Example.

A screenshot of the sketch pages

The Design System page is split into multiple art boards and includes:

  • Changelog; what changes have recently been made to the sketch file
  • Basic instructions on how to use the file
  • Light, dark and system colour schemes
  • Font sizes
  • Spacing
  • Components

The Symbols page contains symbols to create components applying reusable patterns:

  • A symbol for each of the components
  • Variations for desktop and mobile
  • Variations for light and dark

The Example page contains example pages created using the symbols. This includes a mobile, tablet and desktop page.

Changing the colours

The sketch symbols are themable and you are able to apply your own colour scheme.

To change the colours make sure you are on the Design System page. Go to the dark or light colour palette artboard and click the square of the colour you want to change.

A screenshot of a user selecting a colour in sketch

Once selected in the menu you can press Edit -> Find and replace colour.

A screenshot of a user opening the menu and pressing edit, find and replace colour

You can now select a new colour. To avoid opacity changing when selecting a new colour, make sure the Preserve original opacity option is selected.

A screenshot of a user opening the menu and pressing edit, find and replace colour

Now you can press replace and see the colour change throughout the symbols.