Overview

The design system is a set of open source design and front-end development resources you can use to make Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design Standards and supports additional CSS and React components, utility classes, and a grid framework.

With the design system, your team will be able to quickly prototype websites that are accessible, responsive, and production-ready.

Why should I use the design system?

  • Create consistent, enjoyable, reliable, and Section 508 compliant websites.
  • Promote best practices for usability, accessibility, and responsive web design.
  • Speed up the design and development process.
  • Have a single source for UI standards.
  • Quickly update your website when there’s new information about improving user experiences. You can add your findings to the design system to support other teams.
  • Learn from other teams as they add their experiences to the design system.

Who can use the design system?

The design system is open source and freely available for anyone to use.


Getting started

Visit design.cms.gov/getting-started for instructions on how to get started.


Use cases

Healthcare.gov

The design system is used now on some parts of HealthCare.gov. Later this year HealthCare.gov will adopt the design system on the whole site to make the experience better for everyone who needs health care.

Developer.CMS.gov

We developed this site using the design system as a base. By using the design system a small team was able to quickly prototype and develop this site without losing consistency or accessibility.


Governance

Read about the governance used for the design system.


Support

Find an issue or have a feature request? Ask questions on GitHub.