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
- Cras justo odio dapibus ac facilisis
- Hello babies. Welcome to Earth.
- God damn it
- you’ve got to be kind
- Sub bullet
- Sub sub bullet
- Sub bullet
Unordered List Small – Desktop / Mobile
- Cras justo odio dapibus ac facilisis
- Hello babies. Welcome to Earth.
- God damn it
- you’ve got to be kind
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
Are you ready for Productivity NOW?
Contact us and let's begin empowering your frontline and growing your bottomline.
;)