UX Styles
Color – Primary Palette
RL Red
RGB: 153 | 0 | 0 
HEX: #990000
RL Orange
RGB: 214 | 128 | 33 
HEX: #D68021
White
RGB: 255 | 255 | 255 
HEX: #FFFFFF
Color - Neutral Palette | Grays
Black Gray
RGB: 51 | 51 | 51 
HEX: #333333
Dark Gray
RGB: 102 | 102 | 102
HEX: #666666
Medium Gray
RGB: 153 | 153 | 153
HEX: #999999
Light Gray
RGB: 204 | 204 | 204
HEX: #F2F2F2
Super Light Gray
RGB: 204 | 204 | 204
HEX: #F4F4F4
Border Stroke Gray
RGB: 204 | 204 | 204
HEX: #CCCCCC
Dropshadow Gray
RGB: 221 | 221 | 221
HEX: #DDDDDD
Border Stroke Light Gray
RGB: 231 | 231 | 231
HEX: #E7E7E7
Color - Neutral Palette | Tans
Chocolate
RGB: 108 | 99 | 91 
HEX: #6C635B
Medium Tan
RGB: 209 | 207 | 198 
HEX: #D1CFC6
Light Tan
RGB: 233 | 231 | 221
HEX: #E9E7DD
Barely There Tan
RGB: 241 | 239 | 232
HEX: #F1EFE8
Nav On Tan
RGB: 209 | 207 | 198
HEX: #D1CFC6 at 30% opacity
Color - Secondary Palette
Success Green
RGB: 89 | 139 | 37 
HEX: #598B25
Waiting Orange
RGB: 247 | 147 | 30 
HEX: #F7931E
Color | Tertiary Palette | Hovers, Accents, & Active States | ONLY USED FOR DESCRIPTORS BELOW
Text Link Hover Dark Orange
RGB: 186 | 97 | 2 
HEX: #BA6102
Button Hover Light Orange
RGB: 232 | 147 | 56 
HEX: #E89338
Button Pressed Orange
RGB: 186 | 97 | 2 
HEX: #C7751E
Button Bottom Orange
RGB: 140 | 84 | 22 
HEX: #8C5416
Active Form Field Orange
RGB: 243 | 197 | 159 
HEX: #F3C59F
Nav Indicator Red
RGB: 153 | 0 | 0 
HEX: #990000 at 50% opacity
Doc Defense Dark Blue
RGB: 40 | 74 | 109 
HEX: #284A6D
Doc Defense Light Blue
RGB: 238 | 241 | 244 
HEX: #EEF1F4
Typography | Scale & Basic Styles
H1A Page header - 36px, 300
h1A
H1B Section header - 30px, 300
h1b
H2A Section header - 26px, 300
h2A
H2B Interview questions - 26px, 400
h2B
H2C Section header, Activity card header, Subhead – 20px, 300
h2C
H3A Subhead, Activity list header, Navigation & Filters off – 18px, 300
H3A
H3B Subhead, Navigation & Filters on – 18px, 400
H3b
H4A Subhead – 16px, 300
H4A
H4B Subhead – 16px, 400
H4b
H4C Form field header - 14px, 700
H4c
H4D Small caption, badge - 12px, 400
H4D
Body text - 14px, 400
body
Small text - 12px, 400
Small
Notes
Typography in the Activity UX is defined by balance and functionality.

Body text is always regular weight so that is is legible.

Headlines are light weight to keep the experience clean.

Large text is regular weight only when needed to emphasize hierarchy of information (as in interviews).

Only colors to use are: #333 Black Gray, #666 Dark Gray, #999 Medium Gray
Styling
H1A
font-size: 36px
line-height: 42px
font-weight: 300
H1B
font-size: 30px
line-height: 36px
font-weight: 300
H2A
font-size: 26px
line-height: 32px
font-weight: 300
H2B
font-size: 26px
line-height: 32px
font-weight: 400
H2C
font-size: 20px
line-height: 26px
font-weight: 300
H3A
font-size: 18px
line-height: 24px
font-weight: 300
H3B
font-size: 18px
line-height: 24px
font-weight: 400
H4A
font-size: 16px
line-height: 22px
font-weight: 300
H4B
font-size: 16px
line-height: 22px
font-weight: 400
H4C
font-size: 14px
line-height: 20px
font-weight: 700
H4D
font-size: 12px
line-height: 18px
font-weight: 400
text-transform: uppercase
Icons | About icons in the new experience
SVGs and the new RL Icon Font
• Icons in the new Activity UX are first derived from SVGs. This is so that the icon will be rendered clear and crisp for any and all display resolutions.

