Style Guide

Colors

Hex Values

$bluebird
#83aaaf

$vanilla
#eee6e0

$gold
#d1aa6d

$gold-dk
#8e6c38

$navy
#19325a

$navy-dk
#0b1d3a

$green
#539864

$red
#bf5353

$black
#000

$white
#fff

$off-white
#fdf5e9

$gray-10
#e5e5e5

$gray-20
#c9c9c9

$gray-60
#676767

$gray-90
#353434

Classes

default Paragraph Text

.bluebird Paragraph Text

.gold Paragraph Text

.gold-dk Paragraph Text

.navy Paragraph Text

.navy-dk Paragraph Text

.green Paragraph Text

.red Paragraph Text

.gray-10 Paragraph Text

.gray-20 Paragraph Text

.gray-60 Paragraph Text

.gray-90 Paragraph Text

.white Paragraph Text

Background Styles

.bg--navyLines

.bg--vanillaLines

.bg--whiteDots

.bg--bluebirdEggs

.bg--goldEggs

Font Styles

Achieve these styles by using: h1, .h1, or span.h1

H1 Heading Styles.

H2 Heading Styles.

H3 Heading Styles.

H4 Heading Styles.

H5 Heading Styles.

H6 Heading Styles.

h1.fancy

Fancy Text

h2.title

Title / Offering

Body Styles

p

This is the default size and styling for paragraph body copy throughout the site. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.

p.big

Big body copy

p.small

Best used for descriptions.

p.smaller

Smaller text, best used for secondary links within body copy.

p.details

When listing out details, this is best used to seperate the text from other copy.

p a

This text is a hyperlink

mark

This text is highlighted.

blockquote

"Blockquote suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."
Blockquote Footer, Author

Lists

This is an Unordered List.
This is an Unordered List.
- This is a nested Unordered List.
- This is a nested Unordered List.
This is an Unordered List.
This is an Unordered List.
This is an Unordered List.

This is an Ordered List.
This is an Ordered List.
1. This is a nested Ordered List.
2. This is a nested Ordered List.
This is an Ordered List.
This is an Ordered List.
This is an Ordered List.

Logos

Desktop Logo

Mobile Logo

Form Elements

First Name *

Your Message *

Type of Business *

I understand the terms and conditions.

Yes No

Buttons & Styled Links

a.button

.button .button.secondary

button

input[type="submit"]

Content Blocks

Text Block

Text blocks have three widths to choose from, including: 600px, 750px, and 1280px. This is currently set to 750px wide. You can set the width in the Styles tab of the Text Block.

Text blocks have three widths to choose from, including: 600px, 750px, and 1280px. This is currently set to 600px wide. You can set the width in the Styles tab of the Text Block.

Text blocks have three widths to choose from, including: 600px, 750px, and 1280px. This is currently set to 1280px wide. You can set the width in the Styles tab of the Text Block.

Image + Text Block

Set where you want the photo.

In addition to being able to place the image on the left or right of the text, you can also set the image size to be 25% or 50% the width of the screen. This image is currently set to be 50% and on the right of the text.