Web Style Guide

Colors

Hex Values

$red-dk
#721626

$red
#b12029

$red-lt
#e2202b

$black
#080906

$gray-dk
#242424

$gray
#444

$gray-lt
#a5a5a5

$white
#fff

$off-white
#f4ecd4

$tan
#c6bcab

$blue-dk
#0c4966

$blue
#1f77ab

$blue-lt
#38bde6

$blue-ltst
#d6f5ff

$gold-dk
#b37806

$gold
#c28f2c

$yellow
#f6b020

$yellow-lt
#fcda69

$purple-dk
#582366

$purple
#a35ca5

$purple-lt
#d0a5cd

$green-dk
#247a45

$green
#309b47

$green-lt
#a2cc3f

Classes

default Paragraph Text

.red-dk Paragraph Text

.red Paragraph Text

.red-lt Paragraph Text

.black Paragraph Text

.gray-dk Paragraph Text

.gray Paragraph Text

.gray-lt Paragraph Text

.white Paragraph Text

.off-white Paragraph Text

.tan Paragraph Text

.blue-dk Paragraph Text

.blue Paragraph Text

.blue-lt Paragraph Text

.blue-ltst Paragraph Text

.gold-dk Paragraph Text

.gold Paragraph Text

.yellow Paragraph Text

.yellow-lt Paragraph Text

.purple-dk Paragraph Text

.purple Paragraph Text

.purple-lt Paragraph Text

.green-dk Paragraph Text

.green Paragraph Text

.green-lt Paragraph Text

Background Textures

.bg--white

.bg--black

.bg--blue-lt

.bg--blue-dk

.bg--red

.bg--red-dk

.bg--yellow

.bg--tan

Photo Collage Background

Black Background with Torn Edges

Light Blue Background with Torn Edge After

White Background, no Torn Edges

Dark Red Background with Torn Edges

Font Styles

Font Families

Body Copy

Cardigan

Heading

Pesto Fresco

Funky Heading .funky

Leto Two Condensed Bold

Alternate Heading .alt

HWT Republic Gothic Solid

Font Headings

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.

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 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.small

Best used for descriptions.

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.