Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Introduction

The design system is a set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design System and extends it to support additional CSS and React components, utility classes, and a grid framework to allow teams to quickly prototype and build accessible, responsive, production-ready websites.

It is currently being applied to HealthCare.gov and Medicare.gov. It is open-source and freely available to use by anyone.

Getting started

Developers

Developers and engineers are encouraged to use React which allows for more complex, interactive components, and many of our React components have built-in accessibility optimizations.

Designers

Goals

The primary goals for the design system are to:

  • Help create consistent, enjoyable, reliable, and Section 508 compliant websites.
  • Promote best practices for usability, accessibility, and responsive web design.
  • Empower teams and speed up design and development velocity.
  • Serve as a living source of truth for UI standards.

In order to meet these goals we are:

  • Using the U.S. Web Design System (USWDS) components and visual design as a foundation.
  • Reducing the overall footprint of websites by writing scalable CSS.
  • Supporting rapid development with utility classes and easy-to-use components with best practices baked in.
  • Reducing the number of decisions needed when iterating on UI by providing a solid foundation of typography, layout, and color.
  • Distributing resources as NPM packages which can be easily installed, updated, and imported.