Style Guide

1. Typography


Heading 1 (Main Title)

Heading 2 (Secondary Title)

Heading 3 (Main Heading)

Heading 4 (Sub-heading)

Heading 5 (Sub-heading 2)
Heading 6

Heading 1 + Dash

Heading 2 + Dash

Heading 3 + Dash

Heading 4 + Dash

Heading 5 + Dash
Heading 6 + Dash

Lead-in text (p format): This is lead-in text, and should be used for an introductory sentence or short paragraph. There should never be more than one paragraph of intro text. This style can be used by manually adding "class='lead'" inside the wrapping tag.

P: This is paragraph text which should be used for the majority of all text content on the page. Inline links, which look like this, may be added to paragraph text using the link icon. Paragraphs are ended with the return key, which will create a large margin at the end of the paragraph:

Within each paragraph a “single-line break” may also be created by holding down shift, and then hitting return:
New line

Small paragraph text. This is small-paragraph text which should be used for content that is second in hierarchy, like the Helpful links sidebar. This style can be used by manually adding "class='small'" inside the wrapping tag.

  • This is
  • an “unordered”
  • or bulleted list
    • This is a sub bullet
  1. This is
  2. an “ordered”
  3. or numbered
    1. list

This is bold text and should be used inline and never for headings.

This is italic text.

Blockquote text. This can be used to highlight important information or share a testimonial.

- Quote Attribution, (if needed). This style can be used by manually adding an "class='caption'" to it's <p> tag.

Below is a horizontal rule. Horizontal rules should be used sparingly (once or twice per page) to separate content of completely different subject matters. A horizontal rule should immediately be followed by a Heading 3. This style can be used by manually adding an <hr> tag.


2. WYSIWYG


Heading 1 (Main Title)

Heading 2 (Secondary Title)

Heading 3 (Main Heading)

Heading 4 (Sub-heading)

Heading 5 (Sub-heading 2)
Heading 6

Heading 1 + Dash

Heading 2 + Dash

Heading 3 + Dash

Heading 4 + Dash

Heading 5 + Dash
Heading 6 + Dash

Caption (p format). This can be added to any photo within the WYSIWYG. This style can be used by manually adding "class='small'" inside the wrapping tag.

3. Elements


Add to Bag Add to Bag

4. Colors


  • Black #000000
  • White #FFFFFF
  • Charcoal #424343
  • Dark Grey #A2AAAD
  • Grey #CACFD3
  • Dark Green #74956C
  • Green #CFDACC
  • Dark Blue #B7C9D3
  • Blue #E2E9ED
  • Light Blue #F0F3F3
  • Red #D01111