branding & identity guidelines...the logo misus e o f th e logo there is sometimes temptation to...
TRANSCRIPT
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!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
aBcdeFgHiJKlmnoPQrSTUvWXYZ
1234567890!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*().?
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
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
Neutraface Slab Text Demi – 9pt, letterspacing @ 50
WhitneySC Medium – 8pt, letterspacing @ 65
Neutraface Slab Text Demi – 9pt, letterspacing @ 25
Whitney SemiboldSC – 11pt, letterspacing @ 50
Neutraface Slab Text Demi – 9pt, 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