Style & Branding Guide 10.10. 2010
Style & Branding Guide 10.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. The Index of Awesomeness SEOmoz Logo SEOmoz Icon Logo Cruelty Color Palette 6 Font Palette 7 Roger Mozbot 8 3 4 5
The Breakdown 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..5x.5x Minimum clearspace indicated x=1/8 of SEOmoz Icon Size Greyscale 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 Icon Breakdown 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. Minimum clearspace indicated x=1/8 of SEOmoz Icon Size Greyscale 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.
Stop Logo Abuse 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? 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 - Remove elements from the logo Don t - Alter or amend the word mark Don t - Change the scale of elements Don t - Alter the Powered by logo in anyway Don t - Dilute the logo by putting it on busy backgrounds Don t - Use filters to alter the logo Don t - Recreate the word mark using a different font Don t - Change the opacity of the logo Don t - Deface the logo in anyway
Primary Palette The Primary Palette indicates the SEOmoz Corporate Colors. When designing for the main brand, PMS PMS these colors can be combined with the neutrals, and accent color. Gradations of these colors are acceptable. SEOmoz Burgundy PMS 696c SEOmoz Blue PMS 292c Accent Color CMYK 3c. 33m. 100y. 0k CMYK 35c. 82m. 50y. 18k CMYK 48c. 16m. 0y. 0k RGB 244r. 177g. 28b. RGB 146r. 68g. 88b. RGB 126r. 183g. 227b. HEX #F4B11C Secondary Palette HEX #924458 HEX #7EB7E3 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. HEX #EA6B3F HEX #94C548 HEX #BC2626 Neutrals HEX #0A6FA1 HEX #BF7D2F Dark #333333 Medium #999999 Light #EFEFEF
Primary Type Face 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. A B C D E F G H I J K LMN O P Q R S a 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 $ % & ( ) A B C D E F G H I J K LMN O P Q R S a 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 $ % & ( ) Complimentary Type Face 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. A B C D E F G H I J K LMN O P Q R S a 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 $ % & ( ) " ' Roger Mozbot 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. A B C D E F G H I J K LMN O P Q R S a 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 $ % & ( )
Proper Mozbot Usage 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 logo Mozbot approved props Cropped and not floating Stop Mozbot Cruelty 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. Floating Crops (Bad) He needs legs to walk I can t make transmissions Don t try to get creative Where s the shadow? Speaking in the wrong font