Color palette
White
#FFFFFF
255, 255, 255
Cerulean
#008EDD
0, 142, 221
Cerulean two
#007ABC
0, 122, 188
Peacock blue
#0061A0
0, 97, 160
Black
#333333
51, 51, 51
Sick green
#A2CF42
162, 207, 66
Cool grey
#929294
146, 146, 148
Purpley grey
#AAA9AA
170, 169, 170
White three
#F2F2F2
242, 242, 242
White two
#E3E3E3
227, 227, 227
Lipstick
#E2195B
226, 25, 91
Warm purple
#642F95
100, 47, 149
Marigold
#FFC800
255, 200, 0
Teal blue
#00AAA3
0, 170, 163
Text style catalog
Desktop Header 1
UtopiaStd-Disp, Bold, 45px
Line height: 52px
Desktop Header 1 - (Circular)
MetLifeCircular, Bold, 41px
Line height: 49px
Desktop Header 2
UtopiaStd-Disp, Bold, 40px
Center, Line height: 48px
Tablet Header 1
UtopiaStd, Bold, 36px
Center, Line height: 40px
Desktop Header 2 - (Circular)
MetLifeCircular, Bold, 35px
Center, Line height: 42px
Tablet Header 1 - (Circular)
MetLifeCircular, Bold, 33px
Center, Line height: 39px
Desktop Header 3 Alt (Georgia)
Georgia, Bold, 32px
Line height: 38px
Phone Header 1
UtopiaStd, Bold, 32px
Center, Line height: 36px
Tablet Header 2
UtopiaStd, Bold, 32px
Center, Line height: 38px
Desktop Header 3
UtopiaStd, Bold, 32px
Line height: 38px
Desktop Header 3 - (Circular)
MetLifeCircular, Bold, 31px
Line height: 37px
Tablet Header 2 - (Circular)
MetLifeCircular, Bold, 31px
Center, Line height: 37px
Phone Header 1 - (Circular)
MetLifeCircular, Bold, 31px
Center, Line height: 37px
Tablet Header 3 - (Circular)
MetLifeCircular, Bold, 29px
Line height: 33px
Tablet Header 3 Alt (Georgia)
Georgia, Bold, 28px
Line height: 34px
Tablet Header 3
UtopiaStd, Bold, 28px
Line height: 34px
Desktop PullQuote
MetLifeCircular, Bold, 26px
Line height: 30px
Phone Header 2 - (Circular)
MetLifeCircular, Bold, 26px
Center, Line height: 30px
Phone Header 2
UtopiaStd, Bold, 26px
Center, Line height: 30px
Tablet PullQuote
MetLifeCircular, Bold, 24px
Line height: 28px
Phone Header 3 - (Circular)
MetLifeCircular, Bold, 24px
Line height: 28px
Phone Header 3
UtopiaStd, Bold, 24px
Center, Line height: 28px
Desktop Header 4 Alt (Georgia)
Georgia, Bold, 22px
Line height: 26px
Phone PullQuote
MetLifeCircular, Bold, 22px
Center, Line height: 26px
Desktop Header 4 - (Circular)
MetLifeCircular, Bold, 22px
Line height: 28px
Desktop Header 4
UtopiaStd, Bold, 22px
Line height: 26px
Desktop Subheader 3
UtopiaStd, Regular, 22px
Line height: 26px
Tablet/Phone Header 4 Alt (Georgia)
Georgia, Bold, 20px
Line height: 24px
Tablet/Phone Header 4 - (Circular)
MetLifeCircular, Bold, 20px
Line height: 24px
Tablet/Phone Header 4
UtopiaStd, Bold, 20px
Line height: 24px
Tablet Subheader 3
Georgia, Regular, 20px
Line height: 24px
Desktop Feature Text
NotoSans, Regular, 20px
Line height: 28px
Desktop Feature Text - (Circular)
MetLifeCircular-Normal, Regular, 18px
Line height: 26px
Tablet Feature Text
NotoSans, Regular, 18px
Line height: 26px
Phone Feature Text - (Circular)
MetLifeCircular-Normal, Regular, 16px
Line height: 24px
Tablet Feature Text - (Circular)
MetLifeCircular-Normal, Regular, 16px
Line height: 24px
Body A
NotoSans, Regular, 16px
Line height: 24px
14/20 Georgia Bold
Georgia, Bold, 14px
Line height: 20px
Link
NotoSans, Bold, 14px
Center, Line height: 20px
Body B
NotoSans, Regular, 14px
Line height: 20px
13/16 Noto Regular
NotoSans, Regular, 13px
Line height: 16px
Phone Caption
NotoSans, Regular, 12px
Line height: 18px
Designs
Desktop
Small Tile Container desktop
0
Medium Tile Container desktop
0
Large Tile Container desktop
2
Tablet
Small Tile Container tablet
0
Medium Tile Container tablet
0
Large Tile Container tablet
7
Phone
Small Tile Container mobile
1
Medium Tile Container mobile
1
Large Tile Container mobile
3