# Overture Landing Page Redesign Plan

**Status:** Planning
**Goal:** Transform from AI-looking template → Premium, dramatic, brand-compliant landing page

---

## Current Problems

| Issue | Current State | Target State |
|-------|---------------|--------------|
| **Typography** | Small, dense, hard to read | Large, confident (48-120px headlines) |
| **Layout** | Cluttered, no breathing room | 50%+ whitespace, 120-180px section padding |
| **Colors** | Wrong purple (#7c5cff) | Overture Cyan (#0891b2) ✅ Fixed |
| **Drama** | No pause moments | Full-viewport statements, scroll reveals |
| **AI Smell** | Gradient orbs, feature grids | Clean, minimal, intentional |
| **Font** | Missing Fraunces display | Fraunces + Inter + JetBrains Mono ✅ Fixed |

---

## Brand Requirements (from CSaaS Brand System)

### Overture Identity
- **One Word:** Clarity
- **Personality:** The Conductor — calm, composed, quiet authority
- **Tagline:** "Your business at a glance."
- **Voice:** Confident, composed, clear, elegant

### Typography
| Element | Font | Weight | Size | Letter Spacing |
|---------|------|--------|------|----------------|
| H1 / Hero | Fraunces | 600 | 56px | -0.02em |
| H2 | Fraunces | 500 | 40px | -0.01em |
| H3 | Inter | 600 | 28px | 0 |
| Body | Inter | 400 | 16-18px | 0 |
| Data | JetBrains Mono | 500 | varies | 0 |

### Color Palette
| Name | Hex | Usage |
|------|-----|-------|
| Overture Cyan | `#0891b2` | Primary accent |
| Cyan 700 | `#0e7490` | Hover states |
| Cyan 400 | `#22d3ee` | Highlights |
| Midnight | `#0c1524` | Dark backgrounds |
| Charcoal | `#1e293b` | Cards, surfaces |
| Ivory | `#f8fafc` | Primary text on dark |
| Slate | `#94a3b8` | Secondary text |

---

## Page Structure (Brand-Compliant)

### Section 1: HERO
**Background:** Black (#000)
**Content:**
- Logo (aperture mark + "overture" in Fraunces)
- Hero headline: **"Know what changed—before the meeting."** (56-72px Fraunces)
- Subhead: One sentence, max 15 words (18px Inter, Slate color)
- Single CTA: "Join Beta →" (white button on black)
- Price anchor: "Starting at $X/mo"
- NO feature bullets, NO floating UI mockups

**Drama:**
- Typewriter effect on headline
- Subtle aperture logo animation (segments rotate on load)

### Section 2: THE SHIFT (Problem/Solution)
**Background:** White (#ffffff)
**Content:**
- Split layout: Old Way vs Our Way
- Large contrast typography
- Simple comparison (not a table)

**Example copy:**
```
Old Way: "What happened to revenue last month?"
         *3 days later, after 12 Slack messages*

Our Way: "Revenue dropped 8% — here's why."
         *Instantly, in plain English*
```

### Section 3: SOCIAL PROOF
**Background:** Dark (#18181b)
**Content:**
- 3 large numbers (count up on scroll)
- Client logos (if available) or "Built by Symph" trust mark
- One testimonial quote (large, centered)

### Section 4: HOW IT WORKS
**Background:** Black (#000)
**Content:**
- "Three steps to clarity" (H2)
- 3 cards, staggered reveal
- Simple icons + short text
- NO feature grid

### Section 5: BOLD STATEMENT (Pause Moment)
**Background:** White (#ffffff)
**Content:**
- Full viewport height
- Single powerful statement: **"Your data, surfaced."**
- Large typography (80-120px)
- Nothing else

### Section 6: PRICING
**Background:** Dark (#18181b)
**Content:**
- 2-3 tiers, simple cards
- Clear pricing
- CTA per tier

### Section 7: CTA / Footer
**Background:** Black (#000)
**Content:**
- "Ready for clarity?" or similar
- Email capture or contact form
- "Overture by Symph" footer

---

## Specific Fixes Required

### 1. Remove AI Smell
- [ ] Remove gradient orbs/blobs
- [ ] Remove floating UI mockups
- [ ] Remove dense feature grids
- [ ] Remove "AI-Powered" badge styling (too common)
- [ ] Remove bouncy animations
- [ ] Remove purple/blue gradients

### 2. Typography Overhaul
- [ ] Hero headline: 56-72px Fraunces, -0.03em tracking
- [ ] Section titles: 40-48px Fraunces
- [ ] Body text: 18px Inter, 1.6 line height
- [ ] Max line width: 600px for readability
- [ ] Increase contrast (white on black, not gray on dark gray)

### 3. Spacing & Layout
- [ ] Section padding: 120px minimum (currently ~80px)
- [ ] Container max-width: 1000px (not 1200px — more focused)
- [ ] Remove unnecessary elements (50% reduction target)
- [ ] Add full-viewport pause sections

### 4. Color Fixes
- [x] Primary accent: Cyan #0891b2 (done)
- [ ] Remove all purple remnants
- [ ] Dark backgrounds: #000 or #0c1524
- [ ] Text on dark: #f8fafc (not gray)

### 5. Interactions
- [ ] Scroll reveal: fade + translateY(30px), staggered
- [ ] Button hover: lift 4px + shadow
- [ ] Logo hover: aperture rotation
- [ ] Number count-up animation
- [ ] Typewriter effect on hero (optional)

### 6. Content Rewrite
- [ ] Hero headline: Shorter, punchier
- [ ] Remove jargon: "AI-Powered Analytics" → "See what matters"
- [ ] Shorten all body copy by 50%
- [ ] Add one witty moment

---

## Implementation Order

### Phase 1: Structure & Cleanup (1 hour)
1. Remove all gradient orbs, floating mockups, feature grids
2. Restructure into 7 clear sections
3. Add full-viewport pause section
4. Increase all section padding to 120px+

### Phase 2: Typography (30 min)
1. Apply Fraunces to all headlines
2. Increase headline sizes (56px+)
3. Add letter-spacing (-0.02em to -0.03em)
4. Ensure text contrast (white on dark, not gray)

### Phase 3: Layout & Spacing (30 min)
1. Reduce container width
2. Add breathing room (50%+ whitespace)
3. Simplify cards and grids
4. Remove redundant sections

### Phase 4: Interactions (30 min)
1. Add scroll reveal animations
2. Improve button hovers
3. Add number count-up
4. Optional: typewriter effect

### Phase 5: Content Polish (30 min)
1. Rewrite headlines to brand voice
2. Shorten all copy
3. Add price anchor
4. Review for AI smell

### Phase 6: QA & Deploy (15 min)
1. Mobile responsiveness check
2. Performance check (<3s load)
3. Deploy to Cloud Run

---

## Copy Direction

### Headlines (Fraunces, large)
```
✓ "Know what changed—before the meeting."
✓ "Your business at a glance."
✓ "See what matters."
✓ "Data should illuminate, not overwhelm."

✗ "AI-Powered Real-Time Analytics Dashboard"
✗ "Comprehensive Business Intelligence Solution"
```

### Subheads (Inter, medium)
```
✓ "Overture explains KPI movement in plain English—live."
✓ "Stop guessing why revenue dipped."

✗ "Transform scattered data into unified intelligence with our comprehensive platform."
```

### CTAs
```
✓ "Join Beta →"
✓ "See It Work →"
✓ "Get Clarity →"

✗ "Learn More"
✗ "Sign Up Now!"
```

---

## Success Criteria

Before shipping, verify:
- [ ] Does NOT trigger "AI smell test" (no orbs, no purple gradients, no feature grids)
- [ ] Headlines are 48px+ and readable
- [ ] At least one full-viewport pause moment
- [ ] Section padding is 120px+
- [ ] 50%+ of viewport is whitespace
- [ ] All text uses correct fonts (Fraunces/Inter/JetBrains)
- [ ] Colors are correct (Cyan #0891b2, not purple)
- [ ] Mobile responsive
- [ ] < 3 second load time

---

*Plan created: 2026-02-17*
*Target completion: 3-4 hours*
