19 ms·

USWDS: The United States Web Design System

482 points by jakelazaroff 5y ago

walrus01 5y ago
makes me wonder how many phishing site operators are taking copies/examples of this for their own design needs, when making fake federal government webpages.
TiredGuy 5y ago
The last gov team I was on had trouble with the uswds icon set. There didn't seem to be a way to import them as a font rather than as separate svgs. We noticed though that the icons were roughly based on Material Design icons, so we used the Material Design icon fonts instead and they were close enough. There were still a few icons that didn't map over, but we found some others within the new set that sufficed.
- DanAtC 5y ago
  Icon fonts aren't accessible.
  - deltarholamda 5y ago
    I did not know this. It appears there are workarounds, but I'm not sure how that's better than doing things Ye Olde Waye.
  - fuzzy2 5y ago
    I’m not sure I follow. Are icons accessible at all? Whether they’re fonts or SVGs or bitmap images shouldn’t really matter.
    - WorldMaker 5y ago
      In HTML when used as images with the IMG tag, SVGs and bitmap images have a direct concept of ALT attribute for accessibility to screen reading. Font glyphs do not. You can add aria- tags around font glyphs but you can't add/set those in just pure CSS and so most icon font libraries don't bother. It also doesn't help that the most common tag for adding icons from icon fonts is the I tag (from ancient HTML for Italic, though EM is the preferred tag) which not only doesn't naturally support things like ALT tags it is even worse for accessibility by implying the wrong semantic meaning ("there are italics near here"? But there aren't).
  - clairity 5y ago
    svg's aren't inherently accessible either. in both cases, you have to actively add accessibility.
    - wtetzner 5y ago
      SVGs can use alt tags.
      - clairity 5y ago
        as can font icons.
  - kingcharles 5y ago
    Can you expand on your pithy comment? :) I'm genuinely interested.
    - evan_ 5y ago
      Consider an icon font where "E" is a little "edit" pencil- to a screen reader it just looks like an "E". Of course you could just put `aria-label="edit"` on its container the same way you would an SVG. The icon font is also a problem if the font doesn't load and the browser uses a fallback, now you have a weird "E" in the middle of your document. They're harder to get aligned just right in my experience as well. Someone's probably done this already but it would be cool to have an icon font that uses ligatures- so you'd type "Edit" and it would turn into the Edit icon. Wouldn't solve the other issues but it would be neat.
      - fuzzy2 5y ago
        I would expect modern icon fonts to exclusively use the Unicode Private Use Area. Fallback fonts would then not have glyphs for these code points. Screen readers would hopefully ignore them.
        WorldMaker 5y ago
        Screen readers ignoring them is a problem when it is UI the user needs to interact with. How does the use know that U+E9AF is the Edit icon they are looking for versus say maybe U+E9AE is the Delete icon?
        fuzzy2 5y ago
        They don't. That's is why icon-only items (links, buttons, …) must always be explicitly annotated, using aria- attributes. You can do this with any icon technology. You wouldn't annotate the icon itself.
      - WorldMaker 5y ago
        Font Awesome 5+ supports ligatures in that way, though my understanding is that it was intended for ease of use in design apps like InDesign more than for accessibility, but I suppose it can help accessibility too. (Though Font Awesome suggests SVGs over icon fonts for actual usage on the web.)
- kevin_thibedeau 5y ago
  Fontforge has SVG import.
- cechmaster 5y ago
  Don't use font icons, I use svg icons with <svg fill="currentColor" /> and works great. Much easier to customize when you need to in my opinion.
  - vosper 5y ago
    Font Awesome uses font icons, and they seem to have accessibility figured out? https://fontawesome.com/docs/web/dig-deeper/accessibility https://fontawesome.com/docs/web/dig-deeper/accessibility
    - WorldMaker 5y ago
      Font Awesome also suggests SVG over web fonts in any app with JS: https://fontawesome.com/docs/web/dig-deeper/webfont-vs-svg https://fontawesome.com/docs/web/dig-deeper/webfont-vs-svg One of the key notes in the bottom table on that page is "Auto-Accessibility" and the JS libraries with SVG icons provide better accessibility out of the box. Most of the document you linked is stuff you need to do manually by default when working with web fonts.
