Welcome to the Australian Government Design System

A close up of Patrick smiling against a brick wall

This new, open source and accessible design system will speed up and bring consistency to government websites and services.

A screenshot of the Australian Government Design System website header.

Since June 2016 the DTA’s open source user interface or UI-Kit has been available for designers and developers in government. This week we’ve released its next iteration, the Australian Government Design System.

This work follows two years of improvements to the UI-Kit and six months of development and testing to transform it into a design system. A big thanks to all the contributors to this, especially the early adopters whose thoughtful advice has made a real difference. It’s been a mammoth undertaking and great to see your feedback so far.

What is a design system?

Design systems as an idea have existed for decades and taken many forms. In the past, a designer or developer would flip open a large book which showed the way typeface, headers, spacing, colours, logos and other design elements were to be used in different situations.

Now that we’re designing and delivering services digitally, a design system also needs code, web interface patterns and other elements to work online.

International organisations and governments are also using this approach. Google has Material Design, the United States has built their U.S. Web Design System and Westpac has GEL.

These systems give us common foundations we can use to speed up design and development, be consistent, prototype and test new features, deliver good online experiences at scale and make fast improvements to the services people need.

Pick and mix

The Australian Government Design System includes a new colour palette which uses light and dark themes, standardised font sizes and spacing functions for consistency. It also offers a collection of 24 tested components with accessibility baked in which can be picked up and added to any site or service.  

These are ready-made features such as text input fields, buttons, footers, and navigation items. Each can be combined, customised or extended to suit different uses.

We’ve also added thorough reasoning on why and how individual components were built, along with accessibility information that shows how each behaves when used with screen readers and other assistive technologies. This will help designers and developers get on the same page and come up with future improvements.

A screenshot of the design system website looking at the buttons documentation.

Caption: The buttons page, showing the default example with copy pastable code snippet. Note the sections for rationale, accessibility, code and discussion.

This is for everyone

There’s a great responsibility that comes with working on a design system for government. The code, designs, components, templates, and patterns will help build services that millions of people rely on to get things done.

In this design system, we’ve considered visual presentation and navigation, keyboard accessibility and screen readers for every component. We’ve also thought about how components appear and function separately and together so they remain accessible in the end product. This focus is something that sets it apart, avoiding the difficult task of retrospectively applying accessibility standards to off-the-shelf frontend frameworks.

For this system, we’ve looked closely at the draft criteria for the international web content accessibility guidelines or WCAG 2.1.
 

Three pictures of the buttons component shown in various examples of color blindness

Caption: Image on the left and middle shows the buttons with different colour impairments deuteranopia and grayscale. The image on the right shows an example of how they can be navigated by a keyboard.

Share what you know

Building this design system was our opportunity to move to a community-driven and maintained library for people to draw from. The way we have been building this forum is something we’ve previously written about on Medium but it meant opening up discussion and decision-making to all of you.

We’ve made our backlog public and put in place new community forums where you can ask questions, put forward ideas and come up with solutions on common problems together.

A screenshot of a conversation in the new community forum

Caption: A conversation in our new community forum.

This community will shape the direction the design system takes, make improvements, add components and templates, share reasoning and allow for more conversation between the amazing practitioners working on government services. Our role will be to act as moderator, contribute our experience and user insights, and do the legwork when new components or information is ready to go into the system.

10 people sitting around a table on a video conference meeting with a team on screen.

Want to get started? Head over to designsystem.gov.au and visit the forum. From the site you’ll also see a link through to the GitHub repository.
 

Patrick De Young is the product manager in the design system team at the DTA.