Demand Media

Official Websites

• http://www.demandmedia.com
• https://leafgroup.com
• http://www.cracked.com
• http://www.livestrong.com
• http://www.ehow.com

Brand Guidelines

2013

Brand Summary

Mission

• Demand Media’s mission is to connect people to content that’s relevant to them, connect businesses to the web, and connect brands with people and people with brands. The brand aims to serve as a touchpoint in people’s real lives, helping them navigate their lives, satisfy their cravings, explore their interests, and expand their horizons [^1].

Core Values

• connection
• relevance
• helpfulness
• empowerment
• consistency
• quality

Target Audience

• More than 100 million people come to Demand Media every month, representing over 1 in 3 Americans online. The brand also targets businesses seeking to connect with their audiences in meaningful ways [^2].

Personality Traits

• friendly
• bold
• simple
• clear
• elegant
• precise
• geometric
• engaging
• honest
• relatable

Visual Identity Overview

• Demand Media’s visual identity is built on a foundation of bold, vibrant colors, simple and geometric logo elements, rounded and friendly typography, graphic arrows, and speech bubble graphics. The brand emphasizes consistency, clarity, and a modern, approachable style across all communications [^3].

Categories

Brand Imagery

• Our photography captures a slice of everyday life. It’s never fake or frivolous. It should make you feel like you are right there in the room. It’s about telling stories through personalities, interactions, and experiences. So it feels real, honest and straightforward.
• OUR APPROACH TO PHOTOGRAPHY • natural and relaxed-not posed or artificial • everyday and honest-something we can all relate to in real life (with ‘warts and all’, our coffee cups are dirty, our boots have mud on them, our shirts wrinkled­this makes them more believable) • personal and engaging-capturing emotions and intimacy. • sometimes funny. Real life can be a little weird, goofy, and funny. We’re not afraid to celebrate that.
• Photography can either be placed within the arrows, or can be used full bleed with the arrows on top of the image.
• When placing images within the arrows, please be mindful of composition. Do not crop out important parts of the image (such as faces) and ensure that the outline shape of the arrow is always clearly visible.
• DON’T use images where people are posing, or are used as props like in a catalog
• DON’T use interior design that is not lived-in, or is contrively staged
• DON’T use flat, cold lighting

Color Palette

• Our logo or background color may be any color within the Demand Media color palette. Contrast is important-use a white logo on color backgrounds and a color logo on white backgrounds.
• In certain instances, such as on the Demand Media website, a vibrant color logo may not be appropriate, and may potentially clash with other colors. In these instances, an all gray logo can be used.
• When using the logo on a white background, the logotype should always appear in gray, never in a vibrant color, and never in solid black.
• When using the logo on a color background, both the symbol and logotype should appear white. The logotype should never appear in gray.
• The preferred color for our logo is in one of our vibrant colors. In some cases, a full color logo may not be practical or possible due to limitations in printing. For these instances we may use a gray version (made as a 75% tint of black) or a one-color black or white logo.
• In special uses when the logo appears on a black background (for example T-shirts, Tote bags), a two-tone logo is pre­ferred. In this logo, the symbol should appear in white, and the logotype should appear in the following gray color (depending on application for print or web): • Pantone Cool Gray 8 • 45% black • R163 G166 B168
• Our logo may also be used on an image background with sufficient contrast. Use an all-gray logo for use on light colored backgrounds, and an all-white version for dark backgrounds.
• Do not use a color logo on a photographic image.
• DON’T mix colors from the palette
• DON’T use non-approved colors
• DON’T place the logo on a color without sufficient contrast
• DON’T use gray or black on a color background
• Our core colors are what give us our personality. We’re bright, bold, and colorful.
• The Demand Media logo can in fact appear in one of six vibrant colors. And there’s a dark gray color for our typography, and for instances where a color logo is not appropriate.
• When using the colors in print, it is important to always seek to use Solid Pantone inks. This way, all of our materials will be consistent, and our colors look vibrant. These same vibrant colors cannot be achieved using standard CMYK printing. Only use CMYK colors when absolutely necessary.
• Please note, when printing certain colors onto coated or uncoated paper, the Pantone color specified differs. Please refer to the color breakdowns on this page.
• Our color palette is bold, and in certain instances it can appear too bold. So we’ve created 6 additional pale colors that can be used to support the primary color palette. These secondary colors should only be used when absolutely necessary. Our preference is to only use primary color palette across most communications.
• Never use the secondary colors on their own. They should only be used to complement the core colors.
• When using our color palette, try to stick to using a core color + white. (see example 1)
• When using two colors together, pick a complimentary palette, such as two blue shades, or two green shades (see example 2)
• You can use secondry colors to comple­ment core colors, but as outlined above, the colors should be complementary. (see example 2)
• Please only use two colors together in addition to white.
• If in doubt, keep it simple.
• DO use our base colors with any white arrows
• DO use colors that complement each other
• Below are some approved color combinations. Please note, some of these utilize our secondary pale colors.
• When mixing core colors, stick to blue and green.
• Use secondary colors to complement the core palette.
• The examples on this page show how not to use our colors. In fact they are so garish you need sunglasses just to look at them.
• DON’T use clashing colors
• DON’T use color combinations that are illegible
• DON’T use 3 varying colors for all graphic elements
• Avoid these color combinations -They clash and many are difficult to read

