A design system for the federal government. We make it easy to create accessible and mobile-friendly government websites. Introducing USWDS 3.0 Migration to USWDS. USWDS is a design system for the federal government.
A design system for the federal government that facilitates the creation of accessible and mobile-friendly government websites for the American public. An official website of the United States Government Official websites use. gov A. gov belongs to an official government organization in the United States.
Web design system makes it easy to create accessible and mobile-friendly government websites. Here's Why the USWDS Works for Government Teams. The Web Design System (USWDS) is a toolkit of principles, guidance and code that facilitates the creation of accessible and mobile-friendly government websites. We use human-centered design to support design teams focused on.
Don't reinvent the wheel when it comes to buttons, forms and other common elements. Provide a smoother experience both in your agency and across the federal government. Strengthen your team's agreement with common principles and people-centered design right from the start. These principles align teams across the federal government around common goals.
Support and reflect requirements for federal websites and digital services, codified in 21st century IDEA. Focus on your mission, not your margin. Spend less time creating from scratch and more time creating solutions. USWDS accelerates the development process and helps teams focus on higher-level goals.
Your team knows their audience and their mission. USWDS adapts to your brand's appearance, editorial style guidelines, user needs and overall digital strategy. When the design system improves, so does your project. By using the design system, your service benefits from our continuous improvement.
We fix bugs, improve accessibility and reduce technical debt at scale. Every design system upgrade improves every site in the design system. Break down silos and develop your skills alongside web professionals from across the government. Improve performance, efficiency, governance and institutional memory.
USWDS exists to expand service experience across the federal government, so that all teams can benefit from upgrades to any equipment. When you build with USWDS, you benefit from the expertise of your agency's teams and people and others. What you build helps improve the design system for the next teams that use it. This process helps to make the most of the teams that use the design system.
Build institutional memory available to new teams. Promotes user-centric and driven decision-making and governance. The result is faster and more efficient service delivery over time. Everything we invest in the design system is shared, multiplied and composed as much as possible.
We use the scale of the federal government to help individual teams perform at their best. Please refer to the sample contract language for 21st Century IDEA that we publish, which you can use to document the requirements related to website modernization in your various contracts. USWDS is an active open source community of government engineers, content specialists and designers. Our collaborators, both inside and outside the government, support dozens of agencies and nearly 200 sites.
An official website of the General Services Administration. Web Design System (USWDS) formerly known as EE. UU. Web Design Standards is a library of codes and design guidelines to help government developers and designers quickly create reliable, accessible and consistent digital government services.
USWDS offers code and guidelines for forms, typography, buttons, alerts and more. The latest version, 1.0, is the culmination of more than a year and a half of design and development through more than 20 versions. And there are more than 3,400 people, inside and outside the government, who follow the project on GitHub and contribute to the code. An official website of the U.S.
By Mollie Ruskin, Carolyn Dew, Maya Benari, Colin MacArthur This project was a collaboration between 18F and EE. The team was led by Mollie Ruskin (USDS) and Julia Elman (18F) and consisted of designers and developers from both groups, including Maya Benari (18F), Carolyn Dew (18F), Victor Garcia (USDS), Angel Kittiyachavalit (USDS), Colin MacArthur (18F) and Marco Segreto (18F). Joanne is a young military veteran looking to make use of her GI Bill benefits and apply for federal student loans to attend college. When the American people go online to access government services, they often encounter confusing navigation systems, a cacophony of visual markings, and inconsistent interaction patterns.
A snapshot of a quick button survey on government websites. Following a growing trend in the private sector, several federal agencies have begun to create design patterns and user interface (UI) toolkits to build unity within their own digital brand. Some outstanding examples include those of the Consumer Financial Protection Bureau (CFPB), the United States Patent and Trademark Office (USPTO) and Healthcare, gov. This is a time-consuming effort and not all agencies have the resources to support it.
To better serve users like Joanne, we need to set a new standard for simplicity and consistency across government services, not just within a given agency or program. Web design standards are designed to be viewed on any device. Web design standards are the U.S. Governance's own set of common user interface components and visual styles for websites.
It's a resource designed to make things easier for government designers and developers, while raising the bar on what the American people can expect from their digital experiences. Do your best, the easiest. We believe that creating tools that align with the values and needs of digital workers in the federal government will drive adoption. Be accessible from the start.
We create tools that perfectly meet 508 accessibility standards, from colors to code. Our goal is to give the American people a sense of familiarity when using government services, while allowing agencies to customize these tools to fit their unique needs. We review, test, evaluate and reuse existing patterns, codes and designs from dozens of government and private sector style guides to make use of tried and true best practices. What started as an idea evolved into four months of rapid development and iteration by a collaborative team in 18F and EE.
Digital Service, guided by an advisory board of talented and experienced government workers in the CFPB, Food and Drug Administration, Department of Veterans Affairs, Social Security Administration, Department of Education, Internal Revenue Service and GSA. An initial outline of our design suggestion for a password reset page The design of each component follows data-driven best practices, found both inside (DigitalGov) and outside (Nielsen Norman group articles) of the government. Many components were derived from other agency patterns and style guides; more complex patterns were tested with end users. We believe that agencies should continue to test the usability of everything they build, but following the standards will help everyone avoid common mistakes.
All our standards include code examples. We wanted to create a single point of reference for developers who needed common patterns, providing the basic components of the code for teams to assemble websites. Our goal was to build a component system shaped by modern best practices in front-end development and government accessibility standards. Design standards include a wide color palette.
We set out to create a single common visual style to be applied flexibly across a wide range of government platforms. We wanted a clean, modern aesthetic that communicated credibility, trust and warmth, and that met high standards of visual accessibility. We conducted a branding exercise, auditing dozens of websites, logos and government branding styles. We tested dozens of typefaces, with an open source laser focus and highly readable combinations.
The font suite we selected, a robust serif and a thin sans serif, meet a variety of design needs, from polished marketing pages to content-rich digital services. We came up with a palette of blue, gray, white and red that can be applied generously or sparingly to create a distinctly American flavor with baked adaptability. Like any real alpha, this is a living product; we will continue to test our decisions and assumptions with real-world feedback as it develops and evolves. We encourage you to explore the U.S.
Web design standards, contribute your own code and ideas, and leave comments on GitHub. We will use your feedback to improve standards and make regular releases in the coming weeks and months. This project was a great feat of collaboration. We would probably still be in a corner designing buttons if it hadn't been for the encouragement, feedback and support of this incredible group of people, both inside and outside the government.
Sincere thanks to Mollie Bates, Nick Bristow, Danny Chapman, Scott Cranfill, Elizabeth Goodman, Victor Garcia, Kavi Harshawat, Michael Jovel, Jeremiah Kimelman, Deepa Kunapuli, Maria Marrero, Brad Nunnally, Alex Ose, Eric Ronne, Nick Setthachayanon, Jessica Teal, Jennifer Thibault, Ryan Thururne Lwell, Russ Unger, Charles Worthington and Emily Wright-Moore for always being available to help us think about some of the extra sticky parts. Big congratulations to Mike Bland and Alison Rowland for making 18F Pages work perfectly for this project. Special thanks to Julia Elman for her hard work to get this off the ground and to John Yuda for helping us to the end. And thanks to Norris Hung and Frances Berriman of Code for America for their contributions to this project.
Read more about How to integrate Draft U, S. Web Design Standards in Existing Projects Right ArrowRight Arrow Pointing Right In the five months since we released Draft U, S. Web Design Standards: More than a dozen websites have used components of the draft standards on their sites. Recently, we spoke to three federal web designers about their experiences using the Draft Rules.
Read more about Three teams using Draft U, S. Web Design Standards Talk About Their Experiences Right ArrowArrow Pointing Right Read more about Happy Valentine's Day from the U.S. Web Design Standards Team Arrow to the RightArrow Pointing to the Right Work with us to plan successful projects, choose better providers, create custom software or learn to work in new ways. An official website for GSA Technology Transformation Services.
Web Design System Helps Federal Government Build Fast, Accessible, Mobile-Friendly Websites. The United States web design system includes a library of open source user interface components and a visual style guide for U, S. Information about the most recent version of the design system can always be found in the version history. We include details about important updates and any changes incompatible with previous versions, along with a list of all changes.
USWDS 3.0 is our most recent major release. The USWDS package includes assets compiled in a dist directory and component source files in a package directory. We recommend using npm to make it as easy as possible to install the design system and update it as we release new versions. You can do this manually, but a simpler method is to use the npm init command.
This command will ask you with some questions to create your package, json file. If you're using a framework or package manager that doesn't support npm, you can find the source files in this repository and use them in your project. Otherwise, we recommend that you follow the steps described in this section. Download the USWDS package directly from the latest version of USWDS and unzip that file.
Reference the stylesheet, library, and initializer on each HTML page or dynamic template in the project. And that's it, you should now be able to copy our code examples into your index, html and start using the design system. If you want to take full advantage of the USWDS custom configuration and add new styles and components with the USWDS toolkit, you'll need a way to access the resources of the USWDS package and build custom CSS from the USWDS source files. USWDS uses the Gulp task manager as a way to add USWDS assets to a project and compile our CSS from the package source.
Gulp is a useful and powerful tool, but it can be difficult to set up if you're new to it. The USWDS build package is made for developers new to Gulp or those who just want a simple setup to build USWDS Sass. The repository contains files and instructions for configuring the compiler, initializing USWDS, and compiling CSS from the source files. USWDS 3.0 and later requires the use of Sass Load Paths to build successfully.
If you are using a modern framework such as React or Angular, you can import components and initialize them in your library's DOM-ready lifecycle event. USWDS 2.0 provides extensive support for creating themes through its theme configuration files introduced in Sass and theme settings, above. Visit the Design Tabs section of the USWDS 2.0 documentation to learn more about the available tabs for color, spacing units, font size, and more. In general, USWDS sets variables with tokens and passes those variables to functions and mixins in the Sass source.
The design system also meets the WCAG 2.0 AA accessibility guidelines and meets the standards of Section 508 of the Rehabilitation Act. For full instructions on how to contribute code, read CONTRIBUTING, md. These instructions also include guidance on how to set up your own copy of the Design for Development Style Guide website. For more information about our workflow process, see the Glossary pages of workflow tags and issues on the wiki.
Some parts of this project are not in the public domain. Attribution and licensing information for those parties is described in detail in LICENSE, md. All contributions to this project will be published under the dedication of CC0 together with the public domain parts of this project. The design of each component follows data-driven best practices, found both inside (DigitalGov) and outside (Nielsen Norman group articles) of government.
USWDS allows designers and developers to have an opportunity to update existing services or quickly create new websites for a modern and coherent feel. USWDS Maturity Model How to Adopt the Design System Gradually and Design and Create Better Digital Experiences. Whether your audience includes members of the public or government employees, decision makers must include real people from the beginning of the design process. .