render-lab-design-system

---

name: render-lab-design-system description: Use when a recorded-video composition should use the Render Lab design system: production-control-room visuals, browser/render/QC instruments, frame-driven Remotion motion, and semantic components instead of generic cards or decorative UI.

Render Lab Design System

Render Lab is a video design system for technical recorded videos. It makes the pipeline visible: voice, browser assets, render frames, FFmpeg, QC, and final MP4.

When To Use

• The video explains browser video generation, agent workflows, render quality, or pipeline choices.
• The user rejects generic cards, pills, icon tiles, or AI-looking slide layouts.
• The output should combine base video skills with a project-specific visual language.

Load Order

1. Read .agents/design-systems/registry.yaml and confirm active: render-lab.
2. Use the base skills listed in the registry.
3. Load only the Render Lab sub-skill files needed for the current decision:
   • .agents/design-systems/render-lab/subskills/typography.md
   • .agents/design-systems/render-lab/subskills/color.md
   • .agents/design-systems/render-lab/subskills/layout.md
   • .agents/design-systems/render-lab/subskills/motion.md
   • .agents/design-systems/render-lab/subskills/components.md
4. Start global-style-spec.json from .agents/design-systems/render-lab/global-style-spec.template.json, then adapt only what the recording requires.

Core Rules

• Every visual must be an instrument, evidence object, route, comparator, gate, or QC state.
• Do not place decorative containers next to each other.
• Do not use standalone labels like HTML passthrough unless an actual browser asset is passing through a lane.
• Prefer Remotion-native frame-driven components for polished video UI.
• Use Hyperframes for real HTML/browser passthrough atoms, not as a generic card factory.
• Use the global asr-timing-review skill for transcript and timing decisions. Render Lab does not own timing methodology.

Composition principles (validated in production, 2026-06)

Principles, not values — bind to the active tokens (remotion/src/slide/tokens.ts), never hardcode hex/px. Pair these with the design-critic skill (the critic asks "is this good?"; these answer "here's what good means on this field").

• Dark-field legibility. A text/element color must contrast with the field it sits on. On the dark field, use the light ink token — NEVER the light-theme ink (it is near-black and vanishes). Never rely on a component's default color; set it explicitly for the field. Audit every text element for "can I actually read this?".
• Contrast discipline. One structural color carries the scene; ONE emphasis accent per beat marks the single thing that matters (the number, the turn-word), chosen semantically (a positive metric takes the positive accent). Vary the accent across neighboring beats. Monochrome and timid, evenly-spread palettes are the AI tell — and no rainbow.
• Headline fit. Hero type is large; keep headline lines short enough to set at full size on ONE visual line, or rely on the shrink-to-fit. A wrapped or shrunk hero line breaks the reveal and reads cramped — rephrase before you squeeze.
• Capture/card framing. Never full-bleed-stretch a captured UI to the frame's ratio. Frame it on a browser card at its NATIVE aspect with margin, guidance text in its own zone (not overlaid). Pick the card composition from the asset ratio: near-square → caption beside (two-column); ultra-wide band → caption above + a contained field so it isn't lost in black.
• Motion earns its place. Every motion must reveal, route, compare, inspect, warn, confirm, or pace the message — cut effect-for-effect. One high-impact moment beats scattered micro-motion; a still beats a busy move for a settled state.

2.5D is the default; true 3D is rare

Default everything to AE-controllable 2.5D. Heavy real-R3F 3D is now RARE — 0–1 per video. This is a locked, research-backed art-direction decision. The "rendered-room" R3F look (perspective camera + PBR glass/graphite + HDRI studio environment + contact-shadow floor) was rejected on the tokenrouter-v3 render as floaty, uncontrollable — a "weird glass border", "a studio that doesn't feel like a studio". The default look is the opposite of a camera you don't control: flat layers placed with intent.

The 2.5D-controllable technique (the default for every elevated beat):

