Style Guide

Color Palette

Main Color Scheme

#201c20

#393939

#839ca7

Darks

Used for text, icons, and background.

#ffffff

#ecf0f2

#dde4e7

Lights

Used mainly for backgrounds.

#0878b8

#68add3

#054a70

Blues

Used when an accent is needed.

Colors for Vector Images

#0093b1

#4ab2c8

#00687e

Greens

#b395dd

#c9b4e7

#7f6a9d

Purples

#0095eb

#4ab4f1

#006aa7

Blues

Pattern

Diagonal Stripes

Image File Link

Border: 1px

Size: 417b

This is the only pattern that may be used on this website.

Typography

Header 1

Font: Fira Sans Condensed; Font Size: 50px; Color: #201c20.

Header 2

Font: Fira Sans Condensed; Font Size: 1.8em; Color: #201c20.

Header 3

Font: Fira Sans Condensed; Font Size: 1.5em; Color: #201c20.

This is a secondary title. It should be no longer than 120 characters.

Font: fira_sans_condensed; Font Size: 22px; Color: #50505f.

This is body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font: Open Sans; Font Size: 1em; Color: #201c20.

This is an inline link.

Color: #0878b8; Font Weight: 600.

Styling text

Emphasis

Font Style: Italic.

Emphasis

Strong Emphasis

Font Weight: 600.

Strong Emphasis

Stronger Emphasis

Font Weight: 600; Font Style: Italic.

Stronger Emphasis

Strongest Emphasis

Font Weight: 600; Color: #0878b8; Font Style: Italic. This should be used sparingly, as it is easy to confuse with a link.

Strongest Emphasis

Lazy-Loading Shadow Image Holder

Element

Code

<div class="shadow-image-holder"> 
 <img src="https://www.WorkLawyers.com/wp-content/uploads/greenpixel.png" 
 data-src="https://via.placeholder.com/688x344" 
 alt="Placeholder Image Alt Text" 
 class="lazyload" 
 width="688" 
 height="344" /> 
</div>

Button

Element

Button

Code

<a href="https://www.example.com" class="blue-button">Button</a>

Emphasis Block

Element

Example

This block of text can be used to highlight a rule of law, provide an example, or emphasize some particular issue.

Code

<div class="example-block">
 <p class="example-heading">Example<i class="icon-highlight example-heading-icon"></i></p>
 <p class="example-body">This block of text can be used to highlight a rule of law, provide an example, or emphasize some particular issue.</p>
</div>

Icon List

Element

A list
Can be used
To give examples.

Code

<ul class="entry-list-post">
 <li><i class="icon-pen4 icon-list-post-icon"></i>A list</li>
 <li><i class="icon-pen4 icon-list-post-icon"></i>Can be used</li>
 <li><i class="icon-pen4 icon-list-post-icon"></i>To give examples.</li>
</ul>

The class labeled “icon-pen4” can be replaced by any available icon. The full list of icons can be found here.

Footnotes

Element

Footnotes are an easy way to provide sources to the user without inconveniencing users who don’t care about authority.1 They can also be used to explain a tangentially-related topic.2 WordPress plugins automatically generate footnotes when enclosed with a predefined shortcode.

Code

Footnotes are an easy way to provide sources to the user without inconveniencing users who don't care about authority.[footnote]Like this.[/footnote] They can also be used to explain a tangentially-related topic.[footnote]Oxford Dictionary defines "tangential" to mean: "In a way that relates only slightly to a matter; peripherally."[/footnote] WordPress plugins automatically generate footnotes when enclosed with a predefined shortcode.

Element

Table of Contents

Code

To automatically generate a table of contents, simply insert the following short code on the line before the first subheading:

[toc]

Putting It All Together

Titles Should Be Fewer Than 65 Characters

Article subtitles are a place to explain what the page is about and why users should continue reading. They should include all target keywords.

The initial portion of text must be an introduction. The introduction comes before the first heading (and the table of contents if one is included in the article). The first paragraph must include all keywords.

The Rule