- WorldMaker 5y ago
  Beyond the accessibility problems, Icon fonts don't tree-shake very well and subsetting them is complicated and requires dedicated tools. Bandwidth may seem cheap/free in many cases, but SVG-based approaches can tree-shake down using ordinary web platform tools like Webpack to just the used SVG curves of the icons needed specific to a page or app and that can save you megabytes compared to most icon fonts.
Someone1234 5y ago
Developers are an interesting bunch "Why does anyone use Bootstrap anymore?" and then goes and creates basically the exact same components again by hand. Seems like that same trend repeats every couple of years "[Popular library] is now outdated, let me just create an in-house clone or move to identical but trendy [Popular library]." To be clear I very much like the USWDS components, but they are mostly 1:1 with Bootstrap while being incompatible, and having to maintain them in-house. Just feels like NIH. Am I missing something?
- hallway_monitor 5y ago
  Didn't you mean designers? In my experience, that's who loves pushing low-value efforts like this (yes, at the scale of the US government, Google etc it may be warranted). The real problem is you have too many designers on staff and they have found something to keep themselves busy.
  - brimble 5y ago
    In my experience, PMs and middle managers drive a fair amount of unnecessary design work. Looks better in a PowerPoint than most things do, I reckon.
  - jonshariat 5y ago
    (full disclosure: I am a designer) While I agree with you in general, I think the US gov has an excuse while others may not: they have much stricter laws and requirements they HAVE to meet.
- somehnacct3757 5y ago
  I would find real peace of mind in a design system maintained by a government that guarantees compliance with that government's accessibility requirements.
  - gunsch 5y ago
    This one's the real answer (or at least a substantial part of it). On VA.gov, the USWDS components (and their composition into a modular forms system) was a large part of making sure that applications met the accessibility needs of the general public. Source: I was the VA.gov engineering lead for awhile
guilhermeasg 5y ago
I haven't used them myself, but the GOV.UK components look and function great. https://govuk-components.netlify.app/ https://govuk-components.netlify.app/
- ChrisArchitect 5y ago
  https://design-system.service.gov.uk/components/ https://design-system.service.gov.uk/components/ where did you get that other url
  - guilhermeasg 5y ago
    Just did a quick search on GitHub. Turns out the one I picked is from the DfE org: https://github.com/DFE-Digital/govuk-components https://github.com/DFE-Digital/govuk-components
- systemvoltage 5y ago
  I am not a fan of Gov UK framework. For once, the banner takes up 50% of the space on my mobile browser. All design elements and controls are excessively large and bloated. Negative space is liberally applied everywhere. USWDS strikes a good balance.
  - a2128 5y ago
    You have to remember who this is being designed for - citizens wanting to use government services, who may not necessarily have great eyesight, great computer literacy or even literacy in general. The last thing you should ever want is for someone to fail to apply for welfare benefits because they were overwhelmed by the website design. I agree that the cookie banner could be smaller though.
    - systemvoltage 5y ago
      Yes, and USWDS does it without being bloated. Far more usable IMO. There is room for well designed, compact UI that is also accessible. It is not that strict of a trade-off as you suggest.
cors-fls 5y ago
I love the 'usa' in every classes ! You can't forget where you come from when you are putting 'usa-checkboxes' into 'usa-fieldsets' into 'usa-forms' ! At least it's shorter than 'america' !
- oh_sigh 5y ago
  It's just best-effort namespacing. Call it "checkboxes" and the library has a much higher chance of negatively interacting with a different library.
EricE 5y ago
Anyone with any part in designing user interfaces seriously needs to commit their section on color to heart: https://designsystem.digital.gov/design-tokens/color/overview/ https://designsystem.digital.gov/design-tokens/color/overvie... Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose!
- Aeolun 5y ago
  The contrast on the example images rated as AA is actually quite horrible though. I can read the header, but the normal sized text is almost indistinguishable.
  - micromacrofoot 5y ago
    The current color contrast algorithm used by WCAG is sorely in need of an update, it outright fails for certain color combinations.
