Refine visual identity guidance across pipelines

2026-04-03 10:13:39 -07:00
parent 2cd36fa8e0
commit fd4c58f30b
24 changed files with 154 additions and 92 deletions
@@ -75,8 +75,8 @@ Create a composition JSON snippet for each overlay. These will be rendered by th
    "text": "Agentic AI: software that acts autonomously toward goals",
    "in_seconds": 0,
    "out_seconds": 4,
-    "backgroundColor": "#0F172A",
-    "accentColor": "#22D3EE",
+    "backgroundColor": "<theme_background>",
+    "accentColor": "<theme_accent>",
    "icon": "💡"
  },
  "overlay_timestamp": 22.0,
@@ -104,8 +104,8 @@ Create a composition JSON snippet for each overlay. These will be rendered by th

 The Explainer composition now includes an `AnimatedBackground` component that renders an animated gradient mesh, floating orbs, and a subtle grid pattern. This provides a far more professional look than flat solid colors.

- Scene backgrounds should use `backgroundColor: "#0F172A"` which auto-converts to transparent, letting the animated gradient show through.
- Do NOT use flat solid colors for backgrounds -- always let the AnimatedBackground render behind overlays.
+- Scene backgrounds should use the active theme background so the AnimatedBackground and overlay cards feel like one system.
+- Do NOT use arbitrary flat solid colors for backgrounds -- let the AnimatedBackground and theme drive the treatment.
 - When compositing green screen footage, render the AnimatedBackground as the replacement background (see compose-director Step 3c).

 **Component constraints:**
@@ -127,7 +127,7 @@ Key rules:
 - `kpi_grid` values MUST be purely numeric (e.g., `4.8`, `73`, `2400`). Formatted strings like `"15+"`, `"$4.8B"`, or `"2.4M"` will cause rendering errors. Use `stat_card` for string-formatted numbers instead.
 - Always check the target frame width before choosing a component. Portrait (720px) excludes `comparison`.

-**Dark theme for all overlays** -- use dark backgrounds (`#0F172A`, `#1E293B`) with light text. This ensures overlays are legible when composited on top of talking-head footage. The `#0F172A` backgroundColor is treated as transparent by the AnimatedBackground system, so overlays will show the animated gradient behind them.
+**Overlay theming rule** -- derive overlay backgrounds, accents, and text colors from the chosen playbook or custom identity. Use dark cards only when the footage/topic calls for it; a bright editorial talk can legitimately use light cards if contrast remains strong.

 **For simple text overlays** (if Remotion is overkill):

@@ -161,7 +161,7 @@ remotion_caption_burn.execute({
    "corrections": {"cloud": "Claude", "co-pilot": "Copilot"},
    "words_per_page": 4,
    "font_size": 52,
-    "highlight_color": "#22D3EE",
+    "highlight_color": "<theme_accent>",
 })
 ```

@@ -195,7 +195,7 @@ remotion_caption_burn.execute({
    "corrections": {"cloud": "Claude"},
    "words_per_page": 4,
    "font_size": 52,
-    "highlight_color": "#22D3EE",
+    "highlight_color": "<theme_accent>",
    "overlays": [
        {
            "id": "term-agentic-ai",
@@ -205,8 +205,8 @@ remotion_caption_burn.execute({
            "in_seconds": 22.0,
            "out_seconds": 26.0,
            "position": "lower_third",
-            "backgroundColor": "#0F172A",
-            "accentColor": "#22D3EE"
+            "backgroundColor": "<theme_background>",
+            "accentColor": "<theme_accent>"
        },
        {
            "id": "stat-market-size",
@@ -216,7 +216,7 @@ remotion_caption_burn.execute({
            "in_seconds": 35.0,
            "out_seconds": 39.0,
            "position": "upper_third",
-            "accentColor": "#A78BFA"
+            "accentColor": "<theme_secondary_accent>"
        },
        {
            "id": "chart-growth",
@@ -231,7 +231,7 @@ remotion_caption_burn.execute({
            "in_seconds": 40.0,
            "out_seconds": 45.0,
            "position": "lower_third",
-            "chartColors": ["#22D3EE", "#A78BFA", "#F472B6", "#34D399"]
+            "chartColors": ["<theme_accent>", "<theme_secondary_accent>", "<theme_tertiary_accent>", "<theme_supporting_accent>"]
        }
    ]
 })
@@ -306,7 +306,7 @@ If the footage has a green/blue screen (detected in scene-director Step 0), foll
       "corrections": <corrections_dict>,
       "words_per_page": 4,
       "font_size": 52,
-       "highlight_color": "#22D3EE",
+        "highlight_color": "<theme_accent>",
       "overlays": <overlay_list_from_scene_plan>
   })
   ```
