metlife’s pattern library spec sheets...letter spacing: .5px shadow: #333333, blur 4px, spread 1px...

MetLife’s Pattern LibrarySpec Sheets

Issue 2: September 2018

Contents1. Foundational Patterns

Buttons

Links

Text Fields

Forms

Drop Down

Validation & Messaging

Radio Buttons

Check Marks

MetLife Pattern Spec SheetsIssue 2: September 2018

2. Examples

Lead Form

Login

Get a Quote


1. Foundational PatternsButtons

Links

Text Fields

Forms

Drop Down


Radio Buttons

Check Marks


Buttons

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

Buttons Overview

Foundational Patterns

Primary Button Secondary Button

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

On Load

Light Background

On Load

Rollover/Press

Rollover/Press

On Focus

On Focus

MetLife Pattern Spec Sheets Issue 2: September 2018

Primary Button Secondary ButtonDark Background

FIND OUT MORE

On Load

Rollover/Press

On Focus

Character limit (not to exceed 80% button size)

* Text is in All Caps

FIND OUT MORE

FIND OUT MORE

20px

40px

Background: #007ABCText Color: #ffffff Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background:#0061a0Text Color: #ffffff Font: Noto Sans 14pxText Style: Bold, Underline *(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Background: #007ABCText Color: #ffffff Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px

12px

12px



Primary Button

Notes

Light Background

FIND OUT MORE

FIND OUT MORE

On Load

Rollover/Press

On Focus

FIND OUT MORE

FIND OUT MORE

20px

10px

10px40px

Background:#a4ce4eText Color: #333333 Font: Noto Sans14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background:#B7DD58Text Color: #333333 Font: Noto Sans14pxText Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Background:#a4ce4eText Color: #333333 Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px

MetLife Pattern Spec Sheets

Primary Button


* Text is in All Caps

Notes

Dark Background

FIND OUT MORE


FIND OUT MORE

On Load

Rollover/Press

On Focus

20px

40px10px

10px

Border Color: 2px, #007ABCText Color: #007ABCFont: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background: #007ABCText Color: #ffffff Font: Noto Sans 14pxText Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Border Color: 2px, #007ABCText Color: #007ABC Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE


Secondary Button


Notes* Text is in All Caps

Light Background


FIND OUT MORE

On Load

Rollover/Press

On Focus

20px

40px10px

10px

Border Color: 2px, #FFFFFFText Color: #FFFFFF Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background:#FFFFFFText Color: #007ABC Font: Noto Sans 14pxText Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Border Color: 2px, #FFFFFFText Color: #FFFFFF Font: Noto Sans14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px

FIND OUT MORE

FIND OUT MORE


Secondary Button


Notes* Text is in All Caps

Dark Background

FIND OUT MORE


A minimum button and maximum button size (with padding constraints).

Rule for copy that exceeds maximum width—gets pulled out of button and CTA becomes shorter

Get more information about thisinsurance policy

VIEW

30px

Desktop

GET MORE INFORMATIONGO

Min size Max size


Button Sizes

Foundational PatternsIssue 2: September 2018


Links


On Load

Rollover/Press

On Focus

View More

View More

View More

Text Color: #007ABC Font: Noto Sans 14pxText Style: Bold, Underline, Titlecase

Text Color: #0061A0 Font: Noto Sans 14pxText Style: Bold, Titlecase

Text Color: #007ABCFont: Noto Sans14pxText Style: Bold, Underline, Titlecase Shadow: #333333, Blur 4px, Spread 1px

Primary Text Link

Foundational PatternsMetLife Pattern Spec Sheets

Light Background


On Load

Rollover/Press

On Focus

Text Color: #FFFFFF Font: Noto Sans 14pxText Style: Bold, Underline, Titlecase

Text Color: #FFFFFF Font: Noto Sans 14pxText Style: Bold, Titlecase

Text Color: #FFFFFFFont: Noto Sans 14pxText Style: Bold, Underline, Titlecase Shadow: #333333, Blur 4px, Spread 1px

Primary Text Link


Dark Background

View More

View More


View More


Text Fields

First Name

First Name

First Name

John

Form Field On Load

Form Field Selected State

First Name

JohnFirst Name

Form Field Filled State

10px

10px

20px25px

Field Border Color: #757575Field Label Text: Noto Sans13px #757575 Corner Radius: 2px

Field Border Color: #007ABCField Label Text: Noto Sans 12px Bold #333333 Corner Radius: 2px

Field Border Color: #757575Field Label Text: Noto Sans 12px #333333 Text: Noto Sans 13px #3333333Corner Radius: 2px

Text Field


Hint text: When user types, the field turns into a blank and auto ‘jumps’ to next entry when format is completed.

Notes

Simple Field


Form Field On Load


10px

10px

20px

Field Border Color: #757575Field Label Text: Noto Sans 13px #757575 Corner Radius: 2px

