Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.

CFPB Design System Travis npm

The Consumer Financial Protection Bureau's user interface framework and documentation.

atomic-component buttons core expandables forms grid
npm npm npm npm npm npm
icons layout notifications pagination tables typography
npm npm npm npm npm npm


Install components using yarn or npm:

yarn add @cfpb/cfpb-buttons
# or
npm install @cfpb/cfpb-buttons

Or you can install all components at once:

yarn add @cfpb/cfpb-design-system
# or
npm install @cfpb/cfpb-design-system


Import individual Less stylesheets or the entire design system into your project:

@import '@cfpb/cfpb-buttons/src/cfpb-buttons.less';
@import '@cfpb/cfpb-typography/src/cfpb-typography.less';
// or
@import '@cfpb/cfpb-design-system/src/cfpb-design-system.less';

// the rest of your stylesheet...

Components with JavaScript can also be imported:

import Expandable from '@cfpb/cfpb-expandables/src/Expandable'';

Expandable.init( document.querySelector( '#container' ) );

NOTE: Be sure to run the Less files through Autoprefixer, or your compiled CSS might not work perfectly in older browsers.


The Design System's website is available at It lives in this repository's docs/ directory and is powered by Netlify CMS and Jekyll. To edit any page of the website, click the edit button at the bottom right of the page. You'll need to be added as a contributor to this repository in order to authenticate with Netlify CMS.

Running the documentation website locally

The project has a dependency on Ruby because it uses Jekyll. If you do not have Ruby installed, you will need to install it. We recommend using RVM. If you don't have admin access to your machine, try these steps:

curl -sSL | bash -s stable --ruby
rvm install 2.7
brew install openssl
brew link openssl --force
gem install eventmachine -- --with-openssl-dir=/usr/local/opt/openssl@1.1
bundle install

And then to run the documentation website locally:

git clone
cd design-system
yarn start

Visit http://localhost:4000/design-system/ to view the site. Editing a page locally will change your local files, using an experimental Netlify CMS feature.

To run accessibility tests against your local files:

yarn a11y


Please view our contribution guidelines.

Open source licensing info

  1. TERMS
  3. CFPB Source Code Policy