912-638-6116

Primary Colors

  • Primary Accent

    #50d0c5

  • Primary Accent Dark

    #1f9e93

  • Secondary Accent

    #19282b

  • Primary Accent RGB*

    rgb(80, 208, 197)

*Note: You still have to specify: rgb(), ex: rgba(var(--primary-accent-rgb), 0.7)

Monochromatic Colors

  • Black

    #3a3a3a

  • White

    #ffffff

  • Grey 000

    #f5f5f5

  • Grey 100

    #ececec

  • Grey 150

    #ccc

  • Grey 200

    #939393

  • Grey 300

    #8c8c8c

  • Grey 350

    #b0b0b0

  • Grey 400

    #5f6364

Social Branded Colors

  • Facebook

    #3b5998

  • Google Plus

    #dd4b39

  • LinkedIn

    #0077b5

  • Twitter

    #1da1f2

  • Yahoo

    #410093

  • Microsoft

    #0078d7

Font Families

Serif Font:

The quick brown fox jumps over the lazy dog

font-family: 'Libre Baskerville', Georgia, serif;

Sans-Serif Font:

The quick brown fox jumps over the lazy dog

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

Headings

h1 Heading Example

h1 {
display: block;
margin: 0 0 24px;
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 48px;
line-height: 48px;
}

h2 Heading Example

h2 {
display: block;
margin: 0 0 16px;
font-size: 30px;
line-height: 40px;
}

h3 Heading Example

h3 {
display: block;
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
font-weight: 400;
line-height: 32px;
text-transform: uppercase;
}

h4 Heading Example

h4 {
display: block;
margin: 0;
font-size: 20px;
font-weight: 400;
line-height: 24px;
}

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Blockquote

Blockquote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.
~ Unknown

Highlight

Element with class="highlight". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.

Important

Element with class="important". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.

Footnote

Footnote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem.

Buttons