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
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
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
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
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
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
line-height: 16px
font-weight: 400
font-color: #d68021
margin-left: 20px
padding: 17px 30px
border: 1px solid #d68021
transition: all 100ms ease
Buttons on Images
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
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
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
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
View Document
12px
View Document
14px
View Document
20px
View Document
gray link
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.
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
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
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
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
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
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
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
line-height: 32px
font-weight: 400
font-color: #333
Question Description - BODY
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #333
line-height: 20px
font-weight: 400
font-color: #333
FORM FIELD HEADER
font-size: 14px
line-height: 20px
font-weight: 700
font-color: #333
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
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?
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
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
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
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
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”
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
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
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
line-height: 26px
font-weight: 400
font-color: #6C635b
icon-color: #6C635b
padding: varies with breakpoints
background-color: #E9E7DD