How to use USWDS

USWDS provides principles, guidance, and code to help you design and build accessible, mobile-friendly government websites and digital services.

Get started with USWDS

Developers

Get started with our code base by downloading the code as a zip file, or installing with npm.

Designers

Create wireframes and prototypes in Sketch or Adobe XD.

USWDS project wiki

Find detailed information about our design and development process, and our collected user research.

Adopt USWDS incrementally

USWDS helps the federal government design and build better digital experiences. As a toolkit to design and build government websites, the design system provides:

  1. Principles: USWDS design principles support and reflect the important guidance codified in 21st Century IDEA.
  2. Guidance: USWDS user experience guidance provides best-practice advice for assuring components do what users expect them to do.
  3. Code: USWDS code provides an accessible, mobile-friendly experience across government sites. Teams can contribute new components back to USWDS.

Together, these form a design system maturity model. Adopt the design system incrementally by starting to implement our design principles in your project. Even before adding any USWDS code, you can also begin to adopt our UX guidance (like this guidance for a button). Then, start small and start to incorporate USWDS design tokens into your site design.

The design system is flexible, and we expect you to adapt it as you adopt it. Use the USWDS maturity model to build a solution that best meets your agency’s mission and user needs.

A diagram showing the concentric circles of the USWDS maturity model, progressing from Principles on the outside, through Guidance, and finally to Code in the innermost circle.