A design system for the federal government | Hacker News Reader

A design system for the federal government

designsystem.digital.gov

180 pointsgalaxyLogic89 comments

In our foundational setup for the new https://beta.nasa.gov and https://beta.science.nasa.gov websites, we've adopted the US Web Design System (USWDS). While our other core products primarily rely on Tailwind, we are quite familiar with this toolkit. In my opinion, comparing the two is not entirely straightforward, but the USWDS toolkit has been implemented effectively, despite some of its "America First" usa-* class names.

The decision to use the same toolkit across our projects is largely influenced by the 21st Century Integrated Digital Experience Act (IDEA), which mandates federal agencies to modernize their websites and digital services. You can find more information about IDEA here: https://www.hhs.gov/web/governance/21st-century-idea.html#:~....

> despite some of its "America First" usa-* class names

It's the American government... isn't it?

What namespace would you expect them to use?

I would wager the intention there is that the prefix is unnecessary or that it could otherwise reflect the name of the toolkit as opposed to the country. As an American I also find it a little "yeehaw, 'murica" and not the norm for design frameworks, but it's much ado about nothing.

Somewhere in London some intern at gov.uk is still not finished rewriting all the god-save-the-queen-hr-<color> CSS class names to god-save-the-king-...

*god-save-the-queen-hr-<colour>

LOL

haha, fair point. Still, I'm on the fence about how utility components are namespaced in USWDS. Perhaps giving users the flexibility to define the namespace might work better? One thing that bugs me is the absence of class-sorting like we have in TailwindCSS. Plus, there are some gaps I've noticed in USWDS. The naming, especially when comparing "padding-x-2" and "p-x-2", can be really annoying when switching around, maybe that could also be an option for the developer or project. Similar to the ideas antfu has on uno.css https://unocss.dev/ ♥

The Canadian government has a design system[0] for government services too, that I think is quite decent. It's almost primitive, but it's clean, consistent and follows good accessibility principles. It's downright boring, but I think that's great. I am not interested in a flashy, only-compatible-with-latest-Chrome design for a government website. :)

Oh, they even include a content style guide[1] which goes so far as to recommend things like writing with "plain language" to ensure content is easily understood. Really cool!

Even further, they outline some good practice around how to actually create and maintain a good website[2], including suggestions like "build in accessibility from the start" and "use open standards and solutions".. How cool is that?

For real though, I need to reiterate how impressed I am with their design system. Check out Canada.ca[3], the country's official website. It's "plain jane", right? I can't believe how readable it is. It's just plainly-worded links to topics of information you may be seeking. The chosen standard font is extremely legible, compared to so many websites. And it loads SO fast! :D I notice UK Govt's website[4] is quite similar, which is great (though the cookie banner covering 2/3 of the screen isn't so nice haha)

[0] https://design.canada.ca/

[1] https://design.canada.ca/style-guide/

[2] https://www.canada.ca/en/government/system/digital-governmen...

[3] https://www.canada.ca/en.html

[4] https://www.gov.uk/

Dutch government websites also have a no-frills design and well-written content in a similar style:

https://business.gov.nl/

https://duo.nl

https://belastingdienst.nl

UK’s got a very clean system as well.

https://design-system.service.gov.uk/

This is the NL design system: https://nldesignsystem.nl Open for public participation.

I would like to note that there currently is no centralized Design System for the Dutch Government, unfortunately. All agencies are creating their own Design System based on the Rijkshuisstijl.

Currently I'm working on ROOS (https://rvo.nl/roos) which is the Design System for the Netherlands Enterprise Agency. This is build with the already mentioned NL Design System. My hope being that this will bring the different agencies together and start working on a centralized Design System for the Dutch Government and follow the excellent examples of https://design-system.service.gov.uk and https://designsystem.digital.gov/

The style is good, or at least alright -- consistant.

Speaking as a new immigrant to Canada and I've had to deal w/ a lot of CAN Gov sites.

Problem is they still use bureaucratic-ese and it's impossible to get a clear answer without calling. I'll give the US IRS a ton of credit there, I can get actual answers and what to do from the website text, but with the IRCC or other Canadian orgs I pretty much have to call and wait on hold to get basic answers.

