
Australian Government Design System - prawn
https://designsystem.gov.au/
======
nhf
See also:

* 18F and USDS (USA): [https://18f.gsa.gov/](https://18f.gsa.gov/) and [https://www.usds.gov/](https://www.usds.gov/)

* GSA Technology Transformation Service: [https://www.gsa.gov/about-us/organization/federal-acquisitio...](https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services)

* US Web Design System: [https://v2.designsystem.digital.gov/](https://v2.designsystem.digital.gov/)

* Government Digital Service (UK): [https://www.gov.uk/government/organisations/government-digit...](https://www.gov.uk/government/organisations/government-digital-service)

* GOV.UK Design System: [https://design-system.service.gov.uk/](https://design-system.service.gov.uk/)

~~~
nafey
How many design guidelines do we need I wonder. Is the ideal scenario that
every UN member comes up with a design system for their govt websites? I feel
like this is somewhat wasteful.

~~~
davnicwil
It's probably (hopefully) wasteful in the same way that having multiple
browsers, multiple web frameworks, even multiple programming languages is
wasteful.

Sure, there is duplication of work, redundancy etc. But what you end up with
is a much wider surface area to try different things, better things, copy
ideas and combine good ideas in different ways.

On the contrary, if every country just pools ideas and selects the 'best' via
a giant committee selection process, would you really expect that to produce a
better result over the longer term? (Genuine question and I'm open to the
answer being yes but I personally suspect not).

------
Untit1ed
We use this for [https://search.data.gov.au](https://search.data.gov.au) and
have just survived the easiest accessibility audit I think I've ever been
through. It's nice using a set of components that make your UI _more_
accessible rather than less, which has been my usual experience in the past.

~~~
sbfriends
Your site doesn't render anything without JS enabled :'(

------
cyberferret
Colour me surprised. I clicked on the link expecting the usual abomination
that is an Australian Federal Government website that I usually deal with, but
I was pleasantly surprised at the nice design and layout.

Now, if only we can extend this to our local state government...

~~~
kartikgupta7
One would think that the federal design system would seep down to the state
governments but NSW is creating it's own design system -
[https://www.digital.nsw.gov.au/article/weve-released-
first-d...](https://www.digital.nsw.gov.au/article/weve-released-first-
digital-design-system-nsw-government)

~~~
arthurbrown
NSW design system is built on top of the DTA design system. They've done
exactly what you're suggesting

[https://www.digital.nsw.gov.au/digital-design-
system/compone...](https://www.digital.nsw.gov.au/digital-design-
system/components/ui-pattern-library/how-use-pattern-library/npm-install-
components)

~~~
kartikgupta7
ah, did not know that. thanks!

------
dbg31415
Doesn't do a great job with focus states.

Hit tab and scroll through the page:

* Buttons overview - Australian Government Design System || [https://designsystem.gov.au/components/buttons/](https://designsystem.gov.au/components/buttons/)

And then compare it to this page:

* Buttons | United States Web Design System || [https://v2.designsystem.digital.gov/components/buttons/](https://v2.designsystem.digital.gov/components/buttons/)

A lot of elements don't do a great job with lining up the focus states, they
seem just sort of bolted on.

Here are a few issues I saw:
[https://imgur.com/a/t0iwmWi](https://imgur.com/a/t0iwmWi)

~~~
chemicalnovae
I mean...it's actually green and gold.

But seriously, I can only think of a handful of official things that use the
"official" colours, lots of sports teams but not really used by the
government.

Edit: Parent originally mentioned that the website doesn't use the "Official
Australian Colours".

~~~
dbg31415
Fair.

I removed that part of the comment

As an American living in Sydney, and working for an agency, I feel like
accessibility is behind the US. This set of tools should help, but also the
use of Lighthouse by QA teams is key.

With Lighthouse, any score below 90 on any metric means our work fails QA —-
it’s in our contracts to exceed 90. As a result, our clients rave about how
easy it was to pass accessibility and security audits. Only secret is
Lighthouse, and other automated checks, as part of the build process.

~~~
deadcat
The agency I work for is doing pretty extensive work to support JAWS
2018/2019, and NVDA. The problem we have is that a fix for a specific issue in
JAWS may break NVDA (or cause double reads).

Making everything work nicely in our Single Page Apps is a nightmare.

~~~
dbg31415
If you try and make it work after the fact, yes. Nightmare.

If you know it's a target when you are in architecture, much easier to design
it in a way that will pass the tests.

Not saying that it's always perfect, but generally speaking having tests is
better than not. Just key to have the tests early and often, so you can fix
issues before they get baked in throughout a complex system.

------
walrus01
Canadian federal design identity:

[https://www.canada.ca/en/treasury-board-
secretariat/services...](https://www.canada.ca/en/treasury-board-
secretariat/services/government-communications/federal-identity-
program/manual.html)

~~~
lstamour
Alternatively: [https://wet-boew.github.io/wet-boew/index-
en.html](https://wet-boew.github.io/wet-boew/index-en.html)

------
King-Aaron
Could... could this be the most modern department in the Australian
government?

------
legostormtroopr
But why? Outside of a few big names (eg. Bootstrap), open-source CSS
frameworks come and go on whim. This is CSS Framework that is also dependent
on government funding, being supported by the very shallow Australia tech
sector - no offense but working in Australia, many high quality developers are
lured away from Australia to higher paying areas.

While this is neat, whats the guarantee this will be kept up to date over the
next 1,2 or 5 years?

~~~
chrisseaton
I think you're confused about what this is.

They're not pitching it as a design framework for others to use.

They're just showing the design framework they use internally. They guarantee
they will keep it as up to date as they need it for as long as they need it as
they own it and they're paying people to work on it.

------
mosselman
That menu at the top of this page is horrible at communicating where you are.
There is just a small interrupted line at the bottom and a slightly different
color that shows we are at 'Content page':

[https://designsystem.gov.au/templates/content/customise/](https://designsystem.gov.au/templates/content/customise/)

Apart from that the whole effort looks pretty polished.

~~~
alexpage
Thanks for the feedback @mosselman. Do you have any ideas on how we can
improve this?

Our main menu has just been released and is going through usability testing
right now.

During the design process we experimented with underlines on the active main
menu item, however it felt messy.

Feel free to create an issue on GitHub if you want to start a discussion.
[https://github.com/govau/design-system-
components](https://github.com/govau/design-system-components)

------
mianos
It would be great if some of the web sites like mygov or the ATO business
portal used stuff like this instead of the brain dead frameworks they use now.

~~~
deadcat
The business portal already has work underway to replace it. The Tax Agent
portal has a replacement currently in beta. My gov itself doesn't have much
content on it - or are you referring to ATOOnline ?

------
svict4
Victoria Government design components:
[https://ripple.sdp.vic.gov.au](https://ripple.sdp.vic.gov.au)

Worksafe Victoria uses Vue for their design system:
[https://todaydesign.github.io/worksafe-
frontend/](https://todaydesign.github.io/worksafe-frontend/)

------
deadcat
Bigger Australian government departments tend to roll our own components
anyway - simply because we are all running on our own stacks with differing
needs.

The department I work for still uses Knockout/Durandal for example.

~~~
svict4
So you should always play to the skills in your team, agreed. But in this
case, it gives consistency across Government. If your Department/Agency is
rolling their own components, why not add them back into the Design System for
others to use? Less repeated effort, cheaper for the tax payer.

~~~
deadcat
I would like to, but they are too tightly coupled to our stack.

~~~
svict4
Right, so there's probably a discussion that needs to be had with your
enterprise architecture team on why said stack was used (irrespective of skill
sets available) when certain features are available "for free" (e.g. the
DesignSystem)

I'll have a wild stab in the dark in saying that if the stack is really
tightly coupled, that there's extra labour required by the dev team to meet
the Digital Service Standard. Which is, really speaking, unnecessary public
expenditure.

~~~
deadcat
You are preaching to the choir here mate. Keep in mind we have over 60
developers, and over 100 single page applications under development/support.

The frameworks we are using have been in use here since 2014 (pre-dating the
DesignSystem). It is not an easy matter to switch over to these components,
especially considering the only framework supported is React.

As far as unnecessary public expenditure... I could probably write 1000 pages
on it and not make a dent.

------
evantahler
The government supports react!

~~~
dwd
More like my tax dollars supports someone scratching their itch to use React.

Is it just me or does

[https://www.dta.gov.au/our-projects](https://www.dta.gov.au/our-projects)

load with no stylesheet.

Fast and useable like it's 1996!

~~~
ThePadawan
It is you.

~~~
dwd
Seems dta.gov.au is broken on Firefox Focus on Android.

Looks fine on desktop and regular Firefox for Android.

~~~
Maxious
I disabled the "Trackers blocked" which fixed the css. Reenabling left the css
working fine with only 1 blocked item (probably Google Analytics).

Is there anyway to debug what got blocked? seems other sites have reported
this false positive too [https://github.com/mozilla-mobile/focus-
android/issues/2772](https://github.com/mozilla-mobile/focus-
android/issues/2772)

------
altitudinous
Standards are good.

------
Apocryphon
Perfect! I've just started watching Utopia, which was recommended in another
HN article. The show makes me wonder what working for the Australian
government is really like.

------
new_here
Getting there.

