Skip to content
Branch: master
Go to file

Latest commit

line47 and bernardwang committed 78ab0a8 Jun 30, 2020

* set up focus boolean variable

* disbale focus for link and button styles

* adding uswds focus styles back

* updates to focus styles for components

* Update to component focus styles - linting

* PR feedback

* remove USWDS focus style variables

* add comment to explain focus variable

* update documentation

* Break out focus color examples

* add info on focus styles to migration page

* remove legacy asset-pipline variable

* Fix lint spacing

* migration content feedback

* updating theming page with focus variables

* Update to focus variable names on docs

* remove duplicate active states

* remove lint rule

* add else statements

* PR content updates

* PR feedback

* removing newline

Co-authored-by: Bernard <>


Failed to load latest commit information.
Latest commit message
Commit time

CMS Design System Build Status

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.



You're currently at the root of a monorepo containing multiple NPM packages located in the packages directory. Unless you're a contributor or a child design system maintainer, you can ignore the @cmsgov/design-system-docs and @cmsgov/design-system-scripts packages, as they are mostly focused on the design system's developer tooling and documentation. View the in each of these for additional details.

Name Description
CMS Design System The core CSS, JS, and React components for the design system.
Design System Documentation Markdown files containing documentation for the core design system site. These files are used by @cmsgov/design-system-scripts to generate our documentation site.
Design System Scripts Scripts for compiling, testing, and linting design system assets. Also contains scripts for building and serving the documentation site. This is used internally by the core CMS design system team, but is made public for child design systems.

Running locally

This project uses Yarn for package management. Yarn helps to ensure everyone is using the same package versions. Install Yarn, if you don't have it yet.

Getting started

  1. yarn install
    • This will also run Lerna bootstrap which allows us to have multiple packages within the same repo (a monorepo). Lerna installs all our dependencies and symlinks any cross-dependencies.
  2. yarn start

Note: When you create a Git commit, any staged scripts will be automatically ran through ESLint and Prettier. If the linter catches an error, your commit will fail. This is a feature, not a bug :)


These scripts can all be run from the root level of the repo:

  • yarn start
    • Starts local server running the documentation site
    • Regenerates documentation when files change
  • yarn build
    • Compile/transpile/uglify everything and makes things release-ready.
  • yarn release
  • yarn test
    • Runs JS unit tests
    • Runs Prettier for formatting
    • Lints JS using ESLint
    • Lints Sass using stylelint
  • yarn test:e2e
    • Runs end to end tests
  • yarn update-snapshots
  • yarn lint
    • Runs just the linting portion of the tests

Visual regression testing

In addition to unit and e2e tests, we're using backstopJS for visual regression testing. Here's how to run the tests.

  • Install backstopJS yarn install
  • Run the site locally yarn start
  • In a new terminal window run the backstop tests backstop test
    • This will test the local CMSDS documentation site against the CMSDS production documentation site
  • After the tests run an html report will open in your browser showing passed and failed tests
  • When introducing a visual change, run backstop approve to commit new reference files after confirming the change with backstop test

Note: Use backstop reference to update and replace all reference files.

Design Assets

The CMS Design System provides a Sketch file and Sketch Library containing components, styles, and symbols. These are regularly updated alongside our code, and updates are automatically synced for designers using the Sketch Library.

Read more on using Sketch with the CMS Design System


Examples of the design system in use can be found in the examples directory.


Please read the document to learn about contributing to the design system, and our coding guidelines.


To contact the CMS Design System product owners, please email

One of our goals is to ensure a welcoming environment for all contributors. Please take a look at our Code of Conduct to learn more.

You can’t perform that action at this time.