Living Document
LeapFrog Style Guide
Colors · Typography · Components · Spacing · Design Notes · Decision Log
Brand Colors
Primary Palette
Neutral Palette
Status Colors
Color Rules
Typography
Font Family
Type Scale
Automation Solutions
Cut the Manual Work.
Run Smarter.
If Your Team Does It Repeatedly,
We Can Automate It.
Email & Communication Automation
Reclaim Hours Every Week
We identify the repetitive, time-consuming tasks inside your business and replace them with intelligent automated workflows — so your team can focus on the work that actually drives growth.
Tasks that take staff 30 minutes manually take automation 30 seconds — consistently, every time, without errors or interruptions. Every lead, every client, every invoice gets handled even when your team is at capacity.
All prices are estimates. A free Business Technology Assessment is included with every new engagement — we scope your project before you commit to anything.
Spacing & Layout
Spacing Scale
Layout Rules
Section Background Pattern
Buttons & CTAs
Primary — Gold (on dark backgrounds)
background: --gold · color: --navy · font-weight: 700 · border-radius: 8px · padding: 13px 26px
Ghost — White outline (on dark backgrounds only)
border: 1.5px solid rgba(255,255,255,0.2) · color: rgba(255,255,255,0.85) · background: transparent
Outline — Navy outline (on light/white backgrounds)
border: 1.5px solid --navy · color: --navy · background: transparent · Use on pricing cards and light sections
Special — Green (Assessment tool only)
background: #059669 · color: #fff · Use only for the Automation Assessment CTA to differentiate it from gold CTAs
CTA Rules
Cards & Components
Service / Use Case Card
Email & Communication
Automate follow-up sequences, intake responses, notifications, and client status updates — triggered by real events, not manual sends.
System Integration
Connect your CRM, scheduling software, invoicing tool, and email — data flows between them automatically without duplicate entry.
Reporting & Alerts
Automated weekly reports, low-inventory alerts, milestone notifications, and KPI summaries delivered to the right person.
white bg · border: 1px solid --border · border-left: 4px solid --gold · border-radius: 14px · padding: 28px · box-shadow: 0 2px 12px rgba(0,0,0,0.04)
Pricing Cards
- 1 workflow designed & built
- Up to 3 tool integrations
- Testing & QA included
- 30-day post-launch support
- 3–5 workflows designed & built
- Unlimited tool integrations
- 60-day post-launch support
- Unlimited workflow builds
- Dedicated engineer
- Priority support
Featured card: border: 1px solid --gold + box-shadow: 0 0 0 2px --gold. Badge: positioned absolute, top:-12px, centered.
Benefit Item
Reclaim Hours Every Week
Tasks that take staff 30 minutes manually take automation 30 seconds — consistently, every time, without errors.
Scale Without Hiring
Handle 2x the client volume without adding headcount. Automation scales with your business — salaries don't have to.
Icon: 40px × 40px, bg: --navy, border-radius: 10px. Layout: flexbox, gap: 16px.
Related Service Link Card
Process Steps (Dark)
Discover
Map your process and identify what's creating friction.
Design
Build a workflow tailored to how your business operates.
Build
End-to-end build and testing without switching platforms.
Monitor
Stay involved after launch — optimize as your business evolves.
Step numbers: 56px circle, navy bg, gold border, gold text. Connector line: absolute positioned, left 12.5% to right 12.5%, 2px, gold → gold 15% gradient.
Form Elements
Standard Form
Input: padding 10px 14px · border: 1.5px solid --border · border-radius: 8px · font-size: 14px · bg: #fafbfc
Focus state: border-color: --gold
Error state: border-color: #dc2626
Label: 12px · font-weight: 700 · letter-spacing: 0.3px · margin-bottom: 6px
Page Sections
Hero Section (Dark)
Automation Solutions
Cut the Manual Work.
Run Smarter.
We identify repetitive tasks inside your business and replace them with intelligent automated workflows.
Hero: bg --navy, padding 90px 60px 80px, relative overflow:hidden. Grid texture + radial glow as pseudo-elements. All hero content has z-index:2 relative to pseudo-elements.
Standard Section Anatomy
Footer Structure
Voice & Tone
✓ Write Like This
✗ Avoid This
Design Notes & Decisions
All design decisions made during the mockup redesign session. Add new notes here as decisions are made.
Automation Assessment — Dedicated Page, Not Popup
The Automation Assessment (10 questions, 0–100 score) was missing from the redesign. Added as a dedicated page at forms/automation_assessment.html. Both "Get a Free Assessment" CTAs on lfcc-automation.html (hero and bottom CTA section) now link to the assessment form, not the contact page. A featured full-width card was added as the first item on the Free Business Tools page.
- Do not use a popup for the assessment — 10 questions + scored result needs a full page
- Assessment card uses green accent (#059669) to differentiate from gold service cards
- Assessment card spans full grid width on the tools page to give it visual priority
Assessment Card on Free Business Tools Page
Assessment added as the first card in the demo grid on lfcc-demos-tools.html, spanning the full two-column width. "Business Automation Assessment" also added as the first/default option in the Request Demo dropdown form. This positions the assessment as the primary lead-gen tool on the site.
ROI Calculator — Scroll-Triggered Popup on Automation Page
The ROI Calculator is a better popup candidate than the assessment — it's only 3 inputs and the output (projected $ saved per year) is a high-impact "stop the scroll" moment.
- Trigger: User scrolls past the Benefits section on
lfcc-automation.html(≈50% page depth) - Inputs: Team size · Hours/week on manual tasks · Average hourly rate
- Output: $ saved per year (bold, large), hours saved per week
- CTA after result: "See where to start → Take the Free Assessment" → links to assessment page
- Funnel: Benefits section → ROI popup → savings revealed → Assessment CTA → Assessment page → Lead captured
- Also consider: Exit-intent slide-in version on the Home page: "Before you go — see what automation could save your business"
"Free Assessment" Slide-In — Home Page Exit Intent
A lightweight slide-in (bottom-right, after 30 seconds or on scroll exit) on the home page offering the ROI Calculator or Assessment. Should feel helpful, not intrusive. 3 inputs max. Same result-to-assessment funnel as the automation page version.
No Popup for the Assessment Form
Decision confirmed: the assessment stays as a dedicated page. Reasons: 10 questions is too long for a popup · scored result needs space · mobile popups are poor UX for multi-step forms · the result page itself is a conversion moment that shouldn't compete with a dismiss button.
Gold = #c9921a (Mockup Standard) — Not #FFD700 from Old Brand Doc
The old brand.md file lists gold as #FFD700 (bright yellow) and green as #4CAF50 as the primary color. The redesigned mockup uses #c9921a (warm amber-gold) as the sole accent. The mockup standard overrides the brand doc. The brand doc should be updated to reflect this. Font: DM Sans (mockup) overrides Montserrat (brand doc).
Section Tag Above Every Eyebrow
Every content section opens with a dark chip label (e.g., "WHAT WE AUTOMATE") before the gold eyebrow label and the H2. This three-level hierarchy gives each section a clear entry point and helps scanners understand content before committing to reading. Never skip the section tag on a major content block.
Subtitle Max-Width 560px
Section subtitles (the paragraph below H2) are always constrained to max-width 560px, even in wide layouts. This improves readability (optimal line length) and keeps the visual hierarchy tight. Never let subtitle text span the full column width.
Card Left Border = 4px solid Gold — Consistent
All service cards, use case cards, and "related service" link cards use a 4px solid gold left border as the brand accent. This is a consistent visual signature across the site. Do not change the border color per-card or per-section.
Brand.md Update Needed
The brand.md file at LeapFrog Computers Consulting/brand.md still references old colors (green #4CAF50, gold #FFD700) and fonts (Montserrat/Inter). It should be updated to match the mockup standard: Navy #0a0d1e · Gold #c9921a · DM Sans.
Mobile Sticky CTA Bar
The home page mockup includes a mobile sticky bar at the bottom with a phone number and "Free Assessment" CTA. This pattern should be applied consistently across all pages — currently some pages have it, some don't. Standardize across all 6 main pages and all industry pages.
Changelog
All updates to the style guide and mockup files. Newest first.
Style Guide created (v1.0)
Initial style guide built from redesigned mockup. Covers colors, typography, spacing, buttons, cards, forms, navigation, sections, voice & tone, design notes, and changelog.
lfcc-automation.html — Assessment CTA links fixed
Both "Get a Free Assessment" buttons changed from lfcc-contact.html to forms/automation_assessment.html.
lfcc-demos-tools.html — Assessment card added
Automation Assessment added as first card (full-width, green accent) in demo grid. Added to request demo dropdown as first option.
ROI Calculator popup planned for lfcc-automation.html
Scroll-triggered popup after Benefits section. 3 inputs → $ saved result → Assessment CTA. Exit-intent version planned for home page.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.