Field Border Color: #007ABCField Label Text: Noto Sans 12px Bold #333333 Hint Text: Arial 13px, #757575Corner Radius: 2px


Text Field



Notes

With Hint Text

Social Security Number


|XXX-XX-XXXX

Social Security Number|XXX-XX-XXXX

Social Security Number123-45-XXXX

123-45-6789Social Security Number

123-45-6789Social Security Number



•••••••••


123 - 45 - 6789


123 - 45 - 6789

ity Numberty NumberNumberty NumberNumber Social Security Number

XXX - XX - XXXX


Social Security NumberField Border Color: #757575Field Label Text: Noto Sans13px #757575 Corner Radius: 2px

Field Border Color: #007ABCField Label Text: Noto Sans 12px Bold #333333 Text: Noto Sans 13px #333333Hint Text: Noto Sans 12px, #666666Corner Radius: 2px


10px

20px 25px

Form Field On Load


View/Hide Selected & Unselected

10px

Show/Hide Icon

Vertically centered

Text Field

Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018


Notes

With View Icon

Single Line

Social Security Number Span Two Lines Lorem Ipsum




















Social Security Number Span Two Lines Lorem IpsumSocial Security Number Span Two Lines Lorem Ipsum






Social Security Number Span Two Lines Lorem IpsumSocial Security Number Span Two Lines Lorem Ipsum

Text Field Option


### - ## - ####

••• - •• - ••••

123 - 45 - 6789

- ## - ####

123 - 45 - 678#

Social Security NumberOn Load

On Click/Press

Active State

On Release

On Release

Error

123

Social Security Number must contain 9 characters







Forms

BUTTON

Zip Code

Form Field On Load

BUTTON

Username

Password

BUTTON

25px

30px

30px

Zip CodeField Border Color: #757575 Field Label Text: Noto Sans13px #757575 Corner Radius: 2px

Background:#007ABCText Color: #ffffffFont: Noto Sans14pxText Style: BoldCorner Radius: 2px

Form


Simple forms with variations of multiple fields

Notes

Basic Form


Drop Down

Drop Down On Load

Drop Down Rollout

Drop Down On Click (Selected)

I want to...

10px 10px

10px

10px

10px

10px

Field Border Color: #007ABCField Label: 13px #333333 Bold Text: 13px #333333Hover Background: #007ABC Hover Text: 13px #FFFFFF, Bold

I want to...

View Online Activity

View Payment History

View Automatic Payment

I want to...

View Online Activity

View Payment History


Field Border Color: #757575 Field Label Color: #333333

Field Selection Font: Noto Sans 13px Field Border Color: #757575

Drop Down


Single Line

I want to...


NotesAfter user clicks to make a selection from within the list of options shown, apply selected state as shown below. It is at this point when the floating field style is applied.

Drop Down On Load

Drop Down Rollout

Drop Down On Click (Selected)

Field Border Color #757575Field Label Color: #333333Field Label Font: 13px

Field Border Color: #757575Selection Font: 13px #3333333

Drop down


Dropdowns maximumof 3 lines of text.

Notes

Double/Multiple Lines

Accounts/Policies

Life Insurance - Whole Life Select Policy #3866750

Auto Insurance - NJ MotorcyclePolicy #899812XYZ

10px 10px

10px

10px

10px

10px

Accounts/Policies

Accounts/Policies

Life Insurance - Whole Life Select Policy #3866750

Auto Insurance - NJ MotorcyclePolicy #899812XYZ

Field Border Color: #007ABCField Label: 13px #333333 Bold Text: 13pt #333333Hover Background: #007ABCHover Text: 13px #FFFFFF, Bold

Accounts/Policies

Auto Insurance - NJ Motor...

Payment Method

Direct Deposit

Notes10px 10px

10px

10px

10px

10pxCheck

Payment Method

Credit Card

How will you make your contribution?

How will you make your contribution?

20px

Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet.


Clicking Link

Clicking Linkon Click/Press State

Clicking Linkon Error State

Mobile Phone

### - ### - ####(optional)


On Load

What’s this?

Mobile Phone number must contain 10 characters

What’s this? What’s this?

Mobile Phone (optional)

What’s this?

All messages from Field Text Link show below Error message.

Text Field Validation


Text Tooltip for Text Fields

123


What’s this?


Mobile Phone number must contain 10 characters

123Mobile Phone (optional)

Form Field On Load

Error Invoked

Field Stroke: 1pxField Border Color: #757575 Field Label Text: Noto Sans 13px #757575

Field Specific Text Link: Noto Sans 12px, Underline, #007ABCMessaging Background: #F2F2F2 Messaging Text: Noto Sans13px #333333



What’s this?



What’s this?5px

10px10px

5px

10px




On click, text field label moves to the top of field and specification for text change—see notes above

Notes

