Interactive Brand Guidelines Brand Standards 2012

Transcription

1 Brand Guidelines for 2012 Production Specifications Web Page Samples Interactive Brand Guidelines Brand Standards 2012

2 One of the most valuable advantages an organization has is it s brand - an image based on what a corporation promises and delivers. Our Brand Properly executed and communicated our brand offers customers a way to distinguish Liberty Mutual Insurance from it s competitors. The word Insurance has been added to corporate logos and collateral for 2012 and should be used in all forms of communications. Included in this document are the tools required to present a clear unified brand Corporate Brand Guidelines Brand Guidelines Specifications Web Page Samples New Logos Color Palette Typography Copywriting Search Form Navigation Main Menus Type Specifications Button Style Iconography Home Page Auto Insurance Auto Insurance Products Auto Insurance Quotes 11

3 Brand Guidelines: The New Liberty Mutual Insurance Logo A logo is to an organization what a signature is to an individual. A logo serves the same purpose as a signature; it authenticates the source of a product, service or document. The illustration of the Statue of Liberty when combined with the words Liberty Mutual Insurance is a unique symbol and cohesive graphic unit. Our logo is legally protected only if it is used properly. New Liberty Mutual logos for 2012 contain the word Insurance and should always be displayed as illustrated below. New 2012 Liberty Mutual Insurance Logos Master Brand Logo To use the Master Brand Logo properly, use the Horizontally Stacked version. Master Brand Logo Horizontal Configuration Vertical Configuration 12

4 Brand Guidelines: The New Liberty Mutual Insurance Logo The Liberty Mutual Insurance Logo Illustrated The corporate logo is an essential representation of our organization. It visually conveys our inherent values. Correct usage builds trademark recognition and reinforces brand consistency. Distorting the corporate mark jeopardizes our ability to protect it from legal infringement. Complying with these usage guidelines will help protect our corporate identity and maintain a unified image. Logo Parts Our logo has two essential parts: The Emblem and the Logo Type. The Emblem and Logo Type Illustrated: Never redraw or typeset the words in the logo. The mark should always appear when the logo appears. When reproduced in a way that it becomes illegible, the mark should be removed. Medallion Logotype Liberty Corporate Blue # R:0 G:38 B:99 Liberty Corporate Gray # R:97 G:98 B:101 Always use these hexadecimal color values consistently when reproducing Liberty Mutual Insurance s corporate mark. 13

5 Brand Guidelines: The New Liberty Mutual Insurance Logo The Liberty emblem - a pictorialization of the Statue of Liberty - is the central element in our brand identity sytem. Our Emblem as a Design Element When used as a part of a design, the emblem should not be modified, cropped, overused or diminished. Clear Space Measurement: 1/4 Emblem Diameter You may use the emblem as a design element; however, always with the complete logo in close proximity. The context must be clear so the intended audience recognizes that it is an element of the Liberty Mutual Mutual Insurance Logo. The medallion should always be shown at 100% opacity. Always use with the complete logo in close proximity. The emblem artwork should contain a registration mark. Margin = 1/4 emblem diameter 14

6 Brand Guidelines: The New Liberty Mutual Insurance Logo Manually Resizing the Logo Proportion & Scaling Use only authorized electronic reproductions of the logo. Always scale the logo proportionally. Resized Logo Examples When resizing do not alter the logo s proportions. Do not redraw or modify the logo. Do not change the relationship between the logo illustration and type. Correct Proportion Incorrect Scaling 15

7 Brand Guidelines: The New Liberty Mutual Insurance Logo Minimum Size and Clear Space Around the Logo The Liberty Mututal Insurance logo is available for use in two configurations: Vertical and Horizontal. Choose the version that better suits the page layout, allows for more clear space and provides greater distinction. Guidelines: Clear Space Guidelines: Minimum Size for Web Use Clear Space Around the Logo Diagrams to the right use the L in Liberty and the M in Mutual within each of the Liberty Mutual logos as a measuring device. Use a minimum distance from the top of the L to the bottom of the M or the distance of 1 L as a unit of measurement. The Horizontal Logo The Horizontal Logo: Logo Width is 144px Minimum Spacing = 2Ls Right and Left: The clear space distance of 2 L s is to be left to the right and left of the logo. The Horizontal Logo should not be used at a size smaller than 144 pixels. Minimum Spacing Around Logo = 1L Above and Below: A minimum clear space of 1 L should be used above and below. The Vertical Logo: Right and Left: It is recomended that a combined distance of 1 L + M be left to the right and left of the logo. Logo Width is 96px Vertical Configuration Minimum Spacing Around Logo = 1L Above and Below: 1 L should be used above and below the logo. The Vertical Configuration should not be used at a size smaller than 96 pixels. Minimum Spacing = 1L + M 16

