What is this?
UI-Kit is 2 things:
- a draft design guide to build an accessible standardised look and feel for GOV.AU projects: gov-au-ui-kit.apps.staging.digital.gov.au
- a lean and frugal CSS & JS framework (found in
assets/) that you can include in your project:
Link to precompiled minified files
GOV.AU UI-Kit is currently in early draft release. You can help us build it by contributing.
The /docs/ folder contains draft documentation on experimental work. For example, how to install UI-Kit for use with
- Bourbon, version 4.2.7.
- Neat, and settings for a grid framework with some good defaults.
- Basic styling for content with some good typographic coverage.
- Basic styling for UI elements (eg
For a full list of features see the CHANGELOG.
UI Kit aims to be WCAG2 AA compliant, and AAA where possible.
We use automated testing:
We are working on:
- manual evaluation using Wave by WebAIM
- manual checking of page structure, content and keyboard navigation
- testing with users and assistive technologies
- an audit.
Read cross browser and device support table.
The kit uses a conditional styling mixin for specific versions of IE. Use this when extending the kit.
We are working on:
- automated browser testing as part of our build process
- manual testing of all CSS, JS and markup
- documenting browser support for each component.
What this isn't
This is not yet a complete design or design system. This is the starting point that will develop with your help.
Who is this for?
Teams building Australian Government sites. This was designed for GOV.AU teams, but we welcome use outside of federal government.
How is this related to the Digital Service Standard?
The Digital Service Standard requires teams to build services using common design patterns. This is draft work on the framework and guidance that will eventually become the design patterns for digital content.
You should use this with the draft Content Style Guide for Digital Transformation Office projects.
Build the Guide yourself
We have a build process for the development of the framework which uses gulp on node.js.
To build it yourself, begin by installing the system dependencies:
- Node.js v5.0.0+
Install node package dependencies:
Run a build:
npm run-script build
Run a build with livereloading:
Run accessibility tests:
Note: Check Pa11y's requirements to make sure you have the necessary dependencies installed to run the automated accessibility tests.
The compiled style guide can be found at
./build/index.html and the UI Kit CSS
We have automated the build, with a few additions:
cssnanofor CSS compression
autoprefixerfor adding CSS vendor prefixes
AusDTO/gulp-htmlfor HTML validation
kssfor auto-building a living style guide
Our CI build is available as a shell script at
We use Bourbon 4.2.7. We include its
.scss files directly rather than calling it via its node (or gem) package. Bourbon and Neat live under
Some of the key libraries we use are:
^ = compatible with version (see semver).
Make GOV.AU UI-Kit better
- Contribute to our GitHub issue register by logging new issues and joining the discussion.
- Contribute to this repository. Please see CONTRIBUTING.md, Contributor Code of Conduct and our code Conventions, (also see Block Element Modifier), first.
- Contact us via the DTO slack in
This framework is in active development.
Goal: build a lean and frugal CSS/SCSS framework to make building GOV.AU easier. It should:
- provide base consistency
- allow for easier rapid prototyping directly in the browser
- should not get in the way of customised design needs.
We aim to provide stable, usable releases at the end of each sprint.
We are wary about breaking changes. We will work to ensure we will gracefully deprecate any changes that cause things to break.
We may create an installer wrapper (likely node-based), or release via git submodules.
Copyright & license
© Copyright Commonwealth of Australia.
With the exception of the Commonwealth Coat of Arms and where otherwise noted, this work is licensed under the MIT license.
GOV.AU UI-Kit is maintained and funded by the Digital Transformation Agency.