- kingcharles 5y ago
  Windows 11 has some infuriating parts like this where the contrast between elements is so small you can't tell what is going on (like.. where is the scrollbar?). Especially when you own some cheap LCD display that's 15 years old with 20 nits of brightness and a contrast ratio of non-existent. Compared to the guy that designed the UI (and I'm guilty of this in the past) who persuaded his boss he needed a $6500 Apple ProRes UltraHDR+++ display that is literally brighter than the noonday sun and has a contrast ratio approaching aleph-zero.
- ramenmeal 5y ago
  Am I misinterpreting it? To me it makes sense that smaller text would require greater contrast. I'm understanding it that larger text/headings need more contrast. Might be more eye-catching, but that doesn't make sense for accessibility.
ramesh31 5y ago
On a meta level, this is exactly how you should specify a design system. There is zero focus whatsoever on any technical implementation beyond basic raw HTML and CSS. So many design systems fall into the trap of trying to put out framework specific libraries of their components that inevitably fall short and end up being a bigger liability than they are worth. Just put out a visual specification and a UX language to build to, and leave the project specific details to each developer.
- robertoandred 5y ago
  There's actually tons of JS in there to control interactivity, which therefore limits how well the system can be integrated into various frameworks.
deepspace 5y ago
Canada has a similar Web Design System. It is very, very white, with a touch of red and blue. https://www.canada.ca/en/government/about/design-system.html https://www.canada.ca/en/government/about/design-system.html
- vkou 5y ago
  As a user, I also think it's fantastic, from a design and usability perspective. (I can't speak for accessibility.) It's snappy, clean, and not at all bloated. I dread the day that some MBA introduces Silicon Valley KPI reviews and perf metrics to the government, leading to some middle-level engineer replacing that simple, clean, bell-and-whistle-free design with some built-for-promo bloated garbage.
- dwater 5y ago
  I'm not surprised. Lena Trudeau served at GSA and stood up 18F, did a 3 year stint at Amazon, and then went to the Canadian Digital Service. https://www.linkedin.com/in/ltrudeau/details/experience/ https://www.linkedin.com/in/ltrudeau/details/experience/
warpech 5y ago
The term "design system" made a great career in a very short time. It wasn't really coined until 2016.
- astroalex 5y ago
  That's not correct. A quick search using Google's Ngram viewer shows that "design system" peaked in 1986, and had quite a long history before that too, starting in the 1960s. https://books.google.com/ngrams/graph?content=design+system&year_start=1800&year_end=2019&corpus=26&smoothing=3&direct_url=t1%3B%2Cdesign%20system%3B%2Cc0 https://books.google.com/ngrams/graph?content=design+system&...
  - warpech 5y ago
    Are you sure about the meaning though? Afaik, it started to be used in the context of UX/UI starting from the book "Atomic Design". That is also the earliest reference in the Wikipedia article. Of course, there were systems in graphic design used earlier [1], but before 2016, the thing in the OP would be called "The US Web Design Patterns" or "...Language" or "...Toolkit" or "...Library", for the lack of a common term. [1] http://assets.runemadsen.com/classes/programming-design-systems/a-history-of-design-systems/index.html http://assets.runemadsen.com/classes/programming-design-syst...
    - astroalex 5y ago
      I'm not sure I understand the distinction you're drawing between UX/UI and graphic design. To me it seems obvious that the concept of a "design system" has been around for a while and has been applied universally in many sub-fields of design. It doesn't seem super relevant whether or not there is a CSS/JS framework to support a design system — that seems more like an implementation detail.
- gherkinnn 5y ago
  Nope, I've worked with and on design systems since 2010. And Brad Frost's Atomic Design [0], a formal system for developing a design system, was first written in 2013. 0 - https://bradfrost.com/blog/post/atomic-web-design/ https://bradfrost.com/blog/post/atomic-web-design/
ChrisArchitect 5y ago
Anything new here?
topspin 5y ago
Sigh. No mention of a dark mode in the documentation.
- chess_buster 5y ago
  filter: invert, huerotate(180deg);
  - topspin 5y ago
    If only it were really that simple.
    - yreg 5y ago
      Dark mode can be very challenging, especially alignment-wise if the design system is used in applications that also use some custom components or styling.
