# Animation Style Guide — YellowLine NYC Masterclass

Visual and production standards for **mod-00 … mod-09** module videos.
MP4 production via [LibTV 操作指南（中文）](libtv-production-guide.zh.md) · [LibTV guide (English)](libtv-production-guide.md); this guide defines visual standards for storyboards and rendering.

**Related**: [libtv-production-guide.zh.md](libtv-production-guide.zh.md) · [libtv-production-guide.md](libtv-production-guide.md) · [production scripts & LibTV pipeline](animation-production-scripts.md) (§2.8 `produce-module.js`)

**Canonical sources** (keep in sync): `scripts/pipeline/configs/characters.json` · `scripts/pipeline/lib/training-style.js` · per-module `configs/mod-XX.json` → `style.block`

---

## Visual style (2026 — MHP, not Snowflake vendor look)

| Dimension | Current standard | Retired (do not use in new prompts) |
|-----------|------------------|-------------------------------------|
| **Motion / illustration** | **American animation** — flat 2D corporate e-learning, clean outlines, solid color blocks | “Snowflake training video style” as a *visual* reference |
| **Scene palette** | **MHP blue-white**: navy `#01065c`, white `#FFFFFF`, UI gray `#F1F5F9` | Treating every character garment as navy+yellow |
| **Yellow `#FBBF24`** | YellowLine NYC taxi motif, Marcus badge, Sofia collar stripe only | Full-frame “Snowflake blue-yellow” branding |
| **Characters** | Per-person `outfitColors` + `visualLock` in `characters.json`; three female leads must differ (hair, silhouette, garments) | Generic identical corporate avatars |

**Note**: Module 3 is about the **Snowflake product** (logo, worksheet, SQL) — that is story content, not the animation style bible.

---

## Brand palette

| Use | Color | Hex |
|-----|-------|-----|
| MHP primary / Elena & Sofia garments | Navy | `#01065c` |
| MHP backgrounds / blouses | White | `#FFFFFF` |
| MHP UI panels | Light gray | `#F1F5F9` |
| NYC taxi / Sofia accent stripe | Yellow | `#FBBF24` |
| YellowLine NYC client badge (Marcus only) | Yellow | `#FBBF24` |
| Priya BI identity | Green | `#107c10` |
| Bob junior engineer shirt | Blue | `#2563eb` |
| James analyst shirt | Teal | `#0f766e` |
| Marcus client shirt | Slate gray | `#64748b` |
| Priya blazer | Charcoal | `#374151` |
| Elena lapel pin | Gold | `#ca8a04` |

**Scene rule**: Backgrounds, titles, and UI use **MHP blue-white** (`#01065c` / `#FFFFFF` / `#F1F5F9`). Character **garment** colors follow the outfit table below — do not unify all clothing to navy.

---

## Character outfit colors (canonical)

Single source of truth: `scripts/pipeline/configs/characters.json` → `outfitColors` per character.

| Character | Garment | Color name | Hex |
|-----------|---------|------------|-----|
| **Marcus Chen** | Executive blazer | Charcoal | `#334155` |
| | Dress shirt | White | `#FFFFFF` |
| | Dress slacks | Charcoal | `#475569` |
| | Loafers | Dark leather | `#422006` |
| | Name badge (lapel) | YellowLine NYC yellow | `#FBBF24` |
| **Elena Vasquez** | Blazer | MHP navy | `#01065C` |
| | Blouse | White | `#FFFFFF` |
| | Lapel pin | Gold | `#CA8A04` |
| | Marker | Blue | `#2563EB` |
| **Bob Muller** | Button-down shirt | Bright blue | `#2563EB` |
| | Buttons | White | `#FFFFFF` |
| **Sofia Alvarez** | Zip polo body | MHP navy | `#01065C` |
| | Collar/cuff stripe | Yellow | `#FBBF24` |
| | Ponytail tie | Yellow | `#FBBF24` |
| **Priya Sharma** | Blazer | Charcoal gray | `#374151` |
| | Shell top | Power BI green | `#107C10` |
| | Hair barrette | Green (match top) | `#107C10` |
| **James Okonkwo** | Oxford shirt | Teal | `#0F766E` |
| | Buttons | White | `#FFFFFF` |

---

## Story cast (employer — do not confuse with scene palette)

