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