BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

MetLife's
UX Design System

Pattern Library

MetLife’s UX philosophy is based on creating repeatable UX patterns of interactions and organizing those patterns into clusters on a consistent, responsive grid – allowing for flexibility of design across marketing and service applications.

Who is this for?

UX Designers

Find visual design assets for the new MetLife brand and UX design system

Download the Sketch file or pattern spec sheet and use the templates for guidance on how to start designing layouts.

Review the accessibility principles to ensure designs are compliant.

UI Developers

Review the grid, patterns and templates for guidance on how to build consistent digital experiences.

Download the reference code HTML/CSS or the code snippets in the pattern library for guidance on UI specifications.

Check the accessibility principles to ensure coded pages are compliant.

Feedback or questions about new design patterns? Please visit the feedback page.

Why we need this.

This pattern library provides a foundational set of user experience design elements for designers, developers, and product owners. It creates consistent user interactions with the brand and supports the goal of a more digital MetLife by helping to:

- Improve overall user experience
- Build consistent interactions across platforms
- Speed up our design and development process
- Strengthen customer perceptions of MetLife