• Depth from CSS-transform tilt, not a 3D camera — perspective(1200px) rotateY/rotateX ~3–8°.
• A drawn, blurred drop-shadow under the tilted layer (not a contact-shadow band on a floor).
• Parallax between foreground and background layers for separation.
• Eased keyframes, never linear — Easing.bezier(0.16,1,0.3,1), spring for overshoot.
• Deliberate placement, not a simulated room.

When true 3D earns its place — the ONLY cases:

1. The value is genuinely volumetric — the viewer must see a real object from multiple sides and the rotation IS the point.
2. A material must respond to motion — refraction/lensing through glass, a specular sweep across a REAL bevel.
3. A transition travels THROUGH 3D space — a portal a parallax can't fake.
4. A signature hero/logo materializes in real space, once.

Two gates every 3D candidate must pass:

• Fakeability — if CSS tilt + drawn shadow + parallax + easing fakes it, it is NOT a 3D case.
• Controllability — if you can't frame it as a single lit surface, don't ship it.

When 3D IS used, make it controllable: orthographic or tight frame; one key light; NO HDRI environment floor; NO contact-shadow band; frame-driven; baked to MP4 where possible.

Kit consequence:

• KEEP for the rare moment — headline-text-3d, glass + glass-sweep, portal-ring.
• RETIRE-BY-DEFAULT to 2.5D — floating-screen, image-card-3d, spatial-scene, and the ceramic/graphite ambient slabs. Reach for their real-R3F form only when a beat clears both gates above.

Elevated-beat moves — ground depth in real technique

The default treatment for every move below is the 2.5D-controllable technique (see "2.5D is the default; true 3D is rare" above): a flat layer + CSS-transform tilt + a drawn blurred shadow + an eased push-in/parallax. The R3F forms named in parentheses are the RARE exception — reach for them only when the beat clears the fakeability + controllability gates.

When a beat earns elevation (a 3D surface, a camera move, kinetic type, a section device), do not invent the move — pull a concrete one from the curated references and name it in the brief. This is the multisearch-first rule applied to design, not just to building a new component. Sources, in order: yt_tech_creator_craft and yt_ae_to_code_recreation (yt-rag — search the move before you commit it), then shared/research/2026-creator-effects/ (esp. 01-creator-trends-taxonomy.md), shared/research/ae-variety-research.md, and popular-template-effects-brush-plan-2026-05-31.md. The brief's paragraph for each elevated scene cites the move + its source.

