Style Guide
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
- Homepage Hero / Project Hero / Interior Heros: 1500px × 850px
- Homepage Grid – Square: 600px × 600px
- Homepage Grid – Landscape Rectangle: 600px × 285px
- Homepage Grid – Portrait Rectangle: 285px × 600px
- Homepage Grid – Large Landscape Rectangle: 1140px × 365px
- Page Block Tall Image: 750px × (height variable)
- Page Block Standard Image: 750px × (height variable)
- Project Landing Images: 600px × 500px
- Project Categories Images: 600px × 500px
- Team Landing Images: 600px × 500px
- Team Detail Image: 600px × 700px
- Blog Landing Thumbnail: 600px × 500px
- Blog Detail Hero Image: 850px × 600px
- Blog Detail In-Line Image: 850px max × (height variable)
- Sidebar Image / Video: 600px × (height variable)
Font Specifics
- H1 – DIN Next Rounded LT Pro, 400, ALL CAPS • 36px/38px • Color: #383D3F • Letter-Spacing: 0px • Margin: 0 0 30px
- Tablet H1 – • 30px/32px • Letter-Spacing: 0px • Margin: 0 0 20px
- Mobile H1 – • 30px/32px • Letter-Spacing: 0px • Margin: 0 0 0 20px
- H2 – DIN Next Rounded LT Pro, 400, ALL CAPS • 40px/42px • Color: #545454 • Letter-Spacing: -.025px • Margin: 0 0 25px
- Tablet H2 – • 34px/36px • Letter-Spacing: 0px • Margin: 0 0 20px
- Mobile H2 – • 30px/32px • Letter-Spacing: 0px • Margin: 0 0 20px
- H3 – DIN Next Rounded LT Pro, 400, ALL CAPS • 28px/30px • Color: #383D3F • Letter-Spacing: .010px • Margin: 0 0 20px
- Mobile H3 – • 25px/28px • Letter-Spacing: .010px • Margin: 0 0 15px
- H4 – DIN Next Rounded LT Pro, 300 • 24px/35px • Color: #383D3F • Letter-Spacing: .010px • Margin: 0 0 30px
- Tablet H4 – • 22px/32px • Margin: 0 0 20px
- Mobile H4 – • 18px/30px • Letter-Spacing: 10px • Margin: 0 0 20px
- H5 – DIN Next Rounded LT Pro, 400, ALL CAPS • 20px/24px • Color: #383D3F • Letter-Spacing: .010px • Margin: 0 0 12px
- Tablet H5 – • 15px/18px • Color: #535354 • Letter-Spacing: .010px • Margin: 0 0 12px
- Mobile H5 – • 15px/18px • Letter-Spacing: .010px • Margin: 0 0 12px
- H6 – Geneva, 400, ALL CAPS • 16px/25px • Color: #383d3f • Letter-Spacing: 0px • Margin: 0 0 12px
- Tablet H6 – • 14px/18px • Margin: 0 0 12px
- Mobile H6 – • 14px/18px • Margin: 0 0 12px
- Block Quote – DIN Next Rounded LT Pro, 400 • 24px/35px • Color: #383D3F • Letter-Spacing: .010pxpx • Margin: 0 0 25px
- Tablet Block Quote – • 22px/32px • Letter-Spacing: .010px • Margin: 0 0 20px
- Mobile Block Quote – • 18px/30px • Letter-Spacing: .010px • Margin: 0 0 20px
- Paragraph – DIN Next Rounded LT Pro, 300 • 18px/32px • Color: #383d3f • Letter-Spacing: 0px • Margin: 0 0 30px
- Tablet Paragraph – • 18px/30px • Margin: 0 0 15px
- Mobile Paragraph – • 18px/30px • Margin: 0 0 15px
- Sidebar Text – Geneva, 400 • 14px/24px • Color: #383D3F • Letter-Spacing: 0px • Margin: 0 0 20px
Site Color Values
|
#df6524 |
|
#f2f2f2 |
|
#383d3f |
|
#646c6f |
|
#7fba5b |
|
#cd648b |
|
#47c4f0 |