Style Guide
A reference for all the colors, image sizes and fonts 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
- Home Hero Image: 1920 × 970
- Interior Hero Image: 1920 × 700
- Testimonial Page Block Image: 1920 × 700
- 50/50 Image: 800 × 600
- 4-col Image Image Cards: 370 x 370
- 3-col Image Image Cards: 480 x 360
- 2-col Image Image Cards: 600 x 320
- Blog Card Images: 370 x 370
- Blog Featured Image: 900 x 600
- Team Headshot: 370 x 370
- Icons: 80 x 80 – SVG or PNG recommended
Font Specifics
- H1 – Adobe Garamond Pro, 600 • 48/66px • Color: Nile Blue • Margin: 0 0 15px
- H1 Desktop – 70/98px
- H2 – Adobe Garamond Pro, 600 • 40/56px • Color: Nile Blue • Margin: 0 0 15px
- H2 Desktop – 54/76px
- H3 – Adobe Garamond Pro, 600 • 32/45px • Color: Nile Blue • Margin: 0 0 15px
- H3 Desktop – 40/56px • Margin: 0 0 20px
- H4 – Roboto, 700 • 26/38px • Color: Nile Blue • Margin: 0 0 15px
- H5 – Roboto, 700 • 22/30px • Color: Nile Blue • Margin: 0 0 15px
- H6 – Roboto, 400 • 22/33px • Color: Nile Blue • Margin: 0 0 15px
- Paragraph – Roboto, 400 • 18/27px • Color: Charcoal • Margin: 0 0 20px
- Paragraph Desktop – 20/30px
- Intro Paragraph – Roboto, 400 • 22/33px • Color: Charcoal • Margin: 0 0 20px
- Intro Paragraph Desktop – 24/36px
- Pre-Title – Roboto, 500, ALL CAPS • 16/30px • Color: Sea Blue • Letter Spacing: 1px
- CTA Link Text – Roboto, 700, Italic • 18/24px • Color: Sea Blue
- Button Text – Roboto, 700 • 18/24px • Color: Charcoal
Site Color Values
| #152C53 – Nile Blue | |
| #01426A – Regal Blue | |
| #00687D – Sea Blue | |
| #00998B – Teal | |
| #D6A12A – Gold | |
| #918779 – Stone | |
| #EDF0F5 – Light Grey | |
| #353B45 – Charcoal | |
| #000000 – Black | |
| #FFFFFF |