Style Guide version 1.1

Typography
Introduction

LawDepot uses Open Sans as its font. The font is known for its emphasis on accessibility and readability. The typesetting follows simple guides that allow for easy and predictable design.

Alignment

For text like SEO copy, where the user will be reading a lot of text, LawDepot generally aligns the text left. However, certain layouts demand center alignment of body and headings text.

Name Hex RGB Purpose
Charcoal #333333 51, 51, 51 Body Text
Slate Green #64AD7D 100 | 173 | 125 Links
Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut convallis dui, ut dictum turpis. Nullam ac erat sem. Aliquam tristique lorem a lorem vestibulum, vel placerat diam consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus maximus diam sit amet magna congue, vel luctus est euismod. Suspendisse potenti. Praesent id dolor sem. Nam vitae orci id justo luctus fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut ex in ipsum porta viverra non eu dui. Nulla cursus commodo libero non rhoncus. Praesent pharetra ex purus, hendrerit vulputate ex fringilla ut. Phasellus fringilla fringilla lorem nec varius. Nullam ut blandit libero, et posuere mauris.


The Body Text is used for large bodies of copy like SEO text. Body Text is set at 18px. 

<p style="font-size: 18px; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut convallis dui, ut dictum turpis. Nullam ac erat sem. Aliquam tristique lorem a lorem vestibulum, vel placerat diam consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus maximus diam sit amet magna congue, vel luctus est euismod. Suspendisse potenti. Praesent id dolor sem. Nam vitae orci id justo luctus fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut ex in ipsum porta viverra non eu dui. Nulla cursus commodo libero non rhoncus. Praesent pharetra ex purus, hendrerit vulputate ex fringilla ut. Phasellus fringilla fringilla lorem nec varius. Nullam ut blandit libero, et posuere mauris.
</p>
Main Heading

Free Legal Documents Forms, and Contracts


Home page content blocks provide quick links to popular products.


                   
	&lt;button class="largeActiveButton"&gt;Cancel Subscription&lt;/button&gt;		
	&lt;button class="largeInactiveButton"&gt;Cancel Subscription&lt;/button&gt; 	
	&lt;button class="largeActiveButton"&gt;Submit&lt;/button&gt; 	
	&lt;button class="largeInactiveButton"&gt;Cancel&lt;/button&gt;
Sub Heading

Print or download your customized legal
document in 5-10 minutes for free

Sub head is a

sdfsdfdsfdf
Individual Page Titles

Print or download your customized legal
document in 5-10 minutes for free

Sub head is a

<h2 id="ctl00_Content_ctrlQuestions_ctl51_ctl02_title">
					Create your Partnership Agreement
				</h2>
Category Titles

Estate, Real Estate, Financial, Business, Family, All

Home page content blocks provide quick links to popular products.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button>
Tab Titles

Which document would you like to choose?
(Please select all that apply)

Here is a description.

<h6>Some text </h6>
Answers, Selections, Checkboxes, Product Links, Content

More than 2 million people have used LawDepot to create over 4 million legal documents and save over a billion dollars in legal fees.

Answers, selections, checkboxes etcetera have a 20px font size to ensure readability of important text.

<p style="font-size: 20px;">More than 2 million people have used LawDepot to create over 4 million
legal documents and save over a billion dollars in legal fees.</p>
Validators / Indicators, Examples, Animated Titles

Describe the Equipment to be sold. Be as specific as possible including make, model, color, serial number, etc.

Text is shown in italics when …

<p style="font-style: italic;">Here is text. </p>
List Unordered – One
  • Here is a list item one.
  • Here is a list item two that is in second place.
  • Here is the middle list item number three.
  • Here is the fourth list item.
  • Here is the last list item.

This list style is found on SEO content. 

<ul>
<li>Here is a list item one.</li>
<li>Here is a list item two that is in second place.</li>
<li>Here is the middle list item number three.</li>
<li>Here is the fourth list item.</li>
<li>Here is the last list item.</li>
</ul>
List Unordered – Two
  • Here is a list item one.
  • Here is a list item two that is in second place.
  • Here is the middle list item number three.
  • Here is the fourth list item.
  • Here is the last list item.

This list style is similar to the first except it has more padding. It’s found on SEO content. Specifically, under “Alternate Names”.

<ul>
<li>Here is a list item one.</li>
<li>Here is a list item two that is in second place.</li>
<li>Here is the middle list item number three.</li>
<li>Here is the fourth list item.</li>
<li>Here is the last list item.</li>
</ul>
List Ordered

Here is a description of the lists.

<ul>
<li>Here is a list item one.</li>
<li>Here is a list item two that is in second place.</li>
<li>Here is the middle list item number three.</li>
<li>Here is the fourth list item.</li>
<li>Here is the last list item.</li>
</ul>
Line Heights

Developers: LawDepot uses the browser default for line heights.
Designers: See default line-heights in pixels below.

Font Size Line Height Example
12px 16px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
14px 20px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16px 22px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
18px 24px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
20px 27px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
22px 30px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
24px 33px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
26px 36px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
28px 38px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
30px 41px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
32px 45px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
34px 47px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
36px 50px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
38px 53px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
40px 56px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
42px 56px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.