• Any new single color assets (icons) created for the Activity UX experience should be handed off to the engineer as an SVG with a simple and clear name

• The engineer will then take that single color SVG and convert it into a new font item for our new RL Icon Font using Grunt. The name of your SVG file will be used at the font name, this is why you should be mindful about the icon name. It is the font that the engineer will use in the build.

• Multiple color icons should be handed off as SVGs. The engineer will use that SVG file in the build.
Clear Icon Set
If your icon needs are not met by the below icons, please refer to the Clear Icon Bundle. We will be using the thick stroke weight icons. Download the sketch file of the thick stroke icons below. 
Download Sketch file
Icons | Sizes
For the sake of experience consistency, icons should be constrained to one of these 4 sizes.
75 x 75 px
L
45 x 45 px
M
30 x 30 px
S
20 x 20 px
XS
Icons | Documents
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Documents
General document icon
Document Complete
User has reached the end of the interview
Ready for Signature
User has reached the end of an esignable document or uploaded a document
Document Signed
Document has been signed by one or more invited parties
Document with Question
User has asked a question about this document
Icons | Legal Advice
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Ask a Lawyer
General icon referring to the user interacting with a lawyer
Questions
User has asked a question.
AKA: Q&A Product
Lawyer
General icon for lawyers
Icons | Filings
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Filings
General filings icon
Incorporations
User has incorporated a business.
•currently the only filing
Icons | Actions
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Start New
Start a new activity
Upload
Upload a document
Download
Download a document
Delete
Delete a document
Search
Pretty self explanitory
View More Actions
Used on cards for displaying additional actions on the activity
Close
Close a message, close additional actions on cards, etc.
Close Hover
Displayed on hover of close icon in messages
Icons | Miscelaneous
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Success Checkmark
Displayed in success messages
Associated color: Success Green
Error Frowny
Displayed in error messages
Associated color: RL Red
Alert
Displayed in alert messages
Associated color: Chocolate
Help
Used in header for contacting Customer Service for help
Logos
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Full Logo – RL Red
Full logos are used on non-logged-in assets and experiences.
Full Logo - White
Full logos are used on non-logged-in assets and experiences.
Circle R Logo – RL Red
Circle R Logos are used for all logged-in assets and experiences.
Circle R Logo –  White
Circle R Logos are used for all logged-in assets and experiences.
Logos
Icons
Illustrated Icons
Badges
Avatars
Graphics
Logos
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Full Logo – RL Red
Full logos are used on non-logged-in assets and experiences.
Full Logo - White
Full logos are used on non-logged-in assets and experiences.
Circle R Logo – RL Red
Circle R Logos are used for all logged-in assets and experiences.
Circle R Logo –  White
Circle R Logos are used for all logged-in assets and experiences.
Full Logo – Doc Defense
Dark Blue
Full logos are used on non-logged-in assets and experiences.
Full Logo - White
Full logos are used on non-logged-in assets and experiences.
Icons | About icons in the new experience
SVGs and the new RL Icon Font
• Icons in the new Activity UX are first derived from SVGs. This is so that the icon will be rendered clear and crisp for any and all display resolutions.

• Any new single color assets (icons) created for the Activity UX experience should be handed off to the engineer as an SVG with a simple and clear name. For consistency, set your single icon’s color as #999999 (although the engineer will change the color in production via CSS).

• The engineer will then take that single color SVG and convert it into a new font item for our new RL Icon Font using Grunt. The name of your SVG file will be used at the font name, this is why you should be mindful about the icon name. It is the font that the engineer will use in the build.

