A Local BuzzMarketing Strategy
Design System Reference

A Local Buzz
Design System

The complete visual language for a funnel-driven marketing strategy website. Every decision here serves one goal: diagnostic completion.

7
Color Tokens
8
Type Styles
3
Button Variants
WCAG AA
Contrast Standard
Color System

Brand Color Palette

Primary Brand
Gold / Amber
#F5A623

Section accents, rule lines, card borders, logo mark

Authority Anchor
Deep Navy
#1E3A5F

Headlines, nav text, footer background, primary button fill

Energy / Links
Bright Blue
#4A90E2

Text links, highlights, interactive states, icon accents

Action Signal
Orange
#FF6B35

Primary CTA buttons ONLY — 'Find Your Marketing Gaps', 'Take the Diagnostic'

Background
Off-White
#FAFAF8

Page background, alternating section backgrounds

Body Text
Charcoal
#2C2C2C

All body copy on white/off-white backgrounds

Meta Text
Medium Gray
#6B6B6B

Timestamps, labels, captions — 14px+ only

Section Tint
Blue Tint
#EEF3FA

Alternating section background for visual rhythm

Color + Text Combinations

White / Off-white Background

→ Charcoal body text

16.7:1 contrast ratio

Deep Navy Background

→ White text only

12.5:1 contrast ratio

Gold / Amber Background

→ Deep Navy text

4.8:1 contrast ratio
Typography

Type Scale & Hierarchy

H1Display Headline
Your Marketing Is Leaking Revenue
Plus Jakarta Sans ExtraBold · 48–56px · Line-height 1.05 · Letter-spacing -0.02em
H2Section Headline
What's Holding Your Business Back
Plus Jakarta Sans ExtraBold · 36–42px · Line-height 1.1
H3Sub-Section Headline
The 90-Day Marketing Strategy
Plus Jakarta Sans Bold · 28–32px · Line-height 1.15
H4Card / Component Headline
Consistent Lead Generation
Plus Jakarta Sans Bold · 20px · Line-height 1.2
BodyBody Copy
Most service businesses are stuck in a cycle of inconsistent growth — relying on referrals that come and go, with no clear system to attract and convert the right clients. That ends here.
Manrope Regular · 18–20px · Line-height 1.65 · Charcoal #2C2C2C
LeadLead / Intro Paragraph
A strategist who's worked across global markets now focused on one thing: helping local service businesses build marketing that actually works.
Manrope Medium · 20px · Line-height 1.6 · Navy
SmallMeta / Label Text
Updated March 2024 · 5 min read · Local Marketing Strategy
Manrope Medium · 14–16px · Medium Gray #6B6B6B ONLY
LabelSection Label / Eyebrow
Marketing Strategy
Manrope Bold · 12px · Uppercase · Letter-spacing 0.12em · Gold

Readability is Non-Negotiable

Never use light gray (#CCC, #999) for reading text. Body text must be Charcoal (#2C2C2C) on white/off-white. Minimum 4.5:1 contrast ratio (WCAG AA). Medium gray (#6B6B6B) is acceptable only for meta/label text at 14px+.

Buttons & CTAs

Interactive Components

Primary CTA
SpecsBackground: #FF6B35 (Orange) · Text: White Bold · Padding: 16px 32px · Radius: 4–6px · Hover: Darker orange + shadow lift
Secondary CTA
SpecsBackground: Transparent · Border: 2px solid Navy · Text: Navy Semi-Bold · Hover: Fill Navy + White text
Gold Variant
SpecsBackground: Gold #F5A623 · Text: Charcoal Bold · Use for: supporting CTAs on navy/dark sections
Text Links
Read the full case study →Download the free guide

Ready to stop guessing? Take the diagnostic and find out where you're losing leads.

SpecsColor: Bright Blue #4A90E2 · Weight: Semi-Bold · Hover: Underline reveal

CTA Hierarchy Rule

Orange is reserved exclusively for the primary diagnostic CTA. Each page section should have exactly one primary CTA. Secondary CTAs support — they never compete. Never place two orange buttons in the same visual field.

Components

Card & Content Patterns

Core Service

Marketing Diagnostic

A structured audit of your current marketing — identifying exactly where you're losing leads and revenue.

Strategy

90-Day Strategy Sprint

A focused, executable marketing plan built around your business model and growth goals.

Ongoing

Implementation Support

Hands-on guidance as you execute — so strategy doesn't die in a slide deck.

"Within 60 days we went from chasing referrals to having a consistent pipeline. The diagnostic alone was worth it."
Sarah M. — Owner, Prestige Home Services
Layout & Spacing

Grid, Spacing & Rhythm

Spacing Scale

All spacing uses multiples of 8px for consistent vertical rhythm.

4pxIcon gap, tight inline spacing
8pxComponent internal padding
16pxCard padding, nav gap
24pxSection element gap
32pxCard grid gap
48pxSection vertical padding
64pxLarge section padding
96pxHero section padding

Grid System

Columns12-column grid
Max Width1200–1280px
Gutter24–32px
Mobile Padding16px sides
Tablet Padding24px sides
Desktop Padding32px sides

Section Rhythm

Sections alternate backgrounds to create visual breathing room without borders.

White
Off-White #FAFAF8
Blue Tint #EEF3FA
Deep Navy #1E3A5F
Visual Style

Photography & Imagery Guidelines

Hero photography example

Hero Photography

Warm golden light, open shade, human-focused. Real environments — not staged corporate stock. Conveys expertise and calm authority.

Strategy section photography example

Content / Section Photography

Flat lay editorial style. Clean surfaces, warm tones, strategic props. Reinforces the brand's precision and thoughtfulness.

CTA section background example

CTA / Abstract Backgrounds

Navy + gold geometric lines suggest forward momentum and direction. Used for high-conversion sections to create visual urgency.

Warm, open shade lighting
Human-focused, real environments
Warm amber/gold color tones
Relief and understanding emotion
No generic stock photo corporate
No cold blue-white lighting
No posed, stiff expressions
No busy, cluttered backgrounds
Primary Conversion Goal

Find Out Where Your Marketing Is Leaking Revenue

Take the free 10-minute diagnostic. Get a clear picture of your marketing gaps and a prioritized action plan.

No sales pitch. No commitment. Just clarity.

Icons & Visual Elements

Icon System & Usage

Icons use Lucide React — line-based, consistent 1.5px stroke weight. Use sparingly to support meaning, never as decoration. Size: 16–24px in components, 20–32px in feature sections.

TargetGoals / CTA
BarChart2Analytics
UsersClients
ZapAction / Speed
MapPinLocation
RadioSignal / Brand
CheckConfirmation
ArrowRightNavigation
StarSocial proof
ExternalLinkLinks
AlertCircleWarnings
ChevronRightLists
Design Principles

Core Design Rules

01

Conversion First

Every design decision supports one goal: diagnostic completion. CTAs must be visually dominant. Reduce friction at every step.

02

Readability is Sacred

Never sacrifice contrast for aesthetics. Charcoal on white. White on navy. Test every combination. If it strains the eye, it fails.

03

Orange = Action Only

The orange CTA button is reserved exclusively for diagnostic/primary actions. Using it elsewhere dilutes its power. Protect it.

04

Gold = Brand Signal

Gold appears at inflection points: section labels, card accents, footer rules, logo mark. It signals authority without shouting.

05

Whitespace is Structure

Generous spacing creates trust. Cluttered layouts signal chaos — the opposite of the brand promise. When in doubt, add more space.

06

Mobile First

Design for the smallest screen first. Scale up. Every component must work at 375px before it works at 1280px.