Skip to main content

Design System

Installation

The design system is available as NPM packages or via a .zip download.

The design system consists of two packages which are installed separately.

The core package includes the bulk of the design system:

  • Base styles
  • Utility classes
  • Sass/CSS and React components
  • Sass mixins and variables
  • Fonts and images
npm install --save @cmsgov/design-system-core

The layout package includes:

  • Responsive flexbox grid framework
npm install --save @cmsgov/design-system-layout

Need more information on NPM?

Learn more about using packages and NPM at npmjs.org.

Usage

We offer two versions of design system assets: a minified + compiled version (located in a dist directory), and an un-minified + non-compiled version (located in a src directory). Use the minified version in production environments. Use the un-minified version in a development environment to debug in the browser, or if you'd like to manage the un-compiled files with your own build system.

Need help or ran into an issue?

If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to open an issue on GitHub.