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.

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

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.

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.

7.1 KiB Raw Blame History