The Chicago Design System for building fast, accessible, mobile-friendly city government websites. Derived from @uswds
Clone or download
Pull request Compare This branch is 43 commits ahead, 91 commits behind uswds:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

CDS Design Library

This repository serves as a library for the City of Chicago's colors, patterns, logos, and all other assets. It is meant to serve as a guide for city web products, and is open to contribution and discussion. This project is completely open source and in the public domain under the CC0 1.0 License. Any municipality or other organization is free to use, modify, and publish content using designs created for the Design Library. In its current iteration, the CDS takes heavily from the federal government's US Web Design System, and is a direct fork of that project.


Fractal is used to publish the atomic design elements of the Chiago Design System. You will need to install the CDS Fractal fork in order to edit and preview your changes to the CDS pattern library. Go here for more information on Fractal and here for more information on atomic design.

  1. If you haven't already, install npm. npm is a package manager for Node based projects. Below is a link to find the install method that coincides with your operating system:
  2. Navigate to the design-library directory
  3. Run
npm install
  1. Run npm start to make sure it's up and running
npm start
  1. Make changes to the components in the 'src' folder
  2. Run
npm install
  1. Install fractal
npm i -g @frctl/fractal
  1. Run fractal build to generate the static site
fractal build
  1. Open the docs folder static site to make sure it generated correctly
  2. Sync with the repo
  3. Make a pull request

For more detailed information on USWDS patterns and their fractal setup, please look at their Github repository.