BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Typography

H1 / MetLife Circular Bold / 26px, 30 line /

Header

H2 / MetLife Circular Bold / 20px, 24 line /

Header row

Subhead 1 / MetLife Circular Normal / 18px, 26 line /

Header subhead, search field Deviation from web fonts

Feature Text (Circular) / MetLife Circular Bold / 16px, 24 line /

Header row on dialog box, secondary action buttons

Feature Text (Noto Sans) / Noto Sans Bold / 16px, 24 line /

Data row column 2, 3

Body / Noto Sans Regular / 16px, 24 line /

Body, List item

H3 / Noto Sans Bold / 14px, 20 line /

Button text (uppercase), data row with subhead and two columns

H4 / MetLife Circular Bold / 14px, 20 line /

Section headers (uppercase) Deviation from web fonts

Subhead 2 / Noto Sans Regular / 14px, 20 line /

Subhead for header row

Caption / Noto Sans Regular / 12px, 18 line /

Subhead for data row with subhead and two columns, caption text

STATUS / METLIFE CIRCULAR BOLD, UPPERCASE / 10px, 12 line /

Status badge (uppercase) Deviation from web fonts

Usage

MetLife Circular is used for all headers. Noto Sans is used for all body copy, labels and data.

Typography usage 1st example

Actionable text and links on blue are white.

Typography usage 2nd example
Typography usage 3rd example
Typography usage 4th example

Actionable text is MetLife Blue 2 (#007ABC) with the exception of dropdowns and accordions.

Typography usage 5th example

In tables, column 2 and 3 are bold.

Colors

Text links and actionable items on white are MetLife Blue 2 (#007ABC)

Text links and actionable items on blue background are white (#FFFFFF)

Headers on white are black (#000000)

Headers on blue are white (#FFFFFF)

Body text on white is MetLife Darkest Gray (#333333)

Status badge is white text (#FFFFFF) on MetLife Darkest Gray (#333333)