• Multiple color icons should be handed off as SVGs. The engineer will use that SVG file in the build.
Clear Icon Set
If your icon needs are not met by the below icons, please refer to the Clear Icon Bundle. We will be using the thick stroke weight icons. Download the sketch file of the thick stroke icons below. 
Download Sketch file
Social Network Icon Set
If you are working on a project that requires a social network icon, please use the SVG icons linked in the zip file below.
Download zip file
Flag Icon Set
If you are working on a project that requires a flag icon, please use the SVG icons linked in the zip file below.
Download zip file
Color | Neutral Palette | Tans (phasing out, do not use)
Chocolate
RGB: 108 | 99 | 91 
HEX: #6C635B
Medium Tan
RGB: 209 | 207 | 198 
HEX: #D1CFC6
Light Tan
RGB: 233 | 231 | 221
HEX: #E9E7DD
Barely There Tan
RGB: 241 | 239 | 232
HEX: #F1EFE8
Icons | Sizes
For the sake of experience consistency, icons should be constrained to one of these 4 sizes.
75 x 75 px
L
45 x 45 px
M
30 x 30 px
S
20 x 20 px
XS
Icons | Documents
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Documents
General document icon
Document Complete
User has reached the end of the interview
Ready for Signature
User has reached the end of an esignable document or uploaded a document
Waiting for Signature
Waiting for all parties to sign the document
Document Signed
Document has been signed by all parties
Document with Question
User has asked a question about this document
Document “Stack”
Used in Doc Selection in the More Docs as well as representing a stack
Icons | Legal Advice
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Ask a Lawyer
General icon referring to the user interacting with a lawyer
Questions
User has asked a question.
AKA: Q&A Product
Lawyer
General icon for lawyers
Legal Advice
Used in WPS messaging about getting quick legal advice.
Icons | Filings
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Filings
General filings icon
Incorporations
User has incorporated a business.
•currently the only filing
Icons | Actions
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Start New/Copy
Start a new activity or copy an existing document
Upload
Upload a document
Download
Download a document
Delete
Delete a document or credit card
Search
Pretty self explanitory
View More Actions
Used on cards for displaying additional actions on the activity
Close
Close a message, close additional actions on cards, etc.
Close Hover
Displayed on hover of close icon in messages
Update Preview
Used in document interview
Save for Later
Used in document interview
Edit
General icon for editing something
Used on: document summary, editing user profile or payment information
Add Signer
Displayed on doc summary with print option
Traditional Arrow
Used for any forward actions that need a lot of emphasis
Minimal Arrow
Used for any “minimizing” or “opening” actions
Circle Arrow
Used for any arrow treatment that needs to be more contained in it’s own shape to stand out.
Copy
Used on document summary to copy a new card
Print
Used on doc summary to print the document
View Full Screen
Used for any “minimizing” or “opening” actions
Add message
Used on e-sign flow to add a message to the people you are inviting
Cancel Signature
Used on esign flow
Radio Off
Used for any radio button treatments
Radio On
Used for any radio button treatments
Unchecked
Used for any checkbox treatment
Checked
Used for any checkbox treatment
Sign out
Used next sign out text.
Not within a sign out CTA button.
Icons | Miscellaneous
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Success Checkmark
Displayed in success messages
Associated color: Success Green
Error Frowny
Displayed in error messages
Associated color: RL Red
Alert
Displayed in alert messages
Associated color: Chocolate
Activities
General icon for Activities on Rocket Lawyer
(use sparingly)
Help
Used in US header for contacting Customer Service for help
Global Help
Used in Global Navigation for help menu
Card View
Displays activities as cards
List View
Displays activities as lists
Legal Checklist
Used on document summary page
Idea
Used in Doc Selection in the Protect Idea category
Signature
Used in Doc Selection to represent that a document needs a signature
Notary
Used in Doc Selection to represent that a document needs a notary
Settings
Used in User Dropdown menu
Reminder
Displayed with "we'll send you a reminder" on status messaging on the Doc Summary
Stay Compliant
Used in Doc Summary to accompany alert tags about a doc
Minimal "Done" checkmark
Used in progress bar of the document flow when a step is complete
Progress Bar Arrow
Used in progress bar of the document flow
Explore
Used in main navigation for the Explore section
Icons | Legal Categories
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Business
Used in Doc Selection in the Start a Business category
Buy/Sell
Used in Doc Selection in the Buy/Sell a Service category
Dispute
Used in Doc Selection in the Resolve Dispute category
Senior Care
Used in Doc Selection in the Senior Care category
Marriage
Used in Doc Selection in the Get Married category
Declare Bankruptcy
Used in Doc Selection in the Declare Bankruptcy category
Buy a Home
Used in Doc Selection in the Buy Home category
Rent Out Property
Used in Doc Selection in the Rent Out Property category
Employees
Used in Doc Selection in the Manage Employees category
Make a Sale
Used in Doc Selection in the Make a Sale category
Loan Money
Used in Doc Selection in the Loan Money category
Will
Used in Doc Selection in the Estate Planning category
Divorce
Used in Doc Selection in the Get a Divorce category
Apartment
Used in Doc Selection in the Renter Category
Statement
Used in Doc Selection in the Swear a Statement category
Children
Used in Doc Selection in the Protect my Children category
Saving
Used in WPS messaging, highlighting a saving for retirement aspect
Remodel
Used in Doc Selection in the Service Contract Category
Registered Agent
Icons | Account Settings
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Account
Used for Account section header in the Account Settings right nav
Billing
Used for Billing section header in the Account Settings right nav
Security
Used for Security section header in the Account Settings right nav
Lawyer
Used for Lawyer section header in the Account Settings right nav
Address
Used in Account Settings (Account Details) for the user’s address
Phone
Used in Account Settings (Account Details) for the user’s phone number
Add Card
Used to add a new credit card
Credit Card: Discover
Used in Account Settings (Billing Details and Billing History) for existing and new payment information
Credit Card: MasterCard
Used in Account Settings (Billing Details and Billing History) for existing and new payment information
Credit Card: Visa
Used in Account Settings (Billing Details and Billing History) for existing and new payment information
Credit Card: American Express
Used in Account Settings (Billing Details and Billing History) for existing and new payment information
Credit Card: Default
Used in Account Settings (Billing Detail) when adding or editing a credit card
CSC Helper
Used in Account Settings (Billing Detail) when adding or editing a credit card
Email
Used in Account Settings (Login Settings) for a user’s email
Password
Used in Account Settings (Login Settings) for a user’s password
Icons | Document Defense
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Document Review
User review the situation
with an attorney
On your Behalf
Having an attorney
respond on user's behalf
Upload
Upload a document
Connect with Attorney
We'll connect users with an attorney. They'll take it from there.
Illustrated Icons
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Attached section or page to current document
Used in messaging.
Added doc to recommended activities in legal process
Used in messaging.
Notary notice in legal process and doc summary
Used in messaging.
Refer to legal checklist in doc summary
Used in walkthrough.
Badges | About badges in lithium
Image Sizing Tips
• 72x72 px is the required size for badge images

