Skip to main content

All assets

Brand Basics for the City of Chicago

The Star

The Chicago star is 14 inches tall with six points drawn from a circle six inches in diameter. The star’s points should be 
at 30 degree angles. See The Chicago Municipal Code CHAPTER 1-8 CORPORATE SEAL AND EMBLEMS. Specifically, sections 020 and 030 concerning the “Design of flag, emblems and badges” and “Municipal flag – Design requirements,” respectively.

Now, you are probably thinking to yourself, “Shut up and just give me the star so I can get a tattoo already!”

And I say to you: “No.”

?!?

This is way better: Visit the typography page.

There you can download Big Shoulders, our free, open source municipal typeface from Google Fonts and you can learn how to turn on discretionary-ligatures to make a perfect Chicago star every time in any color at any size. Boom! Way better.

Full Chicago Star with Construction Marks

Colors

Download color swatch (.zip file)

Primary

Black

$color-black: #000000;

Flag Blue

$color-flag-blue: #41B6E6;

Star Red

$color-star-red: #E4002B;

White

$color-white: #FFFFFF;

Secondary

Gray Dark

$color-gray-dark: #4D4D4D;

Gray Light

$color-gray-light: #B3B3B3;

Gray Lighter

$color-gray-lighter: #D9D9D9;

Gray Lightest

$color-gray-lightest: #F1F1F1;

Bahama Blue

$color-bahama-blue, $color-secondary-darkest: #005B99;

Malibu Blue

$color-malibu-blue, $color-secondary-dark: #0075BB;

Lochmara Blue

$color-lochmara-blue, $color-secondary-light: #0092D1;

Cornflower Blue

$color-cornflower-blue, $color-secondary-lighter: #A4D5EE;

Lake Michigan

$color-lake-michigan, $color-secondary-lightest: #E1F3F8;

Tertiary

Red Darkest

$color-red-darkest: #981b1e;

Red Dark

$color-red-dark: #CC393E;

Red Light

$color-red-light: #E59393;

Red Lightest

$color-red-lightest: #FBD9DF;

Gold

$color-gold: #FDB81E;

Gold Light

$color-gold-light: #F9C642;

Gold Lighter

$color-gold-lighter: #FAD980;

Gold Lightest

$color-gold-lightest: #FFF1D2;

Green

$color-green: #2E8540;

Green Light

$color-green-light: #4AA564;

Green Lighter

$color-green-lighter: #94BFA2;

Green Lightest

$color-green-lightest: #E7F4E4;

Background

Gray Dark

$color-bkgd-gray-dark: #323A45;

Gray

$color-bkgd-gray: #5B616B;

Gray Light

$color-bkgd-gray-light: #AEB0B5;

Gray Lighter

$color-bkgd-gray-lighter: #D6D7D9;

Gray Warm Dark

$color-bkgd-gray-warm-dark: #494440;

Gray Warm Light

$color-bkgd-gray-warm-light: #E4E2E0;

Gray Cool Dark

$color-bkgd-gray-cool-dark: #112E51;

Gray Cool Light

$color-gray-cool-light: #DCE4EF;

States

Focus

$color-focus: #2C5491;

Visited

$color-visited: #4C2C92;

Icons

Examples of icons you can download for free

Download a usage guide by department in Adobe Illustrator or a zip archive of icons in individual SVG (scalable vector graphics) files, ready for use.

Public Mark

Our new public mark is the public voice of the City of Chicago, our residents, and our communities.

Download our logo in Adobe Illustrator, PNG (portable network graphics), and SVG (scalable vector graphics) formats and display your Chicago pride today!





Department marks



CHI311 horizontal mark




CHI311 vertical mark


Inter-agency


Community partnership & public expressions





Note: These marks are for example purposes only, there's no partnership or community favoritism implied or intended here.

For You

The logo starters below are available in the download package for you to use and remix with your own symbol or photo.

