E-flyer Branding Guidelines
Volume 1 - Version 4 2018 Table of Contents
External E-flyers
3 Intro to External E-flyers
4 Typography
5 Tables
6 - 7 Header
8 Body
9 Banner
10 - 11 Footer
12 - 18 External E-flyers Styles
19 Images
20 Helpful Codes
Internal E-flyers
19 Intro to Internal E -flyers
20 Typography
21-22 Tables
23 Header
24 Banner
25 Footer
26 Helpful Codes External E-flyers
PHLY External Eflyer Templates All external e-flyers are sent through Pardot email software. Please do not distribute any external template from Outlook or any other internal sending, as it will disable some features of the eflyer’s coding. The dynamic content in the templates are coded to each unique individual eflyer. For example, if an external eflyer is forwarded and the second recipient unsubscribes, it would unsubscribe the first recipient. To use, you must edit the HTML and paste it directly in. Also, be sure to copy and paste the content in the text version of each eflyer send. As always, do not forget to add the correct subject line.
To improve the effectiveness of our e-communications, best practices have been researched and applied to the eflyer templates. In the eflyer header, the PHLY Mark is used in conjunction with the official logo, to be clear of the sender. The correct corporate colors and product-specific imagery are used in each e-flyer design. The eflyer footer incorporates the PHLY disclaimer and several award logos, as well as the appropriate unsubscribe links to manage eflyer subscription.Images are standardized in size and dimension for faster downloading and consistent design. Alt tags are included on all images, and all content is reviewed by our Corporate Communications team in order to reflect the company’s intended messaging.
3 of 26 External E-flyers - Typography
Primary Fonts Colors Arial font is the only font used in the HTML area of the Color varies with each internal e-flyer. Colors selected external e-flyer. This includes body, copyright, footer link, from the branding guidelines choice of colors (please view title, and page links. Fonts varey due to location in e-flyer. branding guidelines booklet pg.13). See below. Size Font size varies due to the location in the e-flyer.
Fonts Size
Arial,Helvetica,sans-serif Body ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial,Helvetica,sans-serif, 12px abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()_+:”<>? Copyright Arial,Helvetica,sans-serif, Italic, 10px Arial,Helvetica,sans-serif, Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ Footer Links abcdefghijklmnopqrstuvwxyz Arial,Helvetica,sans-serif, 10px 1234567890!@#$%^&*()_+:”<>? Title Arial,Helvetica,sans-serif, Bold Arial,Helvetica,sans-serif, Bold, 14px ABCDEFGHIJKLMNOPQRSTUVWXYZ Dotted Line, 1px abcdefghijklmnopqrstuvwxyz Page Links 1234567890!@#$%^&*()_+:”<>? Arial,Helvetica,sans-serif, Varies in size due to location
Color
Header and Border: Colors vary with each external e-flyers, but will stay the same within that e-flyer. The colors are selected from the colors in the Branding Guidelines (please review the Branding Guidelines for color selection pg.13).
Body: Body text varies per template. Usually 43% Gray (hex #666666) - consult designer before changing text color.
Copyright: 70% Gray (hex #ACACAC)
Footer Links: Varies according to page type. Link = Color of border, Vlink = Offset of the color of link
Page Links: Varies according to page type. Link = Color of border, Vlink = Offset of the color of link
Titles: 281c Blue - color: #002663 - (td) border - bottom line - dotted color #666666 43% Gray
4 of 26 External E-flyers - Tables
Tables and Content The external e-flyer templates are mobile responsive. This means that the templates’ CSS style sheets contain code that sets the widths and heights of the tables to percentages, to allow the eflyer to adjust to different screen widths. The standard width for the outer table is 600px, if the user views the eflyer from a desktop.
The content in the eflyers follows a 1- or 2-column format. In the 2-column format, the content will align into one column if seen from a smaller screen, such as a mobile device. The footer contains the unsubscribe information, the copyright information, and the award logos. Header Content Styles Body Content Styles width=”100%” width=”100%” border=”0” border=”0” cellspacing=”0” cellspacing=”0” cellpadding=”0” cellpadding=”0” font-family=Arial,Helvetica, Sans-serif font-family=Arial,Helvetica, Sans-serif font-size=12px font-size=12px color=#666666 color=#666666 style=”border: 2px solid #[appropriate color];” padding-top:25px; padding-left:20px; padding- right:20px; padding-bottom:20px;
Footer Content Styles width=”100%” border=”0” cellspacing=”0” cellpadding=”0” align=”center” font-family: Arial, Helvetica, sans-serif, Trebuchet MS font-size:10px; line-height:14px color:#acacac text-align:center;”
5 of 26 External E-flyers - Header
Coding, Spacing and Font Size used for External E-flyer Headers The Header Image of the eflyer contains some important coding so the eflyer template remains mobile responsive. Make sure these elements are included in the image coding for the whole template to function properly.
Standard Width: width=”600” Class (coded in inline CSS Style Sheet): style=“banner” Inline Style: style=”display: block;”
Width 600px
View In browser link href=”%%view_online%%” style=”text-decoration:underline; color:#(link color)” target=”_blank”padding-bottom:10px Social Media Icons
Corner Radius 8px Height 90px
Futura Bold 38pt Futura Light 38pt
6 of 26 External E-flyers - Header
Examples of Headers
7 of 26 External E-flyer - Banner
Banners There are several styles of e-flyer banners. The first style is used for PHLY Invite e-flyers and the other PHLY Product E-flyers. The banners range slightly in size and shape. The images used are based on the subject of the e-flyers and determined by designer. Photos are purchased by a stock photography vendor.
Invite Banner The invite banner is 555px wide by 100px high with an 8px corner radius. The title bar has a black-to-transparent gradient that varies in opacity. The title line is Futura Medium, 20pt, color: #FFFFFF (white). The event/location line is Futura Medium in all caps, 13pt, color: #FFE400 (yellow). Width 555px Height 100px
Title Event Location Title Bar Corner Radius Futura Medium, 20pt Futura Medium all caps, 13pt, Black-to-transparent gradient 8px color:#FFFFFF (white) #FFE400 (Yellow)
Invite Banner with Starburst This invite banner has an added starburst. The starburst colors vary depending on the image. It is placed on the right hand side of the banner. The text is Futura Heavy, 14pt, #FFFFFF(white) or #000000(black).
Starburst Callout Color: usually red, can be designer’s choice of color. Futura Heavy, 14pt Text color: #FFFFFF(white) or #000000(black)
Product Banner Banner is 596px wide by 120px high. The black to transparent gradient bar varies in opacity. The title font is Futura Medium, 26pt, color: #FFFFFF (white). Width 596px Height 120px
Title Title Bar Futura Medium, 26pt, Black-to-transparent Gradient Color: #FFFFFF (white) 20 - 80% opacity (depending on image) *Images Not To Scale
8 of 26 External E-flyers - Join Us Banner and Footer
PHLY Join Us Banner Width 600px Height 250px
Title Subtitle Futura Medium, 22pt, Futura Medium, 14pt, Color: #FFFFFF (white) Color: #FFE400 (yellow) Footer Images and Components Width 600px
Disclaimer Footer Links Arial 9px Arial 10px, Color varies to #ACACAC match header and border.
Copyright Info Arial 10px #ACACAC
A.M. Best Logo Wards Logo Green Power Best Places to Tokio Marine 78 x 27 px 26 x 30 px Logo Work Logo Group Logo 78 x 30 px 44 x 50 px 143 x 30 px
9 of 26 External E-flyer - Join Us - Trade Show
PHLY Join Us Eflyer Template - Conference/Trade Show This template is used for any event where PHLY has a table or booth featured, such as a trade show or conference. The eflyer invites attendees to make an appointment with the PHLY employee(s) attending the event or just to check out the table or booth for more information.
Font Family: Arial, Helvetica, sans-serif
Text Color: #666666
Text Size: 12px
Link Color: #FF9700
Visited Link Color: #CC0033
Activated Link Color: #CC0033
Eflyer Border:2px solid #FF9700
Header Size: width=”600” height=”250”
Calendar Area Border: 1px solid #FF9700
Calendar Area Text Size: 13px
10 of 26 External E-flyer - Join Us - Trade Show
PHLY Join Us Eflyer Template - All Other PHLY Events This template is used for any event that PHLY hosts. For example, all Agency Appreciation events or PHLY-hosted seminar or presentation. The eflyer invites invitees to attend the event via an RSVP button. This eflyer works in tandem with a service called Eventbrite. The eflyer requestormust set up an Eventbrite page prior to submitting the ticket request. Go here for more information about the eflyer request SOP.
Font Family: Arial, Helvetica, sans-serif
Text Color: #666666
Text Size: 12px
Link Color: #FF9700
Visited Link Color: #CC0033
Activated Link Color: #CC0033
Eflyer Border:2px solid #FF9700
Header Size: width=”600” height=”250”
Calendar Area Border: 1px solid #FF9700
Calendar Area Text Size: 13px
11 of 26 External E-flyer - E-News
PHLY All-Agent E-News Eflyer Template This template is used to inform all PHLY agency contacts about the goings on at PHLY. The eflyer usually features many types of stories, including upcoming or current product and industry webinars, RMS news, Product-specific information, as well as any upcoming holidays for agents to be aware of, should the agents want to do business on said holidays.
Font Family: Arial, Helvetica, sans-serif
Story Title Text Color: #333333
Subheader Text Color: #333333
Body Text Color: #000000
Accent Text Color: #666666
Text Size: 12px
Link Color: #FF9700
Visited Link Color: #CC0033
Activated Link Color: #CC0033
Eflyer Border:2px solid #FF9700
Header Size: width=”600” height=”250”
Calendar Area Border: 1px solid #FF9700
Calendar Area Text Size: 13px
12 of 26 External E-flyer - Invite
PHLY Invite Template This template is used to invite external contacts to a PHLY-sponsored CE course or internal seminar. The eflyer gives the details, date, and time of the event, and provides a link for the recipient to RSVP. This template is only used when the eflyer requestor is unable to set up an Eventbrite page.
Font Family: Arial, Helvetica, sans-serif
Text Color: #666666
Text Size: 12px
Link Color: #FF9700
Visited Link Color: #CC0033
Activated Link Color: #CC0033
Eflyer Border:2px solid #FF9700
Header Size: width=”555” height=”102”
13 of 26 External E-flyer - Risk Management Services
PHLY RMS Template This template is used to inform PHLY agency and/or insured contacts about an issue relating to PHLY Risk Management Services, such as information about a current natural disaster or a new RMS initiative for insureds.
Font Family: Arial, Helvetica, sans-serif
Text Size: 12px
Link Color: #CC0033
Visited Link Color: #CC0033
Activated Link Color: #1443A1
Eflyer Border:2px solid #BE0F34
Header Size: width=”596” height=”120”
14 of 26 External E-flyer - News
PHLY News Template This template is a generic template used to inform external contacts about any given PHLY news story. invite external contacts to a PHLY-sponsored event, such as a seminar, CE course, or appreciation event. The eflyer gives the details, date, and time of the event, and provides a link for the recipient to RSVP.
Font Family: Arial, Helvetica, sans-serif
Text Color: #666666
Text Size: 12px
Link Color: #1443A1
Visited Link Color: #002663
Activated Link Color: #CC0033
Eflyer Border:2px solid #1443A1
Header Size: width=”596” height=”120”
15 of 26 External E-flyer - Surety
PHLY Surety Template This template is a generic template used to inform external contacts about any given PHLY news story. invite external contacts to a PHLY-sponsored event, such as a seminar, CE course, or appreciation event. The eflyer gives the details, date, and time of the event, and provides a link for the recipient to RSVP.
Font Family: Arial, Helvetica, sans-serif
Text Color: #666666
Title Text Color: #A32135
Text Size: 12px
Link Color: #00A0DF
Visited Link Color: #CC0033
Activated Link Color: #CC0033
Eflyer Border:2px solid #999999
Header Size: width=”596” height=”120”
16 of 26 External E-flyer - Survey
PHLY Surety Template This template is a generic template used to inform external contacts about any given PHLY news story. invite external contacts to a PHLY-sponsored event, such as a seminar, CE course, or appreciation event. The eflyer gives the details, date, and time of the event, and provides a link for the recipient to RSVP.
Font Family: Arial, Helvetica, sans-serif
Text Color: #666666
Text Size: 12px
Link Color: #C49D01
Visited Link Color: #CC0033
Activated Link Color: #CC0033
Eflyer Border:2px solid #C49D01
Image Size: width=”125” height=”245”
17 of 26 External E-flyer - Images/Buttons
Video Thumbnail Image E-news Thumbnail Image Height 140px Height 231px
Width 190px
Width 375px
Register Now/RSVP Button Survey Image
Corner Radius 8px Height 57px
Width 160px Height 245px
Width 125px
18 of 26 External E-flyer - Helpful Codes
Link to e-mail address and link to e-mail address with subject line coding: [email protected] RSVP
Calendar Link coding: To create an ‘Add to Calendar’ link, go to the link below and follow the easy steps. http://documentcommunication/phlycommunication/vCalendar.aspx
Bullet Code •
Copyright Code ©
View in Browser Code %%view_online%%
19 of 26 Internal E-flyers
PHLY Internal Eflyer Templates All internal e-flyers are sent with Microsoft Outlook. The disclaimer “Internal Use Only. Do Not Distribute” is included in the header, as the internal eflyers might contain information that is not intended for external recipients.
To improve the effectiveness of our e-communications, best practices have been researched and applied to the eflyer templates. In the eflyer header, the PHLY Bell is used in conjunction with the appropriate department from whom the message is being sent. The correct corporate colors and product-specific imagery are used in each e-flyer design. The eflyer footer incorporates the PHLY copyright information and several award logos, as well as links to ‘Products and Services’ and the PHLY Privacy Policy. Images are normally standard in size and dimension for faster downloading and consistent design. Alt tags are included on all images, and all content is reviewed by our Corporate Communications team in order to reflect the company’s intended messaging.
20 of 26 Internal E-flyers - Typography
Primary Fonts Size Arial,Helvetica,sans-serif font is the only font used in Font size varies due to the location in the e-flyer. the HTML area of the internal e-flyer. This includes body, copyright, footer link, title, and page links. Fonts varey due Colors to location in e-flyer. See below. Color varies with each internal e-flyer. Colors selected from the branding guidelines choice of colors (please view branding guidelines booklet pg.13).
Fonts Size
Arial,Helvetica,sans-serif Body ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial,Helvetica,sans-serif, 12px; abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()_+:”<>? Copyright Arial,Helvetica,sans-serif, Italic, 10px; Arial,Helvetica,sans-serif, Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ Footer Links abcdefghijklmnopqrstuvwxyz Arial,Helvetica,sans-serif, 10px; 1234567890!@#$%^&*()_+:”<>? Page Links Arial,Helvetica,sans-serif, Bold Arial,Helvetica,sans-serif, Varies in size due to location ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()_+:”<>?
Color
Header and Border: Colors vary with each department for internal e-flyers, but will stay the same within that e-flyer. The colors are selected from the colors in the Branding Guidelines (please review the Branding Guidelines for color selection pg.13).
Body: 43% Gray - color: #666666 - Can vary in some cases - consult designer first.
Copyright: 70% Gray - color: #ACACAC
Footer Links: Varies according to page type. Link = Color of border, Vlink = Offset of the color of link
Page Links: Varies according to page type. Link = Color of border, Vlink = Offset of the color of link
21 of 26 Internal E-flyers - Tables
Tables and Content All e-flyers are 600px; wide in a one column container. There This guideline is for external e-flyers sent through Exact are three main tables: header, body, and footer. The header Target. Please do not use the template feature as it will contains two rows; first row: displays web page link, second change the look. To use, you must edit the HTML and row: department header image. The body contains two rows; paste it in directly. Also, be sure to edit and paste in the first row: displays banner image, second row: body content. appropriate text-based version. As always, do not forget The footer contains one row with copy right, address, and logo to add the subject line. images. (See diagram:1 on next page).
Header Table Style Banner Table Style width= 600 or 100% width= 593 border= 0 align= center cellspacing= 0 valign= top cellpadding= 0 Standard Banner: align= center width= 596 font-family= Arial,Helvetica,sans-serif height= 120 font-size= 12px; color= #[appropriate color] Body Table Conent Styles Header Content Table Style width= 593 valign= top width= 501 padding= 20px colspan= 3 align= left Footer Content Styles padding-bottom=10px width= 600 Standard content: border= 0 Having trouble reading the e-mail? Go Here. align= center cellpadding= 0 (hyperlink to web page: href=”http://design.phly.com) cellspacing= 0 Standard deparment header: font-family: Arial, Helvetica, sans-serif width= 600 font-size= 10px height= 49 color= #666666 style= display:block text-align= center Main Body Table Style width= 597 border= 0 align= center cellspacing= 0 cellpadding= 0 style= ”border: 2px; solid #[appropriate color] font-family= Arial,Helvetica, Sans-serif font-size=12px color= #[appropriate color] 22 of 26 Internal E-flyers - Tables
Internal Table Diagram Diagram:1 showcases the table parts of internal e-flyers.
23 of 26 Internal E-flyers - Header
Coding, Spacing, and Font Size used for Internal E-flyer Headers
Width 600px
View In Browser Link 49px Height
PHLY Bell Department Name Internal Use Only. Do Not Distribute. Futura Light, 34.5 pt Futura Light, 8pt Font Color varies depending on banner color Font Color varies depending on banner color
Examples of Headers
24 of 26 Internal E-flyer - Banner
Banners Internal Standard Banner: 596px wide by 120px high. Black to transparent gradient bar that varies in opacity. The title is Futura Medium, 26pt, color: #FFFFFF (white). Alternative Banner: 596px wide by 250px high. Black to transparent gradient bar that varies in opacity. The title is Futura Medium, 21.79pt, color: #FFFFFF (white). Subtitle Futura Medium, 14pt, color: #FFE400 (yellow). Image’s are based on subject of e-flyers and determined by designer.
Standard Banner Image
Width 596px 120px Height
Title Black to transparent gradient, 20 - 80% Futura Medium all caps, opacity (depending on image) 26pt, color: #FFFFFF (white)
Alternative Banner Image
Width 596px 250px Height
Title Sub Title Black to transparent gradient, 20 - 80% opacity Futura Medium all caps, 21.79 pt, Futura Medium all caps, 14pt, (depending on image) color: #FFFFFF (white) color: #FFE400 (yellow)
*Images Not To Scale
25 of 26 Internal E-flyers - Footer
Coding used for Internal E-flyers Footer
Width 600px
Copyright
A.M. Best Wards 50 Green Power Partner Best Place to Work Tokio Marine Group Logo Logo Logo Logo Logo 78w x 27h px 26w x 30h px 64w x 30hpx 44w x 50h px 143w x 30h px
26 of 26 Internal E-flyer - Helpful Codes
Code to include a subject line in an email link: ?subject=NAME OF SUBJECT LINE i.e. [email protected]
Calendar Link coding: To create an ‘Add to Calendar’ link, go to the link below and follow the easy steps. http://documentcommunication/phlycommunication/vCalendar.aspx
27 of 26