Style Guide

Logos | Colors | Fonts | Links/Buttons

Logos

Primary

Secondary

Colors

Main 1

#e4b296

rgb(65,64,66)

cmyk(0%,21.93%,34.21%,10.59%)

Main 2 (H&H Orange)

#f15635

rgb(241,86,53)

cmyk(0%,64.32%,78.01%,5.49%)

Used as an accent color and as a CTA (call to action) section background color.

Accent 1

#414042

rgb(65,64,66)

cmyk(1.52%,3.03%,0%,10.59%)

Accent 2

#e4e4e4

rgb(228,228,228)

cmyk(0%,0%,0%,10.59%)

Used as an alternate background color to white or Main 2.

Accent 3

#58585b

rgb(88,88,91)

cmyk(3.3%,3.3%,0%,64.31%)

Fonts

Headings: Roboto Condensed

Heading 1

50px | Uppercase | Line Height: 1.2em | Weight: 700

Page Subheading (H2)

40px | Line Height: 1.4em | Weight: 300

Heading 2

35px | Line Height: 1.3em | Weight: 700

Heading 3

30px | Line Height: 1.4em | Weight: 700

Heading 4

25px | Line Height: 1.5em | Weight: 700

Body: Roboto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet aliquet justo. Nunc a commodo est. Morbi eget mi et libero dictum vehicula

Body Text | 16px | Line Height: 1.6em | Weight: 300

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet aliquet justo. Nunc a commodo est. Morbi eget mi et libero dictum vehicula

Testimonial or feature text | 20px | Line Height: 1.6em | Weight: 500

Links/buttons

Buttons:

Inline Links:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet aliquet justo. Nunc a commodo est. Morbi eget mi et libero dictum vehicula Nunc a commodo est. Morbi eget mi et libero dictum vehicula Nunc a commodo est. Morbi eget mi et libero dictum vehicula

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet aliquet justo. Nunc a commodo est. Morbi eget mi et libero dictum vehicula Nunc a commodo est. Morbi eget mi et libero dictum vehiculaNunc a commodo est. Morbi eget mi et libero dictum vehicula

Nunc a commodo est. Morbi eget mi et libero dictum vehicula