Style Guide

Primary Spacing

Small Width: 6 Columns

Medium (Default) Width: 8 Columns

Large Width: 12 Columns

X Large Width: Full Browser Width


Vertical Spacing (Padding & Margins)

X-Small

Small

Medium

Large

X-Large

XX-Large


Colors

Mostly Black

Default

Red Tint

Dark Gray Shade

Dark Gray

Mostly Black

Hover

Medium Gray

Light Gray

Light Gray Tint


Fonts

Gotham

Faces: Regular, Italic, Medium, Medium Italic, Bold, Bold Italic


Typography

H1 Dispaly – Sixty zippers were quickly picked from the woven jute

H1 – Sixty zippers were quickly picked from the woven jute

H2 – Sixty zippers were quickly picked from the woven jute

H3 – Sixty zippers were quickly picked from the woven jute

H4 – Sixty zippers were quickly picked from the woven jute

H5 – Sixty zippers were quickly picked from the woven jute
H6 – Sixty zippers were quickly picked from the woven jute

Paragraph

Hello babies. Welcome to Earth. It’s hot in the summer and cold in the winter. It’s round and wet and crowded. On the outside, babies, you’ve got a hundred years here. There’s only one rule that I know of, babies—God damn it, you’ve got to be kind.


Paragraph Small

Hello babies. Welcome to Earth. It’s hot in the summer and cold in the winter. It’s round and wet and crowded. On the outside, babies, you’ve got a hundred years here. There’s only one rule that I know of, babies—God damn it, you’ve got to be kind.


Paragraph Smallest

Hello babies. Welcome to Earth. It’s hot in the summer and cold in the winter. It’s round and wet and crowded. On the outside, babies, you’ve got a hundred years here. There’s only one rule that I know of, babies—God damn it, you’ve got to be kind.


Unordered List – Desktop


Unordered List Small – Desktop / Mobile


Blockquote

The investment in Redzone this year was one of the easiest and best decisions we have ever made for our business.”

Nate Hyde | CEO, Honeyville

Decorative Bar



Buttons


Forms


Columns

Columns should have NO PADDING by default.

Add Options for:
• Padding left/right. Use defined sizes X-Small–Large.
• Remove Column padding on mobile
• Option for vertical rules in between columns

Column

Column

Column


Groups

Groups should have NO PADDING by default.

Add Options for:
• Need ability for rounded corner (20% container width) on either top left or top right (See examples below)
• Background Image Dark Overlay (See example below) • Padding left/right. Use defined sizes X-Small–Large.
• Animate group when visible (slide group up and fade in)


Images

Add Options for:
• Dropshadow

With Shadow

Without Shadow