Core includes a range of styles, variables and code that form the foundation of how the Design System works, including colour, typography and spacing.


View changes
npm i
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Petra Gulicher avatar picture
  • Ross Mullen avatar picture
  • Hannah J. Nicdao avatar picture
  • Prasanth Ponnapalli avatar picture
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Monica Gee avatar picture
  • Alexander Sadleir avatar picture
  • Julian Fleetwood avatar picture
  • Ryan Phung avatar picture
  • Simon Pascal Klein avatar picture
  • Trevor Brennan avatar picture

Why system fonts?

The primary reason is download speed. As government, our services are provided for everyone, regardless of their situation or location. By choosing to use system fonts users are expected to download less data and make less HTTP requests. Meaning people on low-end devices or internet connections in remote areas can access government services easier.

System fonts have also matured. Despite a poor reputation of being ugly, new operating systems are increasingly shipping with much more elegant and modern typefaces. Something we can now take advantage of to create faster load times and interfaces that reflect a users preferences.

Focus color

The original focus colour was orange as this provided a largest difference between the blue of the action colour. The orange used had to meet colour contrast and was quite dark and similar to red. This colour used caused issues with form validation appearance as it looked too visually similar. We have since changed the focus colour to a purple as it can not be confused with red or green form state options.