Text Tooltip & Show/Hide Link

### - ## - ####

••• - •• - ••••

123 - 45 - 6789

- ## - ####

123 - 45 - 678#

Social Security NumberOn Load

On Click/Press

Active State

On Release

On Release

Error

123


What’s this?

What’s this?

What’s this?

What’s this?

What’s this?

What’s this?


Show/Hide icon is the only icon that sits within field.

All Field specific text links, ie. ‘What’s this?’, ‘Info’, ‘Calciulate’, etc. sit below field.

All messages from Field Text Link show below Error message.



Combination of Text Tooltip & Show/Hide Link






Text Field Validation Examples

Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018MetLife Pattern Spec Sheets

Please enter your SSN.

Please enter your SSN.

XXX - XX - XXXX

XXX - XX - XXXX

Please enter your first name.

Please enter your last name.

Please enter your date of birth.

MM - DD - YYYY

Email Address

Confirm Email

Mobile Phone (Optional)

What’s this?

Form with Multiple ErrorsText Tooltip Text Tool tip and Show/Hide

When link is clicked, message expands and pushes fields below.

Extra space added after combinatiin of Error message and Text Field Link message so user is not confused as to which field the information belongs.

Date of birth

Date of birth

Email address

Email address

123 - 45 - 678#


What’s this?

Social Security number must contain 9 characters

Social Security number

What’s this?

Date of birth

When Text Field Link is clicked, message expands and pushes fields below.

Mobile phone (optional)

What’s this?

Date of birth

Date of birth

Email address

Email address

Mobile phone (optional)

Information tool tip information to go lorem ipsum dolor sit amet lorem ipsum dolor sit amet.

What’s this?

Extra space added after combinatiin of Error message and Text Field Link message so user is not confused as to which field the information belongs.

Confirm Social Security number


First name

Last name

Date of birth


Please make a selection

I Am Interested In

Form Field Error

Please make a selection

5px

I Am Interested In

I Am Interested In

Error Invoked

Field Stroke: 1pxField Border Color: #757575 Field Label Font: Noto Sans 13px #757575

Field Label Text: Noto Sans, 13px, Bold, #333333 Alert Field Border Color: #DB1818Alert Field Background: #FDE8E8Field Stroke: 1pxAlert Text: Noto Sans 13px #DB1818

Dropdown Validation


Dropdown Error Messaging


Radio Buttons

Button Field On Load

Button Field Selected

Time Frame

Time Frame

Time Frame

60 Days

60 Days10px

10px

60 Days

90 Days

90 Days

90 Days

Heading Text Color: #333333 Heading Font: Noto Sans 14px Heading Text Style: BoldField Border Color: #757575 Font: Noto Sans 14pt

Heading Text Color: #333333 Heading Font: Noto Sans 14px Heading Text Style: Bold Circle Color: #007ABC Field Border Color: #007ABC Font: Noto Sans 14pt

5px

Radio Button


*Text is center-alignedto radio button

Notes

Basic


Check Marks

Checkbox On Load

Checkbox Selected

Lorem ipsum dolar sien amit vivamus diem dolar



Text Color: #333333Form Border Color: #757575 Font: Noto Sans 14px

Text Color: #333333Check Mark Color: #007ABC Form Border Color: #007ABC Font: Noto Sans 14px

5px

Checked Fields


*Text is center-alignedto radio button

Notes

Basic

MetLife Pattern Spec SheetsIssue 1: February 2017

2. ExamplesLead Form

Login

Get a Quote

Find a Service Provider

Comparison Table

By clicking Submit, you agree that we* may contact you at the number you've provided, possibly using automated technology or a prerecorded voice, to talk about our products and services. If you don't want to give this permission, you can still get a quote or make a purchase by calling us directly at 1-800-638-5433

*A MetLife company or third party acting on MetLife's behalf.

Contact MetLifeAll fields are required

Call 1-800-METLIFE

All Other Contact Options

SUBMIT

First name

Last name

City

Address

State

Zip code

Phone number

In reference to...

Contact Form

ExamplesMetLife Pattern Spec SheetsIssue 2: September 2018

Log in for Individuals

Forgot Username or Password?

LOGIN

Username

Password

CREATE A NEW ACCOUNT

Login


Examples

With Drop Down

I want to get a quote

GET MY QUOTE

GET MY QUOTE


GET MY QUOTE

Your health

What’s this?

Insurance type

Term length

Tobacco/Nicotine use

State

Date of birth

Gender

Coverage amount

Calculate

Quote Tool


Examples

Steps Options

Term Life InsuranceInsurance type


Calculate

Term Life InsuranceInsurance Type

FloridaState

01 - 01 - 1980Date of birth

FemaleGender

100,000Coverage amount

Thank you.

metlife’s pattern library spec sheets...letter spacing: .5px shadow: #333333, blur 4px, spread 1px...

Documents