atiragram 5y ago
Reminds me of the design system of Helsinki, Finland's capital city: https://hds.hel.fi/ https://hds.hel.fi/ Both have educational value.
game_the0ry 5y ago
Super interesting project, but....uh oh, I see a package.json. I hope that our federal government has staffed enough experienced node devs to keep an eye on any rogue deps that get added to the project, though it should go without saying. And it looks like they use Snyk so that's something. However, I do not like that you have to email them to raise a security issue [1]. To easy for some wannabe product manager bureaucrat to suppress that out of fear and embarrassment.
bxclltkfz 5y ago
bluetwo 5y ago
I have used this several times, and I have to say I really like the lightweight setup of the V1 version of this and can't stand the V2 version they now support. The V1, which you can still download, just works so well out of the box it is amazing. It adds styles to the base tags and is easy to just drop into an html site you are already working on. You only have to add classes when you need to do something different than the defaults. V2 makes you add classes everywhere, which means content managed by HTML editors like CKedit won't work without extra pain.
schappim 5y ago
Australia /has/had/ a similar design system: https://designsystem.gov.au/ https://designsystem.gov.au/
- nojs 5y ago
  > The Australian Government Design System has been decommissioned and will be taken down on 30th Sep 2021. Visit our community page for more information And the “community page” link is dead. This is sad, both because it was abandoned and also because of how much time and money must have gone to waste.
eek2121 5y ago
They even have a SASS/SCSS framework you can use. Underrated IMO.
el_dev_hell 5y ago
I somehow stumbled across this over the weekend. There's a React component library (with a deployed storybook): * https://github.com/trussworks/react-uswds https://github.com/trussworks/react-uswds * https://trussworks.github.io/react-uswds/?path=/story/components-card--card-test https://trussworks.github.io/react-uswds/?path=/story/compon...
Lamad123 5y ago
Freedom fries!
xwdv 5y ago
What other countries have Web Design Systems?
- yreg 5y ago
  My country (Slovakia) uses the GOV.UK Design System. A good solution imo, if they don't want to create and maintain their own.
SnoozingBoa 5y ago
Few points after reading the comments. From designer pov: - Although the definition of a Design System is somewhat loose, it can be stated that Bootstrap is a NOT a design system. - To reduce Design System to a branded collection of technical assets is simplistic. You are still not getting it. - The general idea of Design Systems is much more than organising some components for one medium (web). The execution of the system might or might not be good. - In order to do design (UX, UI, ...), you don't need to be "a designer". However, the fact that it is possible to use something like Bootstrap does not make your design (outcome) work automatically. More often that not, the work done by non-designer is not as good. The craft exists. Thinking that "the problem has been solved already" means you don't actually understand the full problem. Like with anything, some aspects are re-solved continuously. Maybe unnecessarily. Maybe not. - For many it would probably be easier to think that all design is design. Any act of diminishing some aspect of design can be mirrored by asking yourself if you think your design tasks can be done by anyone not paying appropriate attention. E.g. if you are a programmer, imagine a random stakeholder would quickly put together your data models and API designs and call it a day. Would it work? Would it scale? Would it be enough? Maybe. - Any design can be challenged. Complaining about stakeholders is lame. Check your argumentation skills and asses if you have actually challenged the design when you had the opportunity.
mrichman 5y ago
So glad my tax dollars went to recreating Bootstrap.
momo93 5y ago
What's new? France released its own DS last year. https://www.systeme-de-design.gouv.fr https://www.systeme-de-design.gouv.fr
mzmzmzm 5y ago
tedmiston 5y ago
Direct link to repo: https://github.com/uswds/uswds https://github.com/uswds/uswds
egberts1 5y ago
A good and safe UI/UX is the one not using JavaScript. (Tossing my karma here because I find malicious JS … all … the … time with my heavily instrumented JIT browser. ) Just yesterday, I ran into a CSS/JS snippet conspired to do local net probe scanning. Further googling shows that it is a bank that is doing this. A matter of time before such a browser-based probe finds a passive infected machines awaiting to respond with a specially-made packet.
pcthrowaway 5y ago
Free as in "bringing freedom" not free beer: https://github.com/uswds/uswds/blob/develop/LICENSE.md https://github.com/uswds/uswds/blob/develop/LICENSE.md

