A symbol of growth and protection. Our brandmark is the key visual asset used to identify our brand. It’s a powerful and unique symbol for MLC Life Insurance, and should be used consistently and correctly to maintain the integrity of our brand.
MLC Life Insurance has its own segment identifier to help consumers identify when their communication is in relation to this area of the business. MLC Life Insurance segment identifier always appears as a lockup with the MLC Life Insurance Brandmark – the two elements are never separated. For digital and online applications, the segment identifier lockup always appears in full colour. Use the RGB logo without the ‘MLC’ inset drop shadows for all digital applications including banners, videos, eDMs and email banners. Positive and reverse versions are available for RGB colour format. Please note, third-party logo usage must be approved via the Brand and Marketing team.
The horizontal logo lockup is generally used for most online applications, when vertical space is limited, and for left margin placement. When using online, please use the ‘Digital RGB’ brandmark that doesn’t include the drop shadow on the MLC lettering.
Minimum logo clearance on all lockups is 1xM around each side. The MLC nest egg brandmark should appear no smaller than 95px wide. For further advice or to use the MLC Life Insurance Brandmark at smaller than minimum size, please contact the MLC Life Insurance Brand and Marketing team.
Do not use the logo in any way that deviates from the established style and correct usage. For example:
The MLC Life Insurance brandmark should not appear in reverse.
The MLC Life Insurance brandmark should not be locked up with any other descriptors.
The MLC Life Insurance brandmark should not appear seperated from it’s descriptor. The horizontal or vertical lockup artwork must be used at all times.
The MLC wordmark should always be reproduced in white, do not alter the artwork in any way.
To access the logos, please use the Central Design System on Figma, or contact brand.
The Central Design System (CDS) is a Figma file that acts as a hub for all UI components.
Request the latest MLC Life Insurance Brand Guidelines.
Request the MLC Life Insurance logo suite.
View react components
View both figma and storybook components together.
Typography is a key component in almost every digital experience. However, its complexity and industry-specific language makes it a common source of misalignment and confusion. You don’t have to be a typography expert to design digital interfaces, but it’s important to know some of these terms in order to have meaningful conversations with others on your team. Communicating clearly with team members about typography can help teams increase legibility (and therefore usability) of an interface, improve visual polish and professional appearance, create a more consistent brand identity, and cut down on costly revisions and iterations. Source
Charlie is our display/hero font and the typeface to be used across most of our communications. With a diverse range of weights, it’s a versatile typeface used for all levels of information from headlines through to body copy. Charlie is a licensed typeface and must be purchased from typotheque.com before use.
Charlie is used for all typography throughout printed collateral, in headings and body copy. In the digital environment where readability is paramount, Charlie is primarily used for headlines and occasionally for short subheadings.
Source Sans Pro is the preferred font for longer subheadings, body copy and calls to action in digital environments. Source Sans Pro shouldn’t be used for headings. System font fallback Arial is a standard PC – and web – compatible font, and is used when Charlie and Source Sans Pro are either not available or not appropriate.
Download Source Sans ProTypeface: Source Sans Pro
Weight: Semi Bold
Size: 48px/3rem
Line Height: 120%
Typeface: Source Sans Pro
Weight: Semi Bold
Size: 32px/2rem
Line Height: 120%
Typeface: Source Sans Pro
Weight: Semi Bold
Size: 28px/1.75rem
Line Height: 120%
Typeface: Source Sans Pro
Weight: Semi Bold
Size: 18px/0.875rem
Line Height: 140%
Typeface: Source Sans Pro
Weight: Semi Bold
Size: 16px/1rem
Line Height: 140%
Typeface: Source Sans Pro
Weight: Semi Bold
Size: 12px/0.75rem
Line Height: 140%
Establishing the ultimate recipient of a communication is the most important question when selecting the right balance of MLC Life Insurance brand colours, and imagery. Consideration is also given to the level of sophistication of the product offering when determining which tone to apply.
Aqua is the key bright colour in the Primary palette, accented with Deep Aqua.
There is a greater emphasis on Aqua in the Core tone approach.
Aqua
A
Pass
A
Fail
#01838c
Deep Aqua
A
Pass
A
Fail
#004651
Light Aqua
A
Fail
A
Fail
#00B0B9
Rubines and Oranges in the secondary palette are used for charts and diagrams only where more colours are required to differentiate information
Rubine
A
Pass
A
Fail
#ce0058
Deep Rubine
A
Pass
A
Fail
#60003a
Light Rubine
A
Fail
A
Pass
#facde3
Other than for covers and feature pages, avoid using too many large areas of Aqua and Deep Aqua. Where possible, stay with white or neutral backgrounds.
Shades/Tints can be used to support the monochromatic illustration style and enhance design in digital and print applications.
1 - Charcoal
A
Pass
A
Fail
#272525
2- Dark Grey
A
Pass
A
Fail
#585353
3 - Grey
A
Fail
A
Pass
#c4c3c3
4 - Light Grey
A
Fail
A
Pass
#e0e0e0
5 - Very Light Grey
A
Fail
A
Pass
#f7f8f8
6 - White
A
Fail
A
Pass
#FFFFFF
Tints should be used in moderation with the masterbrand palette remaining dominant across an application. Ensure usage of Shades/Tints meet AA accessibility in digital channels.
Certain colours are reserved for "functional" or "feedback" colours – red for errors, green for success, yellow for warning, and blue for informational messages. Feedback colour is critical as it usually interrupts the user to provide context aware alerts or notifications. These colours indicate a system notification while staying on brand and cohesive with main brand colours.
Danger
A
Pass
A
Fail
#a8140b
A
Fail
A
Pass
#fcd6d4
Warning
A
Pass
A
Fail
#a16803
A
Fail
A
Pass
#feedcf
Accept - Green
A
Pass
A
Fail
#02cd86
A
Pass
A
Fail
#016a45
A
Fail
A
Pass
#ccf5e7
Accept - Blue
A
Pass
A
Fail
#0a5e99
A
Pass
A
Fail
#d1eafc
As a quick, convenient alternative to photography, or as a visual approach in their own right, pictograms and illustrations add a contemporary, graphic clarity to our communications.
Pictograms are the perfect balance of detail and simplicity - just enough information - no more, no less. They are available in both tonal and solid colour. To give them a sense of depth pictograms should, where possible, be reproduced tonally. Where reporduction restrictions exist, they may be reproduced solid.
Pictorgrams are typically used individually as the hero element of a communication, and are contained within an egg shape. Occasionally, more than one pictorgram may be used to help break down complex information, including charts and tables. In this instance, to help maintain clarity, pictograms should be seen on different tinted panels, or be separated by keyline. Pictograms aren't icons - they're more detailed, allowing them to tell a story. While there's a role for pictograms on some digital communications, functional icons are designed to work at extremely small sizes (less than 20px) on our websites and mobile devices.
As a convenient alternative to photography, or as a visual approach in their own right, illustrations add a contemporary graphic clarity to our communications. Illustrations are intended for print, online and video use and are reserved for campaign creative or digital channels. They should not be used on regular brochures and flyers or for high-profile TV campaigns. The style is characterised by interesting, quirky, people-based scenarios depicting everyday situations. It is graphic and two dimensional in style, utilising simple props and clean backgrounds.
Each illustration takes on a colour theme led by one bright colour from the colour palette. The bright appears either as the background colour or as the dominant colour within the illustration content. The bright colour is supported by its corresponding deep colour and a range of tints of both the bright and deep colours represent shading. Where the bright colour is the dominant colour within the illustration content, Light Grey should be used as the background colour.
As illustrations follow a consistent visual style, they should not be commissioned without discussion with the MLC Life Insurance Brand Team. Illustrations should not depict perspective. Shadows where they appear, should be a single line that is parallel to the base of the illustration.
MLC Life Insurance has licensed use of a set of Font Awesome icons, which can be used as functional icons on our digital platforms - as pairings for links, menu items, buttons and input fields. Icons inherit the font size and colour of the icon's container.
The above selection of icons are in already use across MLC Life Insurance products. In addition to labels, all icons should include alternative text to meet the accessibility guidelines (WCAG 2.0 Level AA). Read more about alt -text.
Try not to overuse icons on a page, up to three is usually a good limit. Icons are designed to help drive action and facilitate navigation. The light outlined versions of icons availale are the preferred styling for icons used by MLC Life Insurance. We aren't limited to a certain subset of icons, as long as the intent is lcear and the choice is approved by the MLC Life Insurance Brand Team. Chosen icons must be relevant for the concept they are used to represent. The default colour for icons is Charcoal. Icons may be inversed for specific applications and contained in a circle.
