---
name: tvf-carousel-design-system
description: >
  Build 10-slide Instagram carousels for @thevibefounder using the
  Wonder -> Understanding -> Desire -> Belief -> Action framework. Use this skill
  when the user wants a "carousel", "10-slide post", "carousel post", "swipe post",
  or wants to ride a trending topic/viral moment to position a product or offer as the
  solution. This is the general carousel chassis: 1440x1800 canvas, Space Mono,
  light-dominant with clustered dark mood slides, 3D keyboard-key centerpieces, villain
  -> turning point -> new belief story arc. Not the dark editorial news format (use
  tvf-news-drop), not single-slide text posts (use tvf-x-on-insta).
---

# TVF Instagram Carousel — Design System & Playbook

10-slide carousel for @thevibefounder. Every carousel rides a trending topic or viral
moment and positions a product/offer as the solution. The job of the format is to build
tension, then flip a belief.

## Storytelling Formula (non-negotiable)

Every carousel needs three things:
1. **A villain** — the blocker your audience faces.
2. **A turning point** — introduced at slide 7.
3. **A new belief** — flipped by slide 10.

Build tension through slides 1-6. Turn at 7. Land the new belief by 10.

## Arc Structure (10 slides)

| # | Beat | Job |
|---|------|-----|
| 1 | Hook stat | Open the gap. Stop the scroll. |
| 2 | Credibility signal | Earn the right to be heard. |
| 3 | Product reveal | Name the thing (lightly). |
| 4 | FOMO | What they are missing right now. |
| 5 | Pain point | Name the ache. (dark) |
| 6 | Villain | The thing blocking them. (dark) |
| 7 | Solution / turning point | The shift. (dark) |
| 8 | Receipts | Side-by-side proof. |
| 9 | Social proof | Numbers, names, results. |
| 10 | CTA | New belief + ManyChat keyword trigger. |

Framework mapping: Wonder (1-2) -> Understanding (3-4) -> Desire (5-6) -> Belief (7-9) -> Action (10).

## Canvas & Layout

- **Canvas:** 1440x1800px (4:5 ratio).
- **Safe zone:** 100px padding on all sides. Nothing important outside it.
- **Standalone HTML** per slide, self-contained, no external deps except Google Fonts.
- **Screenshot at 1440x1800** for upload (use the bundled render script).

## Typography

- **Font:** Space Mono only. 400 / 700 weights. Loaded from Google Fonts.
- **Headlines:** 92px minimum (phone-readable at 40% scale).
- **Body:** 24px floor. **Nothing below 18px, ever.**
- **Emphasis:** italics on ONE emotional word per headline, paired with `.accent` color
  and a `pulseGlow` animation. One word, not two.

Import: `https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap`

## Colors

```css
--light:  #F0EDE8;   /* default background */
--dark:   #0D0D0D;   /* mood slides only */
--teal:   #45CA9F;
--purple: #AA44EE;
--lime:   #BAFF39;   /* high energy only, use sparingly */
```

**Light/dark split:** 7 light, 3 dark is the sweet spot. Light bg performs better for most
slides. Reserve dark for mood slides only — pain (5), villain (6), reveal (7). Clustering
the three dark slides in the middle creates a mood shift that makes the light solution
slides hit harder on the way out.

## Visual Centerpieces

- **3D keyboard-style keys** are the scroll-stopper. Gradient fills, box-shadow depth
  (`0 6px 0`), inset highlights for the pressed/raised look. Use these as the hero element
  on hook and reveal slides.
- **Background texture (every slide, both layers):**
  1. Dot grid — 48px spacing, masked center fade.
  2. Neural network SVG nodes in the corners.

## Per-Slide Furniture

- **Progress dots (1-5)** on every slide for carousel position awareness.
- **Footer:** `@thevibefounder` branding + "Swipe to Know More ->" on slides 1-9.
  Slide 10 footer reads "Save this post" with an **SVG bookmark icon** (no emoji — TVF
  rule is SVG icons only, never emoji in designed content).
- **Slide 10 CTA** always includes a ManyChat keyword trigger for DM automation.

## Build Method

Clone from a shipped slide HTML and make surgical, content-only replacements (text, color
via `sed` or `str_replace`). Never rebuild the CSS from scratch. The shipped HTML is the
source of truth; this spec is the reference.

## Update Before Each Post

- Waitlist / social proof numbers (slide 9).
- Keyword trigger word (slide 10).
- Product name and URL.

## Rendering

Use the bundled `render.py` (Python + Playwright) at a **1440x1800 viewport**.

```bash
pip install playwright --break-system-packages
python3 -m playwright install chromium
python3 render.py            # renders every slide-*.html in the folder
```

## Output Checklist

- [ ] All slides render at exactly 1440x1800.
- [ ] 100px safe zone respected on all sides.
- [ ] 7 light / 3 dark split, dark slides clustered at 5-6-7.
- [ ] Headlines 92px+, body 24px+, nothing below 18px.
- [ ] One italic accent word per headline with pulseGlow.
- [ ] 3D keys on hook + reveal slides.
- [ ] Dot grid + neural nodes on every slide.
- [ ] Progress dots correct per slide.
- [ ] Footer: "Swipe to Know More ->" (1-9), "Save this post" + SVG bookmark (10).
- [ ] Slide 10 has a ManyChat keyword trigger.
- [ ] No emoji anywhere — SVG icons only.
- [ ] No em dashes anywhere.
- [ ] Villain, turning point (slide 7), and new belief (slide 10) all present.

## Versioning

`TVF-CAROUSEL-DESIGN-SYSTEM-SKILL-v[MM_DD_YYYY].md`