Skip to main content
U.S. flag

An official website of the United States government

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Use a design system

A design system can help your team prototype faster, scale, manage front-end design debt, and apply consistency across your applications. As a project grows, designers and engineers often find themselves managing dozens of variations of the same button, for example, across hundreds of lines of code. This can create duplication that slows down the build process, requiring extra work to ensure consistent styles across all the appropriate states, and adds more things to check as you’re making sure every screen of your application is accessible to all.

The U.S. Web Design System

Digital.gov states that the 21st Century IDEA requires agencies to comply with the website standards created by TTS. The website standards say agencies should use the U.S. Web Design System (USWDS).

Many teams at 18F begin by installing the USWDS package and adding additional components and styles to fit the needs of their application. The USWDS provides installation instructions to get started

Design systems like USWDS are more than buttons; USWDS extends to provide guidance and example code for all kinds of components, so you don’t have to start from scratch.

You may end up using the USWDS to handle a lot of the basic decisions (like USWDS layout grid and USWDS form fields and fields), so you can focus on the components that are specific to your use case (like file upload boxes and progress indicators).

The best place to get started with the USWDS is by heading to designsystem.digital.gov and jumping into the #uswds-public Slack channel. There you’ll find instructions on how to use the USWDS no matter what technology stack you’re using, as well as Sketch files provided by the USWDS to work with when you’re not designing in code.

18F User Experience Design Guide

An official website of the GSA’s Technology Transformation Services

Looking for U.S. government information and services?
Visit USA.gov