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 requestor must 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.