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.


Create a testable solution.

Design pattern library


A collection of UI elements used frequently across a design system, consisting of the base patterns and helpful information about how to use them.


To aid in designing a solution that uses UI elements consistently. Maintaining a set of approved, reusable patterns makes it easier to produce new features or make updates to the current solution.

Time required

1–2 hours per pattern; ongoing maintenance.

How to do it

  1. Start identifying common components as early as possible, ideally while you and the team are creating new design elements. These common pieces form the patterns that you will create guidelines for. Specify the components that make up each UI pattern and note possible constraints or restrictions.
  2. Describe or visualize how someone will use the pattern and how it should respond to the user. (For example: how a button renders on load, hover, and click.) Provide any data as to why it is good for the end user.
  3. Include any code or snippets that front end developers can use to implement the pattern.
  4. Show examples of how the same pattern could work in different solutions.
  5. Publish the design pattern library in an open, accessible space where the product team can use and extend it. (Common implementations of a design pattern library are in a wiki or brand style guide.)

Considerations for use in government

No PRA implications. No information is collected from members of the public.


18F Methods

An official website of the GSA’s Technology Transformation Services

Looking for U.S. government information and services?