It might be a good idea to give users the basic legal rule right up front.

Most paragraphs should three or four lines in length.3 No paragraph may exceed five lines.

Table of Contents

1 Heading Level 1
- 1.1 Heading Level 2
- 1.2 Heading Level 2
2 Heading Level 1

Heading Level 1

Headings should describe the content within that section.

Write body copy naturally, and do not keyword stuff.

Heading Level 2

Every article should include at least a few headings. Each target keyword should appear in one or more headings.

No headings are given to a section unless that portion of the article can be divided into at least two subsections.

Consider providing links to relevant sources if they might be useful to the reader.

Heading Level 2

Headings can be written in either:

Full sentences that explain a concept. If this option is selection, normal sentence capitalization and punctuation should be used.
Short section titles. If this option is chosen, the headings should be given headline capitalization, with no ending punctuation.

Whatever option is chosen, it must remain consistent throughout the entirety of the document.

Heading Level 1

Users expect a conclusion at the end of an article. Although they will rarely read it, use it as an opportunity to explain why a lawyer can help the user in their situation.

Citation Formatting Examples

State Case

Doe v. ACME, Inc. (2016) 123 Cal.App.4th 45, 56 [quotes and cases summaries go here].

SCOTUS Case

Nationwide Mut. Ins. Co. v. Darden (1992) 503 U.S. 318, 326 [quotes and cases summaries go here].

Ninth Circuit Case

Pacific Merchant Shipping Ass'n v. Aubry (9th Cir. 1990) 918 F.2d 1409, 1419.

State Statute

Labor Code, § 203.

State Regulation

Cal. Code of Regs., tit. 8, § 11010.

Federal Regulation

29 C.F.R. § 541.400.

Steps to Follow When Uploading Static Files

If you have created a new post recently, you must first correct the footnotes by doing the following:
- Add  to the word or punctuation mark before the opening footnote tag.
- Replace [footnote] with [footnote]
- Replace [/footnote] with [/footnote]
Generate the static files by going to Tools -> WP Static HTML Output -> Click on the Link Labeled “Start Static Site Export”
If the input areas in the static output plugin are empty, paste in the following: http://localhost/worklawyers.com/404-oops/ http://localhost/worklawyers.com/style-guide/ https://www.google-analytics.com/analytics.js http://localhost/worklawyers.com/index.html http://localhost/worklawyers.com/sitemap.xml
Download and Unzip the generated static file package
In the static file folder, batch delete
<base href="https://www.WorkLawyers.com" />
Batch replace
localhost/worklawyers.com with
www.worklawyers.com
Batch replace
worklawyers.com/worklawyers.com with
worklawyers.com
Batch replace
wp2.worklawyers with
www.worklawyers
Batch replace
worklawyers.net with
worklawyers.com
Batch replace
WorkLawyers.net with
WorkLawyers.com
Batch replace
http://www.worklawyer with
https://www.worklawyer
If any previously-unused icons have been used, download an updated icon file from https://icomoon.io/
Upload all files to DigitalOcean

Iconography: A Complete List

A complete list of available icons can be found here: https://www.WorkLawyers.com/self/fonts/icomoon-worklawyers/demo.html

(Caution: Because of the file size, it may be slow to load.)

Like this.
Oxford Dictionary defines “tangential” to mean: “In a way that relates only slightly to a matter; peripherally.”
All factual propositions must be supported with a citation in a footnote.

Color Palette

Main Color Scheme

Colors for Vector Images

Pattern

Typography

Styling text

Lazy-Loading Shadow Image Holder

Element

Code

Button

Element

Code

Emphasis Block

Element

Code

Icon List

Element

Code

Footnotes

Element

Code

Table of Contents

Element

Code

Putting It All Together

Heading Level 1

Heading Level 2

Heading Level 2

Heading Level 1

Citation Formatting Examples

State Case

SCOTUS Case

Ninth Circuit Case

State Statute

State Regulation

Federal Regulation

Steps to Follow When Uploading Static Files

Iconography: A Complete List

Find out how we can help.