Typography

• GOTHAM ROUNDED IS OUR TYPEFACE. WE USE IT IN TWO WEIGHTS— BOLD AND MEDIUM.
• Typography is an important aspect of our brand identity. Our typographic style contributes to our distinctive aesthetic. The typography usage examples on the following pages should be followed to ensure all of our communications appear consistent.
• ROUNDED FRIENDLY SIMPLE CLEAR ELEGANT PRECISE GEOMETRIC
• Gotham Rounded Bold is used for all headlines and titles.
• GOTHAM ROUNDED BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
• Gotham Rounded Medium is used for the Demand Media logotype. It should also be used for all standard body-copy.
• GOTHAM ROUNDED MEDIUM ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
• Since Gotham Rounded is currently not available as a webfont, we have substituted it with a close alternative called Proxima Nova Soft.
• As with Gotham Rounded, we use the Bold weight for headlines, and Medium for body copy.
• Proxima Nova Soft Medium and Bold can be purchased directly here.
• PROXIMA NOVA SOFT MEDIUM ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 — &*#@?!/+(.,:;)
• In cases where a standard system font is required—such as sales presentation Powerpoint documents—Arial Regular and Bold should be used.
• Arial / Arial Bold
• ABCDEGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
• Typography is always ranged left. This provides the eye with a constant starting point for each line, making text easier to read. The only exceptions are when typesetting headlines with the Demand Media arrowheads (see page 25)
• When typesetting headlines, the leading should be 15% larger than the type size. To calculate, multiply the type size by .15 and add the result to the typesize.
• When setting body copy, the leading should be 25% larger than the type size. To calculate this, multiply the type size by .25 and add result to the typesize. All type should be be set to -20 tracking.
• Body column width should ideally be between 7-9 words long.

Logo Usage

