U.S. Web Design System

design systems front-end development

I worked as a product manager, designer, and developer on the U.S. Web Design System, a design system for the federal government used by hundreds of agency projects.

A collaboration between the U.S. Digital Service and 18F, the U.S. Web Design System is the U.S. government’s very own set of common UI components and visual styles for websites. I work as a front-end developer on the project. We designed this resource to make things easier for government designers and developers, while raising the bar on what the American people can expect from their digital experiences.

We wanted to create a single reference point for developers in need of common patterns, providing the building blocks of code for teams to assemble websites. Our goal was to build a system of components shaped by modern best practices in front-end development and government accessibility standards.

We built the UI components on a solid HTML foundation, progressively enhanced to provide core experiences across browsers. All of the code is 508 compliant, so it’s accessible to everyone. Our styles are written with Sass and can be used as a Sass library or included directly as compiled CSS. In order to make sure our code was easy to read and easy to pick up, it had to look like it was written from a single voice. After speaking with dozens of front-end developers and designers in government, we sought to strike a balance between modular CSS and code that’s clean and easy-to-use.

Read my case study on Smashing Magazine and how we evolved the system to version 2.0.

View project