branding & identity guidelines...the logo misus e o f th e logo there is sometimes temptation to...

Branding & Identity Guidelines

IntroductionThe Phobio brand exists to combine and transfer Phobio’s core values into a

visual language that clearly communicates that message. User-friendliness,

hands-on support, and industry-leading prices are all part what sets Phobio

apart, and the visual world of the Phobio brand should be no different. This

guide was created to help govern all aspects of the Phobio brand so that a sin-

gular vision could emerge in a way that distiguishes it from other brands while

also making it memorable. In creating this we have tried to tangibly demon-

strate how to design anything from memos to signage, advertisements, and POS

displays and have it live comfortably within the brand landscape.

Table of Contents

Basic Logo & Color Variations

Spacing

Misuse of the Logo

Main and Secondary Colors

Main Typefaces

Use/Mixing Typefaces

Typography on the Web

Business Cards

Use and Examples

4

5

6

8

10–11

11

12

14

16

THe logo

coloraTion

TYPograPHY

STaTionerY

elemenTS and PaTTernS

The Logo

The Logo

BaSic logo & color variaTionS

The Phobio logo is a simple typographic mark

The most basic versions of the Phobio logo are

blue or white on blue. If possible, these should

always be used when a logo is necessary in

order to associate the shape of the logo and the

color chosen as part of the Phobio brand. Using

alternate color combinations could create con-

fusion for the customer as well as weaken the

brand in their minds overall.

4

The Logo

SPacing

eXamPleS

One of the most important aspects of maintain-

ing brand interity is spacing. Logos need white

space to breathe so the overall design is clear

and uncluttered. As a rule of thumb, maintain

a space the height and width of the Phobio “o”

all around the logo. In the diagram to the right,

the logo is one inch tall, therefore there should

be no other text, image, line or other design

element within .55 inches of the logo. Even more

space around the logo is usually beneficial,

but this imaginary “o” boundary should not be

crossed in an effort to save space.

Example 1) The logo has been placed inside of a

banner element, without the edges of the ban-

ner pushing too closely to the logo itself.

Example 2) Several illustrations have been

placed around the logo, far enough away that

the audience isn’t confused as to if the illustra-

tions are part of the logo or not.

Example 3) The logo has been paired with some

text, and placed far enough above it to not

crowd the text itself.

1 in.

.55 in.

.55 in

5

1 2

3

HoW To Sell YoUr PHoneProin accumsan, diam tincidunt iaculis facilisis, orci

libero ultricies lorem, consequat fringilla quam nibh

vitae dolor. Sed enim leo, pellentesque sit amet mattis

non, dapibus at ligula. Nulla nulla odio, feugiat et

dictum eu, suscipit ut tellus. Donec mi ipsum, ultrices

a consectetur eget, tempus facilisis quam.

The Logo

miSUSe oF THe logo

There is sometimes temptation to alter the logo

alightly to fit some needs. While this practice

can be condoned on a rare basis, most of the

time it is ill-advised. Here are some examples of

things to never do with the logo:

1. do not stretch or squash the logo.

2. do not change the color to an unapproved

color.

3. do not crowd the logo with text or images.

4. do not pair the logo with unapproved fonts.

5. do not convert the logo to an outlined ver-

sion.

6. do not add drop shadows or other decorative

styling. The logo should remain a flat color.

7. do not rotate the logo to an extreme angle.

8. do not place the logo on a low-contrast back-

ground color or photograph.

L E A R N MOR E !

S IMP L E & E A S Y !VERIZON WIRELESS, CHICAGO

6

1

3

5

7

2

4

6

8

Coloration

Coloration

main and SecondarY colorS

Phobio blue is the color that should be used in

most situations, but secondary colors are neces-

sary to add energy and variety to printed or web

designs. To the right is a list of approved colors.

Other colors may be used on rare occasion, and

great care should be taken to make sure the

color complements the approved color scheme.

In print, Pantones value should be provided

to the printer in order to match the colors that

people see on screen and to provide continuity

between all printed matter. Hex values should

be used on the web.

8

PanTone 2995 c77 m36 Y0 K0 HeX: 2d6ca2

PanTone 2032 c18 m87 Y89 K8 HeX: Bd4333

PanTone 7691 c96 m77 Y41 K32 HeX: 193a59

PanTone 7564 c15 m65 Y100 K3 HeX: d06F1a

PanTone 123 c0 m23 Y94 K0 HeX: FFc425

PanTone 4755 c5 m10 Y12 K0 HeX: eFdFd2

PanTone 433 c33 m36 Y0 K95 HeX: 2d8aca

Typography

Typography

imPorTance

neUTraFace SlaB TeXT

WHiTneY / WHiTneY Small caPS

Another important aspect of maintaining brand

continuity and integrity is the consistent use

of typography. The typefaces selected here

are sufficient for most applications whether it

be inter-office memos, advertising, signage, or

point-of-sale and should be used frequently.

Other decorative fonts could be used in addi-

tion to these, but they should not be distracting,