8 Color Color is an important tool for articulating a brand. A systematic approach to using an established color palette gives the Liberty Mutual Insurance brand consistency across communications. Use these palette charts to specify the corporate color palette in hexadecimal form. Primary Color Palette Use the primary color palette White, Corporate Blue and Corporate Gray in all communications. Liberty Corporate Blue # R:0 G:38 B:99 Liberty Corporate Gray # R:97 G:98 B:101 White Secondary Color Palette Our secondary colors should be used in a manner that supports the primary palette; bringing life and vibrancy to our communications. Liberty Red #c9282d R:201 G:40 B:45 Liberty Orange #d97a23 R:217 G:122 B:35 Liberty Yellow #ecac00 R:236 G:172 B:0 Liberty Green #6c953c R:108 G:149 B:60 Liberty Teal # R:86 G:144 B:153 Liberty Blue #5381ac R:83 G:129 B:172 17

9 Brand Guidelines: 2012 Liberty Mutual Insurance Color Palette Color Palette Screens Extending the color palette through the use of screens allows for added flexibility while maintaining brand continuity. Using a screen value of less than 20% is not recomended. Secondary color palette screens may be used along with Liberty Corporate Blue where it is the predominant color. Web Hexadecimal Screen Values Primary Color Palette The primary color palette is made up of Liberty Corporate Blue and Liberty Corporate Gray and should always be used as the prominent color. Primary Color Palette Liberty Corporate Blue 100% # % #405c8a 50% #8093b1 Liberty Corporate Gray 100% # % #89898c 50% #b0b1b2 Secondary Color Palette: Secondary colors support the primary palette; bringing life and vibrancy to Liberty Mutual Insurance communications. Liberty Red Liberty Orange Liberty Yellow 100% #c9282d 100% #d97a23 100% #ecac00 75% #d75e62 75% #e39b5a 75% #f1c140 50% #e % #ecbd91 50% #f6d680 Liberty Green Liberty Teal Liberty Blue 100% #6c953c 100% # % #5381ac 75% #91b06d 75% #80acb3 75% #7ea1c1 50% #b6ca9e 50% #abc8cc 50% #a9c0d6 18

10 Copywriting Communications on all sites should take the form of an adult conversation speaking to the visitor as a peer. Content should not be excessively wordy, technical nor condescendingly simplistic. The visitor may be directly addressed within content in order to highlight appropriate product offerings for their customer segment. Copywriting Guidelines: Correct Text should be descriptive while concise; each sentence gets right to the point. The tone should be warm, professional and informative. Incorrect Too much descriptive text feels complicated and pretentious, not to mention difficult to read. Editorial Guidelines: Writing Style Provisions Facilitating Search Engine Optimization & Data Persistence Content is King Search Engine Optimization Data Persistence Make Appropriate Keyword Selections Manage Uses of Targeted Keywords Keep Content Current Maximize Keyword Placement Choose Hypertext over Graphics Create Meaningful Content Groupings 19

11 Typography When used consistently typography helps build an organization s brand. Selecting a set of harmonious typefaces achieves coherence in the presentaton of information. Always use these typefaces when creating Liberty Mutual Insurance communications of any kind. Always use these typefaces when creating Liberty Mutual Insurance communications of any kind. Rockwell Arial Garamond ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

12 Brand Guidelines: Typography Arial is a friendly and uncomplicated sans serif font. The HTML system font Arial is most commonly used across Liberty Mutual s web site. Using Arial in this manner complies with accessibility regulations and facilitate optimization across various search engines. Arial is used for: Body Text Links Left Navigation Sub-Titles Container Titles Main Menu Graphic Buttons Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

13 Brand Guidelines: Typography Garamond is a serif font; refined, classic and easy to read. It s professional-looking and clean. Where a more stylized font is required, Garamond may be used. Garamond Garamond is used for: Page Titles ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

14 Brand Guidelines: Typography Rockwell is unique and helps identify the design as a Liberty Mutual Insurance piece. Where a more stylized font is required, Rockwell may be used. Rockwell is used for: Media Center Features Introduction Copy Callout Copy Rockwell ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

15 Common Web Site Elements: Type Styles Web Type Styles Specifications for Styling Type Web Site Type Styles Right Column Hierarchy within page content is achieved when a limited number of complimentary typefaces is used. Accordian Open Accordian Body Text 2 Variation in type size, weight, and color creates interest within the design. Arial Bold, 20px, #FFF Arial Regular, 12px, #FFF Opacity 55% Arial Bold, 14px, #648F3F Accordian Closed Accordian Link Arial Bold, 20px, #648F3F Arial Regular, 10px, #FFF Underline Accordian Body Accordian Small Text Arial Bold, 12px, #FFF Arial Regular, 10px, #FFF 14

16 Common Web Site Elements: Type Styles Web Type Styles Specifications for Styling Type Web Site Type Styles Hierarchy within page content is achieved when a limited number of complimentary typefaces is used. Right Column, continued Right Column Body Form Label Variation in type size, weight, and color creates interest within the design. Arial Regular, 14px, #333 Arial Regular, 14px, #3A3A3A Header & Footer Navigation Menu Footer Text Arial Regular, 11px, #5C5C5C Arial Regular, 9px, #999 Footer Link Arial Regular, 11px, #999 15