Style Guide
How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks
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
- Home Hero Photorealistic Object Image (1:1): 700 × 700px PNG (Transparent BG)
- Interior Hero Photorealistic Object Image (1:1): 430 × 430px PNG (Transparent BG)
- Main Pages Hero Texture BG: 1580 × 620px
- Sub pages Hero Texture BG: 1580 × 300px
- Image-Text Page Block Image (4:3): 900 × 600px JPG
- Testimonial Page Block Headshot: 80 × 80px JPG
- Logos (Rectangle): 225 × 130px PNG
- Logos (1:1) (Circle/ Square): 130 × 130px PNG
- Icons – PNG: 60 × 60px
- Blog Featured Image & Cards: 735 × 360px JPG
Font Specifics
- Headers (On Dark BG) – • / • Color: #FFFFFF
- H1: Mobile & Tablet – Proxima Nova, 900 • 40px/50px • Color: #004582, Medium Blue • Letter-Spacing: -0.5px • Margin: 0 0 10px 0; Padding: 0;
- H1: Desktop – • 56px/66px • Margin: 0 0 15px; Padding: 0;
- H2: Mobile & Tablet – Proxima Nova, 900 • 33px/42px • Color: #004582, Medium Blue • Letter-Spacing: -0.5px • Margin: 0 0 10px 0; Padding: 0;
- H2: Desktop – • 50px/60px • Letter-Spacing: -0.5px • Margin: 0 0 15px; Padding: 0;
- H3: Mobile & Tablet – General Header – Proxima Nova, 900 • 28px/35px • Color: #004582, Medium Blue • Margin: 0 0 10px; Padding: 0;
- H3: Desktop – General Header – • 36px/44px • Margin: 0 0 15px; Padding: 0;
- H3: Mobile & Tablet – Blurb Style – , Bold • 26px/33px • Color: #004582, Medium Blue • Margin: 0 0 10px; Padding: 0;
- H3: Desktop – Blurb Style – • 30px/36px
- H4: Mobile & Tablet – Proxima Nova, 900 • 22px/28px • Color: #004582, Medium Blue • Margin: 0 0 10px 0; Padding: 0;
- H4: Desktop – • 28px/35px • Margin: 0 0 15px; Padding: 0;
- H5: Mobile & Tablet – Proxima Nova, 900 • 19px/24px • Color: #004582, Medium Blue • Margin: 0 0 10px; Padding: 0;
- H5: Desktop – • 22px/28px • Margin: 0 0 15px; Padding: 0;
- H6: Mobile & Tablet – Proxima Nova, 900 • 17px/22px • Color: #004582, Medium Blue • Margin: 0 0 10px; Padding: 0;
- H6: Desktop – • 20px/30px • Margin: 0 0 15px; Padding: 0;
- Par Intro Text: Mobile & Tablet – Proxima Nova, 500 • 18px/27px • Color: #002454, Dark Blue • Margin: 0 0 20px; Padding: 0;
- Par Intro Text: Desktop – • 22px/34px
- Body Copy: Mobile & Tablet – Proxima Nova, 400 • 15px/23px • Color: #002454, Dark Blue • Margin: 0 0 20px; Padding: 0;
- Body Copy: Desktop – • 17px/26px
- Pre-Title – Proxima Nova, 600, ALL CAPS • 14px/24px • Color: #0061A6, Medium Blue 2 • Letter-Spacing: 1px • Margin: 0 0 10px; Padding: 0;
Site Color Values
#0075C9 | |
#FFFFFF | |
#000000 | |
#0061A6 | |
#004582 | |
#002454 | |
#63E6B8 | |
#EBF4FB |