Components
Primary & Secondary Buttons
SubmitCancel
ContinueBack
BackContinue
ContinueBackSkip
BackContinueSkip
Buy a Single DocumentBuy a Single Document
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
SubmitCancel
ContinueBack
BackContinue
ContinueBackSkip
BackContinueSkip
Buy a Single DocumentBuy a Single Document
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
Buttons on Images
SubmitCancel
ContinueBack
BackContinue
ContinueBackSkip
BackContinueSkip
Buy a Single DocumentBuy a Single Document
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
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.
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
Save for later
Update preview
Edit
Copy
Download
Legal Checklist
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.
BackContinueSkip

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

ContinueBackSkip
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?
Me
My Business
SubmitCancel

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
CTAs
Tool Tips
Tabs
Messages
Forms
Inline errors
Modals
Breadcrumbs
UI Elements
Primary & Secondary Buttons DEFAULT STYLE
SubmitCancel
BackContinue
BackContinueSkip
Buy a Single DocumentBuy a Single Document
Notes
These buttons should always be used unless stated otherwise in a story.

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-radius: 4px
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
border-radius: 4px
transition: all 100ms ease
Large Text Primary & Secondary Buttons
SubmitCancel
BackContinue
BackContinueSkip
Buy a Single DocumentBuy a Single Document
Notes
IMPORTANT: These buttons should only be used if specifically asked for.

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-radius: 4px
border-bottom-width: 3px
border-bottom-color: #8c5416
background-color: #d68021
transform: translate(0px, -1px)
transition: background-color 200ms ease

Hover:
background-color: #e89338
Secondary Button
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #d68021
margin-left: 20px
padding: 15px 30px
border: 1px solid #d68021
border-radius: 4px
transition: all 100ms ease
Loaders
Sending
View full page demo
Notes
Only use the large text if original button was that size before click.

This still should be used in important entry form design when the Activities UX Loader would not be appropriate.

The partial transparency communicates that this system is working and the user should not click again.
Styling
Primary Button (large)
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #fff
padding: 15px 65px 15px 30px
border-style: none none solid
border-radius: 4px
border-bottom-width: 3px
border-bottom-color: #8c5416
background-color: #d68021
transform: translate(0px, -1px)
transition: background-color 200ms ease
Primary Button (smaller text)
font-size: 16px
line-height: 16px
font-weight: 400
font-color: #fff
padding: 17px 65px 17px 30px
border-style: none none solid
border-radius: 4px
border-bottom-width: 3px
border-bottom-color: #8c5416
background-color: #d68021
transform: translate(0px, -1px)
transition: background-color 200ms ease
Buttons on images or dark backgrounds
SubmitCancel
BackContinue
BackContinueSkip
Buy a Single DocumentBuy a Single Document
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

Hover is 30% opacity.
Styling
Primary Button
font-size: 20px
line-height: 20px
font-weight: 400
font-color: #fff
padding: 15px 30px
border-style: none none solid
border-radius: 4px
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: 20px
font-weight: 400
font-color: #fff
margin-left: 20px
padding: 15px 30px
border: 1px solid #fff
border-radius: 4px
transition: all 100ms ease
Secondary Actions with Icons
Save for later
Update preview
Edit
Copy
Download
Legal Checklist
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
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.
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
Visited text link
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #990000
Tab system
Edit
Copy
Download
Legal Checklist
Example header
This is some text inside of a div block.
Notes
This is used on the document manager page.
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
Messages - Tool Tips
Desktop interaction: Hover bring up the tooltip

Mobile devices: Tap brings up the tooltip on mobile. Tooltip goes full screen and is closed by a X.
Delete
Help text
?
Help text for mobile
Notes
Used on desktop experiences only

Half second delay in appearance on hover
Styling
Tool Tip
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #fff
padding: 18px 10px
corner-radius: 5px
background color: rgba (0, 0, 0, 0.74)
Messages - In app banners
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. Text can wrap if it is long enough, like this really long example.
Example of placement
Example of two banners
This is a success message. Use this to confirm an action was completed.
This is a success message. Use this to confirm an action was completed.
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”

Banners should stack if two exist at the same time.
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: #333333
icon-color: #333333
padding: varies with breakpoints
background-color: #FFDDB8
Marketing Message Style 
Welcome Danny! Here is what’s included in your new legal benefit:
Legal documents researched and written by legal staff.
Including quick advice on special clauses and online signing.
Quick Advice on any matter.
Answers from lawyers who specialize in every legal area.
Deep discounts on representation fees with our attorney network.
You save 40% on rates and work with great lawyers in your local area.
Learn more
Notes
These messages should be used when there is a big announcement that is incredibly important for the user to read. This could be a terms of service change, an upgrade or account change, or the welcome message for the WPS user explaining what they now have.

There should a slight delay before it opens after page load to effectively capture the user’s attention with movement. I loads below the Navigation bar and pushes down the rest of the page.

