style guide master brand campaign - prudential.com · web design framework global headers ......

June 2012

8th Edition

FOR U.S. MARKETS ONLY • FOR INTERNAL USE ONLY

Style Guide

MaSter Brand CaMPaiGn

Master Brand Campaign Style Guide 2

introductionMessage from the Marketing Council

Prudential logo ElementsColorsTaglineClear ZoneSize and Placement

Master Brand Brand ManifestoTonality Brief Design Elements

Collateral Guidelines PhotographyAdditional ElementsDesign Examples

advertising Guidelines Print ExamplesDigital ExamplesOut of Home Examples

Web design StandardsOverviewDigital Color Palette Web TypographyWeb Design FrameworkGlobal HeadersGlobal FooterAdditional Information

MeSSaGe FroM the MarketinG CounCil

Message From the Marketing Council On the following pages, you’ll find style guidelines created to help us as we continue to implement the Bring Your Challenges campaign. Please familiarize yourself with these parameters and use them in your work.

Bear in mind that while styles found here have been established through careful consideration, they are not presented as iron-clad orthodoxy. Our role as marketers is to apply the visual and verbal languages provided by Bring Your Challenges in ways that are relevant to each communications task. Some flexibility must be assumed.

Thank you for your attention to these guidelines, and for helping us to maximize and protect the power of our company’s most valuable asset – the Prudential brand.








Prudential loGoPrudential loGo

elements

The approved visual representation of our company is the circular device that contains a stylized rock formation and the name “Prudential” which is set in a customized proprietary font. The elements of our Prudential logo cannot be altered or recreated. Logo files for the Prudential logo are available on Brand Central.

Vertical option When the horizontal logo won’t fit in the space allowed, the vertical version can be used.

Our Rock is an icon of strength and stability that has stood the test of time.

Vertical Prudential logo

When used as part of our logo, the design of our corporate name is constant and always rendered as art—rather than typeset.









Colors

The color of our logo is blue. “Prudential Blue” is associated with our company, and should be used whenever possible. If the background of your material is black and white or colored and does not complement PMS 300 blue, the Rock may appear in black, knocked out to white.

The logo may appear as the same color of the underlying item on embroidery; however, the logo can only appear in the approved colors.

The Rock and the word “Prudential” should always be set in the same color. For example, you could never set one in black and the other in blue.

Color Specifications: To create Prudential Blue, use these guidelines:

Pantone Matching System: PMS 300 Process color match of PMS 300: 100% cyan, 42% magenta Dainippon Ink & Chemicals: DIC 579 blue Internet palette: Red 51, Green 102, Blue 204 Lotus Notes: Red 0, Green 130, Blue 191

Prudential logo in Pru Blue

Logo in black

other logo color options:

Logo in white or knocked out









tagline (U.S. only)

We have a new tagline, Bring Your Challenges. This replaces Growing and Protecting Your Wealth and Growing and Protecting Wealth for all applications in the U.S.

It is not required that the logo be used with the tagline, but no other tagline or business slogan should be used.

The tagline is used as a graphic element with our logo. This configuration is referred to as a “lockup.” These are customized graphic elements and should not be altered or recreated.

tagline colors There are six approved logo tagline color combinations:

• Pru Blue logo with dark warm gray tagline

• White logo with a gold tagline

• Pru Blue logo with black tagline

• Black logo with dark warm gray tagline

• Black logo and tagline

• White logo and tagline

Vertical version The tagline is also available for the vertical version of the logo, but this is not a preferred option.

local-language translations The tagline is not available for translated versions.

Prudential logo in Blue, tagline in dark warm gray

Prudential logo in white, tagline in gold

Preferred color combinations for logo and tagline

other approved color combinations

Vertical versions with tagline

White (knocked out)Logo in black, tagline in dark warm gray

Logo in Pru Blue, tagline in black

Black









Clear Zone To maintain the integrity of our logo, all text and graphics must be set at least one Rock distance from the logo on all sides. This space is called the “clear zone.” In other words, if the Rock being used is one inch wide, all elements must be set at least one inch away from the logo.

Clear zones should also be enforced when using a logo with a tagline lockup.

Size and Placement

Minimum logo size Our logo and tagline must always be visible and readable. It should appear prominently and in proportion to the size of the materials.

Preferred logo placement Our logo should be positioned in the upper left-hand corner or lower right-hand corner of the page.

Cropping Our Prudential logo must never be cropped.

Clear Zone

Clear zone should be maintained around the logo.

On marketing material the preferred logo placement is in the lower right-hand corner.

On the web and stationery, the preferred logo placement is in the upper left-hand corner.

Clear Zone with tagline








MaSter Brand

Brand Manifesto

Prudential is a partner to millions of people and thousands of institutions. We have the vision and leadership to solve the greatest financial challenges. And our new brand strategy will tell that story. It will position Prudential as a purpose-led brand … and help make us one of the industry’s most preferred brands. This is the new Prudential.

The world challenges us. Every day.

Whether you’re a company providing for its employees or a parent providing for your family, every new day brings you a new set of challenges to overcome.

Some you’ve faced before. Others, you may never have seen coming.

Some bring you to your knees while others transform themselves into the biggest opportunities you’ve ever seen.

Challenges are the stuff of life.

And at Prudential, challenges are also our calling. Our mission.

We are in the business of challenges. Your challenges. And we always have been.

For 135 years, America has been bringing us their toughest, thorniest challenges and their grandest, wildest ambitions.

And together, time and time again, we’ve met them head on.

From the huge, strategic problems discussed at boardroom tables to the urgent issues facing families around the kitchen table. At every level of the economy, in good times and bad, Prudential has opened its doors to challenges of all shapes and sizes.

And it’s these challenges that have shaped us into the dynamic, innovative, talent-driven company that we are today. They’ve given us the unique ability to take on the challenges that no other company can. To tackle the biggest financial problems of today, tomorrow and beyond.

So, we ask you, bring us yours.

Challenge us.

Challenge us to help millions of Americans strengthen their financial health and security.

Challenge us to design and provide smarter employee benefits to help businesses and institutions face the future with confidence.

Challenges us to create financial solutions that help build stronger communities.

Challenge us to be thought leaders, business leaders and community leaders.

Challenge us to restore genuine optimism in this time of economic stress.

Challenge us to work together to build a financial world that works, and works smarter, for everyone.

Because each and every challenge we take makes us stronger, smarter and more capable of conquering the challenges that loom down the road and over the next horizon. All we ask is that you answer this simple call.

Prudential. Bring your challenges.








MaSter Brand

tonality Brief

Why? First things first, why a tonality brief? Well, simply put, the purpose of this document is to provide guidance that will help maintain a consistent voice across the wide range of communications we produce. This consistency is essential to defining and strengthening Prudential’s brand image. We are all the stewards of this brand, and collectively we give Prudential its brand character and voice.

hoW Prudential is in the challenges business, and our tone reflects it. We’re issuing a call, inviting people to bring us their toughest challenges so we may provide smart solutions. It’s a new way of conducting ourselves and communicating with our customers, our partners and the world around us.

Bold & ConFident IN VOICE We make strong statements and use authoritative language. We are fresh and direct. We avoid tired conventions of the financial services category.

IN ACTION We aren’t shy talking about the results we’ve achieved for our customers or the challenges we are taking on.

IN VISION We see the world through “big lenses.” We think long term, tackle big problems, and see what’s possible.

neVer arroGant We know we’re smart, but we don’t act like we’ve got all the answers. Our concern for our customers shows in the way we take on their problems. We don’t brag—we deal in facts. We understand that tackling challenges is a collaborative effort.

PraGMatiC We are realistic. We make statements backed up with statistics and substantiated fact.

dynaMiC Communication alone is not enough—we need to be dynamic. We communicate in new ways and in new places. The impres-sion we leave is vibrant and energetic.

oPtiMiStiC Tackling challenges is not just about overcoming obstacles or solving problems. It’s about enabling what is possible. We think challenges drive the world forward. We believe it can be done.

huMan Yes, we are a financial services company. But we are a finan-cial services company made up of people, for people. At the heart of our enterprise is a concern for individuals and society.

Plain-SPoken The challenges we tackle may be complex. But we break them down in ways that people can easily understand. We avoid jargon and clichés. Terms of art are explained.

SeriouS With a SenSe oF Fun We know this is serious business, but we aren’t afraid of a joke. We use humor to get people’s attention, disrupt their preconceptions, and get people to engage emotionally.

JudiCiouS uSe oF “the roCk” The Prudential Rock is an essential part of our brand image. But as we bring our new brand positioning to life, we must be careful not to use The Rock in ways that harken to the past. We do not overuse “The Rock” in design or language. We do not use “Rock” as a verb.








examples of the design elements used across various applicationsdesign elements

The Master Brand campaign provides a distinctive look for Prudential’s communications. The core design elements consist of a strong palette of bold flat colors, icon graphics and a consistent typographic treatment.

These guidelines were created to leverage these elements, while building off the current brand standards. This is intended to be a fluid document, with built-in flexibility to allow for the variety of marketing material created by the company.

Web

Digital banner

Collateral coverPrint ad

The core design elemenTs oF The mAsTer BrAnd cAmPAign1. strong palette of bold

flat colors2. icon graphics 3. consistent typographic

treatment

MaSter Brand








MaSter Brand

design elements

ColorsPrimary color palette

The use of bold flat colors is a key component of the design style. Navy and/or Prudential Blue should be the foundational color used to build all designs.

Secondary color palette

A secondary color palette of black, blue, gray and white was selected to support the primary colors.

accent color

Gold is the color used to highlight key copy or graphics. It should be used sparingly to maximize effectiveness at attracting attention.

additional colors

Additional colors may be used, but in a way that does not compete with or detract from this core color palette.

using gradations and tints

Gradations or tints should not be used as a significant part of any design. The simplicity and boldness of the Master Brand is best represented with a flat color palette.

Prudential Blue

PMS 300 C100 M42 Y0 K0HEX # 07639D RGB 5 99 158

Navy

C100 M62 Y12 K70HEX # 002346 RGB 0 34 71

light Warm Gray C0 M4 Y9 K24HEX # C9C2B8RGB 184 178 174

dark teal C70 M7 Y10 K33

light teal C100 M0 Y34 K10

dark Green C100 M0 Y91 K42

Bright GreenC69 M0 Y100 K0

rustC0 M53 Y100 K38

orange C0 M64 Y100 K0

yellow orange C0 M37 Y100 K10

icon Blue 2 C82 M33 Y9 K1HEX # 008abcRGB 0 138 188

light BlueC32 M4 Y0 K10HEX # 98C3DE RGB 152 195 222

Primary colors

Secondary colors

tertiary colors

accent color

light Cool Gray C0 M0 Y0 K24HEX # C9CACCRGB 201 202 203

icon Blue 3 C93 M64 Y23 K0HEX # 1a6394RGB 26 99 148

icon Blue 1 (Bright Blue)C80 M20 Y5 K0HEX # 009ED1RGB 0 158 209

dark Warm Gray C0 M14 Y28 K55HEX # 8A7967RGB 110 97 93

icon Blue 4 C97 M66 Y27 K9HEX # 005884RGB 0 88 132

dark Cool Gray C0 M2 Y0 K60HEX # 807F83RGB 84 88 97

Gold

C0 M16 Y100 K0HEX # FFD200RGB 255 210 0








MaSter Brand

design elements

typographyFonts

Trade Gothic/PruModern is the main font used for all headlines, subheads and call-outs. PruModern is a custom font based on Trade Gothic. If these fonts are not available, Arial can be a substitute.

Times Roman is an additional option for body copy in collateral.

Arial is the choice for large blocks of text on the web. This is because websites are restricted to fonts that are available on users’ computers unless displayed as a graphic.

typography hierarchy

The main headline is usually set in all caps. Secondary subheads can be set in either all caps or upper and lower case.

typography alignment and spacing

Headlines, subheads and call-outs – Headlines are set solid (for example, with 24-pt font over 24-pt leading). The preferred alignment is flush left. Type is set with normal or slightly tight kerning.

Body copy – Body copy should be set with a focus on readability. A minimum of 11-pt type is recommended with additional leading (for example, 11/13). Body copy can be set flush left or justified, with normal or slightly tight kerning. Avoid center or flush right alignments when possible.

using type as a design element

Open-letter spacing or excess leading as a design treatment should be avoided, as well as distorted or dimensionalized type.

Secondary Font for Collateral Body Copy

times roman

abcdefghijklmnopqr abcdefghi jklmnopqrstuvw

Primary Fonts

trade Gothic/PruModern

abcdefghijklmnopqr abcdefghijklmnopqrstuvw

Web & Substitute Font

arial

abcdefghijklmnopqr abcdefghi jk lmnopqrstuvw








MaSter Brand

design elements

iconographyIconography plays a key role in our Master Brand campaign. In addition to providing a powerful, fresh approach for visual narrative, icons can free designers from issues created by photography concerning diversity, profiling, and styling.

the icon library The Icon library is available on Brand Central. All icons are available in EPS and PNG formats. (PNGs are preferred over JPGs because they maintain transparent backgrounds.) New icons will be constantly added to the library to meet company demands.

designing with icons The icons are intended to be used as both a conceptual illustration style and a graphic design element. They work best when they are the same hue, clustered together, without overlapping to create a larger unified design element.

Creating icons If you create an icon, keep these attributes in mind:

• Communicate the idea as simply as possible with minimal detail.

• Use bold, solid geometric shapes, avoiding frail, thin parts.

• Create the icon using the blues from the color palette.

• Try to represent icons from a straight-on angle, with limited dimensionality or perspective.

illustrations as a design element The icon graphics are a distinctive and prominent element of the Master Brand. Other illustration styles should be avoided.








Collateral GuidelineS

Photography

Selecting Photography

The images chosen should be of a high resolution and convey visual interest through dramatic lighting and composition.

When showing people use photos that feature professional, well-groomed individuals in appropriate and suitable attire. Diversity is desirable. Equally important, be sure to select images that are current. Outdated hairstyles, clothing, or technology (i.e., cell phones or computers) can make photos seem unsophisti-cated, and thus inappropriate for our company.

design treatment to photograph

Use restraint when incorporating stylistic treatments to photography, for example, duotone, posterization or artistic filters. Avoid incorporating additional design solutions that would compete with the core elements of the Master Brand.









additional elements

rounded Corners

A subtle design treatment that echoes the style of the icons is the rounding of corners on call-outs and photographs. The recommended corner radius is .075” (this is for a letter size document and would be scaled proportionally). This treatment should be consistently applied throughout the design.

other design treatments

The Master Brand Campaign uses a minimal flat color palette, bold headline treatments and a conceptual icon illustration style to help create an ownable visual identity. These core elements, along with the use of photography, should drive most design solutions.

As design challenges arise, guidance will be needed in areas that these guidelines do not address. Attempt to find solutions that are supportive of the design style outline. Understand that this is intended to be a fluid document that evolves to address the needs of the company.

Example of chart and photograph with rounded corners.









design examples

Collateral








design examples


Presentations

These PowerPoint templates are available on Brand Central








adVertiSinG GuidelineS

Print examples









digital examples

Banner Ads

E-Blast









out of home examples








WeB deSiGn StandardS

overview

The Master Brand campaign requires a distinctive look for Prudential’s web communications. The core Design Elements include:

• Use of one of the three standard headers

• Bold color usage in user interface elements

• Icon and photo usage, as appropriate

• Consistent web typography treatment

The Master Brand elements will be built into the current online Web Design Framework, which is flexible enough to adapt to the variety of online communications created by the company.

Examples of Master Brand elements implemented in the Web Design Framework are provided throughout. The examples are for composite purposes only and are not in use.

