U.S. Web Design Standards
The U.S. Web Design Standards is a library of open source UI components and a visual style guide for U.S. federal government websites.
These tools follow industry-standard web accessibility guidelines and reuse the best practices of existing style libraries and modern web design. Created and maintained by U.S. Digital Service and 18F designers and developers, the Web Design Standards are designed to support government product teams in creating beautiful and easy-to-use online experiences for the American people. Learn more about this project in our announcement blog post.
Design files of all the assets included on this site are available for download here: https://github.com/18F/web-design-standards-assets.
The structural setup of this repo is based off of https://github.com/18F/pages.
Reuse of open source style guides
Much of the guidance in Web Design Standards leans on open source designs, code, and patterns from other civic and government organizations, including:
- Consumer Financial Protection Bureau’s Design Manual
- U.S. Patent and Trademark Office’s Design Patterns
- Healthcare.gov Style Guide
- UK’s Government Digital Service’s UI Elements
- Code for America’s Chime Styleguide
- Pivotal Labs Component Library
_site/assets/ directory to a relevant place in your code base
cp ./_site/assets/css/main.css /path/to/your/repo/static/dir. Add the following
<script> elements in your HTML:
<link rel="stylesheet" href="/path/to/your/assets/css/main.css">
<link rel="stylesheet" href="/path/to/your/assets/css/google-fonts.css">
Setup for your local environment
On OS X, you can also use Homebrew to install Ruby in
/usr/local/bin, which may require you to update your
variable. Here are the commands to follow to install via homebrew:
$ brew update $ brew install ruby
Now that you have verified that you have Ruby installed, clone and run the following go script commands to initialize and serve the library locally.
$ git clone firstname.lastname@example.org:18F/web-design-standards.git $ cd web-design-standards $ ./go serve
You should now be able to visit
and view the web design standards locally.
Questions or need help with setup? Feel free to open an issue here https://github.com/18F/web-design-standards/issues.
Contributing to the code base
Deployment and workflow
- The staging branch
18f-pages-stagingis automatically deployed to our staging site: https://pages-staging.18f.gov/designstandards/.
- The production branch
18f-pagesis automatically deployed to our production site: https://playbook.cio.gov/designstandards/.
All development and pull requests should be done against the
18f-pages-staging is already set to the default branch in this repository.
Deployments to production will be done by site admins, using pull requests from
Please create a GitHub Issue.
If you'd rather email, you can reach us at email@example.com.
Licenses and attribution
A few parts of this project are not in the public domain
The Source Sans Pro font files in
assets/fonts are a customized subset of Source Sans Pro, licensed under the SIL Open Font License, and copyright 2010, 2012, 2014 Adobe Systems Incorporated, with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
The rest of this project is in the public domain
This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.
All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.