page

Brand Guide

Media that moves

OnMilwaukee is about capturing the energy, excitement, and transformation from within the city. The brand should be positioned with colors and vibration that sets us apart from every other white page publication.

OnMilwaukee seeks to cover the daily lives of the city’s inhabitants and capture their imaginations to inspire them to envision and participate in the creation of a better place.

Logo

Download logo files

Logo useage & restrictions

Color variation – OnMilwaukee

Under most circumstances the OnMilwaukee wordmark should appear with the standard blue, red and yellow.

Standard OnMilwaukee colors.

The only time the logo may be re-colored outside of standard brand colors is when placed as sponsorship, the wordmark and icon may be re-colored to match the standards of the promotional item.

Non-standard colors are allowed to match a sponsor’s promotional aesthetics, but should not be used in OnMilwaukee promotions.

Contrast and legibility

Don’t use full-color logo on similarly-colored backgrounds. Use monochrome elements instead.

The blue letters are hard to read on the blue background.
A monochrome wordmark should be used instead.

The bridge icon should not be re-colored if the wordmark is not. In such cases, the wordmark must match the bridge. NOTE: The wordmark may be re-colored, while the bridge is not.

The bride is hard to see on the orange background.
Do not recolor the bridge if the wordmark is also not re-colored.
If the bridge is re-colored, the wordmark must match.

Space around

Always ensure there is sufficient clear space around the logo. The minimum of clear space is equal to the width of the two bridge feet. Any time the icon and word mark appear together they should always be separated with similar spacing.

Never distort

The outline of the wordmark and the icon should never be, pushed, pulled, smeared or otherwise transformed.

Keep wordmark and icon together

On externally-branded materials the wordmark and icon must be used in tandem.

On OnMilwaukee-branded materials, the icon and workmark may be used as stand-alone elements.

Fonts

Headlines – Roboto Slab Regular (500)

On this day in 1865, the Chicora sailed out of Milwaukee and disappeared

Regular body text (non-article) and interface text – Roboto Regular (300)

The CHICORA sailed out of Milwaukee at 5:45 a.m. for St. Joseph, Michigan, and was never seen again.

Article text – Noto Serif Regular (300)

What started as just another day, docked at Shea’s Dock in Milwaukee, being loaded with merchandise, flour, paper, etc., changed drastically thanks to a 45 mph gale later that afternoon.

Download font files

Colors

The goal of the OnMilwaukee color scheme is to create a colorful, vibrant, and exciting aesthetic that separates us from every other “white page” site. The 3 primary colors, of Onward Blue, Movement Red and Bridge Yellow are to be used with all primary branding elements.

Bridge Yellow should never be used with text. White text should always be used on top of omcblue and omcred. Black text should be used with Bridge Yellow. Avoid using black in advertising and illustration.

Shade variations (those with an appended number) should only be used for user interface accents, necessary differentiation, or illustration.

Do not use unapproved colors or variations in any branding application whatsoever.

Primary colors

Primary

Onward Blue

Hex: #27b7d6 RGB: 39 183 214 CMYK: 69 5 12 0 Useage: Backgrounds, interface accents, text, or illustration.
Shade variation

Onward Blue1

Hex: #27b7d6 RGB: 39 183 214 CMYK: 69 5 12 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Onward Blue2

Hex: #81cee2 RGB: 129 207 226 CMYK: 46 1 9 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Onward Blue3

Hex: #56bdda RGB: 86 189 218 CMYK: 60 5 10 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Onward Blue4

Hex: #2c8298 RGB: 45 131 153 CMYK: 81 36 32 3 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Onward Blue5

Hex: #295c6b RGB: 42 93 108 CMYK: 86 53 45 21 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Onward Blue6

Hex: #28494f RGB: 41 73 79 CMYK: 84 57 55 38 Useage: Interface accents, necessary differentiation, or illustration.
Primary

Movement Red

Hex: #dd4e2b RGB: 221 78 43 CMYK: 8 85 96 1 Useage: Backgrounds, interface accents, text, or illustration.
Shade variation

Movement Red1

Hex: #efbdab RGB: 239 189 171 CMYK: 4 29 28 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Movement Red2

Hex: #eb9b83 RGB: 235 155 131 CMYK: 5 46 45 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Movement Red3

Hex: #e37b5a RGB: 227 123 90 CMYK: 8 63 68 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Movement Red4

Hex: #b03a25 RGB: 176 58 37 CMYK: 22 90 100 13 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Movement Red5

Hex: #85301b RGB: 133 48 27 CMYK: 30 88 100 33 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Movement Red6

Hex: #592115 RGB: 89 33 21 CMYK: 38 85 87 57 Useage: Interface accents, necessary differentiation, or illustration.
Primary

Bridge Yellow

Hex: #f9db04 RGB: 249 219 4 CMYK: 4 9 100 0 Useage: Backgrounds, interface accents, or illustration. Restrictions: Text.
Shade variation

Bridge Yellow1

Hex: #f7f3a5 RGB: 247 243 166 CMYK: 4 0 44 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Bridge Yellow2

Hex: #f1ea76 RGB: 242 234 118 CMYK: 7 1 67 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Bridge Yellow3

Hex: #f0e548 RGB: 241 229 73 CMYK: 8 2 84 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Bridge Yellow4

