UX Styles
Color – Primary Palette
RL Red
RGB: 153 | 0 | 0
HEX: #990000
HEX: #990000
RL Orange
RGB: 214 | 128 | 33
HEX: #D68021
HEX: #D68021
White
RGB: 255 | 255 | 255
HEX: #FFFFFF
HEX: #FFFFFF
Color - Neutral Palette | Grays
Black Gray
RGB: 51 | 51 | 51
HEX: #333333
HEX: #333333
Dark Gray
RGB: 102 | 102 | 102
HEX: #666666
HEX: #666666
Medium Gray
RGB: 153 | 153 | 153
HEX: #999999
HEX: #999999
Light Gray
RGB: 204 | 204 | 204
HEX: #F2F2F2
HEX: #F2F2F2
Super Light Gray
RGB: 204 | 204 | 204
HEX: #F4F4F4
HEX: #F4F4F4
Border Stroke Gray
RGB: 204 | 204 | 204
HEX: #CCCCCC
HEX: #CCCCCC
Dropshadow Gray
RGB: 221 | 221 | 221
HEX: #DDDDDD
HEX: #DDDDDD
Border Stroke Light Gray
RGB: 231 | 231 | 231
HEX: #E7E7E7
HEX: #E7E7E7
Color - Neutral Palette | Tans
Chocolate
RGB: 108 | 99 | 91
HEX: #6C635B
HEX: #6C635B
Medium Tan
RGB: 209 | 207 | 198
HEX: #D1CFC6
HEX: #D1CFC6
Light Tan
RGB: 233 | 231 | 221
HEX: #E9E7DD
HEX: #E9E7DD
Barely There Tan
RGB: 241 | 239 | 232
HEX: #F1EFE8
HEX: #F1EFE8
Nav On Tan
RGB: 209 | 207 | 198
HEX: #D1CFC6 at 30% opacity
HEX: #D1CFC6 at 30% opacity
Color - Secondary Palette
Success Green
RGB: 89 | 139 | 37
HEX: #598B25
HEX: #598B25
Waiting Orange
RGB: 247 | 147 | 30
HEX: #F7931E
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
HEX: #BA6102
Button Hover Light Orange
RGB: 232 | 147 | 56
HEX: #E89338
HEX: #E89338
Button Pressed Orange
RGB: 186 | 97 | 2
HEX: #C7751E
HEX: #C7751E
Button Bottom Orange
RGB: 140 | 84 | 22
HEX: #8C5416
HEX: #8C5416
Active Form Field Orange
RGB: 243 | 197 | 159
HEX: #F3C59F
HEX: #F3C59F
Nav Indicator Red
RGB: 153 | 0 | 0
HEX: #990000 at 50% opacity
HEX: #990000 at 50% opacity
Doc Defense Dark Blue
RGB: 40 | 74 | 109
HEX: #284A6D
HEX: #284A6D
Doc Defense Light Blue
RGB: 238 | 241 | 244
HEX: #EEF1F4
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
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
line-height: 42px
font-weight: 300
H1B
font-size: 30px
line-height: 36px
font-weight: 300
line-height: 36px
font-weight: 300
H2A
font-size: 26px
line-height: 32px
font-weight: 300
line-height: 32px
font-weight: 300
H2B
font-size: 26px
line-height: 32px
font-weight: 400
line-height: 32px
font-weight: 400
H2C
font-size: 20px
line-height: 26px
font-weight: 300
line-height: 26px
font-weight: 300
H3A
font-size: 18px
line-height: 24px
font-weight: 300
line-height: 24px
font-weight: 300
H3B
font-size: 18px
line-height: 24px
font-weight: 400
line-height: 24px
font-weight: 400
H4A
font-size: 16px
line-height: 22px
font-weight: 300
line-height: 22px
font-weight: 300
H4B
font-size: 16px
line-height: 22px
font-weight: 400
line-height: 22px
font-weight: 400
H4C
font-size: 14px
line-height: 20px
font-weight: 700
line-height: 20px
font-weight: 700
H4D
font-size: 12px
line-height: 18px
font-weight: 400
text-transform: uppercase
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.
• 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.
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.
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.
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.
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.
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.
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.
