mhub brand guidelines · 3. color 4. expressions ver 2.0 5. photography 6. social 3 secondary warm...

mHUB 965 W. Chicago Ave Chicago, IL 60642

1. Logo 2. Typography 3. Color

VER 2.04. Expressions 5. Photography 6. Social 11.01.19

mHUB Brand Guidelines



VER 2.04. Expressions 5. Photography 6. Social

Logo 01

A logo identifies an organization in its simplest form via the use of a mark or icon. — See how it looks




Spark1A

The mHUB spark represents the merging of two M forms: Manufacturers and Makers.

Usage The logo can be used without the wordmark where applicable, such as, signage and promotional items.




Logo Geometry1A

Geometry within The Spark is created by 90 and 45 degree angles within squares.




Lock-up1B

Full Lock-up One ColorFor the wordmark, the distinction between the M and the HUB is through the use of an underlined M. Also, the wordmark can also be used by itself without use of The Spark.

When using the brand colors for background use mHUB one color lock up.

On white and black background, use mHUB full color lock up.




Spacing1C

Example of proper lock-up spacing. The minimum space surrounding the logo and wordmark is equal to the height of the H. This clear space should be present on all sides of the lock-up. Also, the spacing between The Spark and wordmark should equal to the height of the M.




Dos and Don’ts1C




Secondary Logo1D.

Secondary type based logos help to brand internal initiatives and events.

This logo should always be set in one color. Always using the wordmark.

Improper Usage




Secondary Logo1D.

Additionally for a stamp execution, providing more texture and classic industrial tone the type can be set on a circular path. The rotation of this path can be anything. The type should aways read clockwise. mHUB type should always be reversed in color.

MH

UB

P

ROD

UCT INN

OV

ATION

MHUB

INDUSTRY D

ISR

UP

TORS




Typography

The brand typeface is our voice and tone. It expresses our core values and how we communicate with our audience. —

02




Typography2

Primary Typeface

Bold Condensed ABCDEFGHIJKLMNO PQRSTUVWXYZ 0123456789

Regular + Italic ABCDEFGHIJKLMNO PQRSTUVWXYZ 0123456789

Light + Italic ABCDEFGHIJKLMNO PQRSTUVWXYZ 0123456789

Trade Gothic pay homage to strength and industrial en-trepreneurship. Making it the perfect typeface for mHUB.

Trade Gothic Next is a modified version of the sans-serif typeface first designed in 1948 by Jackson Burke (1908–1975), who continued to work on further style-weight combinations (eventually 14 in all) until 1960 while he was director of type development for Linotype in the USA.

Trade Gothic Next Bold + Italic ABCDEFGHIJKLMNO PQRSTUVWXYZ 0123456789




Color

Brands and color are inextricably linked because color offers an instantaneous recognition and a method for conveying meaning without words. —

03




3 Primary Palette

Limestone Slate BlackmHUB colors are inspired by materiality. Using colors often seen in the bedrock of American manufacturing: limestone and slate.

Web#: CBBFAC CMYK: 21, 21, 32, 0 RGB#: 203, 191, 171Pantone: 7527 U

Web#: 54585E CMYK: 67, 57, 50, 27 RGB#: 84. 88, 94Pantone: 431 U

Web#: 242020 CMYK: 69, 67, 65, 74 RGB#: 36, 32, 32Pantone: BLACK C




Secondary Warm Palette3

mHUB’s Secondary color palette is forged by the idea of building blocks and construction, these secondary palettes reflect a spectrum of temperature from melting iron to frozen steel.

Web#: F5C086 CMYK: 3, 27, 52, 0 RGB#: 245, 192, 134Pantone: 713 C

Web#: E0813D CMYK: 9, 58, 88, 1 RGB#: 224, 129, 61Pantone: 7412 C

Web#: AF431B CMYK: 22, 84, 100, 14 RGB#: 175, 67, 27Pantone: 1675 C




3 Secondary Cool Palette

Web#: C7E2DE CMYK: 21, 2, 13, 0RGB#: 199, 226, 222Pantone: 7527 U

Web#: 80979B CMYK: 53, 32, 35, 1 RGB#: 128, 151, 155Pantone: 431 U

Web#: 0F3D5E CMYK: 100, 76, 39, 28 RGB#: 15, 61, 94Pantone: 302 C




Color Pairing Usage(Two Color)

3

Example of proper two color logo usage.




Color Pairing Usage(Three Color)

3

Example of proper three color logo usage.




3 Pattern

This is our mHUB pattern, which makes subtle use of The Spark logo in repetition.

In execution the pattern should always stay one color.




Brand Expressions

The brand comes to life through use of identity, typography, color, animation, illustration.

—

04




Expression 014

mHUB’s primary expression allows for the rotation in and out of language starting with the letter M. These words should align with mHUB’s brand values and core message. The expression should always be right aligned, and can play with one or two color executions.

UsageThis brand expression can be used both in a digital and print space.

anufacture

aker

idwest




4 Expression 02

The combination of color and imagery creates an interesting dynamic that tells the story of collaboration.

UsageThis brand expression can be used both in a digital and print space.

Patterns

Partners Products

People




4 Expression 03

The final and most expressive execution works well in video and animation. Here a material, product, or abstraction bursts out of the bottom triangle of the The Spark, creating a metaphor of internal incubation leading to success.




Photography

Use photography to inject a sense of humanity and relatability into the brand. —

05




5 Human Centered Photography

Human Centered Photography should have a sense of realism and grit by using real people from the industry. Highlighting a snapshot of the day in the life of a member working towards something greater than themselves.

Note: Images should all be based in the mHUB color palette, grounded in creation and industry and have a sense of modernity. Nothing should feel overly processed. Toning should feel slightly warm.




5 Material Photography

Photography focused on macro materiality allows for a more artful and abstract visual language. Highlighting the colors, shapes and sounds that present themselves throughout the workshop.

Note: Images should all be based in the mHUB color palette, grounded in creation and industry and have a sense of modernity. Nothing should feel overly processed. Toning should feel slightly warm.




Social

Primary daily brand interaction lives within social platforms. Consistency, content and energy will grow an engaging audience. —

06




6 Hero Social

Hero social collateral highlights events and marketing for mHUB. These posts focus on current fundraising, hero language, membership highlights, employment opportunities, and inspirational imagery.

All elements within this silo should be colored with primary brand colors.




6 Human Centered Posts

Use the warm color palette to highlight human centered posts. Including but not limited to speakers and philanthropic tones.




6 Event Centered Posts

Use the cool color palette to highlight industrial centered posts. Including but not limited to events and demo days, and hardware.




6 Social Spacing Margins

Guideline for social post margins.




6 Social Type Guidelines

Guideline for social post margin type.

Header Copy:Trade Gothic Next BoldAll-CapsMinimum Pt Size: 50Minimum Track: 50

Body Copy:Trade Gothic Next RegularSentence CaseMinimum Pt Size: 50Minimum Track: 50

mhub brand guidelines · 3. color 4. expressions ver 2.0 5. photography 6. social 3 secondary warm...

Documents