Style Guide

H1

Use this for page titles only (vital for SEO), preferably with basic descriptive info, around 5-6 words

H2

This can optionally be used for calling out a big-though-brief idea at the top of a page (under the header image) or occasionally lower in the page.

It utilizes our secondary house font, Poynter OS Display.

H3

Use this for section headers to break-up page content. Keep these short-and-sweet, and capitalize all non-preposition/conjuntions. Do not end with punctuation unless necessary to convey a point. Turn this to house teal (#00BAB3) or green (#6CC24A) if on a dark background.

H4

Use this for creating sub-sections within major sections of a page. Apply it sparingly — though if it’s paired with icons, ensure they are the same color.

H5
This is for creating pull-quotes. Be sure to use the “quote block” function within the text editor!

Quoted Person (paragraph font)
Title/Company

H6
This is the default font for creating captions under images or other similar text. Keep these short and sweet, if possible, but always write them in complete sentences.

P (Paragraph)

This is the default style for all body text on pages, blog posts, and more.

This text is written in H6, which we’ve been using for captions. FYI, the Spacer/Gap between the image and this textbox is 10 for desktop and 5 for all tablet/mobile.

Primary Section Titles — Like This One — are Generally Quite Brief and Utilize H3 Formatting

The “Spacer/Gap” space between the subhead and this is 30 desktop and 15 for tablets/mobile. A great rule of thumb when using the SUPER HELPFUL “Spacer/Gap” widget is to pick a size for “Desktop” that looks good on your computer, then begin your mobile testing by setting the others to half that size, then adjusting up or down from there.

How To Use Buttons

Always check the buttons you create on mobile to ensure they look as good on cell phones as they do on your computer screen. Often, the button gets pushed off the edge on mobile, so short titles are key.

  • Use the Advanced Button widget.
  • Button titles are in ALL CAPS.
  • Size: “Normal,” though “Small” is an OK second option if space is limited or the title is long.
  • “Typography” tab in the widget to make the button text bold.
  • Button title, both before and during hover, is white (#ffffff).
  • Using the alpha channel (transparency) in WordPress doesn’t help on white backgrounds, so we’ve manually identified the 70% opacity equivalent of each starting color for its hover counterpart.

Primary functions; click to read/learn more.
Standard: #003d4c | Hover: #4c7780

Alternate for the same functions as navy, dark backgrounds, or when color variation is needed.
Standard: #00bab3 | Hover: #4ccfca

Primary calls to action and “Contact Person” links.
Standard: #a8317c | Hover: #c26ea2

Other actions, like download, watch, request, take survey, etc.
Standard: #6cc24a | Hover: #99d480

The above was made using an Image Carousel widget. Though it will technically work with images of all sizes, to make it look coherent and move smoothly, strongly consider using images pre-cropped to all exactly the same dimensions. Note this text is in H6, used for captions.

Dual Button for use exclusively floating on top of page header graphics.

Choose Style 1. Font size is 12, line size is 10, and button width is 200. Center alignment.

  • Button 1 (teal): Standard: #00bab3 | Hover: #4ccfca
  • Button 2 (green): Standard: #6cc24a | Hover: #99d480
  • Divider: Set to “Text” but leave field empty (will auto-fill with “or” on front end of site). Text: white | Background: #003d4c
  • Typography: bold / white / white for both buttons (scroll down)
0:00
0:00