482 points by jakelazaroff 5y ago

makes me wonder how many phishing site operators are taking copies/examples of this for their own design needs, when making fake federal government webpages.

TiredGuy 5y ago

The last gov team I was on had trouble with the uswds icon set. There didn't seem to be a way to import them as a font rather than as separate svgs. We noticed though that the icons were roughly based on Material Design icons, so we used the Material Design icon fonts instead and they were close enough. There were still a few icons that didn't map over, but we found some others within the new set that sufficed.

DanAtC 5y ago
Icon fonts aren't accessible.
- deltarholamda 5y ago
  I did not know this. It appears there are workarounds, but I'm not sure how that's better than doing things Ye Olde Waye.
- fuzzy2 5y ago
  I’m not sure I follow. Are icons accessible at all? Whether they’re fonts or SVGs or bitmap images shouldn’t really matter.
  - WorldMaker 5y ago
    In HTML when used as images with the IMG tag, SVGs and bitmap images have a direct concept of ALT attribute for accessibility to screen reading. Font glyphs do not. You can add aria- tags around font glyphs but you can't add/set those in just pure CSS and so most icon font libraries don't bother. It also doesn't help that the most common tag for adding icons from icon fonts is the I tag (from ancient HTML for Italic, though EM is the preferred tag) which not only doesn't naturally support things like ALT tags it is even worse for accessibility by implying the wrong semantic meaning ("there are italics near here"? But there aren't).
- clairity 5y ago
  svg's aren't inherently accessible either. in both cases, you have to actively add accessibility.
  - wtetzner 5y ago
    SVGs can use alt tags.
    - clairity 5y ago
      as can font icons.
- kingcharles 5y ago
  Can you expand on your pithy comment? :) I'm genuinely interested.
  - evan_ 5y ago
    Consider an icon font where "E" is a little "edit" pencil- to a screen reader it just looks like an "E". Of course you could just put `aria-label="edit"` on its container the same way you would an SVG. The icon font is also a problem if the font doesn't load and the browser uses a fallback, now you have a weird "E" in the middle of your document. They're harder to get aligned just right in my experience as well. Someone's probably done this already but it would be cool to have an icon font that uses ligatures- so you'd type "Edit" and it would turn into the Edit icon. Wouldn't solve the other issues but it would be neat.
    - fuzzy2 5y ago
      I would expect modern icon fonts to exclusively use the Unicode Private Use Area. Fallback fonts would then not have glyphs for these code points. Screen readers would hopefully ignore them.
      - WorldMaker 5y ago
        Screen readers ignoring them is a problem when it is UI the user needs to interact with. How does the use know that U+E9AF is the Edit icon they are looking for versus say maybe U+E9AE is the Delete icon?
        fuzzy2 5y ago
        They don't. That's is why icon-only items (links, buttons, …) must always be explicitly annotated, using aria- attributes. You can do this with any icon technology. You wouldn't annotate the icon itself.
    - WorldMaker 5y ago
      Font Awesome 5+ supports ligatures in that way, though my understanding is that it was intended for ease of use in design apps like InDesign more than for accessibility, but I suppose it can help accessibility too. (Though Font Awesome suggests SVGs over icon fonts for actual usage on the web.)
kevin_thibedeau 5y ago
Fontforge has SVG import.
cechmaster 5y ago
Don't use font icons, I use svg icons with <svg fill="currentColor" /> and works great. Much easier to customize when you need to in my opinion.
- vosper 5y ago
  Font Awesome uses font icons, and they seem to have accessibility figured out? https://fontawesome.com/docs/web/dig-deeper/accessibility https://fontawesome.com/docs/web/dig-deeper/accessibility
  - WorldMaker 5y ago
    Font Awesome also suggests SVG over web fonts in any app with JS: https://fontawesome.com/docs/web/dig-deeper/webfont-vs-svg https://fontawesome.com/docs/web/dig-deeper/webfont-vs-svg One of the key notes in the bottom table on that page is "Auto-Accessibility" and the JS libraries with SVG icons provide better accessibility out of the box. Most of the document you linked is stuff you need to do manually by default when working with web fonts.