Hex: #ebc926 RGB: 236 201 39 CMYK: 9 17 96 0 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Bridge Yellow5

Hex: #d4942b RGB: 212 148 44 CMYK: 16 44 98 1 Useage: Interface accents, necessary differentiation, or illustration.
Shade variation

Bridge Yellow6

Hex: #9a741d RGB: 154 116 29 CMYK: 20 40 99 30 Useage: Interface accents, necessary differentiation, or illustration.

Secondary colors

Secondary colors are only used in illustration. Green may be used for affirmative dialogs.

Secondary

Green

Hex: #3ea648 RGB: 62 166 72 CMYK: 77 9 100 0 Useage: Illustration backgrounds, interface accents, or illustration.
Shade variation

Green1

Hex: #acd9b7 RGB: 173 218 183 CMYK: 33 0 35 0 Useage: Illustration, affirmative dialog accents.
Shade variation

Green2

Hex: #80c893 RGB: 128 200 148 CMYK: 51 0 55 0 Useage: Illustration, affirmative dialog accents.
Shade variation

Green3

Hex: #56b76f RGB: 87 183 111 CMYK: 67 2 76 0 Useage: Illustration, affirmative dialog accents.
Shade variation

Green4

Hex: #258545 RGB: 37 134 70 CMYK: 84 24 95 10 Useage: Illustration, affirmative dialog accents.
Shade variation

Green5

Hex: #195e30 RGB: 25 95 48 CMYK: 87 37 100 33 Useage: Illustration, affirmative dialog accents.
Shade variation

Green6

Hex: #154221 RGB: 21 66 33 CMYK: 85 45 95 54 Useage: Illustration, affirmative dialog accents.
Secondary

Purple

Hex: #8d4e9f RGB: 141 78 159 CMYK: 51 82 0 0 Useage: Illustration backgrounds, interface accents, or illustration.
Shade variation

Purple1

Hex: #d0b6d5 RGB: 209 183 213 CMYK: 16 29 1 0 Useage: Illustration.
Shade variation

Purple2

Hex: #ba92c3 RGB: 186 146 195 CMYK: 26 46 0 0 Useage: Illustration.
Shade variation

Purple3

Hex: #a56dae RGB: 165 110 174 CMYK: 37 66 0 0 Useage: Illustration.
Shade variation

Purple4

Hex: #6a3680 RGB: 106 54 128 CMYK: 71 94 16 3 Useage: Illustration.
Shade variation

Purple5

Hex: #502a64 RGB: 80 43 100 CMYK: 79 96 30 19 Useage: Illustration.
Shade variation

Purple6

Hex: #39284f RGB: 58 40 80 CMYK: 83 90 39 36 Useage: Illustration.
Secondary

Great Blue

Hex: #3c56a6 RGB: 60 86 166 CMYK: 87 75 0 0 Useage: Illustration backgrounds, interface accents, or illustration.
Shade variation

Great Blue1

Hex: #b6b9da RGB: 183 186 219 CMYK: 27 23 1 0 Useage: Illustration.
Shade variation

Great Blue2

Hex: #9296c6 RGB: 146 150 198 CMYK: 44 38 2 0 Useage: Illustration.
Shade variation

Great Blue3

Hex: #7074b4 RGB: 112 117 181 CMYK: 62 56 1 0 Useage: Illustration.
Shade variation

Great Blue4

Hex: #2b3f83 RGB: 43 64 132 CMYK: 97 88 17 4 Useage: Illustration.
Shade variation

Great Blue5

Hex: #232e62 RGB: 36 47 98 CMYK: 99 92 32 23 Useage: Illustration.
Shade variation

Great Blue6

Hex: #22214c RGB: 35 34 77 CMYK: 96 94 39 38 Useage: Illustration.

Gray shades

Gray shades are only used in interface backgrounds, interface accents and illustration.

Grays

Whites & Blacks

Shade variation

White

Hex: #ffffff RGB: 0 0 0 CMYK: 0 0 0 0 Useage: Interface backgrounds.
Shade variation

Gray1

Hex: #efefef RGB: 239 239 239 CMYK: 5 3 3 0 Useage: Interface elements and illustration. Restrictions: Avoid using in illustration; choose colors instead.
Shade variation

Gray2

Hex: #e0e0e0 RGB: 224 224 224 CMYK: 11 8 9 0 Useage: Interface elements, text and illustration. Restrictions: Avoid using in illustration; choose colors instead.
Shade variation

Gray3

Hex: #acabab RGB: 172 171 171 CMYK: 34 28 28 0 Useage: Interface elements, text and illustration. Restrictions: Avoid using in illustration; choose colors instead.
Shade variation

Gray4

Hex: #888888 RGB: 136 136 136 CMYK: 49 41 41 5 Useage: Interface elements, text and illustration. Restrictions: Avoid using in illustration; choose colors instead.
Shade variation

Gray5

Hex: #565656 RGB: 86 86 86 CMYK: 64 56 55 30 Useage: Interface elements, text and illustration. Restrictions: Avoid using in illustration; choose colors instead.
Shade variation

Black

Hex: #0f0f0f RGB: 15 15 15 CMYK: 74 67 66 84 Useage: Interface elements, text and illustration. Restrictions: Avoid using in illustration; choose colors instead.

Imagery

Coming soon.