Skip to main content

Get started with the Chicago Design System

The Chicago Design System is our new public identity for the City of Chicago and our residents. The Chicago Design System (CDS) is a guide to producing delightful information, services, and technology applications for people to use when interacting with the City of Chicago.

In addition, this is the first municipal design system built for the public and government use. This is a platform that allows people to express their personal, community, and civic pride in Chicago. It gives the City of Chicago clearer, more effective communications through a uniform identity people can recognize and trust.

The system is made up of the elements themselves, like a public mark, a new seal, colors, and type families, as well as expressions of this brand as a logo, in a document template, an interactive prototype, or the code to make a website. There’s also a set of recipes to use for human-centered design work on your project.

Everyone

Figma

The easiest way to get started is to use Figma, an interactive design tool. Visit https://www.figma.com/@chicago in a modern web browser, duplicate our Sticker Sheet, and you’re in business. If you’re not one of those people who likes starting with a lot of stuff, it maybe overwhelming to look at, so…

Google Docs

The next easiest way to get started is to download the new public mark and then open a Google doc. Ah, a nice blank document you can put images and type all over.

Now, you can turn on all our municipal typefaces and design away:

Add fonts to your document in Google docs. Enter in Big Shoulders and other font names, then add them to your fonts.

Downloads

Download the mark and fonts to your computer. The latest version will always be available on Google Fonts or you can download a zip of them all here.

Super-important

To make an actual, honest-to-goodness Chicago Star in your typesetting, turn on discretionary ligatures in your application or CSS, and then type CHISTAR (in all caps). It’ll automatically replace with the star, sized correctly to fit the text.

Ligatures off, CHISTAR.

Ligatures on, our Chicago Star!

Here is an example file in Figma.

Developers & Technology Partners

The Chicago Design System was built upon the United States Web Design System code and methods as a baseline. We are keeping the methods, but leaving the codebase. This site is a reference and a monument to that work, but in software you should always plan to throw one away, as Frederick Brooks advises.

This work began under different circumstances than its launch in many regards, and moving from prototype to production means embracing our community where they are. That’s Bootstrap 4. We are porting this Chicago Design System theme to this Bootstrap 4 based theme, which you can review live as we build it out.

In the mean time, there are example sites, and examples of us using it live all over chicago.gov, like the New Start program.

You can see all our different Jekyll-based machinations here.

City of Chicago Employees

For employees, this style is coming soon to a neighborhood near you. Today, font installation may require your ITSC or someone with administrator rights to install a lot of fonts on your machine. Like, “buy them donuts” a lot of installs. But, once you do that, you can access our City of Chicago internal style guide. Check it out for templates of all kinds to make your communication crisp.

If you are interested in using this work in a technology project today, see the Developers section, above, for current status. Ask your ITSC for help, or ping us through the channels below. You can also visit our Microsoft Teams channel here.

But wait, there’s more!

You can get involved by giving us feedback, writing an issue, or finding other ways to contribute.

We communicate about this project in our CDS Slack workspace. Request an invitation by emailing us at Chicago Design System or using our shared invite link. Mostly

Email design.system at cityofchicago.org to connect.