OSS SPOTLIGHT: The U.S. Web Design System 2.0 from GSA

Code.gov
Code.gov
Jun 5, 2019 · 5 min read

When the Internet became what we know it today, a lot changed in the world. Access to information. Means of communication. And even graphic design standards. Think about it — with print, you have parameters that define exactly what you are creating. Are you working on Letter or Legal paper? Portrait or Landscape? CMYK or Pantone? Exact parameters help you as the content creator keep full control of the final product. Design on the Internet, however, introduced a whole new set of challenges for designers. How does your design appear on monitors running at certain resolutions? Are you running Safari, Chrome, or Firefox? What are the font preferences on your browser? With design parameters now changing from user to user, consistency appeared close to impossible.

General Services Administration (GSA) and Office of Products and Programs (OPP) committed to design a reliable, consistent, and easy-to-manage layouts for federal websites: the U.S. Web Design System 2.0 (USWDS 2.0), a new approach to design that saves time in upgrading websites or building them from the ground up. The USWDS project also saves taxpayers money because it’s open source, sharing solutions between agencies with contributions from both inside and outside of government. With two years worth of feedback and submitted issues in GitHub repos from designers and developers working with early versions of USWDS, the design system team determined the following priorities for its next major product version, USWDS 2.0:

  • Encourage modular, iterative, user-centered design
  • Promote accessibility and mobile friendliness
  • Develop a consistent design language
  • Support designing with flexibility and coherence
  • Lead with dependable guidance
  • Allow teams to prototype and build quickly
  • Establish a reliable foundation for growth

USWDS 2.0 is an update to the USWDS library of code, tools, and guidance assembled to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices. It’s a toolkit for creating useful, consistent digital services that improve aesthetics, cut download times, and offer improved UX. USWDS code and guidance can be found in over 200 federal websites; and USWDS 2.0 introduces a new design system that will prove more adaptable to change, and help teams build better websites for the American public.

Photo by Silvia Brazzoduro on Unsplash

Adding USWDS 2.0 does not require a redesign of websites currently online. USWDS components and code are designed to adapt to the current look established by offering:

  • Isolated class-based styling that won’t affect your existing styles
  • Customizable base font size
  • Custom typefaces support
  • An expanded palette of colors and typescale

To keep productivity between design teams and dev teams moving forward, USWDS 2.0 introduces design tokens, a common language for the elements of visual design. Design tokens allow designers and developers to easily collaborate by offering teams:

  • A common language between designers and developers
  • Simple standardized palettes
  • Faster response to feedback
  • Integration with best-practice guidance
  • Coherent and expressive palettes
  • Even spacing units (based on 8px) that yield reliable spacing and centering
  • Typescale that outputs consistently and predictably, regardless of typeface

Once a web design project has its components in place, it is time to agree on a color scheme. The USWDS 2.0 color system offers a simple way to pick accessible color combinations. The system works like this:

  • Each USWDS color has a “grade” between 0 (white) and 100 (black), as in red-50 or blue-20
  • The difference between any two grades is referred to as the magic number
  • Colors with magic numbers of 40+ achieve AA Large contrast (Example: red-10 and gray-50)
  • Colors with magic numbers of 50+ achieve AA contrast (Example: blue-warm-50 and black-100)
  • Colors with magic numbers of 70+ achieve AAA contrast (Example: yellow-10 and blue-80)
  • This color system encourages accessible color choices for your site’s brand
  • This color system supports practical project theme palettes
  • This color system provides the foundation for expressive color families
Photo by Denise Chan on Unsplash

USWDS 2.0 has been developed to be adaptable, versatile, and a step forward for consistent government web design. The USWDS team knows that the user needs of every site are different: different missions, different audiences, and different goals. USWDS 2.0 was created, and made open source, as a flexible design system that encourages customization consistent with modern best-practices. And there are other aspects of USWDS that facilitate this approach to web design:

  • USWDS utilities, offering prototypes and quick modifications to production components
  • Consistent, predictable BEM naming
  • Streamlined development process
  • Easier integration of new components from outside projects

For a full breakdown of what USWDS 2.0 offers, we invite you to take a look at this deep dive into what this update offers you.

Photo by Lauren Mancke on Unsplash

This USWDS 2.0 release is the foundation for the future of the design system, offering reliable solutions able to adapt to development and change on the Internet. As this is an active open source project, OPP and GSA will not only continue to test and develop new functionality but they also invite you to improve the product by contributing feedback, code, and new ideas. Reach out to the USWDS project on GitHub, email, the USWDS Slack channel, or the project’s new mailing list by sending an email to uswds-subscribe-request@listserv.gsa.gov. Input will continuously improve the system with ongoing regular releases. And as for our participation at Code.gov, we too are always ready to hear from you. Reach out to us on Twitter or LinkedIn with your questions, and join us in celebrating innovation that begins here. Thank you for your support in our initiative, and we look forward to hearing from you.

Code on.

CodeDotGov

Code.gov

Written by

Code.gov

Sharing America’s Code

CodeDotGov

The primary platform for sharing America's code.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade