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.
Master Brand Campaign Style Guide 3
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
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.
Master Brand Campaign Style Guide 4
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
Prudential loGoPrudential loGo
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
Master Brand Campaign Style Guide 5
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
Prudential loGoPrudential loGo
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
Master Brand Campaign Style Guide 6
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
Prudential loGoPrudential loGo
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 Campaign Style Guide 7
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
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 Campaign Style Guide 8
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
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.
Master Brand Campaign Style Guide 9
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
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 Campaign Style Guide 10
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
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 Campaign Style Guide 11
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
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 Campaign Style Guide 12
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
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.
Master Brand Campaign Style Guide 13
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
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.
Master Brand Campaign Style Guide 14
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
Collateral GuidelineS
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.
Master Brand Campaign Style Guide 15
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
Collateral GuidelineS
design examples
Collateral
Master Brand Campaign Style Guide 16
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
design examples
Collateral GuidelineS
Presentations
These PowerPoint templates are available on Brand Central
Master Brand Campaign Style Guide 17
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
adVertiSinG GuidelineS
Print examples
Master Brand Campaign Style Guide 18
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
adVertiSinG GuidelineS
digital examples
Banner Ads
E-Blast
Master Brand Campaign Style Guide 19
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
adVertiSinG GuidelineS
out of home examples
Master Brand Campaign Style Guide 20
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
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)
Master Brand Campaign Style Guide 21
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
WeB deSiGn StandardS
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
Master Brand Campaign Style Guide 22
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
WeB deSiGn StandardS
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
Master Brand Campaign Style Guide 23
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
WeB deSiGn StandardS
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)
Master Brand Campaign Style Guide 24
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
WeB deSiGn StandardS
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
Master Brand Campaign Style Guide 25
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
WeB deSiGn StandardS
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
Master Brand Campaign Style Guide 26
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
WeB deSiGn StandardS
Global headers
Corporate examples
Icon Use on Prudential.com Homepage and Interior Pages
Master Brand Campaign Style Guide 27
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
WeB deSiGn StandardS
Global headers
Corporate examples
Photo Use on Prudential.com Homepage and Interior Pages
Master Brand Campaign Style Guide 28
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
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
WeB deSiGn StandardS
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
Master Brand Campaign Style Guide 29
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
WeB deSiGn StandardS
Global headers
Business unit examples
Icon Use on Business Unit Homepage and Interior Pages
Master Brand Campaign Style Guide 30
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
WeB deSiGn StandardS
Global headers
Business unit examples
Photo Use on Business Unit Homepage and Interior Pages
Master Brand Campaign Style Guide 31
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
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
WeB deSiGn StandardS
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
Master Brand Campaign Style Guide 32
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
WeB deSiGn StandardS
Global headers
universal header examples
Master Brand Campaign Style Guide 33
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
WeB deSiGn StandardS
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.
Master Brand Campaign Style Guide 34
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
WeB deSiGn StandardS
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.