Color Palette

Main Color Scheme

#201c20
#393939
#839ca7

Darks

Used for text, icons, and background.

#ffffff
#ecf0f2
#dde4e7

Lights

Used mainly for backgrounds.

#006cff
#80b6ff
#0055a2

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: Freight Neo Pro; Font Size: 2.95em; Color: #201c20.

Header 2

Font: Freight Neo Pro; Font Size: 1.8em; Color: #201c20.

Header 3

Font: Freight Neo Pro; Font Size: 1.5em; Color: #201c20.

Header 4

Font: Freight Neo Pro; Font Size: 1.15em; Color: #201c20.

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

Font: Open Sans; Font Size: 1.2em; Color: #201c20; Font Style: Italic.

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: #006cff; Font Weight: 600.

Styling text

Emphasis

Font Style: Italic.

<em>Emphasis</em>

Strong Emphasis

Font Weight: 600.

<strong>Strong Emphasis</strong>

Stronger Emphasis

Font Weight: 600; Font Style: Italic.

<strong><em>Stronger Emphasis</em></strong>

Strongest Emphasis

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

<span class="strongest-em">Strongest Emphasis</span>

Button

Element

Button

Code

<a href="https://www.example.com" class="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.

Inline Image Block

Element

Text describing the image should go here
Images are no longer lazy-loaded on posts pages.

Code

<div class="image-article-box"> <img src="https://www.worklawyers.net/wp-content/uploads/548x274.png" width="548" height="274" alt="Text describing the image should go here" /> <div class="image-article-box-text">Images are no longer lazy-loaded on posts pages. </div></div>

Replace the image ending in “548×274.png” with an image of your choosing.

Drop Cap

Element

Dropcaps are simple to create, but some letters don’t work well with them. If the first sentence starts with letters like “i” or “a,” using a drop cap might be a bad idea.

Code

<span class="dropcap">D</span>ropcaps are simple to create, but some letters don't work well with them. If the first sentence starts with letters like "i" or "a," using a drop cap might be a bad idea.

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.

Table of Contents

Element

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.

950x425 Placeholder

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.

Heading Level 1

Text describing the image should go here
This area can be used to explain a topic or to give the image some context.

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.

Heading Level 3

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

Posts should include no more than three heading levels.

Heading Level 3

In practice, a third heading level should rarely be used.

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

  1. If you have created a new post recently, you must first correct the footnotes by doing the following:
    • Add <span class="wsnw"> to the word or punctuation mark before the opening footnote tag.
    • Add <span class="wsn"> directly after the opening footnote tag.
    • Replace [/footnote] with </span>[/footnote]</span>
  2. Generate the static files by going to Settings -> WP Static HTML Output -> Click on the Link Labeled “Start Static Site Export”
  3. Download and Unzip the generated static file package
  4. Get source code for main index page while not logged into WordPress
    • For some reason the static file on this page is blank
  5. Update the analytics file at https://www.google-analytics.com/analytics.js
  6. Delete excess AMP files from non-post pages
  7. Duplicate the /404-oops/ file, and make it 404.html on the main index of the static files
  8. Check to make sure the sitemap page was exported with the static files.
  9. Update and download an updated XML sitemap and URL list:
    • In the WordPress admin panel, click “All in One SEO” -> “XML Sitemap”
    • Click “Update Sitemap”
    • View the sitemap, download the source code, and save the file to the main index of the static files as sitemap.xml
  10. Update the RSS feed:
    • Download an updated RSS feed from https://www.worklawyers.net/feed/
    • Create a folder in the main index of the static files titled feed
    • Save the updated RSS feed in the newly-created feed folder and name the file index.xml
  11. In the static file folder, batch delete the following:
    • <base href="https://www.worklawyers.net" />
    • ,noodp,noydir
    • ?amp
    • <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.worklawyers.net/xmlrpc.php?rsd" /><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.worklawyers.net/wp-includes/wlwmanifest.xml" />
  12. In the static file folder, batch replace the following:
    • Replace https://www.worklawyers with https://www.worklawyers
    • repalace wp.worklawyers with www.worklawyers
  13. For non-post pages only: Search for amphtml and delete the entire <link> tag in which that class is found.
  14. If any previously-unused icons have been used, download an updated icon file from https://icomoon.io/
  15. Upload all files to Digital Ocean

Iconography: A Complete List

A complete list of available icons can be found here: https://www.worklawyers.net/full-icon-list/

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


  1. Like this.

  2. Oxford Dictionary defines “tangential” to mean: “In a way that relates only slightly to a matter; peripherally.”

  3. All factual propositions must be supported with a citation in a footnote.