Stockade Collective Style Guide
Kingston, NY | Digital Advertising Partner
A comprehensive brand style guide for The Stockade Collective, covering colors, typography, design principles, and component patterns for consistent brand application across all touchpoints.
Color Palette
Primary Colors
Cream/Beige
#E9EADC
Background, light sections, soft contrast
Off-White
#F6F2EE
Alternative light background, card backgrounds
Pure White
#FFFFFF
Clean backgrounds, content cards
Charcoal Black
#191919
Primary text, strong contrast elements
Accent Colors
Bright Red
#D12430
Primary CTAs, attention elements, key actions
Deep Burgundy
#4E171A
Secondary accent, hover states, depth
Teal Blue
#007E90
Links, secondary CTAs, trust indicators
Typography
EB Garamond — Serif
The Quick Brown Fox
Use for: Hero headlines, major headings, emotional impact
Weights: Regular (400), Medium (500), Semi-Bold (600), Bold (700)
Character: Elegant, classic, sophisticated, trustworthy
Weights: Regular (400), Medium (500), Semi-Bold (600), Bold (700)
Character: Elegant, classic, sophisticated, trustworthy
Jost — Sans-Serif
The Quick Brown Fox
Use for: Body text, subheadings, navigation, UI elements
Weights: Light (300), Regular (400), Medium (500), Semi-Bold (600), Bold (700)
Character: Modern, clean, geometric, readable
Weights: Light (300), Regular (400), Medium (500), Semi-Bold (600), Bold (700)
Character: Modern, clean, geometric, readable
Typography Scale
Hero Headline
When You’re In the Collective
EB Garamond, 48-64px, Bold
Heading 1
Our Services
EB Garamond, 40-48px, Bold
Heading 2
Design Principles
EB Garamond, 32-36px, Semi-Bold
Heading 3
Component Patterns
Jost, 24-28px, Semi-Bold
Body Text
The Stockade Collective is a true digital advertising partner where your best interests become ours and we celebrate every victory along the way.
Jost, 16px, Regular, line-height: 1.6
Button Styles
Button Guidelines
- Primary: #D12430 background, white text, hover to #4E171A
- Secondary: #007E90 background, white text, darken on hover
- Ghost: Transparent with colored border, fill on hover
- Font: Jost, Semi-Bold (600), 16px
- Padding: 14px vertical, 32px horizontal
- Border Radius: 6px
Design Principles
Visual Style
- Sophisticated & Modern: Blend classic serif with contemporary sans-serif
- Warm & Professional: Cream tones create approachable atmosphere
- High Contrast: Strong blacks on light backgrounds for readability
- Strategic Color: Red for action, teal for trust and links
Layout Principles
- Generous White Space: Allow content to breathe
- Card-Based Design: Clean, organized service presentation
- Responsive Grid: Mobile-first approach
- Clear Hierarchy: Guide user’s eye through content
Brand Voice & Tone
Voice Characteristics
- Collaborative: “When you’re in the collective, everyone wins”
- Partnership-Focused: True partner, not just a vendor
- Results-Driven: Measurable success matters
- Approachable: Stress-free, supportive experience
Messaging Guidelines
- Lead with benefits, not features
- Use “we” and “you” language for connection
- Be confident without arrogance
- Focus on client success stories
- Keep it conversational and human
Quick Reference CSS
/* Typography */
font-family: ‘EB Garamond’, serif; /* Headings */
font-family: ‘Jost’, sans-serif; /* Body & UI */
/* Color Variables */
–cream: #E9EADC;
–off-white: #F6F2EE;
–white: #FFFFFF;
–black: #191919;
–red: #D12430;
–burgundy: #4E171A;
–teal: #007E90;
/* Common Patterns */
background: var(–cream);
color: var(–black);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
Resources
Google Fonts:
- EB Garamond: fonts.google.com/specimen/EB+Garamond
- Jost: fonts.google.com/specimen/Jost
Recommended Tools:
- Color contrast checker: WebAIM or Coolors
- Typography scale calculator: Type-scale.com
The Stockade Collective Style Guide • Last Updated: November 2024