Government design systems: leveraging USWDS & building your own

A design system is a set of reusable components, guidelines and standards. By creating a unified brand language, it can empower government agencies to build better digital experiences faster. 

Learn all about design systems in this guide, including how to build, scale and maintain one. You’ll also learn from design system examples like the United States Web Design System (USWDS) and our work for clients like Mass.gov. 

How does a design system work?

Think of a design system like a LEGO set. It includes lots of building blocks including:

• Components such as buttons, form fields, and headers. They’re often organized into a hierarchy using atomic design principles. Design systems can include both the visual designs and coded versions of components.
• Styles, or design tokens which define elements like colors, typography, and spacing.

But that’s not all — just as LEGO provides instructions, a design system also includes:

• Design standards which provide broad rules, guidelines and best practices for creating human-centered experiences.
• Style guides which are a subset of design standards. They explain exactly how to use visual elements for a consistent aesthetic.

With LEGO, you can ignore the instructions and build freely. But in UX/UI design we need to balance creativity with consistency and quality. This is why standards and guides are crucial ingredients which set design systems apart from component libraries. 

Our team helped create the Figma library for the Mayflower design system for the Commonwealth of Massachusetts in collaboration with Lullabot and the Massachusetts Digital Service. It includes components in Figma, built based on the React and Pattern Lab libraries; documentation on brand pillars and accessibility; and templates for quick page building. For components not yet in Mayflower, we looked to teh USWDS.

What is the United States Web Design System?

The U.S. Web Design System (USWDS) is a design system built by government, for government. Dozens of agencies use it to create products that meet the requirements for federal digital services — including the 21st Century Integrated Digital Experience Act and Section 508 of the Rehabilitation Act.

The USWDS offers 40+ components with out-of-the-box compliance. It also includes patterns, design tokens and utilities. And you’ll find plenty of guides, templates and implementations to help you get started. 

Like any good design system, the USWDS evolves continually. But what’s particularly special is that it’s open source. Agencies that adapt the USWDS contribute to its growth, scaling their innovation and expertise across government. 

I’ve previously leveraged the USWDS to improve Massachusetts’ Mayflower design system. For example, I integrated an adapted version of the USWDS language selector after I noticed a bug in Mass.gov’s existing component. I knew I could use it confidently, as USWDS components undergo thorough testing before being published.

Some important context around the USWDS’ future

The USWDS was created in 2015 through a collaboration between 18F and the U.S. Digital Service (USDS). The USDS was launched in 2014 by President Barack Obama with a mission to deliver better government services through technology and design. In January 2025, President Donald Trump issued an executive order reorganizing and renaming USDS as the United States DOGE Service, where DOGE stands for Department of Government Efficiency. Despite its name, DOGE is not an official government department. 

It’s unclear whether the USWDS will continue to be hosted on digital.gov. But because it’s open source, you’ll find many copies and adaptations of the USWDS on Figma, GitHub, and other platforms. We feel optimistic the USWDS will remain available to help government agencies build inclusive, user-friendly services. 

How can design systems improve service delivery?

A good design system empowers government agencies to implement human-centered design and roll out digital services faster. Here are some key benefits:

• Increase efficiency. A design system acts as a centralized source of truth across design and development. It aligns teams and shows them what assets already exist, meaning they don’t waste time duplicating work or creating inconsistencies that need fixing later. All this means you can ship better products faster.
• Free up resources. With less time spent fixing issues and reinventing the wheel, teams have more time to innovate and improve existing assets. This allows you to deliver more value to your users without needing to increase investment.
• Build public trust. By increasing consistency and quality, design systems help you create end-to-end experiences that feel official and trustworthy. You may see an increase in service uptake and customer satisfaction as a result. Agencies that adopt the USWDS have the advantage of using components that already feel familiar to many users.
• Ensure compliance. Government websites are impacted by more than 100 laws, regulations and policies, which cover topics like accessibility, privacy, security and customer experience. An effective design system contains components that have been thoroughly tested and built to be compliant out of the box.
• Scale changes quickly. You only need to make a change once to update tokens, components and standards everywhere. For example, when Mass.gov switched to a more accessible typeface, we were able to apply the update universally via their Mayflower design system. 

How to build your gov design system

Building an effective design system is a considerable undertaking. Here are some strategies for successful planning and implementation:

• Identify your goals. Get clear on what you want to achieve with a design system and how you’ll measure success.
• Evaluate your existing assets and systems. It’s not uncommon for government design systems to be born out of disjointed pattern libraries, style guides and code bases. This was true for the GOV.UK design system, which is now a renowned example of best practice for digital service design.
• Choose the right tools. Investigate platforms for housing your design system, such as Figma. Consider using USWDS as a foundation for your components and standards.
• Allocate resources. Creating and integrating a good design system requires investment. Get buy-in from key stakeholders and carve out sufficient time and budget.
• Ask for help. Reach out to the Digital Experience Council — a cross-agency group that collaborates on best practices, lessons learned, and common approaches to digital experience challenges. If you need additional support, consider working with a digital partner like Last Call Media.
• Collaborate. Involve your designers, engineers, content managers and other relevant stakeholders from the beginning. Ensure good communication and alignment as you work together to build, test and roll out the system.
• Prioritize. Consider building and implementing your design system incrementally to make the project more manageable. Focus on the most important elements first, such as commonly used components or solutions to urgent issues.  

Updating and scaling your design system

A design system isn’t a “set it and forget it” deal. It requires ongoing maintenance to stay relevant, compliant and valuable. After all, making quick universal changes is a key benefit of design systems. 

Ensure your design system governance is human-centered. This means regularly updating the system based on user feedback, accessibility testing and UX best practices. For example, Mass.gov updated their design system after we helped test and improve their forms for accessibility. 

Make sure to document and track your design system governance. Consider setting up a DesignOps team with members from design, development and marketing. DesignOps combines diverse perspectives to promote cross-functional collaboration — including maintaining an effective design system. 

Creating a design system with a digital partner

Building or scaling a design system is a big undertaking. Consider partnering with an experienced digital agency to help you navigate the process effectively. We’ve worked with clients like the Commonwealth of Massachusetts to create efficient, compliant design systems that result in accessible, human centered digital products. Learn more about how we work or get in touch for a chat.