How To / Style Guide
Style Guide
A quick reference for the image sizes, fonts and colors used across the site.
Please reference the list below whenever you’re creating new images for your site. You should find a size for all possible images you’ll need/use.
Image Sizes
- Header Background Image (3:1): 1920 × 640
- Image + Text Image (3:2): 900 × 600
- Featured Post Image (3:2): 900 × 600
- Large CTA Image (1:1): 900 × 900
- Small CTA Image (1:1): 900 × 900
- Testimonial Image (1:1): 900 × 900
- Custom Column Image (1:1): 900 × 900
- Blurb or Column Icon (1:1): 100 × 100
Font Specifics
- XS (< 575px) – • /
- H1 – Futura PT, 700 • 36/44 • Color: #00 • Letter-Spacing: -0.4px • Margin: 0 0 20px
- H2 – Futura PT, 700 • 32/40 • Color: #000 • Margin: 20px 0
- H3 – Futura PT, 700 • 26/34 • Color: #000 • Letter-Spacing: -0.3px • Margin: 0 0 10px
- H4 – Futura PT, 700 • 22/28 • Color: #000 • Letter-Spacing: -0.2px • Margin: 0 0 10px
- H5 – Futura PT, 700, ALL CAPS • 19/25 • Color: #000 • Letter-Spacing: 1px • Margin: 0 0 10px
- H6 – Futura PT, 700 • 20/30 • Color: #333 • Margin: 0 0 10px
- Paragraph Text – Arial, 400 • 16/28 • Color: #222 • Margin: 0 0 20px
- Ordered List, Unordered List – Arial, 400 • 16/28 • Color: #222 • Margin: 0 0 10px
- Paragraph Intro Text – Arial, 400 • 20/32 • Color: #222 • Margin: 0 0 20px
- Paragraph Blockquote Text – Futura PT, 400 • 20/32 • Color: #000 • Margin: 30px
- Link Text – • / • Color: #003DA7
- Paragraph Pre-Title Text – Futura PT, 500, ALL CAPS • 18/23 • Color: #000 • Letter-Spacing: 2px • Margin: 0 0 20px
- Paragraph Small Text – Arial, 400 • 15/25 • Color: #444 • Margin: 0 0 10px
- Divider Line – • 4px/ • Color: #00945F • Margin: 50px 0
- SM (< 767px) – • /
- H1 – • 42/50 • Letter-Spacing: -0.5px
- Paragraph Intro Text – • /32
- MD (< 991px) – • /
- H1 – • 44/54 • Letter-Spacing: -0.5px
- H2 – • 36/46
- H3 – • 30/40 • Letter-Spacing: -0.35px
- Paragraph Text – • 18/32
- Ordered List, Unordered List – • 18/30
- Paragraph Intro Text – • 22/34
- Paragraph Blockquote Text – • 22/34 • Margin: 40px
- LG (< 1199px) – • /
- H1 – • 54/64 • Letter-Spacing: -0.6px
- H2 – • 42/54
- Paragraph Text – • 20/34
- Ordered List, Unordered List – • 20/30
- Paragraph Intro Text – • 24/38
- Paragraph Blockquote Text – • 26/38 • Margin: 60px
Site Color Values
#008857 | oms-column green | |
#000 | |
#FFF | |
#F8F8F8 | |
#181818 | |
#003DA7 | oms-column blue | |
#CE4A00 | oms-column dk-orange | |
Additional Colors | |
#56445A | oms-column dk-purple | |
#003C5D | oms-column dk-blue | |
#D56628 | oms-column orange | |
#B22A47 | oms-column red | |
#0092A7 | oms-column teal | |
#F3DF00 | oms-column yellow | |
#9C02AB | oms-column purple |