Images, Colors, & Font Specs
Please reference the list below whenever you’re creating new images for your site and save all images in .webp format. You should find a size for all possible images you’ll need/use.
Image Sizes
1920px × 900px
- Home Hero Background Image – top right focus
1920px × 650px
- Interior Page Heroes – center focus
- CTA Background Images
900px × 900px
- Gallery Images
- CTA Focus Image
- Large Hero Focus Image
- Team Headshots (500px x 500px Minumum)
900px × 600px
- Card Images
- Image / Text
- Small Hero Focus Image
200px × 200px
- Testimonial Image
75px × 75px
- Icons
Font Specifics
- H1 Mobile – Montserrat, 900 • 2.188rem/2.625rem • Color: #111 • Margin: 0 0 20px; Padding: 0;
- H1 Desktop – • 3rem/3.25rem
- H2 Mobile – Montserrat, 900 • 1.75rem/2.25rem • Color: #111 • Margin: 0 0 20px; Padding: 0;
- H2 Desktop – • 2rem/2.5rem
- H3 Mobile – Montserrat, 900 • 1.375rem/1.688rem • Color: #111 • Margin: 0 0 20px; Padding: 0;
- H3 Tablet & Desktop – • 1.625rem/1.938rem
- H4 Mobile – Montserrat, 900 • 1.25rem/1.75rem • Color: #111 • Margin: 0 0 20px; Padding: 0;
- H4 Tablet & Desktop – • 1.625rem/1.938rem;
- H5 – Montserrat, ALL CAPS • 1.25rem/1.75rem • Color: #111 • Letter-Spacing: 2px • Margin: 0 0 20px; Padding: 0;
- H6 – Montserrat, 900 • 1.125rem/1.75rem • Color: #111 • Margin: 0 0 20px; Padding: 0;
- Pretitle – Comic Neue, 700 • 0.938rem/1.25rem • Color: #111 • Letter-Spacing: 0.094rem • Margin: 0 0 10px; Padding: 0;
- Intro Text Mobile – Montserrat, 500, ALL CAPS • 1.125rem/1.75rem • Color: #444 • Margin: 0 0 20px; Padding: 0;
- Intro Text Desktop – • 1.375rem/2.188rem
- Paragraph Mobile – Montserrat, 400 • 1px/1.875rem • Color: #444 • Margin: 0 0 20px; Padding: 0;
- Paragraph Tablet & Desktop – • 1.125rem/1.875rem
- Lists Mobile – Montserrat, 400 • 1px/1.875rem • Color: #444 • Margin: 0 0 10px; Padding: 0 0 0 10px;
- Lists Tablet & Mobile – • 1.125rem/1.875rem
Site Color Values
#FFFFFF |
|
#F9F9F9 |
|
#FFF9F0 |
|
#DE3737 |
|
#53843E |
|
#008492 |
|
#2181A6 |
|
#444 |
|
#111 |