Graphics

CORE GUIDANCE

Graphics

Collage of different color graphic patterns.

Overview

Inspired by the overlapping shapes of our logo, our graphics showcase the MetLife brand and help bring it to life—using our calming and approachable color palette to create brand recognition. We have a broad set of assets that can be used across all digital communications.

Guidance

Accessibility

Graphics

Graphic 1
Graphic 2
Graphic 3
Graphic 4
Graphic 5
Graphic 6
Graphic 7
Graphic 8
Graphic 9
Graphic 10

Gradients

Gradient 1
#000016-#1E4C76
Gradient 2
#1E4C76-#007ABC
Gradient 3
#278280-#0061A0
Gradient 4
#379B94-#0090DA
Gradient 5
#DB095B-#0061A0
Gradient 6
#A4CE4E-#0090DA

Guidance

In digital, we use graphics to bring brand design elements into key moments—like headers and backgrounds—to add visual emphasis and create ownable moments in our communications.

Marketing

When used in branded communications (e.g., social posts, digital ads or website headers), our graphics serve to add a sense of depth and brand recognition.

Do

Create graphic and emotional moments.

  • Pair graphics with text such as headlines and quotes to elevate branded communication.
  • Adjust the layout, crop, and graphic pattern used to call focus to the main content.
  • Use graphics behind elements like photography to create layers and therefore depth with visuals.
Do

Surprise and delight.

  • Use graphics to surprise and delight for success states throughout a communication.

 

Do

Use graphics consisting of the primary color palette.

  • Avoid darker or lighter graphics that aren’t our primary blues and greens.
Three phones showing use of graphics in digital design work.
Don't
  • Graphics should never be the main focus of a layout.
Screen showing graphic as more prominent than image of a baby.

User Interface

Use graphic patterns as a subtle way to bring the brand through in digital interfaces. 

Do

Use graphics in main sections to draw emphasis.

  • Use graphics on headers or backgrounds for main display moments.
  • Use graphics on cards that represent MetLife plans and/or agents.
Do
Create graphic congratulatory moments.
  • Use full bleed background graphics for success states and other congratulatory moments.
Do

Be mindful of where type is placed over a graphic element.

  • As a general rule, try to place typography over a single color in a multi-colored graphic.
Three phone screens showing use of graphics in UI moments.
Don't
  • Overuse gradients or graphics. As a general rule, don’t use more than one in any screen moment.
Example UI moment with too many graphic elements.
Don't
  • Manipulate a graphic’s shape or color.
Example graphic in the wrong color and shape.

Accessibility

MetLife is committed to designing and developing digital experiences that all our customers are able to use. Be sure to only use combinations of graphics and type color that pass accessibility standards.

Do

Design using combinations of graphic elements and typography that meet accessibility standards for contrast.

Do

For background colors with foreground text, use these combinations.

Gradient and pattern combinations with text.
Do

Use our graphics and gradients as decorative elements or accent colors.

  • Using the visual elements as embellishments can enhance the design without compromising our accessibility standards.
Phone and laptop image showing use of graphics in UI moments.
Don't
  • Use graphics or gradients as backgrounds that don’t pass our accessibility color standards.
Example UI moment that don’t pass accessibility color standards.

Color Contrast

See our more extensive guidelines about ADA compliance and color contrasts on the color page.
Learn More