WorldMaker 5y ago
Beyond the accessibility problems, Icon fonts don't tree-shake very well and subsetting them is complicated and requires dedicated tools. Bandwidth may seem cheap/free in many cases, but SVG-based approaches can tree-shake down using ordinary web platform tools like Webpack to just the used SVG curves of the icons needed specific to a page or app and that can save you megabytes compared to most icon fonts.

Someone1234 5y ago

Developers are an interesting bunch "Why does anyone use Bootstrap anymore?" and then goes and creates basically the exact same components again by hand. Seems like that same trend repeats every couple of years "[Popular library] is now outdated, let me just create an in-house clone or move to identical but trendy [Popular library]." To be clear I very much like the USWDS components, but they are mostly 1:1 with Bootstrap while being incompatible, and having to maintain them in-house. Just feels like NIH. Am I missing something?

hallway_monitor 5y ago
Didn't you mean designers? In my experience, that's who loves pushing low-value efforts like this (yes, at the scale of the US government, Google etc it may be warranted). The real problem is you have too many designers on staff and they have found something to keep themselves busy.
- brimble 5y ago
  In my experience, PMs and middle managers drive a fair amount of unnecessary design work. Looks better in a PowerPoint than most things do, I reckon.
- jonshariat 5y ago
  (full disclosure: I am a designer) While I agree with you in general, I think the US gov has an excuse while others may not: they have much stricter laws and requirements they HAVE to meet.
somehnacct3757 5y ago
I would find real peace of mind in a design system maintained by a government that guarantees compliance with that government's accessibility requirements.
- gunsch 5y ago
  This one's the real answer (or at least a substantial part of it). On VA.gov, the USWDS components (and their composition into a modular forms system) was a large part of making sure that applications met the accessibility needs of the general public. Source: I was the VA.gov engineering lead for awhile

guilhermeasg 5y ago

I haven't used them myself, but the GOV.UK components look and function great. https://govuk-components.netlify.app/ https://govuk-components.netlify.app/

ChrisArchitect 5y ago
https://design-system.service.gov.uk/components/ https://design-system.service.gov.uk/components/ where did you get that other url
- guilhermeasg 5y ago
  Just did a quick search on GitHub. Turns out the one I picked is from the DfE org: https://github.com/DFE-Digital/govuk-components https://github.com/DFE-Digital/govuk-components
systemvoltage 5y ago
I am not a fan of Gov UK framework. For once, the banner takes up 50% of the space on my mobile browser. All design elements and controls are excessively large and bloated. Negative space is liberally applied everywhere. USWDS strikes a good balance.
- a2128 5y ago
  You have to remember who this is being designed for - citizens wanting to use government services, who may not necessarily have great eyesight, great computer literacy or even literacy in general. The last thing you should ever want is for someone to fail to apply for welfare benefits because they were overwhelmed by the website design. I agree that the cookie banner could be smaller though.
  - systemvoltage 5y ago
    Yes, and USWDS does it without being bloated. Far more usable IMO. There is room for well designed, compact UI that is also accessible. It is not that strict of a trade-off as you suggest.

cors-fls 5y ago

I love the 'usa' in every classes ! You can't forget where you come from when you are putting 'usa-checkboxes' into 'usa-fieldsets' into 'usa-forms' ! At least it's shorter than 'america' !

oh_sigh 5y ago
It's just best-effort namespacing. Call it "checkboxes" and the library has a much higher chance of negatively interacting with a different library.

EricE 5y ago

Anyone with any part in designing user interfaces seriously needs to commit their section on color to heart: https://designsystem.digital.gov/design-tokens/color/overview/ https://designsystem.digital.gov/design-tokens/color/overvie... Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose!

Aeolun 5y ago
The contrast on the example images rated as AA is actually quite horrible though. I can read the header, but the normal sized text is almost indistinguishable.
- micromacrofoot 5y ago
  The current color contrast algorithm used by WCAG is sorely in need of an update, it outright fails for certain color combinations.
