USWDS offers a flexible yet coherent visual style you can apply to any government website. Our visual style offers a clean, modern aesthetic that meets high standards of usability and accessibility while promoting credibility and trust.
See the design tokens section for more on USWDS system styles and palettes.
As a complement to this visual style guidance, we strongly recommend you use 18F’s Content Guide when writing language for government services.
USWDS for designers
The site contains HTML mockups of common UI components designed to follow USWDS’s visual style guide. To view the specs of each design live on this website (padding, margins, stroke weight, line-height, and so on), use your browser’s developer tools.
USWDS components and tokens are available as an Adobe XD components file and as a Sketch library and project file. Download the assets and all associated fonts and images from the link below. Find more complete installation instructions at our USWDS for designers GitHub repo:
Alternatively, you can view the design assets on Figma. Heads up! These Figma assets are not affiliated with or endorsed by the USWDS team. We have not tested them, so use them at your own discretion.
Retired design files
USWDS no longer maintains the following design files. The most recent versions remain available for download at the links below. While USWDS is no longer maintaining these files, we’d love to hear from any teams that are using them and adding new components when new versions of USWDS are released. Send us an email.
All of our designs meet the WCAG 2.0 AA accessibility guidelines and are compliant with Section 508 of the Rehabilitation Act. If you choose to customize these designs, please make sure they continue to meet the requirements listed in the “Accessibility” section of each design.
We’re glad you’re considering contributing to USWDS — their success relies on contributions from designers like you.
Please visit our wiki to read our full contribution guidelines. Also, please note that every submission we receive goes through a full design review. (Changes that only affect underlying code are reviewed by our developers.)
Questions or comments? Email us and we’ll get back to you as quickly as we can.