Home: Smith & Lo, California Work LawyersHome About Smith & Lo, California Work LawyersAbout Pricing: Smith & Lo, California Work LawyersPricing Articles: Smith & Lo, California Work LawyersArticles Contact Smith & Lo, California Work LawyersContact

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; Font Size: 2.75em; 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; Font Size: 22px; Color: #201c20.

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.

<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: #0878b8; 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="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.

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="http://wp.justinlolaw.com/wp-content/uploads/568x378.png" width="568" height="378" 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 “568×378.png” with an image of your choosing.

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.

960x480 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.

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

  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.
    • Replace [footnote] with [footnote]<span class="wsn">
    • Replace [/footnote] with </span>[/footnote]</span>
  2. Generate the static files by going to Tools -> WP Static HTML Output -> Click on the Link Labeled “Start Static Site Export”
  3. Download and Unzip the generated static file package
  4. Update the analytics file at https://www.google-analytics.com/analytics.js
  5. Delete excess file folders and subfolders, if there are any.
  6. In the static file folder, batch delete <base href="https://www.worklawyers.net" />
  7. In the static file folder, batch replace the following:
    • Replace http://wp2.worklawyers with https://www.worklawyers
    • repalace wp2.worklawyers with www.worklawyers
  8. If any previously-unused icons have been used, download an updated icon file from https://icomoon.io/
  9. Upload all files to HostGator

Iconography: A Complete List

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

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


  1. Like this.

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

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

    Footnote 3

Find out how we can help.