kingcharles 5y ago
Windows 11 has some infuriating parts like this where the contrast between elements is so small you can't tell what is going on (like.. where is the scrollbar?). Especially when you own some cheap LCD display that's 15 years old with 20 nits of brightness and a contrast ratio of non-existent. Compared to the guy that designed the UI (and I'm guilty of this in the past) who persuaded his boss he needed a $6500 Apple ProRes UltraHDR+++ display that is literally brighter than the noonday sun and has a contrast ratio approaching aleph-zero.
ramenmeal 5y ago
Am I misinterpreting it? To me it makes sense that smaller text would require greater contrast. I'm understanding it that larger text/headings need more contrast. Might be more eye-catching, but that doesn't make sense for accessibility.

ramesh31 5y ago

On a meta level, this is exactly how you should specify a design system. There is zero focus whatsoever on any technical implementation beyond basic raw HTML and CSS. So many design systems fall into the trap of trying to put out framework specific libraries of their components that inevitably fall short and end up being a bigger liability than they are worth. Just put out a visual specification and a UX language to build to, and leave the project specific details to each developer.

robertoandred 5y ago
There's actually tons of JS in there to control interactivity, which therefore limits how well the system can be integrated into various frameworks.

deepspace 5y ago

Canada has a similar Web Design System. It is very, very white, with a touch of red and blue. https://www.canada.ca/en/government/about/design-system.html https://www.canada.ca/en/government/about/design-system.html

vkou 5y ago
As a user, I also think it's fantastic, from a design and usability perspective. (I can't speak for accessibility.) It's snappy, clean, and not at all bloated. I dread the day that some MBA introduces Silicon Valley KPI reviews and perf metrics to the government, leading to some middle-level engineer replacing that simple, clean, bell-and-whistle-free design with some built-for-promo bloated garbage.
dwater 5y ago
I'm not surprised. Lena Trudeau served at GSA and stood up 18F, did a 3 year stint at Amazon, and then went to the Canadian Digital Service. https://www.linkedin.com/in/ltrudeau/details/experience/ https://www.linkedin.com/in/ltrudeau/details/experience/

warpech 5y ago

The term "design system" made a great career in a very short time. It wasn't really coined until 2016.

astroalex 5y ago
That's not correct. A quick search using Google's Ngram viewer shows that "design system" peaked in 1986, and had quite a long history before that too, starting in the 1960s. https://books.google.com/ngrams/graph?content=design+system&year_start=1800&year_end=2019&corpus=26&smoothing=3&direct_url=t1%3B%2Cdesign%20system%3B%2Cc0 https://books.google.com/ngrams/graph?content=design+system&...
- warpech 5y ago
  Are you sure about the meaning though? Afaik, it started to be used in the context of UX/UI starting from the book "Atomic Design". That is also the earliest reference in the Wikipedia article. Of course, there were systems in graphic design used earlier [1], but before 2016, the thing in the OP would be called "The US Web Design Patterns" or "...Language" or "...Toolkit" or "...Library", for the lack of a common term. [1] http://assets.runemadsen.com/classes/programming-design-systems/a-history-of-design-systems/index.html http://assets.runemadsen.com/classes/programming-design-syst...
  - astroalex 5y ago
    I'm not sure I understand the distinction you're drawing between UX/UI and graphic design. To me it seems obvious that the concept of a "design system" has been around for a while and has been applied universally in many sub-fields of design. It doesn't seem super relevant whether or not there is a CSS/JS framework to support a design system — that seems more like an implementation detail.
gherkinnn 5y ago
Nope, I've worked with and on design systems since 2010. And Brad Frost's Atomic Design [0], a formal system for developing a design system, was first written in 2013. 0 - https://bradfrost.com/blog/post/atomic-web-design/ https://bradfrost.com/blog/post/atomic-web-design/

ChrisArchitect 5y ago

Anything new here?

topspin 5y ago

Sigh. No mention of a dark mode in the documentation.

chess_buster 5y ago
filter: invert, huerotate(180deg);
- topspin 5y ago
  If only it were really that simple.
  - yreg 5y ago
    Dark mode can be very challenging, especially alignment-wise if the design system is used in applications that also use some custom components or styling.

atiragram 5y ago

Reminds me of the design system of Helsinki, Finland's capital city: https://hds.hel.fi/ https://hds.hel.fi/ Both have educational value.

