Skip to main content

Make Chicago Better

The Chicago Design System (CDS) is a toolkit to make great digital services for Chicagoans. Get started with the system, share feedback, reporting a bug, or find other ways to contribute. Request an invitation to our Slack chat workspace via email at Chicago Design System.

Quick Start Guide

About the Chicago Design System

The Chicago Design System (CDS) includes several core components: a visual brand identity guide, a web user interface pattern library, and methods, or plays, teams can use to ensure we design with Chicagoans throughout the process. The CDS is a resource for teams to quickly and consistently produce delightful, useful, & accessible digital services for residents, businesses, visitors, and employees of the City of Chicago.

We have three goals for the Chicago Design System:

Chicago Design System code is built upon the US Web Design System. City of Chicago methods, visual identity, and additional user interface components wrap and extend these federal guidelines for design. The guides, identity, code, and visual representations of the design system are open source and in the public domain for use under the Creative Commons CC0 1.0 License. Contributions and commentary from any and all are welcome.

Accessibility

Accessibility is an essential aspect of web development for the City of Chicago. With nearly ten million people in the Chicago metropolitan area, and millions of visitors each year, accessibility means the greatest number of users can view our content.

In general, the City of Chicago follows WCAG2.0 AA as our standard for accessibility. All patterns, styles, and color combinations in the Pattern Library have been tested to comply with this standard.

See our Accessibility Standards

UI patterns

The CDS Pattern Library is a complete repository of our colors, fonts, and styles. It gives you the exact details to set the standard for what to implement on your site. At the same time, the Pattern Library offers assets and resources to cut down on time and standardize city sites.

When building your CDS site, make sure to reference the Pattern Library to bring your site as close as possible to the CDS standard.

We are updating the code behind our UI patterns. Today, you can see our updated sticker sheet produced in Figma.

See our UI patterns

Design methods

The Chicago Design system methods shows you the Chicago way of development and production. These are the services we currently offer, and have been adapted from the federal design process. Creating a well-designed, user-oriented product is of utmost importance, and as such our methods are focused around that goal.

Check back regularly, as the processes and services we offer may change, and we are always working on updates to our playbook.

See our Design methods