In the near future governments will probably mandate using AI on their web-sites to answer users' questions.

Oh of course, pretty often the actual content may be missing important details. I've definitely asked more questions of either my accountant or a CRA rep than by reading text on an official website, because all the edge-cases and potential weird scenarios are not covered (unless you read the entire text of all relevant laws and know them offhand, I guess).

I wish more designers would read the section on color: https://designsystem.digital.gov/design-tokens/color/overvie...

Especially the sections on contrast and accessibility. The current trends for shades of gray/off white everywhere often make pages disturbingly hard to decipher.

Not a patch on the UK government design system IMO. Used by the UK gov and 3rd parties to produce consistent, accessible and aesthetically pleasing public service front-ends. More: https://design-system.service.gov.uk/

I love the UK government site design, in particular their font (Transport something or other?). Sadly the font may not be used anywhere but .gov.uk sites.

It's called GDS Transport[0] and it's custom version of New Transport (for digital use) that's based on the original Transport font designed in the 1950s.

[0] https://en.m.wikipedia.org/wiki/Transport_(typeface)

Having seen a number of different gov websites, I think that gov.uk are the most aesthetically pleasant and UX-focused. I would only say that at times they are excessively verbose, but that is less of a design system fault and more from the "let's protect us from any liabilities and people making totally silly assumptions about what, when, and how we do things" department.

My favourite part is the NHS website. Pages like this one [0] are an excellent example of clear, effective writing. They heavily influence how I write similar content.

[0] https://www.nhs.uk/conditions/cough/

It's one thing to have a great repository of reusable, accessible, versioned, centrally managed and agreed components. It's quite another to have production systems actually using that repository, unless the DS came before building the systems.

So I'd be interested to see how this might get over the hurdle of being retrofitted into legacy systems. So many design systems I've encountered are effectively fictions: great ideas being maintained in theory, but it's next to impossible to commit the necessary operating costs to getting them into production. So the sites and apps you see may look like they're using a DS, but many of those components are "impostors" not being managed in the DS at all.

Having worked on a couple of these projects, the new design system is being implemented as new systems are built or when upgrading tech on older systems. I don't think anybody is doing an overhaul just to implement the design system, but as part of a new design or redesign, it's quite useful.

Indeed, certainly nobody is doing an overhaul just to implement the design system, because the business case for that (unfortunately) is too hard to make. And obviously, if you've got a DS and building some new front end from scratch then you're going to use it.

But in my experience, when upgrading tech or introducing new features that involve cracking open the FE codebase, there is extreme pressure to do the cheapest/fastest thing. If a product manager asks his team how long it would take to do X, then how long it would take to do it AND update various things to use the DS in the process, that extra work seldom gets signed off. "No extra opex on my budget".

The design system, where once productive FE devs go to die thinking everyone should use it

> The design system, where once productive FE devs go to die thinking everyone should use it

Genuine questions: is it badly made to the point where it would slow people down, or do you have another reason for disliking it? What's wrong with the government thinking that many of their sites should look and behave in similarly predictable ways, in addition to tackling accessibility as well, at least to a certain degree?

In my eyes, that's not that different to people choosing to go with Bootstrap or PrimeFaces (which actually provides UI components that have versions tailored for Angular, React and Vue, in addition to Java; something that seems cool and that I haven't seen many others actually try to do) because they want something that works out of the box and lets them worry about the forms and page content, instead of as much about how it works.

In other words, do we really need so many bespoke design systems (and all of the work that goes into that), as opposed to fewer but more well made ones?

Your point makes a lot of sense, but then everyone wants that small bit of customization that substantially destroys the whole idea of a design system. Not to mention that while making sense for the government, which might have contractors without even knowing about them, it’s really stupid for small companies (why the hell i want to use randomCo design system?) and it’s just pure vanity.

I don’t know much about web design so I ask from a place of ignorance: has this been done well?

Standardising components sounds like a good way to improve efficiency and safety but I imagine if it is done badly it could do the opposite.

I’m always skeptical of big government initiatives, so I am interested to hear how those in the know grade the gov in this example.

