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.

The Flag of the City of Chicago

Wikipedia's Chicago Flag

By cs:User:-xfi- - according to en:User:John Reid’s (or T. E. Whalen’s) construction sheet (en:Talk:Municipal Flag of Chicago), Public Domain, Link

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.

Hippies doomed the Municipal Device with their peace symbol, an upside Municipal Device 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 symnbols have lots to say about this one:

The Public Mark of the City of Chicago

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!


Horizontal

Vertical

Departmental

Inter-agency

Community partnerships

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:

The Seal of the City of Chicago

Proposed seal update 2019



Proposed seal of the City of Chicago

Below are examples of the Seal of the City of Chicago over time, ending with our proposed revision. Each opens a larger version in a new window.

The User Interface of the City of Chicago

The Typography of the City of Chicago

Typography

Big Shoulders

A Picture of Big Shoulders Typeface set in different faces with Chicago Stars

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.

Download Big Shoulders from Google Fonts

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.

If your app has a glyphs palette showing all the characters in your typeface, you can also choose the star from there.

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

=======

CHISTAR CHISTAR CHISTAR CHISTAR

=======

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