Sales pages convert best when section backgrounds alternate intentionally. Dark sections create premium emotion. Light sections maximize form and price conversion. Below is the canonical Fast Track GenAI long-form sales page rhythm.
HERO + VSL — #000000 (Pure Black) Maximum drama, attention focus on video
↓
LEAD MAGNET OPT-IN — #FAFAFA (Off-White) Highest form-fill conversion background
FINAL CTA + COUNTDOWN — #000000 Black returns to compress urgency
🧠 Conversion Psychology
Dark backgrounds increase perceived premium value (+22% in luxury A/B tests) but decrease form completion by ~8–12% vs light. The hybrid pattern uses dark to sell emotion and light to capture action.
📐 Single-Column Long-Form Layout System
Every Fast Track GenAI sales page uses a single-column flow at a max content width of 720px (text) and 1140px (visual sections). This forces linear reading and removes sidebar distractions.
📏 Width Rule
Body copy never exceeds 720px. Hero/visual blocks may go up to 1140px. Beyond that, eye-tracking studies show readers drop off mid-line.
🎨 Sales Page Gradient System
Conversion-Optimized Gradients for Sales Pages
Strategic gradient use on sales pages creates visual hierarchy, guides prospect attention through your funnel, and psychologically reinforces key conversion moments. Each gradient serves a specific sales function.
🧠 Sales Psychology
Dark gradients increase perceived value (+22% in luxury product tests) but can reduce form completion by 8-12%. Light gradients build trust and boost conversions by 15-25% on pricing/checkout pages. The hybrid approach uses dark for emotion, light for action.
🌑 Dark Premium Gradients (Emotion & Authority)
Sales Use: Hero VSL sections, premium offer reveals, social proof backgrounds, and final urgency CTAs. Dark backgrounds create aspiration and focus attention on video/headlines.
Conversion Impact: 3-tier cinematic gradient (135deg diagonal) creates dramatic depth while staying in the black→blue spectrum. No charcoal. Pair with Turquoise #06b6d4 PRIMARY CTA below fold.
Trust Spotlight Light Proof Sections
💰 Sales Use: Testimonial grids, case study showcases, proof stacking sections — Proof is ALWAYS LIGHT per Hybrid Strategy
"Made $47K in 60 Days"
Sarah K., Austin TX
CSS Code:
background: radial-gradient(ellipse at center top, #FFFFFF 0%, #FAFAFA 60%, #F1F5F9 100%);
Conversion Impact: Light radial spotlight on testimonials. Proof sections are ALWAYS light per the Hybrid Strategy — dark proof backgrounds are retired. White-center radial creates subtle elevation of trust elements.
Navy Depth Sweep Default Dark
💰 Sales Use: Problem/Agitation sections, offer stacks, dark content areas
Conversion Impact: Default dark section gradient. Vertical sweep from Deep Navy to Slate 800 creates subtle "reveal" as user scrolls. Use for Problem/Agitation (§3) and Offer Stack (§5). Never includes Charcoal (#374151).
Navy Diagonal Sweep
💰 Sales Use: Feature cards, benefit boxes, bonus item highlights — use when adjacent dark sections need visual differentiation
Conversion Impact: Diagonal 135° navy sweep for visual variety when consecutive dark sections appear nearby. Stays entirely within #0F172A→#1E293B range. Never uses Charcoal (#374151).
☀️ Light Conversion Gradients (Trust & Action)
Sales Use: Pricing tables, order forms, lead-magnet opt-ins, guarantee sections, and any area where you need the prospect to take action. Light backgrounds reduce friction and increase completion rates.
Conversion Impact: ⚡ 15-25% higher form completion vs dark backgrounds. Mandatory for pricing/checkout sections. Light backgrounds signal transparency, reduce perceived risk, and feel "honest." Always pair with Turquoise #06b6d4 PRIMARY CTA (with 1px #0891b2 border on light bg). Uses #F1F5F9 endpoint (not #E5E7EB — too strong a contrast).
Guarantee Light Radial
💰 Sales Use: Money-back guarantees, risk-reversal sections, trust badge areas (incorporated into §6 Pricing section)
60-Day Money-Back Guarantee
Zero risk, 100% refund if not satisfied
CSS Code:
background: radial-gradient(ellipse at center top, #FFFFFF 0%, #FAFAFA 60%, #F1F5F9 100%);
Conversion Impact: Subtle radial spotlight on guarantee copy increases trust perception. Use immediately above or below pricing section to reduce purchase anxiety. Combine with green checkmark icon for visual trust cue.
🔘 CTA Button Gradients (Click Optimization)
Sales Use: Every CTA button on your sales page should use one of these three gradients. They're A/B tested for maximum click-through rates and designed to work on both dark and light backgrounds.
Primary CTA — Turquoise #06b6d4 All Pages
💰 Sales Use: Every CTA on every page — "Get Instant Access," "Claim Your Spot," "Learn More." Turquoise = trust + forward momentum.
Conversion Impact: PRIMARY CTA for ALL pages. Use 3-5 times per page. Turquoise (#06b6d4) = trust, clarity, forward momentum. Black text, never white. On light backgrounds, add border: 1px solid #0891b2. Emerald is reserved for checkout only.
Checkout-Only CTA — Emerald #10b981 Purchase Only
💰 Sales Use: ONLY on "Buy Now," "Complete Purchase," "Submit Payment" buttons. If money changes hands → Emerald.
CSS Code:
background-color: #10b981; /* Emerald — CHECKOUT ONLY */
⚠️ CHECKOUT ONLY: Emerald is reserved for payment buttons. Creates Pavlovian color conditioning — green = "money changes hands." Visual scarcity makes it more impactful at the purchase moment. White text (#FFFFFF) for contrast.
Subtle Turquoise Hover
💰 Sales Use: :hover state for all CTA buttons to create "glow" effect
Conversion Impact: Use at 3-4px height to separate major sales sections (hook → offer → proof → pricing → close). Creates visual "chapters" that guide scroll progression. Place above headlines, not below.
Overlay Dark Vignette
💰 Sales Use: VSL thumbnail overlays, video section text readability, hero image backgrounds
▶ Watch The Training
Text stays readable over any image
CSS Code (as overlay layer):
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
Conversion Impact: Layer over VSL thumbnails or hero background images to ensure white headline text stays readable. Prevents "invisible headline" problem on light background images. Adjust opacity (0.5-0.8) based on image brightness.
Conversion Impact: Use for limited-time bonus callouts immediately after primary offer. Combines urgency (border) with trust (light gradient). Place 2-3 on page: after offer stack, in pricing section, and above final CTA. Include emoji (🎁⚡💎) for visual pop.
Incorporated into Pricing (§6) or Trust Spotlight Light
Guarantee sits within Pricing light section. Radial spotlight reinforces "no risk" message.
Final CTA + Countdown
Reversed Hero Gradient (315deg) + Turquoise CTA
Reversed direction mirrors Hero as closing bracket. Turquoise #06b6d4 PRIMARY CTA. Emerald only if this IS the checkout button.
🧠 The Hybrid Pattern (Dark → Light → Dark Rhythm)
Every section uses a gradient — flat colors are retired. Pattern: Black(gradient) → Light(gradient) → Navy(gradient) → Light(gradient) → Navy(gradient) → Light(gradient) → Black(gradient-reversed). This 7-section Hybrid rhythm maximizes both emotion and conversion. Proof sections are ALWAYS light. FAQ (if standalone) uses diagonal light gradient between Pricing and Final CTA.
Performance & A/B Testing Notes
✅ DO: Test CTA button placement with same gradient (above fold vs after offer stack vs both)
✅ DO: A/B test light vs dark backgrounds on testimonial sections (audience-dependent)
✅ DO: Use browser inspector to preview gradients on actual sales copy before deploying
✅ DO: Ensure all CTA buttons have :hover states with lift effect (translateY -2px)
❌ DON'T: Use dark gradients on pricing/checkout pages (kills conversion)
❌ DON'T: Mix off-brand gradients even if they "convert better" in other funnels (brand consistency = long-term LTV)
❌ DON'T: Use white text on Turquoise/Emerald CTAs (fails WCAG, reduces clicks by ~12%)
🎬 VSL (Video Sales Letter) Sections
The VSL is the emotional centerpiece of the sales page. The video itself does the persuasion — surrounding elements only frame, focus, and convert.
Anatomy of a Converting VSL Section
Eyebrow line — small accent label (Bright Turquoise) above the headline
Curiosity headline — 6–14 word benefit hook, never reveals the mechanism
Sub-headline — 1 sentence, addresses the hidden objection
Video player — 16:9, autoplay muted with manual unmute button
Below-video CTA — only appears after 30–60s of watch time (or as a fallback)
Trust micro-row — "As seen in" or featured logos in soft grayscale
Visual Mock
— Watch The Free Training —
How We Built A 6-Figure GenAI Business In 90 Days (Without Coding)
The 3-step framework most agencies will never share with you.
Featured in: Forbes · TechCrunch · Inc. · Entrepreneur
GHL Implementation Code
<section class="ftg-section ftg-section--black">
<div class="ftg-wrap--narrow" style="text-align:center;">
<p style="color:#07E6DE; letter-spacing:2px; font-size:.85em; text-transform:uppercase;">
— Watch The Free Training —
</p>
<h1 class="ftg-h1" style="color:#fff;">
How We Built A 6-Figure GenAI Business In 90 Days
</h1>
<p class="ftg-lead" style="color:#E5E7EB;">
The 3-step framework most agencies will never share with you.
</p>
<!-- VSL Player Wrapper (responsive 16:9) -->
<div style="position:relative; padding-top:56.25%; margin:32px 0;
border:2px solid #07E6DE; border-radius:12px; overflow:hidden;">
<iframe src="https://player.vimeo.com/video/VIDEO_ID?autoplay=1&muted=1"
style="position:absolute; inset:0; width:100%; height:100%;"
frameborder="0" allow="autoplay; fullscreen"></iframe>
</div>
<a href="#offer" class="ftg-cta">Yes — Show Me The Framework →</a>
<p style="margin-top:14px; font-size:.8em; opacity:.6; color:#fff;">
Featured in: Forbes · TechCrunch · Inc. · Entrepreneur
</p>
</div>
</section>
Delayed CTA Reveal (Wistia / Vimeo Trigger)
The "Add To Cart" button below the VSL should be hidden until the video reaches the pitch moment. This prevents premature exits.
🧠 The Open Loop
The VSL headline must imply a result without revealing the method. The brain craves closure — the only way to close the loop is to watch.
📥 Lead Magnet Opt-In Boxes
The opt-in is where curiosity converts into a contact. Every element should reduce friction and amplify perceived value.
🧠 Single-Field Magic
Each additional form field reduces conversion by ~7–11%. Capture only email at first contact. Use post-opt-in pages and email enrichment for the rest.
🎯 OTO (One-Time Offer) Page Structures
OTOs run between the order confirmation and the thank-you page. They are impulse purchases stacked on a buyer's existing momentum. Structure matters more than copy length.
The 9-Block OTO Page Anatomy
1Wait Headline "Wait — Your Order Isn't Complete"
2Pattern Interrupt Bright bar / countdown / red banner
3Continuation Hook "Since you just got X, you'll need Y"
Add The Done-For-You Funnel Templates To Your Order — Today Only
Since you just unlocked the GenAI Framework, add the 10 high-converting funnel templates we used to generate $1.2M in 2025. Normally $497 — yours for one-time only:
<section class="ftg-section ftg-section--light">
<div class="ftg-wrap--narrow">
<!-- 1. Pattern interrupt badge -->
<div style="background:#EF4444; color:#fff; padding:10px 18px;
border-radius:999px; display:inline-block;
font-size:.85em; font-weight:700; letter-spacing:1px;
text-transform:uppercase;">
⚠ Wait — Your Order Isn't Complete
</div>
<!-- 2. Continuation headline -->
<h1 class="ftg-h1" style="margin-top:16px;">
Add The Done-For-You Funnel Templates Today Only
</h1>
<p class="ftg-lead">
Since you just unlocked the GenAI Framework, add the
<strong>10 high-converting funnel templates</strong>
we used to generate $1.2M in 2025.
</p>
<!-- 3. Stack-and-save price -->
<div style="display:flex; gap:16px; align-items:baseline; margin:20px 0;">
<span style="color:#9CA3AF; text-decoration:line-through; font-size:1.4em;">$497</span>
<span style="color:#10B981; font-size:2.4em; font-weight:800;">$47</span>
</div>
<!-- 4. YES button -->
<a href="UPSELL_LINK" class="ftg-cta" style="display:block; text-align:center; font-size:1.2em;">
✅ YES — Add Templates To My Order ($47)
</a>
<!-- 5. Tiny NO link -->
<p style="text-align:center; margin-top:14px;">
<a href="DOWNSELL_LINK" style="color:#6B7280; font-size:.85em;">
No thanks, I understand I'll never see this offer again.
</a>
</p>
</div>
</section>
OTO Stack Routing Logic (GHL Workflow)
FRONT-END PURCHASE ($27 lead magnet upgrade)
├── YES → OTO 1 ($47 templates)
│ ├── YES → OTO 2 ($97 coaching call)
│ │ ├── YES → Thank-You + Onboarding
│ │ └── NO → Downsell ($47 group call) → Thank-You
│ └── NO → Downsell 1 ($27 templates lite) → OTO 2
└── NO → Downsell ($17 single template) → Thank-You
⚠ Never Show Two Yes Buttons
If the user accepts OTO 1, the NEXT page is OTO 2 (different offer). Never present the same offer twice on the same page — this destroys decisive momentum.
🧠 The Buyer's High
A customer is 4–7× more likely to buy in the 90 seconds after their first purchase than at any other moment. OTOs exist to harvest that window.
⏱️ Countdown Timers
Countdowns translate abstract scarcity into a felt urgency. Three flavors exist; pick the right one for the right page.
The 3 Timer Types
Type
When To Use
Honesty Risk
Evergreen (per-visitor)
OTO pages, expiring lead-magnet bonuses
Medium — must actually expire the link
Fixed Date
Cohort launches, webinar replay windows
Low — universally honest
Daily Reset
Limited daily seats, "today's bonus"
High — only use if truly daily
Visual Mock
⚠ Offer Expires In:
00Days
14Hours
37Mins
02Secs
Vanilla JS Evergreen Timer (15-min OTO Lock)
<div id="ftg-timer" class="mock-countdown">
<p style="letter-spacing:2px; font-size:.85em;
text-transform:uppercase; color:#07E6DE;">
⚠ Offer Expires In:
</p>
<div class="timer">
<div class="timer-block"><span id="d" class="timer-num">00</span><span class="timer-label">Days</span></div>
<div class="timer-block"><span id="h" class="timer-num">00</span><span class="timer-label">Hours</span></div>
<div class="timer-block"><span id="m" class="timer-num">15</span><span class="timer-label">Mins</span></div>
<div class="timer-block"><span id="s" class="timer-num">00</span><span class="timer-label">Secs</span></div>
</div>
</div>
<script>
(function(){
var KEY = 'ftg_oto_deadline';
var deadline = localStorage.getItem(KEY);
if (!deadline) {
deadline = Date.now() + 15 * 60 * 1000; // 15 min
localStorage.setItem(KEY, deadline);
}
function pad(n){ return n < 10 ? '0'+n : n; }
function tick(){
var diff = deadline - Date.now();
if (diff <= 0) {
window.location.href = '/offer-expired'; return;
}
var d = Math.floor(diff/86400000);
var h = Math.floor((diff%86400000)/3600000);
var m = Math.floor((diff%3600000)/60000);
var s = Math.floor((diff%60000)/1000);
document.getElementById('d').textContent = pad(d);
document.getElementById('h').textContent = pad(h);
document.getElementById('m').textContent = pad(m);
document.getElementById('s').textContent = pad(s);
}
setInterval(tick, 1000); tick();
})();
</script>
Fixed-Date Launch Countdown
<script>
var DEADLINE = new Date('2026-06-01T23:59:00-07:00').getTime();
// Reuse tick() above, replace `deadline` with DEADLINE.
</script>
GHL Native Countdown Element
GHL's drag-and-drop builder includes a Countdown element. Style it via Custom CSS:
⚠ The Honesty Imperative
If your timer says it expires, it MUST expire. Server-side enforcement (redirect link to `/offer-expired`) is non-negotiable for FTG brands. Fake countdowns kill long-term LTV.
🧠 Loss Aversion
Humans feel losses ~2× more intensely than gains. A countdown converts an "I might miss out" feeling into a measurable, ticking bar. That's why a 15-min OTO timer outperforms a "limited time only" badge by 30–80%.
🏆 Proof Stacking Patterns
One testimonial is a story. Three is a pattern. Twelve is a movement. Proof stacking is the discipline of layering proof types so each one ratchets credibility one notch higher.
The 7 Proof Types (Stack At Least 4)
Direct Testimonial — quote + photo + name + result
Case Study — before / process / after with numbers
<article style="background:#fff; border:1px solid #E5E7EB;
border-radius:12px; padding:24px;
box-shadow:0 4px 12px rgba(0,0,0,.06);">
<div style="color:#F59E0B; font-size:1.2em; margin-bottom:8px;">★★★★★</div>
<p style="color:#0F172A; font-size:1.05em; line-height:1.5;">
"I went from $0 to $14,200 in my first 60 days using the
Fast Track GenAI framework. The OTO stack alone paid for itself 3×."
</p>
<div style="display:flex; align-items:center; margin-top:18px; gap:12px;">
<img src="AVATAR_URL" alt="" style="width:48px; height:48px; border-radius:50%;">
<div>
<div style="font-weight:700; color:#0F172A;">Sarah K.</div>
<div style="color:#6B7280; font-size:.9em;">Founder, Loomly Agency</div>
</div>
</div>
</article>
Every testimonial has name + photo + role + result
Each tells a different story (skeptic, beginner, advanced)
Featured 3× — after VSL, after offer, near guarantee
Specific numbers: "$14,200 in 60 days"
🧠 Cumulative Credibility
Each proof type triggers a different objection-killing pathway: numbers neutralize "is this real?", videos neutralize "is this fake?", screenshots neutralize "did this actually pay?", and logos neutralize "are these people legit?". Stacking 4+ types fires all gates simultaneously.
📱 Mobile-Responsive Considerations
60–80% of FTG sales page traffic is mobile. The desktop layout is the derivative, not the source.
Mobile Rules
Tap targets ≥ 48px — every CTA, link, and icon
Headlines clamp(2rem, 7vw, 3.6rem) — never overflow
Stacked vertical layouts — no horizontal scroll, ever
Sticky bottom CTA — appears below the fold on mobile only
Headline Formula That Always Works
"How [target] [achieve outcome] in [time] without [pain]." Example: "How agencies hit $20K MRR in 60 days without hiring anyone."
Stack Bonuses, Don't Discount
Adding bonuses raises perceived value. Discounting alone trains buyers to wait. Stack 3+ bonuses with their own dollar values, then reveal the price.
Test The First 5 Seconds
Record your screen scrolling the page in 5 seconds. Can a stranger tell what you're selling, who it's for, and what to do? If not, simplify the hero.
The "Three Buttons" Mistake
Never put more than ONE primary CTA on a single screen-height. Multiple "Get Started", "Buy Now", "Learn More" buttons fragment decision energy.
Fake Countdowns Kill Brands
If a returning visitor sees the timer reset, you've broken trust permanently. Always enforce the deadline with a real redirect.
A/B Test Order, Not Words
Reordering proof → offer → guarantee vs offer → proof → guarantee swings conversions 15–40%. Word changes rarely move more than 5%.
