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.

Core

v3.4.2

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

Released

History
View changes
Install
npm i @gov.au/core
Tags
Contributors
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Alexander Sadleir avatar picture
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Hannah J. Nicdao avatar picture
  • Petra Gulicher avatar picture
  • Gary Broadbent 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.