Components
Primary & Secondary Buttons
Notes
These are our first choice primary and secondary buttons

They are designed to be touch friendly without being too horsey on desktop browsers—50px high
Styling
Primary Button
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #fff
padding: 15px 30px
border-style: none none solid
border-bottom-width: 3px
border-bottom-color: #8c5416
background-color: #d68021
transform: translate(0px, -1px)
transition: background-color 200ms ease
Secondary Button
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #d68021
margin-left: 20px
padding: 15px 30px
border: 1px solid #d68021
transition: all 100ms ease
Smaller Text Primary & Secondary Buttons
Notes
These buttons should be used only when the larger text buttons are aesthetically too big

They are designed to be touch friendly without being too horsey on desktop browsers—50px high
Styling
Primary Button
font-size: 16px
line-height: 16px
font-weight: 400
font-color: #fff
padding: 17px 30px
border-style: none none solid
border-bottom-width: 3px
border-bottom-color: #8c5416
background-color: #d68021
transform: translate(0px, -1px)
transition: background-color 200ms ease
Secondary Button
font-size: 16px
line-height: 16px
font-weight: 400
font-color: #d68021
margin-left: 20px
padding: 17px 30px
border: 1px solid #d68021
transition: all 100ms ease
Notes
These buttons are for using on images

There should always be a image overlay container between the image and content

They are designed to be touch friendly without being too horsey on desktop browsers—50px high
Styling
Primary Button
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #fff
padding: 15px 30px
border-style: none none solid
border-bottom-width: 3px
border-bottom-color: #8c5416
background-color: #d68021
transform: translate(0px, -1px)
transition: background-color 200ms ease
Secondary Button
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #fff
margin-left: 20px
padding: 15px 30px
border: 1px solid #fff
transition: all 100ms ease
Text Links
Notes
Stand alone text links come in 3 sizes: 12px, 14px, and 20px

If text needs to be linked in a body of copy, then the orange color/hover treatment applies, but size can be determined by the size of the body copy

12px size should be used sparingly

In some cases, a link needs to be subtle. The gray text link can be used as such.
Styling
12px orange text link
font-size: 12px
line-height: 18px
font-weight: 400
font-color: #d68021
14px orange text link
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #d68021
20px orange text link
font-size: 20px
line-height: 26px
font-weight: 400
font-color: #d68021
14px gray text link
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #999999
Secondary Actions with Icons
Notes
These CTAs are used in instances of needing a persistent secondary action in an experience where buttons are the primary CTA (i.e. document interview, document summary)

Hover/Touch target is 50px high

They look best when anchored with a key-line above, below, or both above and below
Styling
icon-size: 20px
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #d68021
height: 50px
padding-top: 15px
padding-right: 30px
padding-left: 30px
Forms - Interview question with subfields 
Who is the lender?
This is the person who is lending the money to the borrower.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
Note goes here.
Styling
Question – H1D
font-size: 26px
line-height: 32px
font-weight: 400
font-color: #333
Question Description - BODY
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #333
FORM FIELD HEADER
font-size: 14px
line-height: 20px
font-weight: 700
font-color: #333
Form Field
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #999
height: 50px
border-radius: 3px
border: 1px #ccc
border-color focused: 1px #f3c59f
Forms - Interview question without subfields [Q&A experience]
Emma, what is your question for the lawyer?
This question is regarding an issue in:
What is this question about?

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
Note goes here
Styling
Question – H1D
font-size: 26px
line-height: 32px
font-weight: 400
font-color: #333
Dropdown
font-size: 14px
line-height: 14px
font-weight: 400
font-color: #999
height: 50px
border-radius: 3px
border-color: #ccc
border-color focused: #f3c59f
Radio Selection
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #333
radio-image: 30px
padding: 10px
border-radius: 3px
border: 1px #ccc
border-color selected: 1px #D68021
background-color selected: #F1EFE8
In-app Messages 
Messages
This is a success message. Use this to confirm an action was completed.
This is an error message. Use this to inform the user something broke.
This is an alert message. Use this to inform the user about something they should know. Icon can change.
Example of placement
Notes
These messages always drop down from under the header no matter where the user is scrolled in the experience. It pushes the content down so as not to cover the experience when displayed.

The user must close it with the “X” in order to dismiss it.

Note the hover state on the close “X”
Styling
Success Message
font-size: 20px
line-height: 26px
font-weight: 400
font-color: #598B25
icon-color: #598B25
padding: varies with breakpoints
background-color: #C1DFA0
Error Message
font-size: 20px
line-height: 26px
font-weight: 400
font-color: #ED1C24
icon-color: #ED1C24
padding: varies with breakpoints
background-color: #EEC3C5
Alert Message
font-size: 20px
line-height: 26px
font-weight: 400
font-color: #6C635b
icon-color: #6C635b
padding: varies with breakpoints
background-color: #E9E7DD
tbd
tbc
Interactions
Onboarding Slider Layout - [hidden] This pattern has never been repeated outside of WPS 
Setup Title
STEP 1
STEP 2
STEP 3
This is some text inside of a div block.
This is some text inside of a div block.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

This is some text inside of a div block.
This is some text inside of a div block.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
Work in progress....
Styling
TBD
lorem ipsun
New section coming soon.
Components
Messages 
This is a success message. Appears when an action is completed.
This is an error message. Appears when there's a problem with an action.
This is an alert message. Appears when the user should know something.
Notes
These messages always appear at the top of the browser under the header no matter where the user is scrolled in the experience. It sits on top of content.

They fade after 10 seconds, but the user can close with the “X”

Note the hover state on the close “X”
Styling
Success Message
font-size: 20px
line-height: 20px
font-weight: 300
font-color: #fff
padding: 20px
border-radius: 3px
background-color: #598B25
Error Message
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #990000
padding: 20px
border-radius: 3px
border: 2px #990000
background-color: #E9E7DD
Alert Message
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #6c635b
padding: 20px
border-radius: 3px
border: 2px #6c635b
background-color: #E9E7DD
Forms - Interview question with subfields 
Who is the lender?
This is the person who is lending the money to the borrower.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
These messages always appear at the top of the browser under the header no matter where the user is scrolled in the experience. It sits on top of content.

They fade after 10 seconds, but the user can close with the “X”

Note the hover state on the close “X”
Styling
Success Message
font-size: 20px
line-height: 20px
font-weight: 300
font-color: #fff
padding: 20px
border-radius: 3px
background-color: #598B25
Error Message
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #990000
padding: 20px
border-radius: 3px
border: 2px #990000
background-color: #E9E7DD
Alert Message
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #6c635b
padding: 20px
border-radius: 3px
border: 2px #6c635b
background-color: #E9E7DD
Forms - Interview question without subfields [Q&A experience]
Emma, what is your question for the lawyer?
This question is regarding an issue in:
What is this question about?

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
These messages always appear at the top of the browser under the header no matter where the user is scrolled in the experience. It sits on top of content.

They fade after 10 seconds, but the user can close with the “X”

Note the hover state on the close “X”
Styling
Success Message
font-size: 20px
line-height: 20px
font-weight: 300
font-color: #fff
padding: 20px
border-radius: 3px
background-color: #598B25
Error Message
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #990000
padding: 20px
border-radius: 3px
border: 2px #990000
background-color: #E9E7DD
Alert Message
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #6c635b
padding: 20px
border-radius: 3px
border: 2px #6c635b
background-color: #E9E7DD