DESIGN INDEX

Read a reference file when you decide to use that dimension. Each file is a self-contained HTML fragment that follows the talking-head-recut card-HTML contract (scoped <style>, no <script>, no external URLs, animations only via data-anim-*).

Layouts — how video and card share the canvas

A layout is a two-part recipe: pick a card.zone value to put in storyboard.json AND author a GSAP tween for #video-wrap to its target rect in the composition’s <script>. Open the layout file’s header for the recommended zone + the GSAP statement to paste. (Earlier docs referenced a card.layout field — that field does NOT exist in the real schema; the strict v3 schema only has card.zone.)

Styles — the card’s visual language

Choose by content tone, not by content type — academic works for finance too if the tone is reflective; terminal works for non-tech if the tone is “engineering rigor”.

Video Frames — decoration around the video element

A frame is a decorative div that sits next to the #video-wrap inside the composition’s #stage. It is one-time HTML (not animated), but you can fade it in/out across cards. See each frame file for the placement snippet and the inline <style> it needs.

Decision guide (loose, not prescriptive)

These are starting points only. Look at the transcript, pick the tone, then pick the visual.

Portrait sizing — bigger type for mobile

Every references/styles/*.html is sized for a 1920×1080 landscape preview. When the final composition is portrait (1080×1920) — the default for social / mobile — scale every visual size up so it reads on a phone held close.

portraitPx ≈ round(landscapePx × 1.3). Hero headlines can go ×1.4; small meta stays at ×1.2. Padding shrinks in portrait since the card is narrower.

For a card that must work in both, use a container query on the card root: container-type: inline-size + font-size: clamp(64px, 8.5cqi, 132px).

Source aspect ratio independence

Output canvas is independent of source video aspect. Three supported output ratios (selected by the user in Step 7.0 of SKILL.md):

The layout reference files in layouts/ document landscape and portrait bounds only. For 4:5 derive bounds by proportional vertical scaling from portrait: 4:5 y/h = round(portrait y/h × 0.703), keep x/w identical. The composer doesn’t care about the named layout value; it just uses composition.width × height.

• Landscape video on landscape canvas → videoBounds matches video aspect, no letterbox
• Portrait video on landscape canvas → videoBounds is a narrower box (e.g. pip becomes 248×440); empty side filled by card or background
• Landscape video on portrait canvas → videoBounds becomes a wide-but-short band; stack and overlay work best
• Portrait video on portrait canvas → most natural; any layout

The layout reference files show landscape values; for portrait you usually flip the long axis: split becomes top/bottom, pip video bubble shrinks ~20%, overlay card slot widens to full width.

Constraints you must obey when copying from these references

1. No <script> — animations only via data-anim-* attributes
2. No external URLs — no Google Fonts CDN, no remote images; the skill provides Caveat / LXGW WenKai TC / Inter / Virgil locally
3. All <style> rules must be prefixed with .card[data-card-id="..."] — the hyperframes sanitizer auto-scopes them, but write them already-scoped to stay readable
4. No on*= inline handlers
5. CSS variables for colors when you want a card to switch theme cleanly; inline hex when you want this specific style’s signature look

If a reference uses a font you don’t have, fall back:

• Playfair Display / Noto Serif SC → ui-serif, "Songti SC", "Times New Roman", serif
• Noto Sans SC → ui-sans-serif, system-ui, sans-serif
• JetBrains Mono → ui-monospace, "SF Mono", Menlo, monospace
• Kalam → 'Caveat', cursive