• Images that do not matched these dimensions will be resized automatically

• Supported file types include: png, jpg, gif, svg

• For more information on badges and rank icons
Download Illustrator file
Badges | Lithium
To download the SVG of these icons: right-click, Save Image As, and delete the jargon Webflow added before “img” on the file name.
Attorney
Attorney badge earned once an attorney is verified.
Contributing Attorney
2nd highest rank achievement.
Dedicated Attorney
3rd highest rank achievement.
All Star Attorney
Highest attorney rank achievement on the Legal Advice forum.
Attorney (FR)
Attorney badge earned once an attorney is verified.
Contributing Attorney (FR)
2nd highest rank achievement.
Dedicated Attorney (FR)
3rd highest rank achievement.
All Star Attorney (FR)
Highest attorney rank achievement on the Legal Advice forum.
FIrst Answer
Replied to 1 post
Staying Engaged
Replied to 5 post
Highly Responsive
Replied to 10 post
Major Achiever
Replied to 50 post
Thought Leader
Replied to 100 post
Thumbs Up
1 like received
High-Five
5 likes received
Round of Applause
10 likes received
Major Kudos
50 likes received
Standing Ovation
100 likes received
Stamp of Approval
1 Accepted Solution Received
Helping Hand
5 Accepted Solution Received
Problem Solver
10 Accepted Solution Received
Rising Star
50 Accepted Solution Received
Mentor
100 Accepted Solution Received
First Question
Create 1 post
Inquisitive Mind
Create 5 post
Conversation Starter
Create 10 posts
Curious and Committed
Create 50 posts
Highly Enaged
Create 100 posts
1 Week Welcome
3 Month Milestone
6 Month Milestone
1 Year Anniversary
2 Year Anniversary
Avatars | Lithium
To create new avatars download the sketch file to utilize the avatar builder.
Download sketch file