Note the hover state on the close “X”
Styling
Message
font-color: #FFFFFF
padding: 30px
width: 100%
background-color: #6C635B
Icons
font-color: #FFFFFF
Forms - Interview question with subfields 
Who is the lender?
This is the person who is lending the money to the borrower.
BackContinueSkip

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
Buttons should be placed in accordance of if the action takes you 'back' or 'forward'.
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
box-shadow: rgb(221, 221, 221) 0px 1px 3px 0px inset;
border-color focused: 1px #f3c59f
Form - Sign up styles
Name
Email Normal state
Normal state

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Input state styles
Normal state
Active state
This is the error message.
Error state
Woops, it looks like you're trying to send this to yourself. Sign instead.
HAPPY ERROR state
Success state
INACTIVE state

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
This is  a style that should be used for places in the product that the input is simple. It also serves as a way to save valuable real estate.
Styling
Normal Form Field
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #999
height: 50px
border-radius: 3px
border: 1px #ccc
box-shadow: rgb(221, 221, 221) 0px 1px 3px 0px inset;
border-color focused: 1px #f3c59f
Active 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
Error 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
Success 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 - Input fields with no header
Normal state
Active state
This is the error message.
Error state
Success state
INACTIVE state

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Notes
This is  a style that should be used for places in the product that the input is simple. It also serves as a way to save valuable real estate.
Styling
Normal Form Field
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #999
height: 50px
border-radius: 3px
border: 1px #ccc
box-shadow: rgb(221, 221, 221) 0px 1px 3px 0px inset;
border-color focused: 1px #f3c59f
Active 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
Error 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
Success 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 Form Details
Header:
Used for: Any field that requires a header.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

100% WIDTH • NO MinimuM WIDTH
Used for: Addresses, freeform input field and paragraph input fields.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

-
-
EXT.
60px WIDTH  -  60px width  -  70px width
Used for: US Phone numbers.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

-
-
-
-
EXT.
60px WIDTH  -  60px width  -  70px width
Used for: EU Phone numbers.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

-
-
-
60px WIDTH  -  50px  -  70px
Used for: Social Security numbers.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

EXT.
20% WIDTH • MINIMUM WIDTH: 120 PX
Used for: General phone numbers (icon should be #e7e7e7 when inactive and #f3c59f when active)
CUSTOM WIDTH
Dropdown should grow as needed. States should always be housed here.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

45% WIDTH • MINIMUM WIDTH: 370 PX
Used for: Names, Cities

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

20% WIDTH • MINIMUM WIDTH: 120 PX
Used for: Counties, zip codes, dates
$
20% WIDTH • MINIMUM WIDTH: 120 PX
Used for: Currency
CUSTOM WIDTH
Dropdown should grow as needed. States should always be housed here.
This is text with a checkbox.
This is text with a checkbox.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Checkboxes should stack unless specified.
Notes
These classifications allow the interview to save space by more accurately applying the right input field size to the answer area.
Styling
Normal Form Field
font-size: 14px
line-height: 20px
font-weight: 400
font-color: #999
height: 50px
border-radius: 3px
border: 1px #ccc
box-shadow: rgb(221, 221, 221) 0px 1px 3px 0px inset;
border-color focused: 1px #f3c59f
Active 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
Error 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
Success 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?
Me
My Business
SubmitCancel

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
Inline Errors
Submit
Uh oh, something went wrong. Please try that again.
If the button is left aligned
Submit
Uh oh, something went wrong. Please try that again.
If the button is centered
Notes
These messages should be used when there is a big announcement that is incredibly important for the user to read. This could be a terms of service change, an upgrade or account change, or the welcome message for the WPS user explaining what they now have.

There should a slight delay before it opens after page load to effectively capture the user’s attention with movement. I loads below the Navigation bar and pushes down the rest of the page.

Note the hover state on the close “X”
Styling
Message
font-color: #FFFFFF
padding: 30px
width: 100%
background-color: #6C635B
Icons
font-color: #FFFFFF
Announcement Message Style 
This is an example header
This is some text inside of the banner. It's an example. This is some text inside of the banner. It's an example. This is some text inside of the banner. It's an example. It's an example. This is some text inside of the banner. It's an example.
Action
Notes
These messages should be used when there is a big announcement that is incredibly important for the user to read. This could be a terms of service change, an upgrade or account change, or the welcome message for the WPS user explaining what they now have.

There should a slight delay before it opens after page load to effectively capture the user’s attention with movement. I loads below the Navigation bar and pushes down the rest of the page.

Note the hover state on the close “X”
Styling
Message
font-color: #FFFFFF
padding: 30px
width: 100%
background-color: #6C635B
Icons
font-color: #FFFFFF
Modal Styles 
Create an account
This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.
SecondaryPrimary
Hooray for this thing!
This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. 
Notes
Modals should be used only when absolutely necessary. Consider the need for both buttons due to the fact that there is always a "X". X can be omitted if users must make a decisions via CTAs.

Regarding background choice: White background should be used in states of transition. Gray background should be used when a modal interrupts a UX and needs immediate attention.

Width and height should be 100% on mobile.
Styling
MODAL
padding: 30px
background-color: white
Background-overlay: 50% opacity white or #666
White bg Bottom border: 2px #ddd
Grey bg bottom border: 2px #666
Breadcrumbs
Insert here
Notes
Modals should be used only when absolutely necessary. Consider the need for both buttons due to the fact that there is always a "X". X can be ommitted if users must make a decisions via CTAs.
Styling
Breadcrumb
x
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 :(

Back
Notes
Work in progress....
Styling
TBD
lorem ipsun
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.
BackContinueSkip

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?
Me
My Business
SubmitCancel

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