Welcome to the Australian Government Design System
This new, open source and accessible design system will speed up and bring consistency to government websites and services.
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.
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.
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.
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.
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.
Do you need help?
If you need help with something on this website, please use our form.