7 ms·

U.S. Web Design System 2.0

185 points by soheilpro 8y ago

tlrobinson 8y ago
I'm linking to the recent HN post about Uber's "Based Web" so we can form a linked list of design systems: https://news.ycombinator.com/item?id=19758848 https://news.ycombinator.com/item?id=19758848 (see insomniacity's comment there for a bunch more)
- MayeulC 8y ago
  Also see https://news.ycombinator.com/item?id=18900946 https://news.ycombinator.com/item?id=18900946 for a similar list (the Australian pendant to this new). I think there was a post about France's, and maybe other non-English-speaking countries, but couldn't find them. I dislike the fact that only the left half of my screen is used on that web page; the content should at least be centered.
lloydatkinson 8y ago
Almost an exact copy of the UK governments version of this: https://design-system.service.gov.uk/ https://design-system.service.gov.uk/
- g105b 8y ago
  The US in general is almost an exact copy of the UK.
  - mfatica 8y ago
    Ah yes the great American monarchy
- agumonkey 8y ago
  honestly good for them, UK gov websites are always very very nice
- petepete 8y ago
  Some of the markup is incredibly similar. The checkbox stuff[0] looks like a `s/govuk/usa/g`. I've been working on a GDS project for the last few months, it's actually a nice change to have a set of established patterns to work to and a host of responsive people to discuss extending those patterns with. [0] https://v2.designsystem.digital.gov/components/form-controls/#checkbox https://v2.designsystem.digital.gov/components/form-controls...
- oever 8y ago
  Dutch government also has its own font. https://www.rijkshuisstijl.nl/basiselementen/basiselementen-offline/lettertype/rijksoverheid-sans https://www.rijkshuisstijl.nl/basiselementen/basiselementen-...
- theonething 8y ago
  well, we are allies
asplake 8y ago
Is flexbox support sufficiently wide now for public services to adopt it? Or does it rely on good fallbacks?
- lucideer 8y ago
  Flexbox support is at 98.59% of global users according to[0] (so probably significantly higher for the US). [0] https://caniuse.com/#search=flexbox https://caniuse.com/#search=flexbox
  - legostormtroopr 8y ago
    98.59% of general users may not be 98.59% of users in government agencies which is a problem. A lot of users in government agencies are still using Internet Explorer, which makes this question important depending on the audience. If you are building websites for users of government services its probably ok, if you are building websites for employees of government sites you might have problems.
    - lithos 8y ago
      When I was in the military many "trouble shooting" steps for using training portals and similar included step by step guides for how to downgrade Internet Explorer to older versions. I'm sure with edge around they include steps for how to even find the old Internet Explorer browser on your system.
    - lucideer 8y ago
      Believe it or not, Internet Explorer does support flexbox: both the latest version, and the version before. There may be more IE users using government sites (whether they be gov employees forced to leverage it for ancient intranet use, or just some older users), but hopefully the number of those on IE <10 will still be extremely small. Global usage for IE <10 is ~0.3%, which includes many users in Asia forced to use IE for ActiveX banking; again, one would hope this figure would be far far lower in the US. The bulk of that 1.4% of global users without flexbox support are actually more likely to be on an old version of iOS Safari or pre-Chrome Android Browser, than on IE, and desktop would be a larger-than-elsewhere demographic within older users of gov sites, and within gov employees on gov workstations, so in reality the flexbox support stats could well be above average for gov sites.
KeenFox 8y ago
Related: the US government has its own font. The page mentions it further down. https://public-sans.digital.gov/ https://public-sans.digital.gov/ Discussion of the font on HN: https://news.ycombinator.com/item?id=19607371 https://news.ycombinator.com/item?id=19607371
- anentropic 8y ago
  I came here to say... that body text font renders really nicely on my screen
- velcrovan 8y ago
  This font is even more interesting because it of its extremely uncertain copyright/licensing situation: “Open-source licenses, like all software licenses, are only possible through assertion of copyright. Certain free-software advocates prefer to sidestep this inconvenient fact (akin to ‘keep your government hands off my Medicare’). For individual software authors, this usually poses no problem, because their copyright arises at the moment the work is created. Thus, they’re free to put their work under any license, including an open-source license. “But US government employees are a special case. As a matter of federal law (17 USC § 105), they can’t assert copyright in their work. Public Sans is an inseparable mixture of copyrighted work (= the underlying Libre Franklin font) and uncopyrightable work (= the alterations made by the GSA). The GSA currently claims that Public Sans has been released under the OFL. But that’s impossible. To use this license, they’d first need to have a copyright in their contributions. But they don’t.” — Matthew Butterick (type designer + lawyer) https://tinyletter.com/mbutterick/letters/the-curious-case-of-public-sans-billionaire-s-typewriter-update https://tinyletter.com/mbutterick/letters/the-curious-case-o...
  - acdha 8y ago
    His position is not common and there's a long history of U.S. government lawyers approving participation in open-source projects under licenses which are not the public domain — e.g. SELinux is under the GPL because the original Linux kernel was and the NSA's lawyers approved that contribution. Here's the upstream issue: https://github.com/uswds/public-sans/issues/30 https://github.com/uswds/public-sans/issues/30 He also opened a separate issue claiming an Establishment clause violation because the OFL was created by https://www.sil.org/about https://www.sil.org/about: https://github.com/uswds/public-sans/issues/31 https://github.com/uswds/public-sans/issues/31
