Style & Branding Guide10.10. 2010

Welcome,Fellow human to the unique little world of SEOmoz brand awareness and usage. In this guide

you will find guidelines for the correct usage of our logos, colors and even our little tin can

mascot Roger. We welcome you to go out and spread the goodness of SEOmoz, but do it

correctly so we all look good.

Style & Branding Guide10.10. 2010

The Index of Awesomeness

SEOmoz Logo

SEOmoz Icon

Logo Cruelty

Color Palette

Font Palette

Roger Mozbot 88Page

77Page

66Page

55Page

44Page

33Page

Visually representing our company and

providing contrast between us and other

SEO companies, is our logo. The SEOmoz

logo consists of a Icon in conjunction with a

“SEOmoz” word mark. The tag line version

with “The Web’s Best SEO Resources” can

also be used when it is not clear what

services we provide. Use often & use wisely.

For better legibility and clarity please use

the grayscale version of the logo. The

greyscale version is also available for

embroidery and screen printing. This version

is to be used minimally and only when

absolutely necessary.

The Breakdown

Greyscale

Minimum clearspace indicated x=1/8 of SEOmoz Icon Size

.5x.5x

Minimum clearspace indicated x=1/8 of SEOmoz Icon Size

The SEOmoz icon is mostly used in conjunction with the rest of

the logo, but can be used as a seperate element in cases

where horizontal spacing is an issue. Its shape or form should

not be modified in anyway by the comination with other

elements or contextually. The SEOmoz icon must always be

visually discernable as the SEOmoz icon.

The Icon Breakdown

A greyscale version is also available for embroidery

and screen printing. This version of the icon is to be

used minimally and only when absolutely necessary.

Greyscale

Don’t - Change the orientation of elements in the logo

Don’t - Alter the icon in any way

Don’t - Alter the color or change the gradient

Don’t - Alter the “Powered by” logo in anyway Don’t - Dilute the logo by putting it on busy backgrounds

Don’t - Deface the logo in anyway

Don’t - Change the scale of elements

Don’t - Recreate the word mark using a different font

Don’t - Alter or amend the word mark

Don’t - Change the opacity of the logo

Don’t - Remove elements from the logo

Don’t - Use filters to alter the logo DDon’t - Use filters to alter the logo

We love seeing our logo running around out in the

wild, but please abide by some basic rules if you feel

the urge to use it. Let’s make sure everyone see’s

SEOmoz in the right conditions, because each time we

abuse the logo Roger cry’s just a little bit. Do you make

robots cry?

Stop Logo Abuse

SEOmoz Burgundy

PMS

CMYK

RGB

HEX

696c

35c. 82m. 50y. 18k

146r. 68g. 88b.

#924458

PMS

CMYK

RGB

HEX

292c

48c. 16m. 0y. 0k

126r. 183g. 227b.

#7EB7E3

HEX #EA6B3F HEX #94C548 HEX #BC2626

HEX #0A6FA1 HEX #BF7D2F

Dark

Medium

Light

#333333

#999999

#EFEFEF

CMYK

RGB

HEX

3c. 33m. 100y. 0k

244r. 177g. 28b.

#F4B11C

SEOmoz Blue

Neutrals

Accent Color

PMS PMS

The Primary Palette indicates the SEOmoz Corpo-

rate Colors. When designing for the main brand,

these colors can be combined with the neutrals,

and accent color. Gradations of these colors are

acceptable.

Primary Palette

The secondary color palette colors are options to

be used for secondary elements on a page such

as buttons, call outs or highlights. Gradations of

these colors are acceptable.

Secondary Palette

A B C D E F G H I J K LMN O P Q R Sa b c d e f g h i j k l m n o p q u r s t u v w x y z1 2 3 4 5 6 7 8 9 10 $ % & ( ) “ ” ‘ ’

A B C D E F G H I J K LMN O P Q R Sa b c d e f g h i j k l m n o p q u r s t u v w x y z ” ‘ ’1 2 3 4 5 6 7 8 9 10 $ % & ( ) " '1 2 3 4 5 6 7 8 9 10 $ % & ( ) " '

A B C D E F G H I J K LMN O P Q R Sa b c d e f g h i j k l m n o p q u r s t u v w x y z1 2 3 4 5 6 7 8 9 10 $ % & ( ) “ ” ‘ ’

A B C D E F G H I J K LMN O P Q R Sa b c d e f g h i j k l m n o p q u r s t u v w x y z1 2 3 4 5 6 7 8 9 10 $ % & ( ) “ ” ‘ ’

The primary font to be used with SEOmoz’s products

is the sans-serif font Helvetica. Body copy, lists and

bullets will utilize Helvetica Light. Headline copy will

utilize Helvetica Bold.

The complimentary type face to be used with SEOmoz

products is Alanis Hand. Alanis Hand font can be

used to create special marketing material, call to

actions and other graphics that need to draw the eye.

Primary Type Face

Complimentary Type Face

Yes, even Roger Mozbot has his own font. When

designing material in conjunction with Roger, you may

incorporate the apptly named Hugable font. Roger

only talks in Hugable.

Roger Mozbot Type Face

Proper Mozbot Usage

Some times it takes a little work to get Roger

fitting properly into a design, but please adhere

to the guidelines and check out the examples

of broken Mozbots.

Stop Mozbot Cruelty

Floating Crops (Bad) He needs legs to walk I can’t make transmissions

Where’s the shadow?Don’t try to get creative Speaking in the wrong font

Everybody loves them a little Roger Mozbot, but

unfortunately Roger is not our logo. Roger is SEOmoz’s

mascot created to give a visual personality to our

company. Roger looks best when he is bigger than

100px tall. Although Roger may looks like a dinosaur or

have a keytar in his hand at times, please do not try to

add your own twist on him. Only SEOmoz reserves the

right to alter Roger. Take a second to see if your Roger

falls in line with the Rogers on the right.

Mozbot approved props Cropped and not floating

Mozbot logo