Any site design will look stale after five years, no matter what standards you follow. It's just an unfortunate reality, there is no way off of the wheel unless you are like Craigslist and deliberately reject all convention.

I wish this wasn't such a commonly shared opinion. Too defeatist, in my view. Craigslist is spartan, sure, but there are less extreme examples such as McMaster-Carr. They've had the same design more or less since 2010 at least and it is usually considered both functional and tastefully current. I think in the early 2000s they had a different design which was fine, and they obviously skipped the whole "web 2.0" era of design.

You're right, there are a few exceptional sites that manage to have a "timeless" look and I'd probably put McMaster in that category.

> there are less extreme examples such as McMaster-Carr. They've had the same design more or less since 2010 at least and it is usually considered both functional and tastefully current.

This? https://www.mcmaster.com/

On desktop, sure. But they don't work in mobile. And that's easily 80% of the troubles of modern design: to avoid building everything twice, today people write "responsive", "mobile first" websites that, on desktop, tend to have an excessive amount of whitespace and other issues (see for example the old vs new reddit layout)

What's being demanded of websites in 2023 is just much more difficult to do well than what people wanted in 2010.

It isn't immediately clear to me what about that website isn't working on Mobile, as it seems to look pretty decent for me? (Firefox on a Galaxy phone.)

It is my first time going on mcmaster.com and it's working great on mobile for me (Android, Firefox). It feels snappy, good button sizes, great filtering options, no dead ends in flow until login to purchase. Top marks from me!

thirding the mobile experience for me looks great on first try. I mean really really good.

What are you talking about? That site looks great on an iPhone SE. Are there some issues? Sure. That doesn’t mean throw the baby out with the bath water, redesign to whatever’s trendy today, and kick the can down the road.

Speed never falls out of fashion. They're not the prettiest to look at but pleasant to use.

I am disappointed any time "modernize" comes up as one of the priorities on a redesign, especially for enterprise products. Most enterprise software does not gain much from looking "modern" and like all fashions the more modern the UI the more quickly it becomes dated.

In extreme cases of very large products whose owners want them to look exceedingly modern it can be like painting the Golden Gate Bridge: by the time they finish implementing the last components and icons, the ones that were implemented at the beginning of the project are already due for an update.

The job security simply isn't worth the maddening repetition.

Yeah, you should see the Canada.ca design system[0]. It's ultra-boring, but it works, and has been the same for a very long time (and I'd be happy if it doesn't change much at all). Having such a simple design standard makes it so I can hit the website of any government service and understand how to "parse" the site and find my way around. I never have to relearn a totally new design language and information architecture, which is huge for me, as I cannot stand having to "re-learn" sites every couple years!

[0] https://design.canada.ca/

If you write html properly - in 5 years do a minor tweak to the css and you have a new fresh look.

how will that help you keep employed though, better to have the css as part of your JS so any redesign is months of tiring work to earn those big consulting bucks!

/you may get the impression I'm bitter.

Me too my friend, me too.

(btw your solution is needlessly complicated and way too much hard work - easier to sit with the client, exhale deeply then say "A full redesign? Thats quite a big project and its a lot of work, are you sure?" offer a fixed rate contract assuming 100's or even 1000's of person-hours and deliver (after a polite overrun of a few weeks) the updated css.)

/you may get the impression I'm bitter and cynical.

>btw your solution is needlessly complicated and way too much hard work

it's not my solution, it's the solution I'm suffering through because our styling, as determined by external company, is handled via Chakra UI meaning that redesign requires JS work.

This is a discussion about governmental sites. I don't use them because I want to but because I have to. So, current fashion and appeal are second to usability. There are some fundamental laws and limitations on how people process the presented information and that SHOULD be taken into account in designing a public service. Ideally, there is an interest in both parties (state and citizen) that their interaction is correct in order to fulfill their obligations and ensure their rights.

Also many of the interactions with governmental digital services happen only once a year. I've been in helpdesk supporting people on a webapp with an obnoxious interface that they had to use 3 to 4 times a year to fulfill their project report in order to get paid for their project work. The UX was so out of the conventions that people hated it with passion and I had to help the laggards to use the application.