Illniyar 8y ago
I get that government websites need to be accessible more then anything, and these constraints are obviously more important then the vague and subjective idea of beauty, but damn some of these components are really ugly: https://v2.designsystem.digital.gov/components/button/ https://v2.designsystem.digital.gov/components/button/ https://v2.designsystem.digital.gov/components/form-controls/ https://v2.designsystem.digital.gov/components/form-controls... The borders just seems really poor looking for me. The form controls double borders when in error and focus are so aggressive. No elevations or shadows. It's flat design to it's radical extreme. I suppose I've gotten used to beauty being subtle - like a good comedy, if it's in your face then it isn't very good.
- deleted 8y ago
  [deleted]
- slow_donkey 8y ago
  Honestly it looks fine to me - they do seem jarring individually but casually browsing the sites is pleasant. I'm very appreciative that each component is very clear and pages won't draw my attention in 10 different places.
- dubcanada 8y ago
  I also would have to disagree, I find them to be super easy to understand. And someone like my grand father would actually be able to know whats going on.
  - plausibilities 8y ago
    This. Accessibility should ideally take into account different levels of information processing abilities. While some of us are happy to sacrifice what we feel is a negligible amount of visual context for visual aesthetic, others may need that extra context and cannot afford such a luxury.
- wlesieutre 8y ago
  I wouldn't say they're ugly, more that they're not trendy. They're round rects with text on them. But I don't need my government services to be on the bleeding edge of web design trends so I think that's fine.
mu_killnine 8y ago
As an enterprise software developer who makes software for 'internal' customers, I've not really had to address the issue of accessibility. However, I find this really neat and hope I can be more mindful about it moving forward. Pretty neat to see how much effort was put into this.
- dccoolgai 8y ago
  Even for internal apps, it might pay to think about accessibility... e.g. imagine someone who got hired to use the "internal app" was a Marine vet who lost vision to an IED or something... if your company is following the law, you have to provide the same opportunity for him to work there and use that "internal" app as everyone else. Maybe there's some reason why that would never be the case, but devs tend to think of the issue of accessibility much too narrowly.
  - vbezhenar 8y ago
    We need easily accessible tools. I used to ignore mobile viewport sizes. Now Chrome has button to emulate smartphone or iPad. I can check my web page with a single click. So I often spend a bit of time to ensure that it at least works good enough in mobile. I did not see anything comparable for blind users. If Chrome developers would add something similar to their developer console, I bet, a lot of new pages will be checked.
    - steveax 8y ago
      The axe extension is very nicely done: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd https://chrome.google.com/webstore/detail/axe/lhdoppojpmngad...
    - wuz 8y ago
      There is an incredibly full-featured accessibility audit in Chrome's dev tools: https://developers.google.com/web/tools/chrome-devtools/accessibility/reference https://developers.google.com/web/tools/chrome-devtools/acce... On top of that, there are a lot of Chrome extensions to do all sorts of great things to help you test for accessibility: ChromeVox - https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en https://chrome.google.com/webstore/detail/chromevox/kgejglhp... Colorblinding - https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa?hl=en https://chrome.google.com/webstore/detail/colorblinding/dgbg... aXe - https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd https://chrome.google.com/webstore/detail/axe/lhdoppojpmngad... Color Contrast Testing - https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll https://chrome.google.com/webstore/detail/color-contrast-ana... No Coffee - https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbn... HeadingsMap - https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en https://chrome.google.com/webstore/detail/headingsmap/flbjom... Wave - https://wave.webaim.org/extension/ https://wave.webaim.org/extension/ ARIA Validator - https://chrome.google.com/webstore/detail/aria-validator/oigghlanfjgnkcndchmnlnmaojahnjoc?hl=en https://chrome.google.com/webstore/detail/aria-validator/oig... --- Lack of tools is definitely not the issue.
FlyingGoose 8y ago
As an international software engineer living in the US, I'd appreciate if people like Matt Cutts would make an effort towards making non-citizen developers like me to be able to work at US govt institutions like USDS.

