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
- Horizontal Photo (3:2 aspect ratio): 1800px × 1200px
- Vertical Photo (2:3 aspect ratio): 1200px × 1800px
- Square Photo (1:1 aspect ratio): 1800px × 1800px
- Icon (1:1 aspect ratio): 75px × 75px
Font Specifics
- H1 (Mobile) – Benton Sans, 700 • 36px/1.2 • Color: #ffffff • Margin: 0 0 20px
- H2 (Mobile) – Benton Sans, 700 • 30px/1.2 • Color: #211746 • Margin: 0 0 20px
- H3 (Mobile) – Benton Sans, 700 • 22px/1.22 • Color: #211746 • Margin: 0 0 10px
- H4 (Mobile) – Benton Sans, 700 • 18px/1.4 • Color: #211746 • Margin: 0 0 10px
- H5 (Desktop) – Benton Sans, 700, ALL CAPS • 16px/1.5 • Color: #211746 • Margin: 0 0 10px
- H6 (Mobile) – Benton Sans, 700 • 16px/1.5 • Color: #211746 • Margin: 0 0 10px
- body, p, ol, ul (Mobile) – Benton Sans, 400 • 15px/1.67 • Color: #333D47 • Margin: 0 0 25px
Site Color Values
| #000000 – Black | |
| #333D47 – Gray Dark | |
| #9B9FA2 – Charcoal | |
| #EEF1F6 – Gray / Gray-Blue | |
| #F9F9FB – Gray Light | |
| #FFFFFF – White | |
| #034ca2 – Blue Dark | |
| #0176D3 – Blue | |
| #240643 – Midnight Purple | |
| #300B60 – Violet | |
| #401075 – Indigo | |
| #5A1BA9 – Purple | |
| #9050E9 – Lavender | |
| #D7BFF2 – Lilac |