• Our logo is the most visible element of our identity—a universal signature across all Demand Media communications. It’s a guarantee of quality that unites our diverse products and services. We use the same version in print, on screen, and on the side of our buildings. It’s simple. Easy to understand. No drop shadows, no glossy reflections, no flashy graphic effects. Our logo is a bold, simple, graphic statement. It signifies a touchpoint, and a connection. The logo is made up of two elements: the symbol and the logotype. While it is a simple logo, we must treat it nicely. The following pages cover the correct usage to ensure the logo always looks its best.
• To ensure that our signature versions are clearly visible in all applications, surround them with sufficient clear space —free of type, graphics, and other elements that might cause visual clutter—to maximize the recognition and impact of our identity. To ensure the integrity and legibility of the logo lock-ups, the area directly surrounding them should be protected. When the logotype or full name is used, a clear space of 50% the symbol’s height should be maintained. In special circumstances when a 50% clear zone isn’t available or possible, use the second option of 25% clear space. Note: the logotype typography has been carefully spaced, and should not be changed, or re-typed. The ‘D’ and ‘M’ are vertically aligned, in addition to the ‘e’ and ‘a’.
• We like to avoid placing the logo smack dab in the middle of an area. On any given format—landscape or vertical—the preferred logo placement is in any corner position, or center aligned at the right or left. Centering the logo looks generic and predictable. Much better : )
• There are no predetermined sizes for the Demand Media logo. Scale and proportion should be determined by the available space, aesthetics, function and visibility. There is no preset maximum size for the logo. In print the minimum size is 0.8”. For digital uses the minimum size for the standard logo is 100 pixels. 100 pixels is the smallest size apart from when using an ICO. There is a specific file for ICO’s which is a 16px tall file. Minimum size 0.8” / 100px Minimum size 0.375” / 30 px Favicon (ICO file) 16 px
• To protect our logo we use a Registered symbol alongside our logo. This is used in all major outward-facing brand communications, such as our website and advertising. For internal communications, and branded promotional items—such as notepads, T-shirts, water bottles—the standard logo can be used. The registered logo has been created in two sizes - large and small. The large scale version will cover most uses, and the small scale version is intended mainly for use on the web. Large scale use Scale width between: 1.2” – upward 150px – upward Small scale use Scale width between: 0.8 – 1.2” 100 – 150 px
• Our logo or background color may be any color within the Demand Media color palette. Contrast is important—use a white logo on color backgrounds and a color logo on white backgrounds. See pages 21 & 22 for detailed color information and color values. In certain instances, such as on the Demand Media website, a vibrant color logo may not be appropriate, and may potentially clash with other colors. In these instances, an all gray logo can be used. When using the logo on a white background, the logotype should always appear in gray, never in a vibrant color, and never in solid black. When using the logo on a color background, both the symbol and logotype should appear white. The logotype should never appear in gray.
• The preferred color for our logo is in one of our vibrant colors. In some cases, a full color logo may not be practical or possible due to limitations in printing. For these instances we may use a gray version (made as a 75% tint of black) or a one-color black or white logo. Black logo on white background White logo on black background Two-tone version for black backgrounds. In special uses when the logo appears on a black background (for example T-shirts, Tote bags), a two-tone logo is preferred. In this logo, the symbol should appear in white, and the logotype should appear in the following gray color (depending on application for print or web): • Pantone Cool Gray 8 • 45% black • R163 G166 B168
• Our logo may also be used on an image background with sufficient contrast. Use an all-gray logo for use on light colored backgrounds, and an all-white version for dark backgrounds. When placing the logo onto imagery, please ensure that it is placed within an uncluttered image area to allow for maximum legibility and visibility. Do not use a color logo on a photographic image.
• To maintain the integrity of the Demand Media logo, and to promote the consistency of the brand, it is important to use the logo as described in these guidelines. The examples shown here illustrate possible misuses of the Demand Media logo that should be avoided. DON’T create a logo lockup with text DON’T rearrange the logo elements. DON’T change the proportions between the symbol and logotype DON’T rotate the logo DON’T stretch the logo DON’T create a gradient logo DON’T mix colors from the palette DON’T use non-approved colors DON’T outline the logo DON’T add a drop shadow to the logo DON’T add reflections or any other graphic filters to the logo DON’T use the symbol as a holding shape for imagery or graphics DON’T create a pattern with the logo DON’T place the logo on a color without sufficient contrast DON’T use gray or black on a color background DON’T use over a busy image

Tone And Messaging

• Our new brand identity is all about demonstrating how Demand Media is a touchpoint in people’s real lives.
• We connect people to content that’s relevant to them. We connect businesses to the web.
• We connect brands with people and people with brands.
• Every second of every day people click, swipe, and tap into Content For Real Life on one of our sites. More than 100 million people come to us every month—that’s more than 1 in 3 Americans online. We’re there to help them navigate their lives, satisfy their cravings, explore their interests, and expand their horizons.
• We also give businesses the power to connect with their audience in more meaningful ways—through websites, through advertising solutions, and through social conversations.
• This is what our branding is all about—connecting, serving as a touchpoint, and meeting people where they are.
• Typography is an important aspect of our brand identity. Our typographic style contributes to our distinctive aesthetic. The typography usage examples on the following pages should be followed to ensure all of our communications appear consistent.
• ROUNDED FRIENDLY SIMPLE CLEAR ELEGANT PRECISE GEOMETRIC
• Our photography captures a slice of everyday life. It’s never fake or frivolous. It should make you feel like you are right there in the room. It’s about telling stories through personalities, interactions, and experiences. So it feels real, honest and straightforward.
• natural and relaxed-not posed or artificial
• everyday and honest-something we can all relate to in real life (with ‘warts and all’, our coffee cups are dirty, our boots have mud on them, our shirts wrinkled­this makes them more believable)
• personal and engaging-capturing emotions and intimacy.
• sometimes funny. Real life can be a little weird, goofy, and funny. We’re not afraid to celebrate that.

Visual Style