Also, you can build your own logo from a 4x3 box, and making a star using the CHISTAR discretionary-ligature in Big Shoulders. Color each the appropriate colors from our palette, size them according to the proportions in “Lockups,” below, and you’re in business.

Congratulations, civic typographer!



Lockups

For ideal spacing in your project, use the follow guidelines for implementation:

Our municipal typeface

A Picture of Big Shoulders Typeface

Big Shoulders is the Municipal Typeface for the City of Chicago. It is for use in headings, titles, banners, and posters. Setting type in all capitals is recommended.

Big Shoulders Display is for large format, environmental prints: signage, billboards, banners, etc. Big Shoulders Text is for all other display purposes.

Roboto and Lora are the City’s sans serif and serif body typefaces.

The next level up is to install the fonts on your own computer. The latest version will always be available on Google Fonts.

Resources

To put a Chicago Star in your typesetting, turn on discretionary ligatures in your app or CSS, and then type CHISTAR (in all caps). It’ll automatically replace with the star, sized correctly to fit the text.

Now, you can make ASCII art, or get tatooed with exactly the right Chicago Star.

=======

CHISTAR CHISTAR CHISTAR CHISTAR

=======

If that didn’t work, these images show the difference betweeen turning ligatures on and off. In this case, in Figma.

Ligatures off, CHISTAR.

Ligatures on, our Chicago Star!

Here is an example Figma file. Note: you cannot turn on ligatures in Google Docs. :(

City Heraldry

The Flag of the City of Chicago

Wikipedia's Chicago Flag

By https://cs.wikipedia.org/wiki/User:-xfi- - according to a design specified by Wikipedia user John Reid or T. E. Whalen’s) construction sheet (Municipal Flag of Chicago), which is in the public domain, and thus represented here.

For more details on the history of the flag, see Robert Loerzel’s wonderfully comprehensive The Story of Chicago’s Four-Star City Flag.

Tanner Woodford, Executive Director of the Design Museum of Chicago, had this contribution to share with us, an outline of the dimensions of the Flag:

An outline of the dimensions of the Chicago Flag, its proportions, and placement of its stars and bars.

I don’t mean to disagree or spark debate, but I think Robert & Tanner & T.E. may need to compare notes with us at the City and arrive at a final determination. I volunteer to mediate it in 2020 or beyond, or find someone with appropriate gravitas to do so, certainly.

Learn more about our flag and others’ lesser flags

The Municipal Device of the City of Chicago

Learn all sorts of amazing Chicago facts about the Municipal Device and other aspects of Chicago at our awesome Public Library’s site. Introduced in 1892 as part of a Chicago Tribune contest, the Device was enshrined in our Municipal Code in 1917, along with the flag. The Municipal Device was intended for public re-use, to show our pride. During the next century, though, the flag stole our hearts.

Municipal Device Image, from the library site.

An image of the Municipal Device, courtesy Chicago Public Library.

Upside Traffic Control Municipal Device at intersection of State Street and Van Buren Street Photo of an Upside Traffic Control Municipal Device at intersection of State Street and Van Buren Street

Hippies doomed the Municipal Device with their peace symbol, which resembles the upsidedown Municipal Device favored by many of the industrious City Departments. They took pride in the engineering feat of reversing the flow of the Chicago River, and inverted the municipal device, later it was hated by Chicago Police in the 1960s…

Moving on… here’s an early example of a Municipal Device with the center ‘Y’ in red. That was the traditional depiction of the device, until they realized it was easier to make the whole thing white instead of terra cotta down the center. The Columbian Exposition needed white ones, and so here we are. All this is rumor I’ve heard from researching this project, chatting with Tim Samuelson and various librarians. Cool cats, all.

Original Municipal Device from the the Chicago Association of Commerce

Original Municipal Device from the the Chicago Association of Commerce’s Great Central Market.

Other folks who geek out about symbols have lots to say about this one:

The Seal of the City of Chicago

Below are examples of the Seal of the City of Chicago over time. Each opens a larger version in a new window.