Skip to main content

Design System

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 Standards 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.

Learn how to get started

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 Standards components and visual design as a foundation. Read more about how we're applying the Standards in our GitHub Wiki.
  • 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.