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.
You're currently at the root of a monorepo which contains multiple NPM packages in the
packages/ directory. The following packages located in the
packages directory of this repo. View the
README.md in each of these for additional details.
|Core||The core CSS and React components for the design system. Includes the Support package.
|Layout||A responsive flexbox grid framework.
|Support||Sass variables, mixins, and functions. Included in the Core package.
These packages are project dependencies, mostly focused around the design system's developer tooling and documentation.
|Documentation site||This directory contains code related to the documentation website. Unless you're a contributor, this directory isn't that interesting to you.|
|ESLint config||The ESLint rules we use to lint the design system's JS and React components
|Stylelint config||The Stylelint rules we use to lint the design system's Sass
|Yeoman generator||A Yeoman generator used in the development process. Again, unless you're a contributor, this directory isn't that interesting to you.|
Examples of the design system in use can be found in the
Please read the CONTRIBUTING.md document to learn about setting up a local development environment, contributing to the design system, and our coding guidelines.
To contact the CMS Design System product owners, please email