heygen-com--hyperframes/registry/examples/airbnb-deck/DESIGN.md

# Airbnb Seed Deck — Design Notes

## Intent

A premium remake of Airbnb's 2009 seed pitch deck using current Airbnb brand language.
The composition should feel warm, human, and tasteful — the opposite of a tech startup
dark-mode deck. White canvas, generous space, soft coral accents. Three.js backgrounds
are elegant mood-setters, never distracting.

## Color Palette

| Token            | Value     | Use                                  |
| ---------------- | --------- | ------------------------------------ |
| Rausch (primary) | `#FF385C` | CTAs, logo, accent bars, highlights  |
| Coral warm       | `#FF5A5F` | Gradient partner to Rausch           |
| Babu dark        | `#E61E4D` | Hover / emphasis gradient endpoint   |
| Off-white        | `#FFFFFF` | Slide background on light slides     |
| Hof dark         | `#222222` | Primary text; dramatic dark slide bg |
| Foggy gray       | `#717171` | Body copy, captions, secondary text  |
| Arches light     | `#F7F7F7` | Card backgrounds, subtle panel fills |
| Arches pink      | `#FFF1F1` | Soft pink tint for card areas        |

Do not introduce blue, purple, or green accents. The palette is warm coral + neutral.

## Typography

**Font**: "Nunito Sans" from Google Fonts — geometric, rounded, friendly.
Fallback stack: `"Nunito Sans", "Montserrat", system-ui, sans-serif`.

| Role     | Size (1920×1080) | Weight            |
| -------- | ---------------- | ----------------- |
| Headline | 80–96px          | 800               |
| Subhead  | 48px             | 400               |
| Body     | 40–44px          | 400–600           |
| Eyebrow  | 28–32px          | 700, letterspaced |
| Numbers  | 96–120px         | 900               |

Minimum readable size: 40px. Never go below that for audience-facing text.

## The Bélo Logo

The Bélo is Airbnb's universal belonging mark — a rounded loop that is simultaneously
a heart, a location pin, and a letter A. Reproduce it as inline SVG in Rausch `#FF385C`.

Use on: cover slide (large, centered), corner mark on every slide (48×48px, top-left).
Do NOT stretch or recolor the Bélo. Pair with lowercase "airbnb" wordmark in `#222222`.

## Layout Language

- **Generous whitespace**: 120px top/bottom padding, 160px left/right on 1920px canvas.
- **Rounded corners**: 16–24px on all cards and stat blocks.
- **Soft shadows**: `box-shadow: 0 4px 24px rgba(0,0,0,0.08)` for cards.
- White or very light slide backgrounds for most slides (readable and clean).
- Dark background (`#222222`) for: Cover (optional dramatic variant), Team, Ask.
- Keep layouts left-aligned or centered — never right-heavy.

## Three.js Background Moods (per-slide)

Backgrounds run on a persistent WebGL canvas behind all slide content.
All animations use a fixed seed (no `Math.random()`); seeded using a deterministic LCG.
Particle counts, positions, and velocities are computed from seeded values.

| Slide         | Mood                                                                |
| ------------- | ------------------------------------------------------------------- |
| cover         | Soft floating coral particles, slow upward drift, warm pink fog     |
| problem       | Desaturated gray particles, slower/heavier motion, cooler hue       |
| solution      | Coral bloom: particles converge inward, warm pulse                  |
| market        | Low-poly globe outline with soft arc routes in coral, gentle rotate |
| product       | Clean minimal — very subtle grid of pale dots, nearly static        |
| business      | Same as product — minimal                                           |
| adoption      | Sparse warm nodes with thin connecting lines (network graph feel)   |
| competition   | Cool gray minimal — positioning matrix backdrop                     |
| team          | Soft bokeh: large blurred coral orbs, slow parallax                 |
| ask           | Coral gradient swell — warm radial from center, slow pulse          |
| market-sizing | Same globe as market, camera zoomed in, arcs highlighted            |

## Do's

- Large, single-stat slides for numbers ($2.1B, $500K) — let the number breathe.
- Bottom-up math shown explicitly: trips × take-rate = revenue.
- Complete-sentence headlines that make a claim, not a label.
- SVG Bélo mark consistent across slides.

## Don'ts

- No dark purple, electric blue, neon green.
- No hero imagery or stock photos (pure typography + Three.js + SVG).
- No glassmorphism, frosted panels, or gamer-aesthetic effects.
- No unseeded random values — all Three.js positions must be deterministic.
- No font below 40px for any audience-visible text.