• We use the same version in print, on screen, and on the side of our buildings. It’s simple. Easy to understand. No drop shadows, no glossy reflections, no flashy graphic effects.
• The logo is made up of two elements: the symbol and the logotype.
• To ensure that our signature versions are clearly visible in all applications, surround them with sufficient clear space -free of type, graphics, and other elements that might cause visual clut­ter-to maximize the recognition and impact of our identity.
• To ensure the integrity and legibility of the logo lock-ups, the area directly surrounding them should be protected.
• When the logotype or full name is used, a clear space of 50% the symbol’s height should be maintained.
• In special circumstances when a 50% clear zone isn’t available or possible, use the second option of 25% clear space.
• Note: the logotype typography has been carefully spaced, and should not be changed, or re-typed. The ‘D’ and ‘M’ are vertically aligned, in addition to the ’e’ and ‘a’.
• We like to avoid placing the logo smack dab in the middle of an area.
• On any given format-landscape or vertical-the preferred logo placement is in any corner position, or center aligned at the right or left.

Iconography

• A number of icons have been designed to communicate the many different types of content we produce, and the many different audiences we reach.
• But please use the icons with restraint. Yes, they’re cute, but please don’t sprinkle them on every brand communication. They are there to support specific themes in marketing communications.
• The icons can appear in any of our primary colors.
• Please refer to the basic guidelines on page 42.
• All of these icons can be found in the file: DM_all_icons.ai
• X DON’T squeeze text inside of the icons
• X DON’T place icons within other icons
• XDoN’T add drop shadows
• X DON’T replace letters with icons
• X DON’T overlap icons
• XDoN’T rotate icons unless 90° or 45° as part of a group (see right).
• DO group icons together into compositions, but please keep to 90° or 45° rotation of icons.
• DO use them next to text or call-to-action.

Layout And Composition

• To ensure that our signature versions are clearly visible in all applications, surround them with sufficient clear space -free of type, graphics, and other elements that might cause visual clut­ter-to maximize the recognition and impact of our identity. To ensure the integrity and legibility of the logo lock-ups, the area directly surrounding them should be protected. When the logotype or full name is used, a clear space of 50% the symbol’s height should be maintained. In special circumstances when a 50% clear zone isn’t available or possible, use the second option of 25% clear space.
• Note: the logotype typography has been carefully spaced, and should not be changed, or re-typed. The ‘D’ and ‘M’ are vertically aligned, in addition to the ’e’ and ‘a’.
• We like to avoid placing the logo smack dab in the middle of an area. On any given format-landscape or vertical-the preferred logo placement is in any corner position, or center aligned at the right or left.

Graphic Arrows Guidelines

• An important part of our graphic look and feel are the use of arrowheads. The arrows are derived from our logo, and signify connection and action.
• Used alongside our bold color palette and angled headline typography, the arrows provide a bold and engaging graphic look and feel to all our communications.
• The following pages explain how the arrowheads should be used with typography, color, and photography.
• When typography interacts with the arrows, there are specific rules that apply.
• Typography blocks should always relate to the 90° right angle created by the arrows. Depending on the rotation of the arrows, typography will vary from left aligned, to right aligned. Typography can also be rotated 45° clockwise, anticlockwise, or remain straight as shown in these examples.
• When placing text within the arrows, the typography layout will vary depending on the orientation of the arrow, and the amount of text within the arrow. Please follow the guides below, and on the following pages.
• Blue lines represent a clear space border. The width of the border is equal to 12% total width of the arrow.
• GRAPHIC ARROWS: TYPE SIZE & LINE COUNT Left alignment 3 lines of type Right alignment 3 lines of type 4 lines of type 4 lines of type 5 lines of type 6 lines of type (maximum) Small Type-Max 6 lines within space
• GRAPHIC ARROWS: OUTSIDE TYPE USAGE As well as inside the arrows, typography can be placed outside of the arrows. The typography alignment should always relate to the right angle created by the arrows.
• GRAPHIC ARROWS: USING CROPS AND ANGLES The Demand Media logo, and individual graphic arrows can be cropped in different ways to create dynamic layouts. Some simple examples are shown here. The arrows can appear in a variety of layouts and directions to suit the needs of the layout. The arrows can be rotated 90° or 45°. The arrows can either be used as a pair (facing each other) or as standalone directional arrows. When using as a pair (examples 1, 3, 5 & 6) the distance between the arrows should always remain the same. Please do not move arrows closer together, or further apart.
• GRAPHIC ARROWS: USING ARROWS AND TYPOGRAPHY An Adobe Illustrator file containing various graphic arrow layouts can be found in the brand assets folder: Filename: DM_arrow_crops.ai This file contains multiple editable layouts. These will give you a starting point for creating layouts. Please note, you will need Adobe Illustrator to edit and create design layouts. Also note, you will need the font Gotham Rounded Bold installed to edit the text.
• USING COLOR: DOs 1. DO use our base colors with any white arrows 2. DO use colors that complement each other 3. DO use colors that complement each other Below are some approved color combinations. Please note, some of these utilize our secondary pale colors.
• When mixing core colors, stick to blue and green.
• Above: Use secondary colors to complement the core palette.
• USING COLOR: DON’Ts DON’T use clashing colors DON’T use color combinations that are illegible DON’T use 3 varying colors for all graphic elements Avoid these color combinations -They clash and many are difficult to read
• GRAPHIC ARROWS: USING PHOTOGRAPHY Photography can either be placed within the arrows, or can be used full bleed with the arrows on top of the image. When placing images within the arrows, please be mindful of composition. Do not crop out important parts of the image (such as faces) and ensure that the outline shape of the arrow is always clearly visible.

