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.
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…
Now, you can turn on all our municipal typefaces and design away:
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!
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.
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!
Email design.system at cityofchicago.org to connect.