Currently, I am in the process of familiarizing myself with the U.S. Web Design System (USWDS). Discovering this design system has caused me to question why we didn’t utilize it earlier. I face-palmed myself. While this wasn’t required for projects built for the CDPH (they’re not federal, they’re State) nor for the web app for the Air Force Ops floor, in the past, we only constructed one informational website at the federal level, which was for the public-facing site of Nellis Air Force Base’s ShOC-N. Unfortunately, it never launched due to the bureaucratic obstacles we encountered. We completed the site nonetheless and built it using React and Material UI without any backend involvement. In retrospect, I had an assumption that relying on civilian/commercial frameworks like Material UI may pose challenges in terms of maintenance and security.
While security is an important consideration for any design system used by the U.S. federal government, creating the U.S. Web Design System (USWDS) was driven by a broader set of concerns related to consistency, accessibility, and usability.
Prior to the creation of the USWDS, many government agencies were using their own design systems or relying on commercial systems like Material UI. This led to a lack of consistency across government digital services and websites, which made it difficult for citizens to navigate and use these services effectively.
Additionally, many of these systems did not meet the latest accessibility standards, meaning they were not fully accessible to users with disabilities. This was a significant problem for the government, which is legally required to provide all citizens equal access to its services and information.
The USWDS was created as a way to address these issues and provide a common design language and set of tools that could be used across government agencies to create consistent, accessible, and user-friendly digital services and websites. While security is certainly a consideration for the USWDS, it is not the primary driver behind its creation.
What is the USWDS?
The U.S. Web Design System (USWDS) is a design system for building accessible, consistent, and user-friendly digital services and websites for the United States government. It provides a set of standardized design guidelines, components, and tools that can be used by federal agencies to create high-quality digital experiences that are both visually appealing and easy to use.
The USWDS was created by the General Services Administration (GSA) in 2015 as a way to address the need for consistency and accessibility in government digital services. The goal was to provide a common design language that could be used across agencies to create a unified digital experience for citizens.
The design system includes a comprehensive set of design guidelines, including typography, colour, layout, and interaction patterns. It also provides a library of pre-built components, such as buttons, forms, and navigation menus, that can be used to quickly create new digital services and websites.
One of the key features of the USWDS is its emphasis on accessibility. The system is designed to meet the latest accessibility standards, including Section 508 of the Rehabilitation Act and the Web Content Accessibility Guidelines (WCAG) 2.1. This ensures that digital services and websites built using the USWDS are accessible to all users, including those with disabilities.
The USWDS is open source and freely available for anyone to use. It has been widely adopted across the federal government, and many agencies use it as the basis for their digital services and websites. By providing a common design language and set of tools, the USWDS helps ensure that government digital services are consistent, accessible, and easy to use for citizens.
Get Started Easily
The U.S. Web Design System (USWDS) is designed to be relatively simple to use, even for those without extensive design or development experience. It provides a set of pre-built design components and guidelines that can be used to quickly create consistent, accessible, and user-friendly digital services and websites.
They have support for developers and designers. An NPM package can be utilised, an official GitHub project, and they have official Sketch and Adobe XD design components for wireframes and prototyping (the Figma components are not official, but available nonetheless). Adobe Illustrator and EPS vector files are also available.
One of the key advantages of the USWDS is that it is designed to be modular, meaning that you can pick and choose the components that you need and integrate them into your existing workflows and development processes. This allows you to use the USWDS to create new digital services and websites without having to start from scratch.
The USWDS also provides extensive documentation and resources to help users get started, including design guidelines, code snippets, and examples of how to use the system. Additionally, the USWDS is open source and freely available for anyone to use, which means that a large and supportive community of users can provide help and guidance as needed.
That being said, using any design system requires some technical expertise and familiarity with the underlying technologies. While the USWDS is designed to be relatively simple to use, it may still require some level of training or experience to use effectively. However, for those who are willing to invest the time and effort, the USWDS can be a powerful tool for creating high-quality, consistent, and accessible digital services and websites.
*You will notice on the feature image that the Logo’s colour is different. That’s intentional. Two of the five polygons on their logo were of bad contrast with the dark blue background, so I used a “Difference” blend mode of the original colours dropped on white, which produced those two new colours. The other three had no issues with contrast checking.