BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Universal Patterns

Login Widget

There is 1 variation of the login widget.

Login Widget

Login widget variation -primary

There is 1 variation of the login widget. The login widget allows users to sign in to their account. The widget is made up of a card positioned atop the distinctive round header. The round header contains a photographic image. The card holds the MetLife logo in full color, text fields for user login credentials, checkboxes, and a button and text link.

More Menu

There is 1 variation of the more menu.

More Menu

Login widget variation -primary

The more menu allows users to access content that is not accessible from the top-level bottom navigation menu, like account settings and MetLife support.

Onboarding

There are 2 variations of onboarding.

App Overview

Login widget variation -primary

The app overview outlines high level capabillities of the app. This would be seen when launching the app for the first time.

Feature Onboarding

Login widget variation -primary

Feature onboarding introduces specific features of the app. This would be seen when launching the app for the first time.

Feature Walkthrough

There is 1 variation of the feature walkthrough.

Feature Walkthrough

Login widget variation -primary

The feature walkthrough introduces specific features in context, as a user would see them in the app. Existing users will see a feature walkthrough when new features are added, or upon gaining access to further parts of the app.

Background Patterns

There are 2 variations of background patterns.

Blue Background Pattern

Login widget variation -primary

A background pattern can be added to simple screens, to add variety and visual excitement. The blue background pattern should be used with white text.

Gray Background Pattern

Login widget variation -primary

The gray background pattern should be used with dark text.