# adiuvAI — Creative Brief: Waitlist Landing Page

> **Purpose:** Design direction for scrollytelling waitlist page  
> **Status:** Proposals for review — pick a direction before I build

---

## Brand Audit Summary

| Element | Value |
|---------|-------|
| **Logo Mark** | Compass needle — golden north (AI), dark south (human). Animates with gentle oscillation. |
| **Primary Color** | `#fbc881` — Golden Yellow (the "AI" accent) |
| **Dark Base** | `#0c0c0c` — Near-black |
| **Light Base** | `#f4edf3` — Pinkish-white canvas |
| **Secondary** | `#8a8ea9` — Slate blue-gray |
| **Muted** | `#c8c3cd` — Light gray-purple |
| **App Font** | Geist (400/600/700) |
| **App Screenshot** | Daily brief view: "Good evening, Roberto" + greeting, chat, quick actions |

---

## Style Direction — Two Options

### Option A: "The Dark Executive" (Recommended)

> Think **Linear.app meets Stripe's documentation** — but warmer, more human, with the golden compass as a guiding light through darkness.

**Mood:** Premium, confident, dark. Like a private briefing room at midnight.  
**Background:** Near-black (`#0c0c0c`) with subtle radial gradients and noise texture.  
**Typography:** Geist for headings (tight letter-spacing, large scale). DM Sans or Satoshi for body.  
**Color play:** Gold (`#fbc881`) is the ONLY color accent — glowing, warm against the dark void. Everything else is white/gray hierarchy. The gold appears sparingly: on the compass, on CTAs, on scrollytelling highlights.  
**Scrollytelling philosophy:** Each scroll "chapter" reveals one concept — like pages of a briefing document. Text fades in from below, sections pin and transform, the compass needle rotates as you scroll deeper.  
**Animation:** Scroll-triggered reveals (GSAP ScrollTrigger), the compass needle slowly settling as you scroll, golden light trails connecting sections like a thread of attention.  

**Why it works for adiuvAI:**
- Dark mode signals "this is serious technology for professionals, not a toy"
- Gold-on-dark is inherently premium — it says "personal secretary," not "productivity tool"
- The restraint (one accent color) mirrors the USP: "complex AI, invisible to you"
- The scrollytelling parallels the daily brief: information revealed progressively, just for you

---

### Option B: "The Warm Canvas"

> Think **Granola.ai meets Apple product pages** — light, airy, warm.

**Mood:** Clean, human, warm. Like a fresh notebook on a sunny desk.  
**Background:** Light canvas (`#f4edf3`) with soft shadows and paper-like texture.  
**Typography:** Geist for headings, system body. Generous whitespace.  
**Color play:** Gold accents on light backgrounds, dark cards for contrast sections.  
**Scrollytelling:** Smooth vertical reveals, product screenshot floats in center, feature cards slide in from sides.  

**Why it could work:** Friendlier, less intimidating, closer to the app's light mode.  
**Why I don't recommend it:** Every AI productivity tool (Motion, Granola, Reclaim) uses light backgrounds. You'd blend in.  

---

<!-- 💬 USER REVIEW: Pick Option A or Option B, or ask me to combine elements. -->

---

## Page Architecture (Scrollytelling Flow)

The page scrolls through **7 chapters**. Each pinned section transitions to the next with a scroll-driven animation.

```
CHAPTER 1: THE HOOK
├── Full-screen dark canvas
├── Compass needle animates in (settles from rotation)
├── Tagline types in: "Meet your new chief of staff."
├── Headline fades up: "What if AI could be your secretary?"
├── Subheadline fades up
├── Email input + CTA
└── Scroll indicator: subtle down-arrow pulse

CHAPTER 2: THE PROBLEM (scroll-triggered)
├── Text fades in line by line as you scroll:
│   "Your important emails hide between newsletters."
│   "Your tasks live in three different apps."
│   "Meeting notes sit in a doc you'll never open again."
├── Each line appears with a slight delay, dimming the previous
└── Final line glows gold: "You need a secretary, not another tool."

CHAPTER 3: THE REVEAL (pinned section, parallax)
├── App screenshot rises from below (parallax entrance)
├── Three pillars appear around the screenshot:
│   🧭 AI Secretary | 🔒 Private by Design | 🇪🇺 EU AI Act
├── Each pillar highlights on scroll with gold underline
└── Screenshot subtly shifts to show Daily Brief

CHAPTER 4: HOW IT WORKS (horizontal scroll-within-scroll)
├── 3 steps slide horizontally as you scroll vertically:
│   Step 1: Connect (Gmail/Outlook icons float in)
│   Step 2: Extract (animated lines flow from email → task cards)
│   Step 3: Brief (morning brief card materializes)
└── Progress bar at bottom fills gold as you move through steps

CHAPTER 5: FEATURES (staggered grid reveal)
├── Feature cards fade in one by one as you scroll
├── Each card: icon + title + one-line description
├── ✅ Beta features have a subtle green dot
├── 🔜 Coming Soon features have a pulsing amber dot
└── Hover/tap reveals expanded description

CHAPTER 6: THE FOUNDER (personal touch)
├── Clean section, minimal
├── Blockquote style with Roberto's note
├── "Built by an AI Enterprise Solution Architect"
└── Compass needle icon as pull-quote mark

CHAPTER 7: THE FINAL CTA (pinned, full-screen)
├── Dark full-bleed section
├── Large headline: "Be the first to meet your AI secretary."
├── Email input with animated border (gold shimmer)
├── "Beta launches June 2026"
└── Footer fades in below
```

<!-- 💬 USER REVIEW: Does this flow feel right? Any chapter you'd cut or add? -->

---

## Technical Approach

| Concern | Solution |
|---------|----------|
| **Scrollytelling engine** | GSAP 3 + ScrollTrigger (already used on current site, proven, lightweight) |
| **Icons** | Lucide (already used on current site) |
| **Font** | Geist via Google Fonts or CDN (not @fontsource since this is a static HTML page) |
| **Email collection** | Simple `<form>` that POSTs to your API endpoint or a service like Buttondown/Mailchimp. I'll build the form shell — you wire it to your backend. |
| **Image** | Embed the app screenshot (`home.png`) inline. SVG logos embedded directly. |
| **Mobile** | Fully responsive. Scrollytelling degrades gracefully — pinned sections become normal scroll on mobile. |
| **Performance** | Single HTML file, no build step. GSAP loaded from CDN. Total page weight < 200KB. |
| **Accessibility** | `prefers-reduced-motion` disables scroll animations. Focus states on form. Contrast ratios verified. |

<!-- 💬 USER REVIEW: Any technical constraints I should know? Where should the waitlist emails go? -->

---

## Deliverable

Once you approve a direction, I'll build the complete `website/index.html` — a single self-contained HTML file with:
- Embedded CSS (all custom properties from your app's palette)
- Embedded SVG logos (compass mark + wordmark)
- GSAP scrollytelling animations
- Responsive layout
- Working email form (shell)
- The app screenshot as the centerpiece visual

---

*Review the options above and tell me your direction. I'll start building immediately.*