BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0
UI Kits  

UI kits  are groups of elements that function together as a unit. The elements in MetLife’s pattern library have clear intended use within either marketing experiences, transactional experiences, or native mobile sites.

Marketing UI

The Evolution marketing components were developed for the relaunch of metlife.com in late 2019 (in the U.S). These components have been designed with global marketing requirements in mind, and are available for use on Adobe Experience Manager. They include a new pathing tool that supports personalized experiences tailored for multiple audiences, and specialized components and templates for content marketing.

Marketing UI

Download

downloadMarketing UI Kit
file size 288 mb

Marketing UI Library
View Components

Marketing UI Specs
View Dev Link

Transactional UI

MetLife’s Transactional UI Patterns are designed for collecting and managing data in a sales or service context. Use these elements to build transactional experiences.

New additions to this section of the library include conversational UI for data capture, and data visualization. (These patterns are not currently available on Adobe Experience Manager.)

Transactional UI

Download

downloadTransactional UI Kit
file size 17 mb

Transactional UI Library
View Components

Transactional UI Specs
View Dev Link

Native Mobile

These market-agnostic patterns were created specifically for use within mobile apps and global MetLife mobile products. These patterns are not intended to be used for responsive web experiences.

Many of the patterns have an associated animation which illustrates the transitions and micro-interactions. It is important that the patterns are built with their associated transitions and micro-interactions.

Native Mobile

Native Mobile Library
View Components