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.
-
Recommended option: Install the NPM package
@cmsgov/design-systemif your project uses npm for package management. -
If you're unfamiliar with npm and package management, download the code as a zip file.
Designers
- Recommended option: Use the Figma Library
You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.
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 in ways that are easy to consume by product teams