A United States Web Design System Primer for Building Government Websites

It’s been a little over two years since the 21st Century Integrated Digital Experience Act (21st Century IDEA) went into effect, meaning all government websites must now be built to its requirements. Specifically, every site must be 508-compliant, consistent in appearance with other agency sites, mobile-friendly, and designed around user needs.

Web designers and developers aren’t on their own to figure out how to meet these requirements, however. The U.S. Web Design System (USWDS), which debuted in 2015, provides a set of visual styles and website components designed specifically for use on U.S. federal government websites. It’s robust enough to be its own starting point—or you could easily integrate it into any existing framework you’re working with. 

If you’re new to the USWDS or need a refresher on the guidance it provides, this primer will help you get started. Read on for a rundown of its core elements and the three different steps you can take to implement them at your own pace. 

Five Core Elements of the USWDS 

The USWDS includes design principles and UX guidance for designers, as well as source files containing common UI components and page layouts. It also provides developers with code and styling for the various components, layouts, and features included in the design files. It provides these principles and resources in five core elements:  

Design principles 

The USWDS provides key considerations, resources, and practical actions to help designers better use the design system. Key focus areas are user needs, earning trust, accessibility, continuity, and listening. 

Components 

USWDS components include accordions, navigation, buttons, form controls, tables, search fields, and more. The USWDS has broken all the most common web features into pre-built components. Better yet, it has made it easy for you to only include the components and dependencies you need. 

Design tokens 

Design tokens are limited options that control palettes of values. You can use them to control elements of style such as color, opacity, typesetting, and spacing. 

Utilities 

Utilities are HTML classes that typically affect a single CSS property. Utility classes are available for grids, color, height, width, margin/padding, border/outline, text styles, flexbox, and more. 

Page templates 

In addition to components that can be embedded in the page, the USWDS provides layout templates to control the overall page structure of basic, landing, and authentication pages. 

Three Levels of USWDS Adoption 

If you’re not used to organizing projects the way the USWDS does, you don’t need to turn your whole operation on its head overnight. The USWDS outlines a three-level maturity model that allows you to adopt its principles incrementally.  

Level 1: Integrate design principles 

Design principles support the 21st Century IDEA and help guide design and implementation decisions. Part of integrating these design principles means taking user needs into consideration as you design. To make sure your designs include all user needs, this is a good opportunity to embrace accessibility standards.  

Level 2: Follow user experience guidance 

The USWDS provides ample user experience (UX) guidance to help you ensure your website looks and functions the way users expect it to. To implement level 2, make an inventory of your site’s components and then reference and follow the guidance provided for each component. 

Level 3: Use USWDS code 

Using USWDS code is an easy way to ensure you provide accessible and mobile-friendly digital experiences for your users. USWDS code is comprised of both design tokens and components. You can use design tokens to control color, spacing, and typography. Components are comprised of HTML and any accompanying Sass/CSS styling and JavaScript functionality. USWDS uses a modern workflow with npm/gulp/Sass and is open-source and available for contributions on GitHub

Getting Started 

If you’re new to building .gov websites, USWDS’ online documentation is comprehensive and the best place to start. There, you’ll find: 

  • In-depth info on design principles, components, tokens, layout, and utilities 
  • Quick-start guides to get you up and running easily, whether you’re a designer or a developer  
  • Information tracks for designers and developers 
  • Links to the USWDS community 
  • Sample implementations (e.g., themes for Drupal and WordPress, REACT components)  
  • Coding guidelines and more

Whether you are updating an existing government site or building a new one, the good news is that the USWDS has you covered. Referencing its principles and resources can help you build a more accessible and mobile-friendly site that meets the requirements of the 21stCentury IDEA.

Looking for more information on the 21st Century IDEA and other digital transformation news? Sign up for our newsletter to get them delivered straight to your inbox. 

Get alerted to new job postings, events, and insights by registering for our monthly newsletter.