185 points by soheilpro 8y ago

I'm linking to the recent HN post about Uber's "Based Web" so we can form a linked list of design systems: https://news.ycombinator.com/item?id=19758848 https://news.ycombinator.com/item?id=19758848 (see insomniacity's comment there for a bunch more)

MayeulC 8y ago
Also see https://news.ycombinator.com/item?id=18900946 https://news.ycombinator.com/item?id=18900946 for a similar list (the Australian pendant to this new). I think there was a post about France's, and maybe other non-English-speaking countries, but couldn't find them. I dislike the fact that only the left half of my screen is used on that web page; the content should at least be centered.

lloydatkinson 8y ago

Almost an exact copy of the UK governments version of this: https://design-system.service.gov.uk/ https://design-system.service.gov.uk/

g105b 8y ago
The US in general is almost an exact copy of the UK.
- mfatica 8y ago
  Ah yes the great American monarchy
agumonkey 8y ago
honestly good for them, UK gov websites are always very very nice
petepete 8y ago
Some of the markup is incredibly similar. The checkbox stuff[0] looks like a `s/govuk/usa/g`. I've been working on a GDS project for the last few months, it's actually a nice change to have a set of established patterns to work to and a host of responsive people to discuss extending those patterns with. [0] https://v2.designsystem.digital.gov/components/form-controls/#checkbox https://v2.designsystem.digital.gov/components/form-controls...
oever 8y ago
Dutch government also has its own font. https://www.rijkshuisstijl.nl/basiselementen/basiselementen-offline/lettertype/rijksoverheid-sans https://www.rijkshuisstijl.nl/basiselementen/basiselementen-...
theonething 8y ago
well, we are allies

asplake 8y ago

Is flexbox support sufficiently wide now for public services to adopt it? Or does it rely on good fallbacks?

lucideer 8y ago
Flexbox support is at 98.59% of global users according to[0] (so probably significantly higher for the US). [0] https://caniuse.com/#search=flexbox https://caniuse.com/#search=flexbox
- legostormtroopr 8y ago
  98.59% of general users may not be 98.59% of users in government agencies which is a problem. A lot of users in government agencies are still using Internet Explorer, which makes this question important depending on the audience. If you are building websites for users of government services its probably ok, if you are building websites for employees of government sites you might have problems.
  - lithos 8y ago
    When I was in the military many "trouble shooting" steps for using training portals and similar included step by step guides for how to downgrade Internet Explorer to older versions. I'm sure with edge around they include steps for how to even find the old Internet Explorer browser on your system.
  - lucideer 8y ago
    Believe it or not, Internet Explorer does support flexbox: both the latest version, and the version before. There may be more IE users using government sites (whether they be gov employees forced to leverage it for ancient intranet use, or just some older users), but hopefully the number of those on IE <10 will still be extremely small. Global usage for IE <10 is ~0.3%, which includes many users in Asia forced to use IE for ActiveX banking; again, one would hope this figure would be far far lower in the US. The bulk of that 1.4% of global users without flexbox support are actually more likely to be on an old version of iOS Safari or pre-Chrome Android Browser, than on IE, and desktop would be a larger-than-elsewhere demographic within older users of gov sites, and within gov employees on gov workstations, so in reality the flexbox support stats could well be above average for gov sites.

KeenFox 8y ago

Related: the US government has its own font. The page mentions it further down. https://public-sans.digital.gov/ https://public-sans.digital.gov/ Discussion of the font on HN: https://news.ycombinator.com/item?id=19607371 https://news.ycombinator.com/item?id=19607371

anentropic 8y ago
I came here to say... that body text font renders really nicely on my screen
velcrovan 8y ago
This font is even more interesting because it of its extremely uncertain copyright/licensing situation: “Open-source licenses, like all software licenses, are only possible through assertion of copyright. Certain free-software advocates prefer to sidestep this inconvenient fact (akin to ‘keep your government hands off my Medicare’). For individual software authors, this usually poses no problem, because their copyright arises at the moment the work is created. Thus, they’re free to put their work under any license, including an open-source license. “But US government employees are a special case. As a matter of federal law (17 USC § 105), they can’t assert copyright in their work. Public Sans is an inseparable mixture of copyrighted work (= the underlying Libre Franklin font) and uncopyrightable work (= the alterations made by the GSA). The GSA currently claims that Public Sans has been released under the OFL. But that’s impossible. To use this license, they’d first need to have a copyright in their contributions. But they don’t.” — Matthew Butterick (type designer + lawyer) https://tinyletter.com/mbutterick/letters/the-curious-case-of-public-sans-billionaire-s-typewriter-update https://tinyletter.com/mbutterick/letters/the-curious-case-o...
- acdha 8y ago
  His position is not common and there's a long history of U.S. government lawyers approving participation in open-source projects under licenses which are not the public domain — e.g. SELinux is under the GPL because the original Linux kernel was and the NSA's lawyers approved that contribution. Here's the upstream issue: https://github.com/uswds/public-sans/issues/30 https://github.com/uswds/public-sans/issues/30 He also opened a separate issue claiming an Establishment clause violation because the OFL was created by https://www.sil.org/about https://www.sil.org/about: https://github.com/uswds/public-sans/issues/31 https://github.com/uswds/public-sans/issues/31

