BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Navigation

Variations

There are 3 variations of headers, and 1 bottom navigation. The header is a distinctive rounded shape that always overlays the page background color. Text on headers are white (#FFFFFF) on a dark blue background pattern (#003961) and (#00426E).

1. Header

Header Variation

The header is a distinctive rounded shape that always overlays the page background color.

2. Header with subhead

Header Subhead Variation

The maximum character count for H1 in the header is 16 characters per line, with a two line maximum. The maximum character count for the subhead in the header is 20 characters. The subhead should not exceed one line.

3. Header with contextual navigation

Header Navigation Variation

The header with contextual navigation is used on plan detail pages. When a user taps the green button, a contextual menu expands from the header.

1. Bottom navigation

Header Navigation Variation

The bottom navigation bar allows constant access to top-level destinations in the app.

States

Headers do not have pressed states as they are not actionable alone. Styles used within headers should inherit their styles' rules. (For ex. normal link styles apply within a header.) In the scrolled state, the rounded shape of the header animates to a straight line and the font size is reduced.

Header

Default

Header scrolled state

Extended

Header default state

When scrolling, the rounded shape animates to a straight line and the font size is reduced to transition into the default header.

Header with subhead

Extended

Header with subhead default State

The extended heaader can have a subhead, but when scrolling, the subhead fades out and the header transitions to the default header.

Header with card

Extended

Header with card default State

Extended header with a card. As a user scrolls, cards go under the scrolled header, unless the card is sticky.

Default with sticky card

Header with card default State

Default header with a sticky card when scrolled.

Header with contextual navigation

Default

Header with contextual navigation scrolled state

Default header with contextual nav button. When scrolling from extended header, button shrinks as it moves up with the header, and stays fixed below the header text. Any page content passes behind the header and contextual nav button.

Extended

Header with contextual navigation default state

Extended header with contextual nav button. Button is MetLife Green (#A4CE4E) and chevron is MetLife Darkest Gray (#333333).

Expanded

Header with contextual navigation expanded state

Expanded contextual navigation.

Bottom navigation

Default

Header scrolled state

The bottom navigation items are MetLife Darkest Gray (#333333) by default.

Selected

Header default state

The selected state of a bottom nav bar item is MetLife Blue 2 (#007ABC).

Focused

Header scrolled state

Usage

The header provides high-level context for the page and orients the user in the app. Actions for page navigation may live in this location. The bottom navigation bar allow a user to access the most important features of the app at all times. It is only temporarily unaccessible within transactional processes.

Header usage example 1
Header usage example 2

Spacing

Space between top of screen and overlaid card – 190px

Space between Subhead 1 container bottom and overliad card – 10px

Space between H3 container top and overlaid card – 10px

Space between data row container top and line – 25px

Space between dropdown and header row – 25px

Space between header row container bottom and subhead container top – 5px

Space between header row with subhead container bottom and line - 10px

Space between data row with subhead container top and line - 15px

Space between dialog box header container bottom and line – 10px

Space between dialog box body text container top and line – 15px

Header spacing
Header spacing second example
Header spacing third example

Animation

1. Header Scrolling

As a user scrolls, the rounded shape of the header animates to a straight line and the font size is reduced. Fixed items remain on the header as it resizes, but other items, like cards, will scroll behind the header, once it reaches its small, straight state.

2. Contextual navigation

Refer to Navigation: Transitions for contextual navigation animation.

1. Bottom Nav Transition

Bottom nav items live in the persistent navigation bar at the bottom of the screen and are hierarchically on the same level. Bottom nav transitions use native transitions.

For iOS, use the Navigation UITabBarController (https://developer.apple.com/documentation/uikit/uitabbarcontroller).

For Android, use the “Top-level transition" (https://material.io/design/navigation/navigation-transitions.html#peer-transitions).

2. Content Transition

Content items live within a top level nav item, for example, a specific auto plan lives and is accessible within Plans. Content items transition horizontally, bringing the deeper level views on top of the current view. For example, tapping an auto policy will trigger a plan detail view to fade and slide in from the right over the fixed position Plans view. Going back to the Plans view reverses that transition, moving the auto policy detail view to the right, revealing the Plans view behind it.

3. Transactional transition

Transactional items can be accessible from top and second level views. Therefore, they transition up from the bottom of the screen, on top of the fixed position curent view including the bottom nav. This should be the only case when the bottom nav is not present. Closing a transactional item reverses that transition, sending the view down past the bottom of the screen, revealing the past view behind it.

4. Contextual Menu Transition

The Contextual Menu lives on second level views such as a home plan. It provides access to deeper views within and related to the second level view. For example, coverage, payments and claims specific to the home plan.

To open the Contextual Menu, the green circular button can be tapped or dragged. Upon open the header expands downward, on top of the fixed position view behind it. As the header expands, the page title, subhead and if there are icons in the top bar, they all fade out (there should not be any actionable items in the open state of the contextual menu aside from the contextual menu items and the close arrow). The open/close arrow rotates 180 degrees as the green circle fades out. The menu items fade in progressively from top to bottom.

To close the menu, the arrow can be tapped or dragged upward. Upon close, all of the above transition are reversed.