gaudy, or overused.

Neutraface Slab is an all around workhorse

that can be used for anything from large head-

lines, all caps titles or small text (as seen in this

guide).

Whitney and it’s all-caps variation, Whitney

Small Caps, should be used when contrast with

Neutraface is needed. In typography, contrast-

ing fonts help make text more legible and ideas

more clear. Whitney is also very legible in small

sizes and a friendlier alternative to Neutraface.

Neutraface Slab Text

Whitney Small CapsWhitney

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890!@#$%^&*().?



1234567890!@#$%^&*().?



1234567890!@#$%^&*().?



1234567890!@#$%^&*().?



1234567890!@#$%^&*().?



1234567890!@#$%^&*().?


aBcdeFgHiJKlmnoPQrSTUvWXYZ

1234567890!@#$%^&*().?



1234567890!@#$%^&*().?



1234567890!@#$%^&*().?

10

KnocKoUT FlYWeigHT

USing/miXing TYPeFaceS

Typography

Knockout flyweight is a large, expressive font

that should be used to create excitement if

needed. It should always be used in all caps and

at large sizes.

Wielding typefaces is more of an art than a sci-

ence, but there are several principles that can

help anyone use typefaces better. Using more

than one font can keep a design form looking

too stale or overwhelming, keeping the audience

interested in what you have to say.

Example 1 – In this example of a banner,

Knockout Flyweight has been used in a lrage

size to give the piece presence and excite-

ment, but the addition of Neutraface Slab in

a smaller size gives it contrast and variety.

Knockout has also been letterspaced, mean-

ing space has been added in between the

letters, to give it a lighter feel and to help

the letters to align from line to line.

Example 2 – Sometimes it’s best to use one

font, but in different sizes and weights. Here,

Neutraface Slab Bold in all caps has been

used for the title and Neutraface Slab Book

has been used for the small caption.

Example 3 – The captions themselves are

also a good example. Whitney has been

used for these, instead of using Neutraface

again, to differentiate it from the explana-

tions running down the left columns of the

pages.

KNOCKOUT FLYWEIGHTA B C D E F G H I J K L M N O P Q R S T U V W X Y Z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) . ?

11

TYPograPHY on THe WeB

Typography

At the time of this guide’s creation, the fonts se-

lected as part of the Phobio brand are not avail-

able as fonts on the web. They may be available

as such in the future, but for now, here are some

web-safe substitutes all available in various

weights from Typekit.

For headers and large titles, Neutraface should

be used as an image. For live text/body copy,

either Myriad or Helvetica should be used.

Knockout should only be used on the web as a

banner image, but Alternate Gothic No. 1 can be

substituted if necessary.

12

Whitney

KNOCKOUT FLYWEIGHT

Stationery

Stationery

BUSineSS cardS

The design of the Phobio business card should

remain consistent as new members to the Pho-

bio team are added. To the right is a diagram of

the correct font and color usage for the business

cards.

14

Neutraface Slab Text Demi – 9pt, letterspacing @ 25

Whitney SemiboldSC – 14pt, letterspacing @ 40


WhitneySC Medium – 8pt, letterspacing @ 65


Whitney SemiboldSC – 11pt, letterspacing @ 50


PanTone 2995

PanTone 2032

PanTone 433

Elements & Patterns

Elements & Patterns

USe and eXamPleS

Here are some examples of design elements

that have been created and utlized to give the

Phobio brand a unique character.

16

Sawtooth Header/Divider – The sawtooth can be used to divide

parts of a design so the individual parts don’t run together and

muddle up the design. Instead of using a straight line or box, the

sawtooth shape also adds a bit of a buzz to an otherwise boring

white space. Care should be taken to give anything placed inside

enough space from the edges. The shape should also never be

stretched or squashed, just like the logo. The sawtooths them-

selves should be kept relatively small compared to whatever it is

placed with on the page. It is necessarily a secondary element

and the triangular shapes should not draw the eye or distract.

Phone Icons – A group of simplified smartphone icons have been

created to illustrate the products Phobio works with. These can

be used inside of a shape, individually, or as a group. Care should

be taken to make sure they are given enough space and are large

enough to be easily recognized as phones.

Multiply Effect – In the Adobe suite of pro-

grams (Photoshop, Illustrator, InDesign, etc)

there is an Overlay effect called Multiply,

which creates the illusion than two colors

are overlapping and mixing. Here we see the

Phobio blue and red overlapping to make a

dark gray color. This gives a design a warmer

tactile feel instead of a cold screen-only

color scheme.

Icon pattern – A group of icons have been

created that encompass all the services and

aspects of Phobio’s service, which have been

combined into a pattern that can be used for

packaging, backgrounds or any large spaces

that need sprucing up. Note that no text

should be placed on top of the pattern. If

the pattern will be paired with text, the two

should be separate on the page.

Branding & Identity Guidelines Version 1 .0

branding & identity guidelines...the logo misus e o f th e logo there is sometimes temptation to...

Documents