"Stale" is good for government websites. If you've got to interact with a form regularly as part of a legal requirement it is good that it never changes and looks exactly the same time every time you load it across a decade.

In this case a design system standardises forms and form components and that's very valuable. This means that every government website taps gets to learn the same little design lessons at once, from browser compatibility to keyboard navigation and accessibility.

gov.uk nailed this, and it makes their website very pleasant to use. They share a lot of their UX research so it benefits a lot of other people including myself.

I'm also a big fan of writing guides that teach people to write simply and clearly. It's sorely missing where I live.

I'd say that a good design should not look modern. It should look timeless.

That’s a pretty nice quip but not necessarily meaningful.

But it is meaningful. The websites are being interfaced with pretty much timeless clients - people. We interact with the world with our body and process it with our brain. The world has the same physics laws all around the world, so it's consistent. The virtual world is becoming anything but that. At least public services should become more consistent and change more slowly upon the most necessary changes.

It should lack both space and time to reach web 6.0 perfection.

Which site is considered “timeless” to you?

gov.uk til.gov

i'm not sure i would call this a "big government initiative." this is pretty cheap, obvious stuff.

you might pull an off-the-shelf component library for a demo app or even a startup, but the value of building in-house/from-scratch in government, especially military, cannot be understated. the web ui ecosystem is rife with security risks and accessibility footguns.

it looks fine to me. it's a design system, not rocket science.

It does quite a few things well especially around helping website developers comply with section 508 accessibility requirements. They also do a lot of user testing a research which is reflected in the guidance for the various components. For example something as simple as asking someone to enter their name can be nuanced when dealing with a large diverse population: https://designsystem.digital.gov/patterns/create-a-user-prof...

As a user of the department of VA website I can say with confidence it is absolutely unnecessarily terrible.

The login process alone is kafkaesque with literally 6 methods of login offered and a Byzantine routing process between nameservers, root DNS bouncers and processes that can’t maintain login state.

What a joke

How is the login experience, DNS, and routing related to the US Web Design System?

Yeah this reply doesn't make sense. This is talking about design. You're talking about login. You can stretch it and say UX can be improved but even then it's not as relevant.

You're complaining (albeit potentially rightfully) about how the system is used. Design systems are more about how things look. The line is a bit blurry but what you're describing has little to do with the design system.

Correct.

Design is UX not simply UI

A design system has little to do with UX. "Design system" is a nuclear term.

Ironic, I literally 5 minutes ago had to break out my laptop to do a simple task on a US government website because of very poor mobile UI design.

This is much needed and much appreciated!

Tables, but no treeviews.

Interesting LICENSE: https://github.com/uswds/uswds/blob/develop/LICENSE.md

Wonder why they decided to go with Material Icons vs building out their own icon library? US seems to have various glyphs all over the place, would be neat to see them consolidated in a standard icon library.

Creating icon set from scratch is rather difficult and time consuming. It also requires a lot of research to ensure usability. What ends up happening is designers will just start from existing icon set anyway to stay close to existing convention and mental model.

I guess they felt it’s not the best use of their limited resources?

It also mentions Font Awesome. Probably better to build on ubuquitous icon sets instead of wasting taxpayers money on redesigning exclamation mark icons.

This would cost a lot of money.

They can still augment with custom icons where it actually matters.

Really unfortunate. It’s not like we don’t have the will or capability. I’m hoping this is just while they iron out licensing agreements.

Could you or someone please help explain why a new icon library or license would be really fortunate compared to this choice?

How does public domain license compare to something like GPL? Isn't public domain better?

Public domain allows you to do whatever you want with the work. GPL requires derivative works to also be GPL’d.

As a matter of law, all copyrightable work done by Federal employees as part of their job is public domain. This is yet another loss to society in the trend towards privatizing government operations.

Can’t tell what you’re lamenting.

If the federal government designed their own icon set it would be available for anyone to use without license restrictions. Since they’ve decided to use someone else’s icon system, they aren’t making a public domain set of icons.

But also, since they’ve decided to use someone else’s icon system, taxpayers are not paying for yet another icon system, when an existing one under an Apache license is available.

