Colours

Core Colours

  • Manulife Green(#00693C)
  • John Hancock Blue(#002D62)

Accent Colours

  • ML 7729(#005844)
  • ML 2278(#4E801F)
  • ML 2224(#006980)
  • ML 7713(#007D8A)
  • ML 307(#006BA6)
  • ML 301(#004B87)
  • ML 2627(#3C1053)
  • ML 520(#642F6C)
  • ML 258(#8C4799)
  • ML 228(#890C58)
  • ML 200(#BA0C2F)
  • ML 1807(#A4343A)
  • ML 188(#76262F)
  • ML 485(#DA291C)
  • ML 1525(#B94700)
  • ML 2321(#6F5137)
  • ML 464(#8B5B29)
  • ML Gold(#806C47)
  • ML Warm Gray 11(#6E6259)
  • ML Cool Gray 11(#3F454F)
  • ML 424(#707372)
  • ML 417(#65665C)

Background Colours

  • ML 577(#A9C47F)
  • ML 570(#6BCABA)
  • ML 622(#B7CDC2)
  • ML 304(#9ABDE8)
  • ML 7458(#71B2C9)
  • ML 292(#69B3E7)
  • ML 7444(#B6B8DC)
  • ML 157(#ECA154)
  • ML 7549(#FFB500)
  • ML 7401(#F5E1A4)
  • ML 7502(#CEB888)
  • ML 4535(#CFC493)
  • ML Warm Gray 2(#CBC4BC)
  • ML Cool Gray 4(#BBBCBC)
  • ML 5517(#B1C0BC)

Gradients

  • Test H(#00693C-#4E801F)
  • Test V(#00693C-#4E801F)

Typographic Styles

While using Arial for the body copy as well as for headlines is possible, we strongly recommend the use of a more distinctive and versatile font for those last cases.

Headlines

The Frutiger font used in all Manulife communications is a licensed font that can only be used when purchased. On the Web, this could be difficult to manage due to the yearly fees and/or the location and the number of page views. In order to avoid such problems, especially on parallels initiatives like microsites or emails, we suggest to use Open Sans. The general aspect of Open Sans is close enough to Frutiger to let the user feels a brand continuity. This sans-serif font offers the same amount of weights than Frutiger does. It is free to use and the Google Fonts CDN could be used as well as a regular hosting.​ Here is the CSS "font-family" sequence:

"font-family: 'Open Sans', Arial, Helvetica, sans-serif;"​​

Body copy

Arial, in its system default variant, has only two weights: regular and bold. While this could be limitative for headlines, it should not be the case for body copy. In addition, Arial is used in Manulife's digital communications and so should it be for the website. Here is the CSS "font-family" sequence:

"font-family: Arial, Helvetica, sans-serif;"​​

Font Icons

Download Font Icons

Here is the icon set used in the prototypes. Feel free to use it and modify it for production. Be aware that this does not represent all available icons. Also, some icons should be replaced with real icons (Manulife).

Main - 32px | 19 glyphes

  • E100 | Arrow up
  • E101 | Arrow left
  • E102 | Arrow down
  • E103 | Arrow right
  • E104 | Circled arrow up
  • E105 | Circled arrow left
  • E106 | Circled arrow down
  • E107 | Circled arrow right
  • E108 | Plus
  • E109 | Circled plus
  • E10A | Minus
  • E10B | Circled minus
  • E10C | Saltire
  • E10D | Circled saltire
  • E10E | Menu
  • E10F | Sign-In
  • E110 | Search
  • E111 | Notification
  • E112 | Contact

Specific - 32px | 4 glyphes

  • E200 | For you
  • E201 | For your business
  • E202 | Advisaors
  • E203 | For You / Home

Main - 64px | 4 glyphes

  • E300 | Arrow up
  • E301 | Arrow left
  • E302 | Arrow down
  • E303 | Arrow right

Specific - 64px | 11 glyphes

  • E400 | Retirement
  • E401 | Extra income
  • E402 | Family
  • E403 | Buy a home
  • E404 | Starting out
  • E405 | Health
  • E406 | Investment
  • E407 | Banking
  • E408 | International
  • E409 | Workforce
  • E40A | Group

Social - 64px | 2 glyphes

  • E600 | Twitter
  • E601 | Facebook

Specific - 64px (with css border) | 11 glyphes

  • E400 | Retirement
  • E401 | Extra income
  • E402 | Family
  • E403 | Buy a home
  • E404 | Starting out
  • E405 | Health
  • E406 | Investment
  • E407 | Banking
  • E408 | International
  • E409 | Workforce
  • E40A | Group

Social - 64px (with css border) | 3 glyphes

  • E600 | Twitter
  • E601 | Facebook
  • E602 | Email