notifications Updates to Color Palette and Photography

Brand & Design Guidelines

These guidelines demonstrate how to use the M Financial brand and assets, including our brand logos, colors, icons, and typography.

If you have any questions, or would like our brand team to review materials, please contact brand@mfin.com.

A computer mouse icon indicates scrolling

Purpose & Vision

The M Financial brand reflects our focus on providing an exceptional client experience, our entrepreneurial spirit, and our commitment to transforming the life insurance industry.

Look & Feel

Select a tile to jump to that section.

The M Logo

Our logo is our calling card. It’s the most recognizable symbol of who we are and what we do, and we consider it a valuable asset that should never be compromised.

Please follow all guidelines for how, when, and where we use the M logo.

Highlights

  • Horizontal logo preferred
  • Do not distort or recolor
  • Use registered versions
  • Ensure size and space requirements are met
  • Vector logos available from brand@mfin.com
Horizontal Orientation
Horizontal M Financial Group Logo
Minimum Horizontal Width

On Screen 149px wide
In Print 1.9” wide

Vertical Orientation
Vertical M Financial Group Logo
Minimum Horizontal Width

On Screen 88px wide
In Print 1.22” wide

Alternate Treatments
Horizontal M logo in CyanHorizontal M logo in black
Vertical M  logo in black
Vertical M logo in cyan
Horizontal M logo in white with black MHorizontal M logo in white with cyan M
 Vertical M logo in white with black M
Vertical M logo in white with cyan M
Good Visibility
Visibility of logo on different color backgrounds

Don't place the logo above colors, images, or patterns that prevent it from being easily viewed.

No Off-Brand Treatment
Incorrect use of logo by stretching or recoloring

Please do not change the colors, transparency, or shape of the logo.

Proper Spacing
Example of spacing requirements around M logo

Use the height of the "M" as seen here to ensure adequate space from other objects and text.

The M Badge

Sometimes less is more. The M badge should only be used when it’s clearly understood as a symbol for M Financial Group. Context is key.

NOTE: The "m" text should never be removed from its bounding box.

M Badge in black
M Badge in cyan
M Badge in white with black M
M Badge in white with cyan M

Color Palette

Colors go hand in hand with our logo as the most distinctive elements of our brand. Our palette has been distilled to a limited but impactful range of colors.

For additional versatility in design applications, lighter and darker tones are permitted.

Highlights

  • Use Blueberry color (dark blue) for text links
  • ADA alternative for Ice (pure blue) in web and digital applications is #009EE0
  • List color description when applicable*
  • Tints (lighter variation) and shades (darker variation) of brand colors if needed

*To comply with Universal Design, it is important to also include a color description rather than ambiguous color names. This ensures that those with varying color visions can properly identify or select a brand color. We should include color descriptions when we are calling out the color by name or when knowing the color is important. Examples can include brand directions, color selections/palettes, alt tags, bar/pie charts, infographics etc.

New Primary Colors

Primary colors used will be Pepper (mostly black), variations of blue, and light gray.

Pantone
CMYK
RGB
HEX

PEPPER
Mostly Black
Pantone Black 6C
84, 77, 56, 75
13, 14, 32
#0D0E20

TWILIGHT
Very Dark Blue
Pantone 2767C
100, 83, 42, 39
14, 46, 79
#0E2E4F

INDIGO
Dark Blue
Pantone 7692C
97, 68, 21, 5
4, 88, 140
#04588C (links)

SEASIDE
Strong Blue
Pantone 7461C
86, 45, 5, 0
0, 122, 183
#007AB7

SMOKE
Light Gray
Pantone 663C
7, 3, 3, 0
234, 238, 241
#EAEEF1

New Secondary Colors

Secondary colors include Ice (pure blue) which will now be our accent color, as well as variations of gray. Chill (white) will serve mostly as a background color or text.

Pantone
CMYK
RGB
HEX

ICE
Pure Blue
Pantone 306C
100, 0, 0, 0
0, 177, 255
#00B1FF
#009DE0 (ADA Alt)

STEEL
Dark Gray Blue
Pantone Cool Gray 7C
45, 36, 35, 1
147, 149, 152
#939598

SILVER
Gray Blue
Pantone Cool Gray 4C
26, 20, 20, 0
188, 190, 192
#BCBEC0

CHILL
White
NA
0, 0, 0, 0
255, 255, 255
#FFFFFF

Typography

Distinctive typefaces are an important part of M brand. We selected Futura PT as our heading font because of its clean, modern, distinctive, and premium feel. Headlines and subheads and button fonts should always consist of Futura PT.

For extended passages of text like paragraphs and fine print, or numbers and data, we’ve selected Proxima Nova.

System & Email Alternatives

When Adobe Typekit integration is not possible, or when used in Microsoft templates:
  • Arial in lieu of Futura PT
  • Calibri in lieu of Proxima Nova

Character Styling

Heading 1

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Futura PT
600/Demi
44px/33pt
Normal/0
53px/1.2x/Normal/Auto
Sentence case
Pepper or Chill
Mostly Black or White
13, 14, 32 or 255, 255, 255
#0D0E20 or #FFFFFF
Black 6C
84, 77, 56, 75 or 0, 0, 0, 0

