Fast Track GenAI

The hero navigation features a sophisticated gradient sweep design combining Pure Black and Deep Navy with white typography and Bright Turquoise accents for interactive elements.

Hero Navigation Visual Preview

About Services Contact

↑ Hover over logo and navigation links to see Bright Turquoise color transition. Active page shows underline.

Complete Color & Design Specifications

🎨 BACKGROUND

Gradient

linear-gradient(90deg,
#000000 0%,
#0F172A 100%)

Left: Pure Black
Right: Deep Navy

🔤 LOGO

#FFFFFF

White

Position: Left
Contrast: 21:1

🔗 NAV LINKS

#FFFFFF

White

Position: Right
Contrast: 6:1 min

✨ HOVER STATE

#07E6DE

Bright Turquoise

Transition: 0.3s
Smooth color change

📍 ACTIVE PAGE

3px underline

Bright Turquoise

Indicates current
page clearly

🌊 BOTTOM BORDER

2px solid

Bright Turquoise Accent

Separates header
from content

🎯 CTA BUTTON

Bright Turquoise bg

#07E6DE bg +
#000000 text

Hover: Lift (-2px)
+ Glow effect

Gradient Sweep Visual Explanation

The gradient flows left to right, creating depth and visual interest:

Gradient sweep: Black → Navy

Direction: 90 degrees
→ Left to right
→ Horizontal sweep
→ Smooth transition
Why this design?

                                    ✓ Horizontal flow follows
reading direction

                                    ✓ Pure black anchors premium
left side (logo area)

                                    ✓ Deep navy adds subtle depth
to right side
                                

CSS Implementation Examples

Base Hero Navigation Bar

.hero-nav {
  background: linear-gradient(135deg, #000000 0%, #012b6e 70%, #011d4a 100%);
  border-bottom: 2px solid #07E6DE;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

Key Features: The gradient background sweeps diagonally (135deg) from pure black (#000000) through medium blue (#012b6e) to dark navy (#011d4a). This 3-tier gradient creates cinematic depth. The 2px Bright Turquoise bottom border provides a premium accent line that separates the navigation from page content. Box shadow adds depth.

Logo Styling (Image-Based)

.hero-nav .logo {
  height: 50px;    /* Match or exceed CTA button height */
  width: auto;
  display: block;
  cursor: pointer;
}

Sizing Rule: The logo height (50px) should match or exceed the "Get Started" CTA button's rendered height (~48px) for proper brand hierarchy. The logo is the dominant brand element and must command visual authority in the navigation bar. Use width: auto to maintain aspect ratio.

Logo Hover State (Bright Turquoise Tint)

.hero-nav .logo {
  transition: filter 0.3s ease;
  cursor: pointer;
}

.hero-nav .logo:hover {
  /* CSS filter to tint white PNG → Bright Turquoise #07E6DE */
  filter: brightness(0) saturate(100%)
          invert(84%) sepia(14%) saturate(748%)
          hue-rotate(126deg) brightness(96%)
          contrast(86%);
}

Image Logo Hover: Since the logo is an image (not text), we use CSS filter to recolor the white PNG to Bright Turquoise (#07E6DE) on hover. The filter chain works by first converting to black (brightness(0)), then inverting and shifting hue to match the target color. This creates visual consistency with the nav link hover state. The 0.3s ease transition provides a smooth color shift. Alternative: Use a separate Bright Turquoise-colored logo SVG and swap on hover with CSS content or JavaScript src swap for pixel-perfect accuracy.

Navigation Links - Default & Hover States

.hero-nav a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.hero-nav a:hover {
  color: #07E6DE;
}

Hover Behavior: Links transition smoothly from white to Bright Turquoise in 0.3s. This provides clear visual feedback without jarring color shifts. The transition timing is fast enough to feel responsive but slow enough to appear intentional.

Active Page Indicator

.hero-nav a.active {
  color: #FFFFFF;
  border-bottom: 3px solid #07E6DE;
  padding-bottom: 5px;
}

Active Indicator: The 3px underline clearly shows which page the user is currently viewing. The white text remains unchanged (avoiding hover color) so users know the difference between "active current page" and "clickable hover state". The underline uses the same Bright Turquoise color to maintain brand consistency.

CTA Button with Lift & Glow Effect

.hero-nav .cta-button {
  background: #07E6DE;
  color: #000000;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(7, 230, 222, 0.3);
}

.hero-nav .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 230, 222, 0.5);
}

Interactive Effects: The button lifts up (-2px) when hovered and glows with an expanded shadow. The shadow color uses transparent Bright Turquoise (#07E6DE) to create a cohesive visual effect. All transitions use 0.3s timing for smooth, professional motion.

HTML Structure Example

<nav class="hero-nav">
  <img src="logo-white.png" alt="Fast Track GenAI" class="logo">
  <ul class="nav-links">
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact" class="active">Contact</a></li>
  </ul>
  <button class="cta-button">Get Started</button>
</nav>

Accessibility & Contrast Compliance

✅ WCAG AAA Compliance

Logo (#FFF on #000): 21:1 — Exceeds AAA
Nav text (#FFF on gradient): 6:1+ — Meets AA
Button (#07E6DE on nav): 7.5:1 — Exceeds AA
Button text (#000 on #07E6DE): 13:1 — AAA+

❌ Avoid These Colors

Gray text on gradient (poor contrast)
Silver logo on black (insufficient contrast)
Light blue on dark gradient (too subtle)
Dark borders on dark bg (invisible)

Mobile Considerations

Responsive Adjustments for Small Screens

@media (max-width: 768px) {
  .hero-nav {
    padding: 16px 20px;
    flex-direction: column;
    gap: 15px;
  }
  .hero-nav .logo {
    font-size: 20px;
  }
  .nav-links {
    gap: 20px;
  }
  .cta-button {
    width: 100%;
  }
}

Mobile Strategy: On screens under 768px, convert the horizontal navigation to a vertical layout. Keep the gradient background and Bright Turquoise accents intact. Consider using a hamburger menu icon for smaller screens to preserve space while maintaining the premium navigation feel.

✓ Touch-Friendly

44px minimum tap target
20px+ spacing between links
Larger CTA button on mobile

✓ Performance

Gradient renders efficiently
No complex animations
CSS-only transitions

Best Practices & Implementation Checklist

Gradient background: linear-gradient(135deg, #000000 0%, #012b6e 70%, #011d4a 100%)

Bottom border: 2px solid #07E6DE

Logo: #FFFFFF (Pure White), height 50px (match/exceed CTA button)

Nav link color: #FFFFFF (Pure White)

Hover state: color changes to #07E6DE with 0.3s transition

Active page: 3px solid #07E6DE bottom border

CTA button: #07E6DE background with #000000 text

CTA hover: translateY(-2px) lift with enhanced shadow

Tested accessibility: All text meets WCAG AA/AAA standards

Mobile responsive: Tested on screens 320px and above

💡

Pro Tip: Design Rationale

The gradient sweep from Pure Black to Deep Navy creates a sophisticated, modern aesthetic that suggests movement and progress—perfect for the Fast Track GenAI brand. The pure white text on the gradient ensures crystal-clear readability while the Bright Turquoise accents provide interactive feedback that reinforces brand identity. The 2px bottom border acts as a premium separator that frames the navigation beautifully without overwhelming the design. This combination creates a memorable, premium first impression while maintaining accessibility for all users.

📐 Logo Sizing Guidelines

Consistent logo sizing across all touchpoints reinforces brand recognition. The logo must always maintain its aspect ratio — only set height and use width: auto.

🔑 Golden Rule

The logo must always be at least as tall as the primary CTA button in any layout. The logo represents brand authority and should never be visually subordinate to action elements.

Sizing Reference Table

Context	Height (px)	Min Height	Max Height	Notes
🧭 Hero / Main Navigation	50px	40px	60px	Must match or exceed CTA button height
📌 Sticky / Scrolled Navigation	50px	40px	60px	Compact nav after scroll; animate transition
🦶 Footer Navigation	45px	40px	50px	Subtle but recognizable; lighter weight
🌟 Hero Section / Standalone	160px	120px	200px	Landing page hero, splash screens
✉️ Email Signatures	35px	30px	40px	Keep compact; works in all email clients
📧 Email Headers / Banners	60px	50px	80px	Prominent but not overwhelming
🔗 Favicon	32px	16px	48px	Use simplified icon mark; multi-size .ico
📱 Social Media Profile	400px	320px	512px	Square crop; 1:1 aspect ratio; centered
🖨️ Print / PDF	1 inch	0.75 in	2 in	Use vector SVG; 300 DPI minimum

Visual Size Comparison

Favicon
32px

Email Sig
35px

Footer
45px

Sticky Nav
50px

Hero Nav ★
50px

Standalone
160px

★ Recommended primary navigation size — matches/exceeds CTA button prominence

CSS Implementation

/* Logo sizing by context */
.logo-hero-nav    { height: 50px;  width: auto; }  /* 40-60px */
.logo-sticky-nav  { height: 50px;  width: auto; }  /* 40-60px  */
.logo-footer      { height: 45px;  width: auto; }  /* 40-50px  */
.logo-standalone  { height: 160px; width: auto; }  /* 120-200px */
.logo-email-sig   { height: 35px;  width: auto; }  /* 30-40px  */
.logo-email-header{ height: 60px;  width: auto; }  /* 50-80px  */

/* Scroll transition (hero → sticky) */
.hero-nav .logo {
  height: 50px;
  transition: height 0.3s ease;
}
.hero-nav.scrolled .logo {
  height: 50px;
}

Always use width: auto to preserve the logo's original aspect ratio. Never set both width and height simultaneously, as this will distort the logo.

Do's and Don'ts

✅ Do

Set height only, let width auto-scale
Keep logo ≥ CTA button height in navigation
Use SVG for scalable contexts (hero, print)
Maintain clear space equal to logo height / 4
Animate size transitions when scrolling
Use the 50px hero nav size as the default

❌ Don't

Set both width AND height (causes distortion)
Make the logo smaller than the CTA button
Use logos below 16px height (illegible)
Scale up raster logos beyond 2x original size
Remove clear space around the logo
Use the standalone size (160px) in navigation

🎨 Color Palette

Our colors communicate trust, innovation, and energy. Click any hex code to copy.

📐 Hybrid Dark/Light Background Strategy (Conversion-Optimized)

§1 Hero + VSL: ⬛ BLACK gradient — linear-gradient(135deg, #000000 0%, #012b6e 70%, #011d4a 100%)
§2 Lead Magnet Opt-In: ⬜ LIGHT gradient — linear-gradient(180deg, #FAFAFA 0%, #F1F5F9 100%)
§3 Problem / Agitation: 🟦 DARK gradient — linear-gradient(180deg, #0F172A 0%, #1E293B 100%)
§4 Proof Stack + Testimonials: ⬜ LIGHT gradient — radial-gradient(ellipse at center top, #FFFFFF 0%, #FAFAFA 60%, #F1F5F9 100%)
§5 Offer Stack: 🟦 DARK gradient — linear-gradient(180deg, #0F172A 0%, #1E293B 100%)
§6 Pricing + Guarantee: ⬜ LIGHT gradient — linear-gradient(180deg, #FAFAFA 0%, #F1F5F9 100%) — CRITICAL for conversion
§6.5 FAQ (if standalone): ⬜ LIGHT gradient — linear-gradient(135deg, #FAFAFA 0%, #F9FAFB 50%, #F1F5F9 100%)
§7 Final CTA + Countdown: ⬛ BLACK gradient (reversed) — linear-gradient(315deg, #000000 0%, #012b6e 70%, #011d4a 100%)

⛔ NEVER USE: Navy → Charcoal alternation (too monotonous, no conversion benefit)

✅ KEY RULES:

Light gradients (#FAFAFA → #F1F5F9) for: Forms, pricing, proof/testimonials, FAQ, any conversion action
Dark gradients (#0F172A → #1E293B) for: Problem/agitation, offer stack sections
Black gradients (3-tier hero) for: Hero (135deg) and Final CTA (315deg reversed)
Charcoal (#374151) is text-only — NEVER as a background or gradient stop

Deep Navy

#0F172A

Feature sections, social proof, video sections. Alternates with Off-White for visual rhythm. Psychology: Authority, professionalism, premium.

Pure Black

#000000

Hero section (always), Final CTA section. Psychology: Maximum drama, emotional impact, focus.

Medium Blue

#012b6e

Hero gradient mid-stop (70%). Used in the 3-tier hero gradient and reversed Final CTA gradient. Psychology: Trust, depth, professionalism.

Dark Navy

#011d4a

Hero gradient end-stop (100%). Used in the 3-tier hero gradient and reversed Final CTA gradient. Psychology: Depth, sophistication, premium finish.

Charcoal

#374151

Text color on light backgrounds, subtle UI elements. NOT for section backgrounds.

Bright Turquoise

#07E6DE

Brand accent color for hover states, borders, nav indicators, decorative highlights. CTA buttons use #06b6d4 (Cyan 500). On light BG CTA: add 1px solid #0891b2 border.

Emerald Green

#10B981

CHECKOUT-ONLY CTA buttons (#10b981). Reserved exclusively for "Buy Now," "Complete Purchase," "Submit Payment." Never used on non-purchase CTAs.

Off-White

#FAFAFA

Form sections, pricing pages, FAQ, long text content. 15-25% higher form completion rates. Psychology: Trust, approachability, readability.

Light Silver

#E5E7EB

Borders, dividers, subtle backgrounds

Light Gray

#F9FAFB

Section backgrounds, cards

🎨 Gradient Design System

Professional Gradient Collection

Our gradient system creates visual depth, guides user attention, and reinforces brand consistency across all touchpoints. Each gradient is designed using our official brand colors for maximum cohesion.

Dark Section Gradients: Premium backgrounds for hero sections, features, and branding moments
Light Section Gradients: Conversion-optimized backgrounds for forms, pricing, and trust elements
CTA Button Gradients: High-converting button styles that demand attention
Accent & Decorative: Subtle overlays, dividers, and callout elements

🌑 Dark Section Gradients

Use these gradients for hero sections, premium features, and dark-themed content areas. They create depth and authority while maintaining brand consistency.

Premium Black Hero Recommended

🎯 Use Case: Main hero sections, premium landing pages

Your headline goes here

CSS Code:

background: linear-gradient(135deg, #000000 0%, #012b6e 70%, #011d4a 100%);

Best Practice: Creates dramatic depth while staying on-brand. Use white logo and text (#FAFAFA) for maximum contrast. Perfect for first-impression hero sections.

Deep Navy Radial

🎯 Use Case: Feature sections, content backgrounds with centered focus

Centered Content

Draws attention to center

CSS Code:

background: radial-gradient(ellipse at center, #1E293B 0%, #0F172A 70%);

Best Practice: Perfect for feature grids or testimonials where you want to draw eyes to center content. Works exceptionally well with card layouts.

Navy Depth Sweep Default Dark

🎯 Use Case: Complex sections, full-height backgrounds

Navy Depth

Subtle dark reveal

CSS Code:

background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);

Best Practice: Default dark section gradient. Vertical sweep from Deep Navy to Slate 800 creates subtle "reveal" as user scrolls. Use for Problem/Agitation and Offer Stack sections. Never includes Charcoal (#374151).

Subtle Navy Sweep

🎯 Use Case: Secondary sections, feature cards, sidebars

Feature Card

Diagonal navy sweep

CSS Code:

background: linear-gradient(135deg, #0F172A 0%, #162033 50%, #1E293B 100%);

Best Practice: Diagonal 135° navy sweep for visual variety when consecutive dark sections appear. Stays within #0F172A→#1E293B range. Never uses Charcoal (#374151) as a gradient stop.

☀️ Light Section Gradients (Conversion Areas)

Light gradients are conversion-optimized for forms, pricing tables, and trust-building sections. They create approachability and encourage action-taking.

Clean Conversion Light High Converting

🎯 Use Case: Pricing tables, opt-in forms, checkout sections

Special Offer

Clean and trustworthy

CSS Code:

background: linear-gradient(180deg, #FAFAFA 0%, #F1F5F9 100%);

Best Practice: Subtle light gradient creates trust and approachability. Use dark text (#0F172A or #374151) for maximum readability. Studies show 15-25% higher conversion rates on light backgrounds.

Trust Spotlight Light

🎯 Use Case: Proof Stack + Testimonials, guarantee boxes, trust badges

100% Guarantee

Risk-free promise

CSS Code:

background: radial-gradient(ellipse at center top, #FFFFFF 0%, #FAFAFA 60%, #F1F5F9 100%);

Best Practice: Radial from center-top creates a subtle spotlight on testimonial content. Trust elements feel naturally elevated. Proof sections are always LIGHT per the Hybrid Strategy. Uses #FAFAFA and #F1F5F9 (not #E5E7EB).

🔘 CTA Button Gradients

These gradients are optimized for maximum click-through rates. Use them on primary and secondary call-to-action buttons to drive conversions.

Primary CTA — Bright Turquoise All Pages

🎯 Use Case: Every CTA on every page — lead magnets, opt-ins, "Get Started," "Learn More." Turquoise = safe, inviting, go ahead.

CSS Code:

background-color: #06b6d4; /* Turquoise CTA — PRIMARY */

Best Practice: Turquoise (#06b6d4) is the PRIMARY CTA color for ALL pages. Use for lead magnets, opt-ins, "Get Started," "Watch Now." Black text (#000000) for contrast. On light backgrounds, add border: 1px solid #0891b2.

Checkout-Only CTA — Emerald Purchase Only

🎯 Use Case: ONLY on final purchase/checkout buttons — "Buy Now," "Complete Purchase," "Submit Payment"

CSS Code:

background-color: #10b981; /* Emerald — CHECKOUT ONLY */

⚠️ CHECKOUT ONLY: Emerald (#10b981) is reserved exclusively for purchase/payment buttons. If the button charges the user's card, use Emerald. Everything else uses Turquoise (#06b6d4). This creates Pavlovian color conditioning — green = "money changes hands."

Subtle Turquoise Hover

🎯 Use Case: Button hover states, interactive elements

CSS Code:

.ftg-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(6, 182, 212, 0.45); }

Best Practice: Apply translateY(-2px) lift + amplified box-shadow on hover for both CTA types. Creates "magnetic pull" micro-interaction that increases click intent.

✨ Accent & Decorative Gradients

Subtle gradients for dividers, overlays, and callout elements that add polish without overwhelming content.

Horizontal Accent Bar

🎯 Use Case: Dividers, underlines, decorative separators

Section Title

CSS Code:

background: linear-gradient(90deg, #07E6DE 0%, #10B981 100%);

Best Practice: Use at 3-4px height with border-radius: 2px. Perfect for section breaks or headline underlines. Creates visual rhythm throughout pages.

Overlay Dark Vignette

🎯 Use Case: Image overlays, text readability layers, media backgrounds

Text Over Image

Dark vignette ensures readability

CSS Code (as overlay layer):

background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

Best Practice: Layer over images or videos to ensure white text remains readable. Adjust opacity (0.7) as needed based on image brightness.

Light Accent Highlight

🎯 Use Case: Callout boxes, note sections, important highlights

💡 Pro Tip

Important information stands out

CSS Code:

background: linear-gradient(135deg, rgba(7, 230, 222, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);

Best Practice: Combine with border-left: 4px solid #07E6DE for callout boxes. Works on both dark and light backgrounds. Perfect for tips, notes, and highlights.

📋 Implementation Guidelines

Color Contrast Rules

On Dark Gradients

• Text: #FAFAFA (Off-White)
• Accents: #07E6DE (Bright Turquoise)
• Logo: White version
• Icons: #E5E7EB or #07E6DE

On Light Gradients

• Text: #0F172A (Deep Navy)
• Accents: #10B981 (Emerald)
• Logo: Black version
• Icons: #374151 or #10B981

On Turquoise/Green

• Text: #000000 (Pure Black)
• Never use white text
• Icons: #000000 or #0F172A
• Maximum contrast priority

Gradient Angle Reference

• 135deg – Diagonal top-left to bottom-right (most common, creates depth)
• 45deg – Diagonal bottom-left to top-right (gentler, more subtle)
• 90deg – Horizontal left to right (accent bars, horizontal elements)
• 180deg – Vertical top to bottom (long sections, natural reading flow)
• radial-gradient – Center-focused (spotlight effect, draw attention)

Performance & Best Practices

✅ DO: Use CSS gradients for backgrounds (no HTTP requests, better performance)
✅ DO: Test gradients on actual content and imagery before deploying
✅ DO: Ensure WCAG AA contrast ratios (4.5:1 for body text, 3:1 for large text)
✅ DO: Layer gradients sparingly for visual hierarchy
❌ DON'T: Use gradient images when CSS works (slower loading, less flexible)
❌ DON'T: Stack too many gradients on a single page (visual fatigue)
❌ DON'T: Use off-brand colors even if "they look good" (brand consistency is paramount)

🎬 Hybrid Dark/Light Background Strategy

A conversion-optimized approach: Dark sections for premium branding, light sections for maximum conversions.

Why This Strategy Works

Dark Sections = Premium Branding: Deep Navy and Black create authority and emotional impact
Light Sections = Higher Conversions: Off-White backgrounds deliver 15-25% better form completion rates
Alternating Dark/Light = Visual Rhythm: Prevents fatigue and guides the eye naturally through content
Off-White on Conversion Pages = Trust: Approachable, clean, professional feel increases action-taking

❌ OLD PATTERN — DO NOT USE

Navy → Charcoal → Navy → Charcoal (monotonous, no conversion benefit)

Full Page Layout — Visual Flow

🎯 §1 HERO + VSL

3-Tier Hero Gradient (135deg: #000000 → #012b6e → #011d4a)

Primary CTA (Turquoise #06b6d4)

§2 Lead Magnet Opt-In

Light Gradient (#FAFAFA → #F1F5F9) — Trust & Conversion

Primary CTA + 1px #0891b2 Border

§3 Problem / Agitation

Navy Depth (#0F172A → #1E293B) — Emotional Weight

§4 Proof Stack + Testimonials

Trust Spotlight Light (radial) — Proof is ALWAYS light

§5 Offer Stack / What's Included

Navy Depth (#0F172A → #1E293B) — Value Building

⚡ §6 Pricing + Guarantee

Light Gradient — CRITICAL for Conversion (15-25% higher)

Primary CTA + 1px #0891b2 Border

§6.5 FAQ (if standalone)

FAQ Gradient (135deg diagonal) — Light polarity, different texture

🔥 §7 FINAL CTA + COUNTDOWN

Reversed Hero Gradient (315deg) — Closing Bracket

Primary CTA (Turquoise #06b6d4)

Before & After Comparison

❌ OLD: Monotone Dark Pattern

Hero: Black

Navy

Charcoal

Navy

Charcoal

Too dark, monotonous, poor conversion

✅ NEW: Hybrid Dark/Light

Hero: Black Gradient

Opt-In: Light ⚡

Problem: Navy Depth

Proof: Light ⚡

Final CTA: Reversed

Premium + High Conversion ✓

Conversion Data

15-25%

Higher Form Conversion

Light backgrounds on forms vs. dark backgrounds

🏆

Premium Positioning

Dark hero = instant authority & emotional impact

🔄

Best of Both Worlds

Hybrid approach = premium branding + max conversions

⚠️ Critical Rules

Hero section MUST use the 3-tier hero gradient (135deg: #000000 → #012b6e → #011d4a)
Pricing/form sections MUST use light gradient (#FAFAFA → #F1F5F9) — critical for conversion
Final CTA MUST use reversed hero gradient (315deg) — mirrors hero as closing bracket
Every section uses a gradient — flat colors are retired
Pattern: Black(gradient) → Light → Navy → Light → Navy → Light → Black(reversed)

CSS Implementation

/* §1 Hero + VSL — 3-Tier Cinematic Gradient */
.ftg-section--hero {
  background: linear-gradient(135deg, #000000 0%, #012b6e 70%, #011d4a 100%);
  color: #FAFAFA;
}
/* §2, §6 Light Sections — Clean Conversion */
.ftg-section--light {
  background: linear-gradient(180deg, #FAFAFA 0%, #F1F5F9 100%);
  color: #0F172A;
}
/* §3, §5 Dark Sections — Navy Depth */
.ftg-section--dark {
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  color: #FAFAFA;
}
/* §4 Proof Stack — Trust Spotlight */
.ftg-section--light-trust {
  background: radial-gradient(ellipse at center top, #FFFFFF 0%, #FAFAFA 60%, #F1F5F9 100%);
  color: #0F172A;
}
/* §6.5 FAQ — Light Utility (diagonal) */
.ftg-section--faq {
  background: linear-gradient(135deg, #FAFAFA 0%, #F9FAFB 50%, #F1F5F9 100%);
  color: #0F172A;
}
/* §7 Final CTA — Reversed Hero (closing bracket) */
.ftg-section--final-cta {
  background: linear-gradient(315deg, #000000 0%, #012b6e 70%, #011d4a 100%);
  color: #FAFAFA;
}

Implementation Checklist

§1 Hero: 3-tier gradient (135deg: #000000 → #012b6e → #011d4a) §2, §6 Light sections: gradient (#FAFAFA → #F1F5F9) §3, §5 Dark sections: Navy Depth (#0F172A → #1E293B) §4 Proof: Trust Spotlight (radial light gradient) §6 Pricing: Light gradient (CRITICAL for conversion) §7 Final CTA: Reversed hero gradient (315deg) PRIMARY CTA: Turquoise #06b6d4 everywhere; Emerald #10b981 CHECKOUT ONLY No flat background-color on any section — all use gradients. No Charcoal as bg/gradient stop.

📍 Logo Usage

Choose the right logo variant based on your background color.

Primary Logo Variations

Dark Backgrounds → White Logo

Use on navy, black, or dark gray

Light Backgrounds → Navy Logo

Primary choice for light backgrounds

Dark Backgrounds → Light Silver

Alternative for dark backgrounds

Light Backgrounds → Charcoal

Alternative for light backgrounds

⚠️ CRITICAL: Pure Black Hero Background

✅ ALWAYS USE WHITE LOGO ON PURE BLACK (#000000)

✅ DO

FAST TRACK GenAI

White Logo (#FFFFFF)

Maximum contrast and readability. Perfect for hero sections and premium positioning.

❌ DON'T

FAST TRACK GenAI

Light Silver (#D1D5DB)

Insufficient contrast! Never use Light Silver or any gray color on pure black backgrounds.

Why White on Black?
Pure Black (#000000) creates the most dramatic, premium, and memorable first impression. White (#FFFFFF) provides perfect contrast (WCAG AAA compliant), ensuring maximum readability and brand impact in hero sections.

Logo Guidelines

✓ DO

Maintain clear space around logo
Use approved color variations
Keep proportions intact
Use high-resolution files
Place on contrasting backgrounds

✗ DON'T

Stretch or distort the logo
Change logo colors arbitrarily
Add effects or shadows
Place on low-contrast backgrounds
Rotate or tilt the logo

📝 Typography

We use native system fonts for optimal performance and readability. Rather than loading a custom web font, the site inherits each operating system's default UI typeface — this keeps pages fast, crisp, and visually consistent with the user's device.

System Fonts by Platform

The font stack automatically resolves to the best available typeface for each platform, in this order:

Platform	System Font	Loaded Via
🍎 macOS & iOS	SF Pro (San Francisco)	-apple-system, BlinkMacSystemFont
🪟 Windows	Segoe UI	'Segoe UI'
🤖 Android & Chrome OS	Roboto	Roboto
🐧 Linux	Ubuntu, Cantarell, or Noto Sans (distro-dependent)	falls back to system sans-serif
🌐 Universal Fallback	Helvetica Neue → Arial → sans-serif	'Helvetica Neue', Arial, sans-serif

Type Scale

Heading 1 - 48px Bold

The Quick Brown Fox

Heading 2 - 36px Bold

The Quick Brown Fox

Heading 3 - 24px Semibold

The Quick Brown Fox Jumps Over

Body Text - 16px Regular

Fast Track GenAI empowers entrepreneurs to launch AI-powered businesses in record time. Our comprehensive training and implementation packages ensure your success from day one.

Font Stack


                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 

                      Roboto, 'Helvetica Neue', Arial, sans-serif;

🔘 CTA Button Specifications

CTA buttons adapt based on background color. The key difference: borders on light backgrounds, no borders on dark.

CTA Button Comparison — Dark vs Light Background

On Dark Background (Black/Navy)

✅ No border needed — button pops naturally

On Light Background (Off-White)

✅ 1px solid #0ABAB5 border — subtle definition

📏 Critical Border Specifications

Border on Light BG: 1px solid #0ABAB5 (darker teal, NOT black)
Border on Dark BG: None (not needed)
Why darker teal border: Creates subtle definition without harsh black outline
Border width: Always 1px (2px is too heavy, 0.5px too light)

Primary CTA — Turquoise #06b6d4 (All Pages)

Checkout-Only CTA — Emerald #10b981 (Purchase Buttons Only)

CSS — CTA on Dark Backgrounds (Black/Navy)

.cta-button-dark-bg {

  background-color: #06b6d4; /* Turquoise — PRIMARY CTA */

  color: #000000; /* Black text */

  border: none; /* No border needed on dark backgrounds */

  padding: 16px 32px;

  border-radius: 8px;

  font-weight: 600;

  transition: all 0.3s ease;

}

.cta-button-dark-bg:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(7, 230, 222, 0.5);

}

CSS — CTA on Light Backgrounds (Off-White/White)

.cta-button-light-bg {

  background-color: #06b6d4; /* Turquoise — PRIMARY CTA */

  color: #000000; /* Black text */

  border: 1px solid #0891b2; /* Cyan 600 border for definition on light bg */

  padding: 16px 32px;

  border-radius: 8px;

  font-weight: 600;

  transition: all 0.3s ease;

}

.cta-button-light-bg:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(7, 230, 222, 0.4);

  border-color: #008B8B; /* Slightly darker on hover */

}

💬 Brand Voice

Our Tone

Empowering

We give you the tools and confidence to succeed.

Professional

Expert guidance delivered with clarity and authority.

Results-Focused

Every word drives toward your business success.

Energetic

Dynamic and motivating, ready to take action.

Writing Guidelines

✓ DO

Use active voice and strong verbs
Be specific with numbers and results
Address reader directly (you/your)
Lead with benefits, not features
Keep sentences clear and concise

✗ DON'T

Use jargon or buzzwords
Make vague promises
Write in passive voice
Overcomplicate the message
Use hype without substance

🧭 Navigation Bar (Hero Section)

Hero Navigation Visual Preview

Complete Color & Design Specifications

Gradient Sweep Visual Explanation

CSS Implementation Examples

Base Hero Navigation Bar

Logo Styling (Image-Based)

Logo Hover State (Bright Turquoise Tint)

Navigation Links - Default & Hover States

Active Page Indicator

CTA Button with Lift & Glow Effect

HTML Structure Example

Accessibility & Contrast Compliance

Mobile Considerations

Responsive Adjustments for Small Screens

Best Practices & Implementation Checklist

📐 Logo Sizing Guidelines

🔑 Golden Rule

Sizing Reference Table

Visual Size Comparison

CSS Implementation

Do's and Don'ts

✅ Do

❌ Don't

🎨 Color Palette

🎨 Gradient Design System

Professional Gradient Collection

🌑 Dark Section Gradients

Fast Track GenAI

Centered Content

Navy Depth

Feature Card

☀️ Light Section Gradients (Conversion Areas)

Special Offer

100% Guarantee

🔘 CTA Button Gradients

✨ Accent & Decorative Gradients

Text Over Image

💡 Pro Tip

📋 Implementation Guidelines

Color Contrast Rules

Gradient Angle Reference

Performance & Best Practices

🎬 Hybrid Dark/Light Background Strategy

Why This Strategy Works

Full Page Layout — Visual Flow

🎯 §1 HERO + VSL

§2 Lead Magnet Opt-In

§3 Problem / Agitation

§4 Proof Stack + Testimonials

§5 Offer Stack / What's Included

⚡ §6 Pricing + Guarantee

§6.5 FAQ (if standalone)

🔥 §7 FINAL CTA + COUNTDOWN

Before & After Comparison

❌ OLD: Monotone Dark Pattern

✅ NEW: Hybrid Dark/Light

Conversion Data

CSS Implementation

Implementation Checklist

📍 Logo Usage

Primary Logo Variations

⚠️ CRITICAL: Pure Black Hero Background

Logo Guidelines

✓ DO

✗ DON'T

📝 Typography

System Fonts by Platform

Type Scale

Heading 1 - 48px Bold

Heading 2 - 36px Bold

Heading 3 - 24px Semibold

Body Text - 16px Regular

Font Stack

🔘 CTA Button Specifications

CTA Button Comparison — Dark vs Light Background

Primary CTA — Turquoise #06b6d4 (All Pages)

Checkout-Only CTA — Emerald #10b981 (Purchase Buttons Only)

CSS — CTA on Dark Backgrounds (Black/Navy)

CSS — CTA on Light Backgrounds (Off-White/White)