game_the0ry 5y ago

Super interesting project, but....uh oh, I see a package.json. I hope that our federal government has staffed enough experienced node devs to keep an eye on any rogue deps that get added to the project, though it should go without saying. And it looks like they use Snyk so that's something. However, I do not like that you have to email them to raise a security issue [1]. To easy for some wannabe product manager bureaucrat to suppress that out of fear and embarrassment.

bxclltkfz 5y ago

bluetwo 5y ago

I have used this several times, and I have to say I really like the lightweight setup of the V1 version of this and can't stand the V2 version they now support. The V1, which you can still download, just works so well out of the box it is amazing. It adds styles to the base tags and is easy to just drop into an html site you are already working on. You only have to add classes when you need to do something different than the defaults. V2 makes you add classes everywhere, which means content managed by HTML editors like CKedit won't work without extra pain.

schappim 5y ago

Australia /has/had/ a similar design system: https://designsystem.gov.au/ https://designsystem.gov.au/

nojs 5y ago
> The Australian Government Design System has been decommissioned and will be taken down on 30th Sep 2021. Visit our community page for more information And the “community page” link is dead. This is sad, both because it was abandoned and also because of how much time and money must have gone to waste.

eek2121 5y ago

They even have a SASS/SCSS framework you can use. Underrated IMO.

el_dev_hell 5y ago

I somehow stumbled across this over the weekend. There's a React component library (with a deployed storybook): * https://github.com/trussworks/react-uswds https://github.com/trussworks/react-uswds * https://trussworks.github.io/react-uswds/?path=/story/components-card--card-test https://trussworks.github.io/react-uswds/?path=/story/compon...

Lamad123 5y ago

Freedom fries!

xwdv 5y ago

What other countries have Web Design Systems?

yreg 5y ago
My country (Slovakia) uses the GOV.UK Design System. A good solution imo, if they don't want to create and maintain their own.

SnoozingBoa 5y ago

Few points after reading the comments. From designer pov: - Although the definition of a Design System is somewhat loose, it can be stated that Bootstrap is a NOT a design system. - To reduce Design System to a branded collection of technical assets is simplistic. You are still not getting it. - The general idea of Design Systems is much more than organising some components for one medium (web). The execution of the system might or might not be good. - In order to do design (UX, UI, ...), you don't need to be "a designer". However, the fact that it is possible to use something like Bootstrap does not make your design (outcome) work automatically. More often that not, the work done by non-designer is not as good. The craft exists. Thinking that "the problem has been solved already" means you don't actually understand the full problem. Like with anything, some aspects are re-solved continuously. Maybe unnecessarily. Maybe not. - For many it would probably be easier to think that all design is design. Any act of diminishing some aspect of design can be mirrored by asking yourself if you think your design tasks can be done by anyone not paying appropriate attention. E.g. if you are a programmer, imagine a random stakeholder would quickly put together your data models and API designs and call it a day. Would it work? Would it scale? Would it be enough? Maybe. - Any design can be challenged. Complaining about stakeholders is lame. Check your argumentation skills and asses if you have actually challenged the design when you had the opportunity.

mrichman 5y ago

So glad my tax dollars went to recreating Bootstrap.

momo93 5y ago

What's new? France released its own DS last year. https://www.systeme-de-design.gouv.fr https://www.systeme-de-design.gouv.fr

mzmzmzm 5y ago

tedmiston 5y ago

Direct link to repo: https://github.com/uswds/uswds https://github.com/uswds/uswds

egberts1 5y ago

A good and safe UI/UX is the one not using JavaScript. (Tossing my karma here because I find malicious JS … all … the … time with my heavily instrumented JIT browser. ) Just yesterday, I ran into a CSS/JS snippet conspired to do local net probe scanning. Further googling shows that it is a bank that is doing this. A matter of time before such a browser-based probe finds a passive infected machines awaiting to respond with a specially-made packet.

pcthrowaway 5y ago

Free as in "bringing freedom" not free beer: https://github.com/uswds/uswds/blob/develop/LICENSE.md https://github.com/uswds/uswds/blob/develop/LICENSE.md