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
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”.