vertical-slide-designlisted

# Vertical Slide Design ## When to Use Load this skill when: - A short-video script is locked and needs visual slides to pair with talking-head footage - The slides will be placed in Descript's Chapter Title Split layout (or CapCut equivalent), where they occupy roughly the top half of a 9:16 frame - You want 10-15 slides for a 60-180s video (~6-12s per slide) Do NOT use for: - Landscape 16:9 slides (different aspect, different template) - Slides that need to be edited interactively (use Keynote / Figma) - Long-form YouTube where slides are full-screen (use 1920x1080 instead) ## Composes With - `script-voice` (parent of the script being illustrated) - `cover-design` (uses the same HTML+headless Chrome rendering pipeline) ## Design Language (do not deviate) These are locked across the whole channel for visual identity: | Token | Value | |---|---| | Background | `#000` (pure black) | | Primary text | `#fff` | | Dim text | `#9ca3af` (gray-400) | | Accent | `#2dd4bf` (teal-400) | | Accent soft | `rgba(45,212,191,.16)` | | Font | `-apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif` | | Viewport | **1080 × 1080** square | Why square: Descript's Chapter Title Split puts slides in a region that's roughly square. Square renders without crop in that region, and degrades gracefully if the layout shifts to 4:5 or 1:1. ## Constraints ### 1. One HTML file, all slides in it All slides live in a single `slides_vertical.html` as `<section class="slide" data-key="