The Verge Brand Book

By Area 17 — 2011 Visual Identity Guidelines The Verge

Table of Contents Visual Identity guidelines Table of Contents Section Title Page 0.00 Introduction 3 1.00 Logotype 4 1.01 The Verge Logotype 5 1.02 Logotype Clearance 6 1.03 Logotype Dos & Don’ts 7 2.00 Iconography 8 2.01 The Verge Iconography 9 3.00 Colors 10 3.01 Screen Color Palette 11 3.02 Print Color Palette 12 3.03 Logotype on Color 13 3.04 Logotype on gradient 14 3.05 Logotype on Image 15 4.00 Typography 16 4.01 Primary Typography 17 4.02 Secondary Typography 18 The Verge 2

Intro Visual Identity guidelines The goal of this document is to define guidelines for the use of The Verge’s visual identity when designing applications for the brand. Throughout all media—publications, websites, mobile apps, advertising, signage, products, letterhead, or business cards—layout, color and typography should be orchestrated to impart a unified “signature”. The essence of the The Verge’s visual identity is the combination of individual elements to take a strong graphic position. Clear and consistent use of the logotype and bold contrasts in the use of color and typography are essential for the expression of this brand. The strength of The Verge’s visual identity is simplicity and embellishments such as additional graphic symbols and iconography should be used sparingly as accents. The Verge 33

Logotype Visual Identity guidelines 1.00 Logotype The Verge 4

Logotype Visual Identity guidelines 1.01 The Verge Logotype The logotype for print is available as an .eps file in the Brand Library. Also available in the library is a set of logotypes created specifically for screen usage. They will display perfectly on the pixel grid. In order to maintain their proper shape and crispness, they should never be resized in any way, nor should they be used in any print application. Color, Orange Color, Purple Black & White The Verge 5

Logotype Visual Identity guidelines 1.02 Logotype Clearance To ensure legibility and to prevent any obstruction of the The Verge logotype, always maintain a minimum space around it equal to the height of the T in the logotype. X = F Height The Verge 6

Logotype Visual Identity guidelines 1.03 Logotype Dos & Don’ts The correct variations of The Verge logotype are supplied in the Brand Library. Always use the source files provided to create a logotype. The logotype should not be altered in any way. DO NOT change the color of all DO NOT us gradient on logotype or part of logotype (colors needs to be solid) DO NOT cut logotype DO NOT distort part the logotype DO NOT change the proportion of DO NOT apply effect on logotype any part of logotype The Verge 7

Iconography Visual Identity guidelines 2.00 Iconography The Verge 8

Iconography Visual Identity guidelines 2.01 The Verge Iconography The iconography features modular elements allowing for variation and flexibility. Each variation is available as .eps files in the Brand Library. Multi-Color White Black The Verge 9

Colors Visual Identity guidelines 3.00 Colors The Verge 10

Colors Visual Identity guidelines 3.01 Screen Color Palette The brand color palette, composed of primary colors and secondary colors, should be enough for for brand expression. No new colors should be used (other than those brought in by photography). Do not use Screen colors for print. Primary Colors Orange R 250 / G 72 / B 42 #FA4B2A White R 255 / G 255 / B 255 #FFFFFF Black R 0 / G 0 / B 5 #363534 Secondary Colors Purple R 85 / G 100 / B 190 #5564BE Light Gray R 240 / G 240 / B 240 #F0F0F0 Dark Gray R 54 / G 54 / B 54 #363534 The Verge 11

Colors Visual Identity guidelines 3.02 Print Color Palette The brand color palette, composed of primary colors and secondary colors, should be enough for for brand expression. No new colors should be used (other than those brought in by photography). Do not use Print colors for screen. Primary Colors Pantone 172 C 0 / M 75 / Y 90 / K 0 White C 0 / M 0 / Y 0 / K 0 Pantone Black C 60 / M 40 / Y 40 / K 100 Secondary Colors Pantone 2736 C 0 / M 2 / Y 0 / K 68 Pantone Cool Grey 1 C 0 / M 0 / Y 0 / K 6 Pantone Black 7 C 0 / M 0 / Y 15 / K 82 The Verge 12

Colors Visual Identity guidelines 3.03 Logotype On Color Depending on the color it displays on, the logotype is either orange, purple, or white. Light Color Combination, 1 Light Color Combination, 2 Full Color Combination Mid-Tone or Dark Color Combination The Verge 13

Colors Visual Identity guidelines 3.04 Logotype On Gradient Regardless of the color it displays on, the logotype should be white and postioned with considered legibility. Multi-Color Gradient Single-Color, Purple Gradient Single-Color, Orange Gradient Single-Color, Black Gradient The Verge 14

Colors Visual Identity guidelines 3.05 Logotype On Image Depending on the image it displays on, the logotype is either white or orange. Use color logotypes cautiously—only use on clean/minimal compositions. Basic Image Image w/ Multi-Color Gradient Black & White Image w/ Single-Color Gradient Clean/Minimal Image The Verge 15

Typography Visual Identity guidelines 4.00 Typography The Verge 16

Typography Visual Identity guidelines 4.01 Primary Typography helvetica Neue is used as primary brand typography. It should be used for for top level elements. Helvetica Neue Regular AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUu VvWwXxYyZz1234567890$%&(.,;:#!?) Helvetica Neue Bold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUu VvWwXxYyZz1234567890$%&(.,;:#!?) Aa The Verge 17

Typography Visual Identity guidelines 4.02 Secondary Typography georgia is used as secondary typography. It should be used for body text and more generally secondary level elements on screen. Georgia Regular AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUu VvWwXxYyZz1234567890$%&(.,;:#!?) Georgia Bold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRr SsTtUuVvWwXxYyZz1234567890$%&(.,;:#!?) Aa The Verge 18

By Area 17 — 2011 Visual Identity Guidelines The Verge