Speech Bubble Graphic

• In addition to the core arrowhead shapes, there is a ‘speech bubble’ shape that can be used in graphic layouts.
• The speech bubble shape should always contain typography, and should never be used as a standalone shape.
• Please refer to the guidelines on this page that outline the correct distance relationship between the typography and the speech bubble.
• An Adobe Illustrator file containing the speech bubble can be found in the brand assets folder: Filename: DM_speechbubble.ai
• Please note, you will need the font Gotham Rounded Bold installed to edit the typography.
• To calculate the correct distance relationship from the type block to the speech bubble, divide the height by 10%. This will give you the correct border width.

Stationery Guidelines

• Envelope Digital letterhead template. Filename: DM_letterhead.doc 1333 2ND STREET STE 100 SANTA MONICA CA. 90402 WWW.DEMANDMEDIA.COM P/ 310.123.4567 F/ 310.123.4567 E/ ACCOUNTS@DEMANDMEDIA.COM Mr John Smith Company Title 340 Bryant Street San Francisco CA 94107 USA Date: 03.05.2011 Helvetica Regular 10pt on 13pt linespacing Dear Name, Pudis ea coreper esequia estrunt isitam expliquiam autem rempostinis voluptatur, omnis imus rest, coribus re nis et di si dolentionse verior magnimos int eaturentur sitenti onsequam ut magnihit aut volum aut quiaspe libuscilique none volo optibus exernatis dusam quam fuga. Ita denda nonectem eum volo blatest ibeatibustis elis ra quae magnatur solore ni in corescipsant fugitibus, atur, omnis imil et quaturibus dolectatet moluptaquo bea-tas sed mi, sapid quia nobitis simusae cor aut evel estrum, aute voloreptas quis eturiam hitatur alique coritatur aciis eatiatur seque il ilibus cusam incia quiaectota sectur andigeni dit, ipsam am, oditatemped ullab il ipsapero exerciae sintus derum excestium veni dolest, quia ne ducilitatus duci num ant eum quas abo. Is modipid magnam, sitassincil elliatum que volesed ut fugitiam fugiatem qui restrum, solum et quo quia voluptatem restiunt fugiat andita conescius voluptate cus sum libusdae. Ut voles et perferspero eaquaestium as et moluptiunto evelia de min poreperumquo bea velit intintur, ullam nos nos res am, volendi sero voluptas enectur? Occae porem qui dem. Itas et autam faceat faccab ipiciam endebit atusae incid molupturibus re, occuptatis vitatem quo officiat voloribusam comnimagniam nullam ape simi, quia aut dolore por at quamet omnis magnimi, nem faceri tem arit haria sequianiste am res in core sitatemqui ut il incte nullani mporese quidisquis dun-dantis sim sequae quaerum que sapid unt ipictota dolest adit quia nobis unt quo veratiis et auta earum quo volest, simusapit, ius magnisitas eicabo. Et od eos nist aliqui qui tempeliatum nonse sum ea eaque cone comnimi, nestis et fuga. Iquiatquia sequidelest, alit fugit fugiaes diat. Regards, John Smith Helvetica Regular 10pt on 13pt linespacing
• Email Signature 5 Demand Media Arial Regular and Bold Peter Luttrell 12px typesize SVP Ad Solutions & Brand Management 14px linespacing Color Rl02 Demand Media GllO 1333 2nd Street Ste 100 B 118 Santa Monica, CA. 90402 www.demandmedia.com peter.luttrell@demandmedia.com 310.917.6438 Horizontal lines: Repeated em-Dash (Option key plus-) Color R209 G211 B212 Horizontal lines should be at a length, depending on the staff name and title (longest line)

Additional Properties