This is true. In some ways, Apache/MIT licensing is superior to public domain licensing as some jurisdictions (Germany, IIRC) don’t recognize public domain as a status.

I’m lamenting the fact that by contracting out work to private companies, the government-sponsored work product belongs to the private companies and not the public domain. I suspect from the part of those architecting the contracting (on both the government and private side) that this is a feature, not a bug.

There is a standard set. https://designsystem.digital.gov/components/icon/

Those are material icons

Producing a bespoke icon library for a large organization can be shockingly expensive depending on how the organization is structured.

I've worked on projects where dozens of different stakeholders needed to sign off on the icon library resulting in thousands of person-hours of design review meetings alone. If I could save millions of dollars by picking an existing icon library and adding only what is needed that seems like a smart move to me.

I want this to be good. I would happily use something like this for my "bootstrap" knowing that a lot of thought has been put into it.

Is it weird to anyone else how completely they avoid talking about the actual technologies involved? It just keeps saying “design system.”

So… is it just a bunch of SASS files and icons? Or is it web components? Or is it react/vue/angular components? Are there tests? Is there a storybook?

It seems like all that stuff should be front and center on the landing page

It's a set of styles and guidance on how to use them in a universally accessible manner.

You're unlikely to build anything that's usable by everyone using React/Vue/Angular. I mean, it is possible, but it's hard enough to get right with plain HTML and CSS - adding a load of JavaScript to the mix just confuses matters.

> You're unlikely to build anything that's usable by everyone using React/Vue/Angular.

I wonder why so few actually try doing this. I mentioned this in another comment, but PrimeFaces is one of the few (only one?) sets of usable components, that have libraries available for Angular/React/Vue/Java (though using Java is a bit of a mess because of JSF, though some like it): https://www.primefaces.org/

It's immensely cool to be able to use similar components and such across different technologies, as opposed to wanting one of those component libraries and thus being pigeonholed into either using just React (or something else), or third party bindings of questionable quality.

It's probably never going to be truly 1:1, but getting close enough seems like a good thing to me, here's an example of a random component:

https://primeng.org/treetable

https://primereact.org/treetable/

https://primevue.org/treetable/

https://www.primefaces.org/showcase/ui/data/treetable/basic....

I didn't even know anyone had attempted this, that's really interesting - thank you for posting the links.

In my statement you quoted above though, I was referring to the accessibility of components built using JS libraries. They introduce so many new moving parts, taking into account how every browser, OS, screen reader, other assistive tech, and all combinations of each will work is tremendously hard _without any JS_.

PrimeFaces looks interesting. Is it free as in free beer?

> Is it free as in free beer?

PrimeNG: https://github.com/primefaces/primeng/blob/master/LICENSE.md

PrimeReact: https://github.com/primefaces/primereact/blob/master/LICENSE...

PrimeVue: https://github.com/primefaces/primevue/blob/master/LICENSE.m...

PrimeFaces: https://github.com/primefaces/primefaces/blob/master/LICENSE

They do have their own store, where they try to sell all sorts of products (custom themes, templates, LTS support, things like that), though I haven't felt the need to get any of those and just use the regular components and additional free utilities (flexbox utilities and icons). There is more information on their main website: https://www.primefaces.org

huh, I didn't know about this! thanks!

It’s not weird. When you’re dealing with an organization as big as the US government, you’re not going to be able to standardize on a single technology for front end engineering. So you say “Make all your stuff look like this” as an opening statement, and then secondarily work with certain large departments to implement the visual stuff (1em padding on modals, 5px rounded edges on cards, tooltips on icon buttons etc) in the technology that each is using.

You won’t be able to get to everyone, but the people you don’t get to (say, the DEA weirdos using MooTools and Stylus) will at least have some guidelines they can follow instead of just coming up with styles on their own.

It doesn't look like anything in the github repo or change logs on the actual site itself have been updated in over a year.

Is anyone still actively maintaining this effort?

Latest release was three weeks ago. https://github.com/uswds/uswds

It’s quite active: https://github.com/uswds/uswds/commits/develop

Reply on news.ycombinator.com