BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Pictogram

Overview

Pictograms help tell our story by visualizing key concepts and information in an approachable and human way.

Used in a supportive role, our pictograms help emphasize and navigate important information and make concepts simple and easy to understand. Pictograms should be used for storytelling and not for navigation.

Basics

Pictogram Symbolism

Pictograms can have a wide range of meanings. They can be more literal, representing a specific object, or more conceptual, representing a broader idea.

Individual pictograms may also haveseveral meanings and be used to represent more than one type of information.

Each will be tagged with several words and phrases associated with potential meanings. We’ll continue to provide an updated library of pictograms for use.

Conceptual

Corporate responsive layout, centered logo

Literal

Corporate responsive layout, left-aligned logo

Background Colors

Pictograms should appear only on White or MetLife Light Gray backgrounds. When using on gray backgrounds, the colors should never blend into the background color.

Co-branded simple microsite

File Format

Pictograms will be available as SVG and PNG file formats.

Pictograms should be used in PNG and SVG file formats. SVGs are crisp and clear at any resolution while offering the smallest file, while PNGs cannot be scaled without introducing a relative amount of pixelation. PNGs are available at standard and @2x sizes. If using PNGs on websites that may be viewed on high-definition mobile or desktop displays, we recommend that the @2x PNG be used so the pictogram does not appear pixelated.

Usage

Pictograms help tell a story by visualizing key concepts and information in an approachable and human way. Use them as a supportive visual element connecting or in place of content in order to help tell a story.

General Pictogram Misuse

Existing pictogram assets should not be modified. Any new pictograms that are created need to be approved by the brand team before publication.

Co-branded simple microsite

Avoid using in a hero.

Co-branded simple microsite

Avoid using on a gray background unless the pictogram does not use gray in the outline.

Design

Form and Scale

Pictograms are drawn on a 20x20 grid using simple, graphic forms. When drawing pictograms, avoid using strokes or small shapes that can get lost at small sizes.

Co-branded simple microsite

Highlights and Shadows

Use highlights and shadows at 0-45- and 90-degree angles to suggest a top-left light source. Sometimes, shadows may have a curved element to suggest depth and help illustrate a form.

Co-branded simple microsite
Co-branded simple microsite

Perspective

Pictograms should be drawn at eye-level, using a front-facing perspective. You should never use an angled perspective or dimension by illustrating the top, bottom, or side of an object.

Co-branded simple microsite

Avoid dimension and angled perspectives.

Co-branded simple microsite

Always use an eye-level, front-facing perspective.

Color Hierarchy

While some pictograms may have more or less of a particular color, our pictogram library has an even balance of MetLife Blue, MetLife Green and neutral colors. MetLife Dark Blue and MetLife Medium Gray may be used for shadows, while MetLife Yellow may be used as an accent.

Co-branded simple microsite
Co-branded simple microsite

Advanced Color Customization & Balance

When using multiple pictograms together, too much of a particular color or too much MetLife Blue and MetLife Green can feel too heavy and saturated. If necessary, advanced users may adjust the pictogram colors, adding more neutrals to create a better overall balance.

Note: Pictograms are available only in full color. If design limits the amount of colors that can be used (such as a gray background), pictograms should be modified in post- production.

Common motifs

Common motifs are elements that are used again and again with small changes like the addition of a badge or additional iconography.

Co-branded simple microsite

Badges and Symbols

Add-ons to base pictograms, for example adding a check mark to a shield, should be done with consistent shapes across the whole suite of pictograms. When making a pictogram like this, copy the badge and symbol, without alteration, from an existing icon to ensure uniformity of shape and scale.Common motifs are elements that are used again and again with small changes like the addition of a badge or additional iconography.

Downloads

Visit the DAM for Pictogram Assets.