Click here for Version 6.0Click here for Version 6.0



(AEM 1.0 components and design system launched in 2016)BehaveRespectfully
LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System Version 7.0  (April 2020)

MetLife’s Design System empowers our UX with consistency, efficiency and brand-fidelity. Our patterns and visual language lend cohesion and familiarity to MetLife user experiences across our platform.

MetLife’s UX Design System is built using Adobe Xd, which is the enterprise standard for designing all digital experiences.

Building Blocks of Design

Our design system enables you to build experiences that are comprised of Standards and UI Kits. UI Kits are collections of reusable components, which are used to design experiences and build prototypes.

Standards

Standards include the most basic patterns such as buttons and form fields.
 
Show me >

UI Kits

UI kits feature patterns for marketing, transactional and mobile experiences.
 
Show me >

Prototypes

Prototypes are best-in-class examples that show how Standards & UI Kits combine to create experiences.
Show me >

Getting Started

UX Foundations
Learn the guiding principles driving UX at MetLife, and the fundamentals that will help you apply these principles to your work.

Brand Basics
Find everything you need to correctly apply MetLife’s logo, typography, colors, icons, pictograms and photography.

Accessibility
Understand what ADA compliance means at MetLife, and how to be compliant.
 

Layout & the Grid
Gain an understanding of overall layout rules, and how our responsive grid behaves.