@@ -25,7 +25,7 @@ The EP solves all of these by maintaining cumulative state and applying judgment
 | Pipeline | `pipeline_defs/talking-head.yaml` | Stage definitions, review focus, success criteria |
 | Skills | All 7 director skills + `meta/reviewer` | Stage execution knowledge |
 | Schemas | All artifact schemas | Validation |
-| Playbook | `clean-professional` (or user-selected) | Quality constraints |
+| Playbook | user-selected, footage-derived, or safe fallback | Quality constraints |
 | Tools | Full tool registry | Available capabilities |

 ## Key Difference from Explainer EP
@@ -49,7 +49,7 @@ The EP maintains a running state object that flows through the entire pipeline:
 ```
 EP_STATE:
  pipeline: talking-head
-  playbook: <selected playbook name, default: clean-professional>
+  playbook: <selected playbook name, custom identity, or safe fallback>
  raw_footage_path: <path to source footage>
  raw_footage_duration_seconds: <from ffprobe>
  raw_footage_resolution: <from ffprobe>
@@ -94,7 +94,7 @@ EP_STATE:
 ### Phase 0: Initialize

 1. Load the pipeline manifest (`talking-head.yaml`)
-2. Load the playbook (from user selection or default `clean-professional`)
+2. Load the playbook from user selection, brand system, or footage-derived visual identity. Use `clean-professional` only when no stronger identity is warranted.
 3. Set budget from configuration or user input (default: $0.50 — talking-head is mostly processing)
 4. Probe the raw footage with ffprobe: duration, resolution, fps, audio channels, codec
 5. Store footage metadata in EP_STATE
@@ -373,7 +373,7 @@ The EP doesn't replace any director skill — it wraps them. Each director skill

 ```
 [EP] Starting pipeline: talking-head v2.0
-[EP] Default budget: $0.50 | Playbook: clean-professional
+[EP] Default budget: $0.50 | Playbook: footage-derived identity (or safe fallback)

 [EP] Probing raw footage: interview_raw.mp4
 [EP] → Duration: 4m22s | Resolution: 1920x1080 | FPS: 30 | Audio: stereo AAC
@@ -42,7 +42,7 @@ Create a brief artifact documenting:
 - **Hook**: What makes this worth watching?
 - **Key points**: Main topics covered in the footage
 - **Tone**: Match the speaker's actual tone (casual, professional, educational)
- **Style**: Usually `clean-professional` for talking head
+- **Style**: Derive the overlay/look direction from the footage, speaker persona, audience, and platform. `clean-professional` is a safe fallback, not the default answer to every talking-head brief.
 - **Target platform**: Where this will be published
 - **Target duration**: May be shorter than raw footage (trimmed)

@@ -192,8 +192,8 @@ For each approved overlay from Step 3, create an overlay scene entry:
  "content": {
    "text": "Agentic AI",
    "subtext": "Software that acts autonomously toward goals",
-    "backgroundColor": "#0F172A",
-    "accentColor": "#22D3EE"
+    "backgroundColor": "<theme_background>",
+    "accentColor": "<theme_accent>"
  },
  "position": "lower_third"
 }