Heading 2

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Futura PT
400/Book
36px/27pt
0.05em/50
43px/1.2x/Normal/Auto
All Caps
Pepper or Chill
Mostly Black or White
13, 14, 32 or 255, 255, 255
#0D0E20 or #FFFFFF
Black 6C
84, 77, 56, 75 or 0, 0, 0, 0

Heading 3

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Futura PT
600/Demi
36px/27pt
Normal/0
43px/1.2x/Normal/Auto
Title Case
Pepper or Chill
Mostly Black or White
13, 14, 32 or 255, 255, 255
#0D0E20 or #FFFFFF
Black 6C
84, 77, 56, 75 or 0, 0, 0, 0

Heading 4

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Futura PT
600/Demi
24px/18pt
Normal
28px/1.2x/Normal/Auto
Sentence case
Pepper or Chill
Mostly Black or White
13, 14, 32
#0D0E20
Black 6C
84, 77, 56, 75

Heading 5

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Futura PT
600/Demi
20px/15pt
Normal
24px/1.2x/Normal/Auto
Sentence case
Pepper or Chill
Mostly Black or White
13, 14, 32
#0D0E20
Black 6C
84, 77, 56, 75

Quote

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Futura PT
600/Demi
30px/22pt
Normal
36/1.2x/Normal/Auto
Sentence case
Pepper or Chill
Mostly Black or White
13, 14, 32
#0D0E20
Black 6C
84, 77, 56, 75

Body

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Proxima Nova
400/Regular
16px/12pt
Normal
28px/1.5x/18pt
Sentence case
Pepper or Chill
Mostly Black or White
13, 14, 32
#0D0E20
Black 6C
84, 77, 56, 75

Small Body or Footnote

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Proxima Nova
400/Regular or Italic
11px/8pt
Normal
13px/1.2x/Normal/Auto
Sentence case
Pepper or Chill
Mostly Black or White
13, 14, 32
#0D0E20
Black 6C
84, 77, 56, 75

Font Family
Font Style
Font Size
Letter Spacing
Line Height
Capitalization
Brand Color
Color Description
RGB Color
HEX Color
PMS Color
CMYK Color

Futura PT
600/Demi
16px/12pt
Normal
28px/1.5x/18pt
Title Case
Indigo or Chill
Dark Blue or White
4, 88, 140
#04588C
NA
NA

Heading 1

h1 { font-family: futura-pt, san-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 44px;
  letter-spacing: normal;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: none;
}

Heading 2

h2 { font-family: futura-pt, san-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  letter-spacing: 0.5em;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: uppercase;
}

Heading 2

h3 { font-family: futura-pt, san-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 36px;
  letter-spacing: 0.5em;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: capitalize;
}

Heading 4

h4 { font-family: futura-pt, san-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 24px;
  letter-spacing: normal;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: normal;
}

Heading 5

h5 { font-family: futura-pt, san-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: normal;
}

Quote

blockquote { font-family: futura-pt, san-serif;
  font-weight: 400
  font-style: italic;
  font-size: 30px;
  letter-spacing: normal;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: normal;
}

Body

p { font-family: proxima-nova, san-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  letter-spacing: normal;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: normal;
}

Small Body or Footnote

small { font-family: proxima-nova, san-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  line-height: normal;
  color: #0D0E20/#FFFFFF;
  color: rgba(13, 14, 32, 1);
  text-transform: normal;
}

a { font-family: proxima-nova, san-serif;
  font-weight: 400
  font-style: italic;
  font-size: 12px;
  letter-spacing: normal;
  line-height: normal;
  color: #0058A4/#FFFFFF;
  color: rgba(0, 85, 164, 1);
  text-transform: normal;
  text-decoration: underline;
}

printQuick Brand PDF ›

Photography

As leaders in life insurance and financial services for high net worth clients, M Financial’s approach to photography is one of sophistication.

Please avoid cliches of standard stock photography -- photos should never look as if they are staged. Please approach from the perspectives shown below:

Show

  • Genuine and authentic
  • Diversity among people
  • True to color
  • Well lit and balanced
  • Accurate place and time
  • Business-related subjects should be professionally attired

Avoid

  • Subjects looking into camera
  • Washed out colors
  • Cliches and metaphors
  • Black-and-white images
  • Blown out lighting
  • Stereotypes
  • Outdated (i.e., fashion or technology)

Photography Examples

Our primary direction for photography allows a mixture of macro, abstract, and architectural elements that afford a liberty of interpretation under an over-all premium aesthetic.

Key attributes: premium, balanced, sophisticated, optimistic, elegant

an interesting organic patternSpiral Staircasefiber opticsskyscrapers shot from belowarchitectural support structure in orangearchitectural close-up shimmering glass

To be used on materials that are written directly for High Net Worth clients. Examples include properties like Participant Perspectives, Magnastar, and M Wealth.