A starting vocabulary (illustrative taste, NOT a fixed template — the content picks the move, and you may use a move that isn't listed):

• Cold-open / hook → open ON the artifact (real screen, failing state, or one-sentence thesis) inside the first 1–2 s; one slow push-in then a held beat. No montage, no brand-stinger preamble. (title-3d / screen-rec + cinematic-zoom-in, glass-caption)
• Hero product-UI reveal → DEFAULT: a real captured screen (image/webm) on a flat layer, tilted with CSS-transform (perspective rotateY/rotateX ~3–8°), a drawn blurred shadow beneath, pushed in on an eased Z-feel + parallax, settling face-on. UI-as-texture, never rebuilt as DOM meshes. RARE exception (clears both gates) — texture it onto a real lit slab flown in on a camera dolly/orbit + motion blur. (2.5D-tilt captured-card default; floating-screen / three-hero-slab, expand-to-focus, glass + glass-sweep only for the earned 3D case)
• Big number / stat → frame-driven count-up where the motion encodes magnitude; hold on the settled number. (big-stat + StatCountUp / DeltaBars)
• Data / architecture / before-after → progressive disclosure, one element at a time, matched object positions so the diff reads; the reveal lands ON the spoken word. (pipeline / diagram / compare-2up / line-chart + RoutingFlow / CompareColumns / DeltaBars, match-cut)
• Section handoff → the cut is a segue that conveys a relationship — a match-cut on a shared shape/velocity, often carried by a sound swell, not a busy graphic. (section-divider / portal-divider + match-cut / push-through / luma-wipe, portal-ring)
• Kinetic headline → DEFAULT: flat type split into words/chars, per-index stagger with a strong ease-out, an optional subtle CSS-transform tilt; reveal the one word that turns the argument. RARE exception — headline-text-3d only when the type must materialize volumetrically in real space (clears both gates; keep strings short — it overflows). (kinetic-type default; headline-text-3d for the earned 3D case)
• Screen-rec walkthrough → frame-hold the key state, punch-in/dim to the exact control (not generic zoom), cursor/click emphasis. (screen-rec / scroll-panel / expand-to-focus, floating-screen)
• CTA / close → resolve, don't pile on: the logo/mark settles with one position+opacity move, optionally a single glass sweep / bloom. (title-3d / LogoConstellation + glass-sweep, portal-ring)

Quality bar — judged, not counted

The bar is qualitative. Both the visual planner (node 04 self-check) and QC (node 11) hold it; pair it with the design-critic stance ("is this actually good?"). It is judgment, never a quota — every number below is a feel the content can override with a one-line reason.

• Earned depth. Every 3D/camera/kinetic moment justifies itself — it reveals, compares, inspects, or hands off something a flat frame can't. If a depth beat would only decorate, make it flat. Selective depth beats 3D-everything.
• Renderable honesty — the failure mode that bit the last run. Only plan a beat the renderer can actually honor: match the capability's real slots, content-kinds, and caps (the catalog digest carries them). Bind every elevated beat to a real asset of the right kind — never point a surface/hero-slab at a still when it textures video only, never at a gap asset; if the right asset doesn't exist, downgrade the beat to a flat frame rather than shipping an empty slab or a dumped gap-notice. Declare a renderable fallback for every elevated beat. Prefer the real captured asset over a synthetic stand-in.
• LOCKED — voice-guided timeline; pacing is a SCRIPT decision. On the voiced path a scene's on-screen duration = its spoken cue span (breath-to-breath, chained from frame 0); cue-frame == master-frame is structural. visualBudgetSeconds is INERT on the voiced path (the resolver ignores it), so authoring a budget meant to make the visual outlast its narration is the BANNED budget-stretch: it desyncs the single continuous audio track and is gate-rejected (pipeline/qc-voice-sync.mjs aborts the render). To hold a beat longer, LENGTHEN THAT BEAT'S NARRATION in the script — never decouple a visual budget from the VO. (The one documented exception — a beat outlasting its VO while the audio track is ALSO reconciled with matching per-cue silence gaps — is NOT implemented on the continuous-WAV path.)
• Content-fit at plan time. Keep every string inside the layout's registry caps and the 1776×936 safe area. Honor known fit dials (headline-text-3d overflows long strings — keep them short; quote-on-glass attribution clips at the bottom). A hero line that wraps or shrinks-to-fit has already failed — rephrase.
• Palette holds; no cheap-React. One structural color per scene + one semantic accent; vary the accent across neighbors. No off-token color, no default component styling, no AI-even palette. (v2 held this — keep it a guardrail.)
• Cadence as feel. Roughly one elevated moment every ~15–20 s and one "shiny" beat every ~5–10 s — but spread across the spine, not back-loaded into a cluster with a long flat stretch before it. Flat data frames (RoutingFlow / DeltaBars / SpecGrid / CompareColumns) carry rhythm between elevations.
• Premium-vs-cheap tells. Easing is the #1 tell — slow-in/slow-out, Easing.bezier/spring overshoot, never linear. The visual change lands ON the spoken word (≥0.5 s lag reads amateur). One thing at a time with real inspect-holds. Real artifact + real PBR (studio env + contact shadows, correct sRGB), not flat DOM or washed-out color. No glitch/flash/whoosh catalog; restraint reads as polish.

Output Expectations

• composition-brief.md names render-lab as the active design system.
• global-style-spec.json contains designSystem.id: render-lab.
• Shot briefs cite the specific Render Lab template used.