Utah Peaks Website
Styleguide
Colors
Primary#216880
Secondary#3fa7d6
Dark#163b4a
Accent 1#e6f3f7
Accent 2#3fa7d6
Accent 3#f4f7f9
Typography
H1 Hero Font: Roboto Slab | Color: #FFF | Size: 65px | 700
H1 Heading Font: Roboto Slab | Color: | Size: 48px | 700
H2 Heading Font: Roboto Slab | Color: #0071A7 | Size: 39px | 600
H3 Heading Font: Roboto Slab | Color: #0071A7 | Size: 30px | 600
H4 Heading Font: Roboto Slab | Color: #000000 | Size: 25px | 500
H5 Heading Font: Roboto Slab | Color: #68BA98 | Size: 20px | 700
H6 Heading Font: Roboto Slab | Color: #68BA98 | Size: 16px | 700
Primary FontRoboto
Paragraph, list and more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh sem, tincidunt in odio nec, vehicula malesuada velit. Suspendisse convallis, orci in ornare laoreet, orci odio mollis quam, et laoreet tellus dui id erat. Mauris non diam eu leo volutpat accumsan.
Quisque lacus ex, auctor nec egestas in, hendrerit vel lectus. Mauris quis enim pellentesque, gravida augue ac, varius neque.
- Praesent non lacus rhoncus, tempus tellus ut, placerat nisl.
- Sed vitae nibh cursus, condimentum est eu, tincidunt felis.
- Nullam posuere metus eu neque pretium sollicitudin.
- Praesent non lacus rhoncus, tempus tellus ut, placerat nisl.
- Sed vitae nibh cursus, condimentum est eu, tincidunt felis.
- Nullam posuere metus eu neque pretium sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Button Styles
PrimaryLarge
.button .button--large
Primary HoverLarge
PrimaryRegular
.button .button--large
Primary HoverRegular
PrimarySmall
.button .button--small
Primary HoverSmall
SecondaryLarge
.button .button--large
Secondary HoverLarge
.button .button--secondary .button--large
SecondaryRegular
.button .button--large
Secondary HoverRegular
.button .button--secondary
SecondarySmall
.button .button--small
Secondary HoverSmall
.button .button--secondary .button--small