style guide

Header 1

Use for article headers. There’s a lot.
Can set to oblique for title on landing page scrolling banner.

Font: Rift
Style: Normal
Weight: 300
Size: 3.2rem*
Letter-spacing: 0.7px
Color: #546975

Header 2

Use for landing page section headers, and sub-headers within articles. Should be used in areas to grab the attention of the consumer when it’s longer than a few words.

Font: Rift
Style: oblique
Weight: 700
Size: 1.8rem*
Letter-spacing: 0.7px
Color: #546975

Header 3

Used for sub-sub-header within articles.

Font: Rift
Style: Normal
Weight: 700
Size: 1.5rem*
Letter-spacing: 0.7px
Color: #bbc3c8

Header 4

Use for sub-sub-sub-headers (rarely used but still needed), as well as landing page rankings author.

Font: Rift
Style: Normal
Weight: 700
Size: 0.9rem*
Letter-spacing: 0.7px
Color: #d10400

Header 5
Use this for author name on landing page top banner, and sub-header for landing page feature article banner. (use white for text color)

Font: IBM Plex Sans
Style: Uppercase
Weight: 700
Size: 0.9rem
Letter-spacing: 0.7px
Color: #bbc3c8

Header 6
Short quick.
Attention Grabbing.

Font: Abolition
Style: Normal
Weight: 300
Size: 7.5rem*
Color: #0a0a0a

Paragraph text

Self-explanatory…

Font: IBM Plex Sans
Style: Normal
Weight: 400
Size: 0.9rem
Color: #0a0a0a

Button settings

Font: IBM Plex Sans
Size: Small
Style: Uppercase
Weight: 700
Font Size: 0.8rem
Border weight: 2px
Border radius: 3px
Border and text color: #546975
(invert colors for hover)
(Buttons on images should be white. RotoViz red on hover)

*1rem = 16px – rem is a better measurement, and a more universal measurement used in web design.

**Default settings should follow the CSS style sheet loaded into the WordPress Customize page under “Additional CSS”.