Key attributes: Luxury settings, if people are shown - avoid faces. Subjects should be in the act of contemplation.

A boat at dusk with the shoreline in the distanceA couple looking out from a balcony at the oceanA close up of a person holding a bottle and two champagne glassesA close up of a person holding a tablet computerAn overhead view of a boat moving across the waterIn the backyard of a home with a swimming pool in the foreground

To be used on materials where business settings make sense. Examples are properties like: Magnet, HR Recruiting, Year in Review, M News Online, Mfin.com.

Key attributes: use real photos of the M Community whenever possible. Please contact brand@mfin.com for access to our photo library. If additional photos are needed, please use stock where subjects are not identifiable. Office environments should be modern, and dress should be business-professional.

An M Financial Employee presenting to a small groupTwo attendees at a the National Advisors ConferenceM Employees listening to a presentationClose up of a man in a suit sitting downOverhead view of businessmen shaking handsTwo business men shaking hands over a contract on the desk

*Images shown above are for educational purposes only and not intended for official use

Brand Pattern & Angle

Patterns are used within M's brand to add texture, versatility, and visual interest. They should be complementary within the context of your design, and never the primary focus. Use as a repeating element in digital implementations.

Highlights

  • Use patterns sparingly
  • Use only approved patterns
  • Approved stroke colors include Ice, Chill, and Smoke
Smoke Pattern
Illustrated pattern example
Ice Pattern
Illustrated pattern example
Pattern Over Gradient
Illustrated pattern example
Pattern Over Color
Illustrated pattern example
M's Angle
The M brands angle graphic example

M Financial utilizes an angled content box as a primary branding element. More than a design element, the angle symbolizes dynamic movement and momentum and helps differentiate our brand from our more traditionally minded competitors.

How to Use:

  • In most cases, the angle should be -25° on its top edge
  • A rectangular M Black depth layer can be added below the main layer
  • The shadow should only be utilized when the orientation matches the example shown, and if there is enough clear space to the right and bottom
  • Alternative orientations and degrees of the angle (without shadow) may be used

Iconography

Visual icons are a part of M Financial's brand vocabulary. These symbols, shapes, and elements allow us to communicate concepts succinctly in a way that words cannot. The way our icons are designed and implemented reinforces and supports our brand personality.

Highlights

  • Linea Icons (Primary)
  • Material Icons (Navigation)

Primary icon library

Linea Icon Suite

This is our primary icon family and is used across the brand. If your iconography needs are not covered via linea's suite of icons, please contact brand@mfin.com for additional or custom icons.

Variations of Linea (see below) can be utilized to add interest and increase flexibility

A black outline of a house icon with white shadowA black outline of a gear icon with white shadowA black outline of a inbox icon with white shadowA black outline of a calendar icon with white shadow
A black outline of a map icon within a white circleA black outline of a microphone icon within a white circleA black outline of a message icon within a white circleA black outline of a calculator icon within a white circle
A black outline of a compass icon with accents of color shapesA black outline of a lightning bolt icon with accents of color shapesA black outline of a photograph icon with accents of color shapesA black outline of a trophy icon with accents of color shapes
A black outline of a clock icon within a black outlined circleA black outline of a cloud icon within a black outlined circleA black outline of a ticket icon within a black outlined circleA black outline of a laptop icon within a black outlined circle
Linearicons

Linearicons can be used sparingly. Please be mindful that stroke and weight match.

Semantic UI icons

Material Design Icon Suite (Filled)

In semantic UI situations, where icons work as visual descriptors for a user function, we've chosen Material Design Icons. This icon library is ubiquitous, and their functions are understood quickly and directly. Please limit size to 20px or smaller.

language
home
filter_alt
search
account_circle
settings
explore
notifications

Cobranding

M Financial is owned by its Member Firms, and we produce documents, brochures, and white papers expressly for Member Firm use with clients and key advisors.

Highlights

  • Aim for balance between both logos when cobranding
  • Make sure to obtain permission from brand@mfin.com before cobranding
M Financial Member Firm Logo

Our Member Firm logo identifies Member Firms as a part of M’s exclusive network.

Examples of Cobranded Documents

Our documents are designed to showcase Member Firm logos in a prominent location. We want clients and key advisors to know that the Member Firm is their primary contact, and that the information in each document is produced with M Financial's best-in-class thought leadership.

An example of a Cobranded document
An example of a Cobranded document
Strategic Partners & Sponsors

Cobranding shows a partnership between M Financial and another company and represents an exchange of credibility between brands. We use cobranded logos where both brands have ownership, like a collaborative whitepaper or presentation related to our partnership.

Before you use a cobranded logo, it is your responsibility to obtain and understand the right permissions from M Financial and the partner or customer. Strive for parity of visual weight when designing these layouts.

For more information on obtaining permissions, email brand@mfin.com.

Contact Us

Who "owns" the brand? All of us. In addition to M Financial associates, every creative partner and vendor we work with has a responsibility to support and protect the M brand. To help shape and guide the way it's interpreted and implemented, we formed the M Brand Committee.

Have a question or need assistance? Send us an email.