Skip to main content
U.S. flag

An official website of the United States government

Dot gov

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.

Https

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

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.

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 grid systems and form 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 to work with when you’re not designing in code.

U.S. General Services Administration Logo 18F Logo

18F UX Guide is a product of GSA’s Technology Transformation Services, and is managed by 18F.

Looking for U.S. government information and services?

Visit USA.gov