# Landing Page Learnings

*Updated: 2026-02-17*
*Research source: `agency/docs/2026-web-design-research.md`*

---

## 🚨 MANDATORY: What NOT to Do (AI Patterns)

**ALWAYS CHECK AGAINST THIS LIST BEFORE GENERATING:**

| Pattern | Why It's Bad |
|---------|--------------|
| Gradient blobs/orbs | Screams "AI template" |
| Generic stock illustrations | Faceless, untrustworthy |
| "Revolutionize your workflow" | Empty, overused |
| Multiple gradients in hero | Every AI page does this |
| Bouncy animations | Undermines premium |
| "Sign up", "Learn more" CTAs | No value proposition |
| Dense text blocks | Nobody reads them |
| Purple + blue gradients | #1 AI cliché |
| Floating UI mockups | Every SaaS template |
| Feature grids with icons | Looks templated |
| Pie charts / complex SVG shapes | Can look terrible if not done well |

---

## ✅ MANDATORY: What TO Do

### Creating Drama Pause Moments
Every landing page needs at least one "stop and appreciate" moment:
- **Bold statement sections** (full viewport, single message)
- **Large numbers that count up** (but NOT on every site - vary it!)
- **Dramatic typography** that commands attention

### Scroll Rewards
Make scrolling feel intentional:
- Staggered reveal animations
- Elements that fade + translate up
- Progress indicators
- Sections that surprise

### The Unexpected
One moment that shows personality:
- Typewriter effect on hero
- Cursor glow in dark sections (hidden on touch devices!)
- Witty microcopy
- Hidden detail that rewards attention

---

## Core Principle

> "In a world of algorithmic sameness, human craft is becoming the differentiator."
> — Webflow, 2026

**Hyperpersonalized software deserves hyperpersonalized branding.**

Every product should feel like its own thing, not a reskinned template. The baseline is higher now. AI made sophisticated design accessible to everyone. Standing out requires **intentionality and craft** that can't be replicated with a prompt.

---

## Mode Selection (Not Everything Should Be Dark)

Match the mode to the brand personality:

| Personality | Mode | Example |
|-------------|------|---------|
| Premium / data-forward | Dark | Overture (analytics) |
| Builder / action | Light brutalist | Vector (PM) |
| Human / warm | Cream / warm neutrals | Alignly (HR), Clocklane (retail) |
| Professional / ops | Light + brand accent | Worklane (approvals) |
| Welcoming / client-facing | Light + soft accent | Encore (portals) |
| Discovery / navigation | Light + vibrant accent | ContentVane (research) |

**Don't default to dark mode.** It's overused and doesn't fit every personality.

---

## Signature Pause Moments

Every landing page needs ONE unique delight moment that:
1. **Ties to brand concept** (not random animation)
2. **Is unique to that product** (no repetition across sites)
3. **Creates a "stop and appreciate" pause**
4. **Avoids AI template clichés**

### Our Signature Moments

| Product | Signature | Brand Tie-In |
|---------|-----------|--------------|
| Overture | Aperture breathes, opens on scroll | "See clearly" - analytics lens |
| Vector | Shipping meter fills as you scroll | "Ship fast" - visible progress |
| Alignly | Employee avatars pulse with heartbeat | "People first" - human warmth |
| Worklane | APPROVED stamp slams on reveal | "Approvals" - satisfying completion |
| Clocklane | Live clock ticks with real seconds | "Every hour" - time awareness |
| Encore | Portal doors open on page load | "Front door" - welcoming entry |
| ContentVane | Compass needle swings to find north | "Navigate" - finding direction |

---

## What NOT to Do (AI Template Red Flags)

| Pattern | Why It's Bad |
|---------|--------------|
| Counting numbers on every page | Repetitive, screams "template" |
| Gradient blobs/orbs | #1 AI cliché |
| Bouncy animations | Undermines premium feel |
| Purple + blue gradients | Every AI site does this |
| Generic feature grids with icons | Looks templated |
| "Revolutionize your workflow" | Empty, overused |
| Floating UI mockups | Every SaaS template |

---

## Assets Checklist

Every product landing page needs:
- [ ] `favicon.svg` - Brand mark
- [ ] `og-image.png` - 1200x630, matches brand mode
- [ ] `apple-touch-icon.png` - 180x180
- [ ] Proper meta tags (og:title, og:description, og:image, twitter:card)
- [ ] Cursor glow matching brand color (hidden on touch devices)
- [ ] One signature pause moment

---

## Technical Notes

### Cursor Glow on Touch Devices
Always hide cursor glow on touch devices:
```css
@media (hover: none) { .cursor-glow { display: none; } }
```

### Horizontal Scroll Prevention
```css
html, body { overflow-x: hidden; max-width: 100vw; }
```

### OG Image Generation
Use ImageMagick to convert SVG → PNG:
```bash
convert -density 192 og-image.svg -quality 92 og-image.png
```

---

## Key Insights

> "The counting up numbers look very repetitive across all the websites, think of other ways to delight."
> — Jarrhey, 2026-02-17

> "Every product and brand landing page is unified in the mission and movement of offering personalized software but should have a signature pause moment of delight."
> — Jarrhey, 2026-02-17

**Lesson:** If you can describe a pattern as "we do X on every site," it's probably a template smell. Each product deserves its own moment.

---

## 2026 Trends (DO THESE)

From research (`agency/docs/2026-web-design-research.md`):

1. **Proprietary visual effects** — Custom visual systems that feel distinctly yours
2. **Art converging with UI** — Vintage/hand-drawn elements + modern interactions
3. **Radical copy brevity** — Less is counter-cultural when AI generates infinite text
4. **TL;DR experience** — Pitch-deck style, front-load essentials
5. **Full color systems** — Deploy entire palettes, not just one accent
6. **Dynamic text treatments** — Animated text, kinetic lettering
7. **Guided scrolling** — Progress indicators, scroll as navigation
8. **Neo-brutalism** — Raw, unpolished, intentional
9. **Bold typography** — Oversized, variable fonts, typography as storytelling
10. **High-contrast dramatic dark** — Not generic dark mode, but theatrical

---

## AI-Generated Website Red Flags (DON'T DO THESE)

### Visual Tells
- Gradient blobs/orbs (#1 cliché)
- Purple + blue gradients everywhere
- Bouncy, playful animations
- Floating UI mockups with no context
- Feature grids with generic icons

### Copy Tells
- Wordy, vague descriptions
- "Revolutionize your workflow" language
- Em dashes everywhere (—)
- Overuse: seamless, robust, leverage, cutting-edge

### Structure Tells
- Cookie-cutter template layouts
- Repetitive patterns across pages
- Same animations repeated
- No distinctive personality

---

## Outdated 2020-2023 Trends (AVOID)

- Flat design (peaked 2012-2020)
- Neumorphism (peaked 2020)
- Above the fold obsession
- Basic parallax scrolling
- Single accent color only
- System fonts everywhere
- Purple/blue SaaS gradient