| Character | Employer / role in story | On-screen branding |
|-----------|--------------------------|-------------------|
| **Marcus Chen** | **YellowLine NYC** — yellow-taxi **client** (Operations Manager) | yellow YellowLine badge; dispatch monitors say **YellowLine NYC**, never MHP |
| Elena, Bob, Sofia, Priya, James | **MHP** — consulting team hired by Marcus | MHP navy garments; MHP logo on team-intro shots (scene 6+) only |
| Trainee proxy | **MHP** — you are Bob | — |

**MHP blue-white** in prompts means **training video scene styling**, not Marcus’s employer. Marcus asked MHP for help because YellowLine NYC lacked a single source of truth.

---

## Character design

| Character | Hair & outfit (must differ on screen) | Signature prop | Voice tone |
|-----------|----------------------------------------|----------------|------------|
| Marcus Chen | Short dark hair; **#334155** executive blazer + **#FFFFFF** dress shirt + **#FBBF24** lapel badge | Dispatch / Excel screens (YellowLine NYC client site) | Pragmatic, senior operations leader |
| **Elena Vasquez** | **Loose chestnut hair**; **#01065C blazer + #FFFFFF blouse**; **#CA8A04** pin | Whiteboard marker `#2563EB` | Calm, authoritative |
| Bob Müller | Light-brown hair; **#2563EB** blue shirt | Laptop | Curious, learning |
| **Sofia Alvarez** | **Black ponytail + #FBBF24 tie**; **#01065C polo + #FBBF24** stripe | Tablet / notebook | Mentor, concise |
| **Priya Sharma** | **Half-up black hair + #107C10 barrette**; **#374151 blazer + #107C10** top | KPI / Power BI card | Clear, dashboard-focused |
| James Okonkwo | Short black hair; **#0F766E teal** shirt | Tablet with SQL icons | Analytical |

**Female cast rule**: Elena, Sofia, and Priya must never share the same silhouette. See `configs/characters.json` → `femaleCastDifferentiation`.

**Style**: American animation / flat 2D corporate e-learning — **not photorealistic**.

---

## Layout & typography

- **Resolution**: 1920×1080, 30 fps
- **Safe area**: 10% margin — subtitles never touch edges
- **Titles**: Bold sans-serif (Source Sans Pro family to match site)
- **On-screen text**: Max 8 words per beat; large enough for projector
- **Subtitles**: Burn-in English; optional German track later

---

## Recurring visual motifs

| Motif | When to use |
|-------|-------------|
| Medallion stack (Bronze → Silver → Gold) | Story, Module 1, tool transitions |
| ADLS2 → pipeline → Gold → Power BI | Modules 2–4, 7 |
| Side-by-side schema columns | Module 3 (*same architecture, different philosophy*) |
| dbt lineage graph | Module 4 |
| Calendar / cron / alert icons | Module 5 |
| Three constraint icons (€ / ⚡ / ✓ audit) | Story intro, Module 7 close |
| Calendar flip *"Six months later…"* | Module 7 opener |

---

## Priya dashboard compositing

Use real screenshots from [`powerbi/`](../../powerbi/) composited into animation frames:

| Module | Page to show |
|--------|--------------|
| 1 | Empty wireframe |
| 2 | Overview — trips by hour/day |
| 3 | Map — borough + zones |
| 4 | Revenue + quality scorecard |
| 7 | Full five-page montage |

Capture assets per [media/powerbi/README.md](../media/powerbi/README.md).

---

## Audio

- Light corporate underscore; duck −12 dB under voiceover
- No music under reflection prompts (Module 7 silent write segment)
- Module 7 closing card: music fade on *"Technology is a decision. Architecture is responsibility."*

---

## File naming & delivery

| Item | Rule |
|------|------|
| Files | `media/modules/mod-XX-slug.mp4` |
| Length | 2–4 min (Story video up to 4 min; Module 7 up to 3:45) |
| After export | Re-run `python workshop-2026-v2/scripts/_scaffold_generate.py` for embeds |

---

## Production checklist (per video)

- [ ] Storyboard row approved in animation storyboard (pre-production)
- [ ] Voiceover script timed in [voiceover scripts](animation-production-scripts.md)
- [ ] Priya screenshot updated (if applicable)
- [ ] Subtitles proofread (Marcus / YellowLine NYC names consistent)
- [ ] Tagline cards: Module 3 philosophy line · Module 7 six-month opener + closing line
- [ ] MP4 placed in `media/modules/` · generator re-run · spot-check in preview

---

## Document history

| Date | Change |
|------|--------|
| 2026-05-24 | Initial animation style guide (pre-MP4 production) |
| 2026-05-31 | Document MHP blue-white + American animation canon; female cast differentiation; explicit retire “Snowflake training” as visual style (product logos unchanged) |