For more information about implementation of web standards & guidelines, please see the eBusiness Development Group’s Online Style Guide. (http://edgnydev1.prudential.com/osg)









digital Color Palette

The digital color palette closely mirrors the print palette, but the color selections have been adapted to optimize the Master Brand campaign on computer screens and mobile devices.

Primary Colors

The use of bold, flat colors is a key component of the design style. Navy and/or Prudential Blue are the foundational colors for header and footer elements.

Secondary Colors

A secondary color palette utilizing blues and grays can be used to support the primary colors.

accent Color

Gold is used to highlight key interface or graphical elements. It should be used sparingly to maximize effectiveness of attracting attention.

additional Colors

Additional colors may be used only in a way that does not compete with or detract from this core color palette.

Prudential Blue

HEX # 07639D RGB 5 99 158

Navy

HEX # 002346 RGB 0 34 71

light Warm Gray

HEX # C9C2B8RGB 184 178 174

light Blue

HEX # 98C3DE RGB 152 195 222

Primary colors

Secondary colors

accent color

light Cool Gray

HEX # C9CACCRGB 201 202 203

icon Blue 1

HEX # 009ED1 RGB 0 158 209

dark Warm Gray

HEX # 8A7967RGB 110 97 93

dark Cool Gray

HEX # 807F83RGB 84 88 97

Gold

HEX # FFD200RGB 255 210 0









Web typography

Until font-downloading technology is perfected, websites are restricted to fonts that are most available on users’ Mac or PC computers. However, by displaying fonts graphically as an image and as a standard web font, viewers can still experience the campaign’s typographic uniqueness.

Graphical FontPruModern

This font should be displayed graphically as an image and should be displayed as the primary headline of a page, when utilized.

Web Fontarial

This is the web font of choice utilized for larger blocks of content to ensure information is legible on both Mac and PC computers. However, secondary fonts Verdana and San-Serif will display if Arial is not available on a viewer’s computer.

Primary Font

PruModern

A B C D E F G H I J K L M N O P Q Ra b c d e f g h i j k l m n o p q r s t u v wA B C D E F G H I J K L M N O P Q Ra b c d e f g h i j k l m n o p q r s t u v wA B C D E F G H I J K L M N O P Q Ra b c d e f g h i j k l m n o p q r s t u v wa b c d e f g h i j k l m n o p q ra b c d e f g h i j k l m n o p q r s t u v w

Web Font

arial

a b c d e f g h i j k l m n o p q ra b c d e f g h i j k l m n o p q r s t u v w A B C D E F G H I J K L M N O P Q Ra b c d e f g h i j k l m n o p q r s t u v w









Web design Framework

Prudential’s web design framework identifies the three communications used for websites. This approach was developed to ensure consistency across many sites and was designed to be flexible enough to adapt to enterprise changes.

Prudential websites fall into one of the following three categories. The Master Brand campaign adoption will be applied across these site categories:

• Corporate Communication (Prudential.com)

• Business Unit Communication (Life Insurance, Retirement, Prudential Investment Management, Real Estate, etc.)

• Other Communications (campaigns, landing pages, emails)









Global headers

overviewA global header is required across the top of every page of a site and typically includes: the Prudential logo, navigation, and other elements such as search, a site title, and frequently accessed links.

As with the web design framework, global headers are designed to be flexible enough to adapt to enterprise changes.

For the Master Brand campaign, the style and color of headers of existing Prudential site headers will be adapted to ensure that they reflect the campaign’s new style.

Corporate Header

Business Unit Header

Universal Header for Other Communications









Global headers

CorporateThe corporate header is used only on Prudential.com. The homepage and all interior pages falling under the site’s domain use this header. For the Master Brand campaign, the header’s color will be adjusted and styled to conform to campaign guidelines. The header can be used with banners that incorporate iconography or photography, but icons should not be placed in the header or navigation for usability reasons.

See examples on the following pages









Global headers

Corporate examples

Icon Use on Prudential.com Homepage and Interior Pages









Global headers

Corporate examples

Photo Use on Prudential.com Homepage and Interior Pages








Narrow Corporate Area

This area includes any combination of the following elements.

Business Unit Area

This area includes the elements noted above.

Session information and actions (e.g., username, logout, links for profile or account data)

Appropriate logo, which links to homepage of resident business site

Business name (e.g., Prudential Retirement, Prudential Real Estate, Prudential Annuities, Prudential Life Insurance, etc.)

Primary navigation specific to the business

Search field, which invokes a sitesearch that prominently displays

current business content, andlogin access (as appropriate)Prudential.com link, which links to the

Prudential.com homepage

About Prudential link, which links to Prudential.com’s Our Company Page


Global headers

Business unit

For the major web presence of Prudential businesses, the Business Unit header should be used in order to create brand consistency and improve overall usability for customers, business partners, and prospects.

For the Master Brand campaign, both areas of the header will be adjusted and styled to conform with campaign guidelines. The business unit header can be used with banners that incorporate iconography or photography.

See examples on the following pages









Global headers

Business unit examples

Icon Use on Business Unit Homepage and Interior Pages









Global headers

Business unit examples

Photo Use on Business Unit Homepage and Interior Pages








This area includes the following elements:

Appropriate logo, which links to homepage of resident business site

About Prudential link, which links to Prudential.com’s Our Company Page, orrelated business name, which links tobusiness’ Prudential.com page (optional)

Search, which invokes a site search that prominently displays current business content

Prudential.com link, which links to the Prudential.com homepage


Global headers

universal header for other CommunicationsThe Universal Header (also called the Narrow Corporate Area) is used for engaging audiences for targeted campaign sites, landing pages, or emails. This header is specifically used for targeted online communications outside of a Prudential or Business domain (e.g., RetirementRedZone.com).

this area includes the following elements:

For the Master Brand campaign, this header will be adjusted and stylized to conform with campaign guidelines. This header can be used with banners that incorporate iconography or photography.

See examples on the following page









Global headers

universal header examples









Global Footer

A global footer area appears consistently at the bottom of every webpage of a site and may include any combination of navigational links or text representing legal information or disclaimers. Each type of website (as defined in our Web Design Framework) and page may have different requirements for the display of legal information. Please consult with law and compliance for your business.

usageCorporate and business unit sites are required to display a clear set of navigational links in addition to legal information.

For the Master Brand campaign, corporate and business unit sites will utilize a footer bar styled to conform to campaign guidelines. The footer bar is required to display links to Privacy, Business Integrity, HIPAA, and Terms & Conditions. Furthermore, business units should display About Us and Contact Us links in this area unless they already appear as a navigational element in the global header area.









additional information

edG Web Standards & GuidelinesThis document provides a high-level summary of design standards to be used for implementation of the Master Brand campaign into digital communications. An additional document with extensive suggested guidelines for online communications, including best practices for navigation, forms, related links, etc., will be available from Obie Daids, Director, Interactive Design, (973) 802-4064.

style guide master brand campaign - prudential.com · web design framework global headers ......

Documents