Illniyar 8y ago

I get that government websites need to be accessible more then anything, and these constraints are obviously more important then the vague and subjective idea of beauty, but damn some of these components are really ugly: https://v2.designsystem.digital.gov/components/button/ https://v2.designsystem.digital.gov/components/button/ https://v2.designsystem.digital.gov/components/form-controls/ https://v2.designsystem.digital.gov/components/form-controls... The borders just seems really poor looking for me. The form controls double borders when in error and focus are so aggressive. No elevations or shadows. It's flat design to it's radical extreme. I suppose I've gotten used to beauty being subtle - like a good comedy, if it's in your face then it isn't very good.

deleted 8y ago
[deleted]
slow_donkey 8y ago
Honestly it looks fine to me - they do seem jarring individually but casually browsing the sites is pleasant. I'm very appreciative that each component is very clear and pages won't draw my attention in 10 different places.
dubcanada 8y ago
I also would have to disagree, I find them to be super easy to understand. And someone like my grand father would actually be able to know whats going on.
- plausibilities 8y ago
  This. Accessibility should ideally take into account different levels of information processing abilities. While some of us are happy to sacrifice what we feel is a negligible amount of visual context for visual aesthetic, others may need that extra context and cannot afford such a luxury.
wlesieutre 8y ago
I wouldn't say they're ugly, more that they're not trendy. They're round rects with text on them. But I don't need my government services to be on the bleeding edge of web design trends so I think that's fine.

mu_killnine 8y ago

As an enterprise software developer who makes software for 'internal' customers, I've not really had to address the issue of accessibility. However, I find this really neat and hope I can be more mindful about it moving forward. Pretty neat to see how much effort was put into this.

dccoolgai 8y ago
Even for internal apps, it might pay to think about accessibility... e.g. imagine someone who got hired to use the "internal app" was a Marine vet who lost vision to an IED or something... if your company is following the law, you have to provide the same opportunity for him to work there and use that "internal" app as everyone else. Maybe there's some reason why that would never be the case, but devs tend to think of the issue of accessibility much too narrowly.
- vbezhenar 8y ago
  We need easily accessible tools. I used to ignore mobile viewport sizes. Now Chrome has button to emulate smartphone or iPad. I can check my web page with a single click. So I often spend a bit of time to ensure that it at least works good enough in mobile. I did not see anything comparable for blind users. If Chrome developers would add something similar to their developer console, I bet, a lot of new pages will be checked.
  - steveax 8y ago
    The axe extension is very nicely done: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd https://chrome.google.com/webstore/detail/axe/lhdoppojpmngad...
  - wuz 8y ago
    There is an incredibly full-featured accessibility audit in Chrome's dev tools: https://developers.google.com/web/tools/chrome-devtools/accessibility/reference https://developers.google.com/web/tools/chrome-devtools/acce... On top of that, there are a lot of Chrome extensions to do all sorts of great things to help you test for accessibility: ChromeVox - https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en https://chrome.google.com/webstore/detail/chromevox/kgejglhp... Colorblinding - https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa?hl=en https://chrome.google.com/webstore/detail/colorblinding/dgbg... aXe - https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd https://chrome.google.com/webstore/detail/axe/lhdoppojpmngad... Color Contrast Testing - https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll https://chrome.google.com/webstore/detail/color-contrast-ana... No Coffee - https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbn... HeadingsMap - https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en https://chrome.google.com/webstore/detail/headingsmap/flbjom... Wave - https://wave.webaim.org/extension/ https://wave.webaim.org/extension/ ARIA Validator - https://chrome.google.com/webstore/detail/aria-validator/oigghlanfjgnkcndchmnlnmaojahnjoc?hl=en https://chrome.google.com/webstore/detail/aria-validator/oig... --- Lack of tools is definitely not the issue.

FlyingGoose 8y ago

As an international software engineer living in the US, I'd appreciate if people like Matt Cutts would make an effort towards making non-citizen developers like me to be able to work at US govt institutions like USDS.