metlife’s pattern library spec sheets · 2020. 3. 5. · rollover/press on focus view more view...
TRANSCRIPT
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
MetLife Pattern Spec SheetsIssue 2: September 2018
1. Foundational PatternsButtons
Links
Text Fields
Forms
Drop Down
Validation & Messaging
Radio Buttons
Check Marks
MetLife Pattern Spec SheetsIssue 2: September 2018
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
MetLife Pattern Spec SheetsIssue 2: September 2018
Foundational Patterns
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
Foundational Patterns
* Text is in All Caps
Notes
Dark Background
FIND OUT MORE
Issue 2: September 2018
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
MetLife Pattern Spec Sheets
Secondary Button
Foundational Patterns
Notes* Text is in All Caps
Light Background
Issue 2: September 2018
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
MetLife Pattern Spec Sheets
Secondary Button
Foundational Patterns
Notes* Text is in All Caps
Dark Background
FIND OUT MORE
Issue 2: September 2018
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
MetLife Pattern Spec Sheets
Button Sizes
Foundational PatternsIssue 2: September 2018
MetLife Pattern Spec Sheets
Links
Issue 2: September 2018
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
Issue 2: September 2018
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
Foundational PatternsMetLife Pattern Spec Sheets
Dark Background
View More
View More
Issue 2: September 2018
View More
MetLife Pattern Spec SheetsIssue 2: September 2018
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
Foundational PatternsMetLife Pattern Spec Sheets
Hint text: When user types, the field turns into a blank and auto ‘jumps’ to next entry when format is completed.
Notes
Simple Field
Issue 2: September 2018
Form Field On Load
Form Field Selected State
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
Field Border Color: #757575Field Label Text: Noto Sans 12px #333333 Text: Noto Sans 13px #3333333Corner Radius: 2px
Text Field
Foundational PatternsMetLife Pattern Spec Sheets
Hint text: When user types, the field turns into a blank and auto ‘jumps’ to next entry when format is completed.
Notes
With Hint Text
Social Security Number
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
Issue 2: September 2018
Social Security Number
•••••••••
Social Security Number
123 - 45 - 6789
Social Security Number
123 - 45 - 6789
ity Numberty NumberNumberty NumberNumber Social Security Number
XXX - XX - XXXX
Social Security Number
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
Field Border Color: #757575Field Label Text: Noto Sans 12px #333333 Text: Noto Sans 13px #3333333Corner Radius: 2px
10px
20px 25px
Form Field On Load
Form Field Selected State
View/Hide Selected & Unselected
10px
Show/Hide Icon
Vertically centered
Text Field
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
Hint text: When user types, the field turns into a blank and auto ‘jumps’ to next entry when format is completed.
Notes
With View Icon
Single Line
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
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 Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social Security Number Span Two Lines Lorem Ipsum
Social 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
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
### - ## - ####
••• - •• - ••••
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
Social Security Number
Social Security Number
Social Security Number
Social Security Number
Social Security Number
MetLife Pattern Spec SheetsIssue 2: September 2018
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
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
Simple forms with variations of multiple fields
Notes
Basic Form
MetLife Pattern Spec SheetsIssue 2: September 2018
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
View Automatic Payment
Field Border Color: #757575 Field Label Color: #333333
Field Selection Font: Noto Sans 13px Field Border Color: #757575
Drop Down
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
Single Line
I want to...
View Automatic Payment
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
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
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
MetLife Pattern Spec SheetsIssue 2: September 2018
Validation & Messaging
Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet.
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)
Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet.
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
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
Text Tooltip for Text Fields
123
Mobile Phone (optional)
What’s this?
Mobile Phone (optional)
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
Social Security Number
Social Security Number
What’s this?
Social Security Number must contain 9 characters
Social Security Number
What’s this?5px
10px10px
5px
10px
Social Security Number must contain 9 characters
Text Field Validation
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
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
Social Security Number must contain 9 characters
What’s this?
What’s this?
What’s this?
What’s this?
What’s this?
What’s this?
Social Security Number must contain 9 characters
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.
Text Field Validation
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
Combination of Text Tooltip & Show/Hide Link
Social Security Number
Social Security Number
Social Security Number
Social Security Number
Social Security Number
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#
Social Security Number must contain 9 characters
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
Social Security number
First name
Last name
Date of birth
Social Security number
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
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
Dropdown Error Messaging
MetLife Pattern Spec SheetsIssue 2: September 2018
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
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
*Text is center-alignedto radio button
Notes
Basic
MetLife Pattern Spec SheetsIssue 2: September 2018
Check Marks
Checkbox On Load
Checkbox Selected
Lorem ipsum dolar sien amit vivamus diem dolar
Lorem ipsum dolar sien amit vivamus diem dolar
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
Foundational PatternsMetLife Pattern Spec SheetsIssue 2: September 2018
*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
MetLife Pattern Spec SheetsIssue 2: September 2018
Examples
With Drop Down
I want to get a quote
GET MY QUOTE
GET MY QUOTE
I want to get a 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
MetLife Pattern Spec SheetsIssue 2: September 2018
Examples
Steps Options
Term Life InsuranceInsurance type
I want to get a quote
Calculate
Term Life InsuranceInsurance Type
FloridaState
01 - 01 - 1980Date of birth
FemaleGender
100,000Coverage amount
Thank you.