BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Shadows

Variations

There are 2 types of shadows.

1. Primary Shadow

Shadow variation 5%

Primary shadow is black (#000000) at 15% opacity, x=0, y=2, blur=15. This is the primary shadow to be used for all elements requiring a shadow that are not the bottom navigation bar.

2. Navigation shadow

Shadow variation 10%

Shadow is black (#000000) at 10% opacity, x=0, y=2, blur=10. This is used for the bottom navigation bar of the screen, but is more subtle than the primary shadow.

Usage

Shadows are used to emphasize or differentiate content from the rest of the page. For cards, they contain important information. Buttons use shadows to draw a user’s attention and suggest that they are actionable. The bottom navigation bar uses a shadow to differentiate navigation from the main page content.

Shadow usage first example

The notification card and circular menu bottons on the home screen use the primary shadow.

Shadow usage second example

The bill card uses the primary shadow, while the footer navigation bar uses the navigation shadow.

Shadow usage third example

The contextual navigation button (green) uses the primary shadow.

Shadow usage fourth example

Provider info cards in list view use primary shadow, while the top button bar uses the navigation shadow.

Shadow usage fifth example

Provider info cards in map view use primary shadow.