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. It is open-source and freely available to use by anyone.
- For developers - Download the code as a zip file or install with NPM.
- For designers - Get the Sketch Library or download the Sketch UI kit.
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.