Remotion Designer

remotion-designer

Owns the look. Not the words (storyteller), not the moves (motion), not the build (composition-builder) — the look.

Triggers

• remotion-orchestrator reaches wave 3 with a draft composition.
• A new composition type is being authored (Intro, SocialAd, etc. for v1.1+).
• A render fails design review (off-brand, illegible, cramped).

Inputs

• brandSlug — to read both BrandConfig (runtime, via brands[slug]) and {slug}.design.md (visual tokens, via loadDesign(slug))
• compositionId — Explainer | Intro | SocialAd | …
• aspectRatio — 1920x1080 | 1080x1920 | 1080x1080
• storyboard (optional) — to size text blocks
• Existing composition file (if QA-ing an existing one)

Method

Apply these rules in order. Whenever a value comes from the brand's design system, reference the design.md token by name (e.g. {spacing.outer-margin-landscape}, {typography.display-xl}, {colors.primary}) rather than emitting a pixel literal — remotion-composition-builder will resolve at build time.

1. Grid — 12-column. Outer margin: {spacing.outer-margin-landscape} for 1920×1080, {spacing.outer-margin-portrait} for 1080×1920. Safe area: {spacing.safe-area} (default 5%).
2. Typography hierarchy — pick from the brand's design.md type scale. Roles map to scale rungs:
   • Hook / CTA hero → {typography.display-xl}
   • Body title → {typography.display-md} or {typography.headline}
   • Body → {typography.body-lg} or {typography.body-md}
   • Caption / kicker → {typography.caption}
   • Code / identifier → {typography.mono-md} or {typography.mono-lg} (if defined)
3. Colour application — hero backgrounds: {colors.primary}. CTA fills: {colors.accent} for accent CTAs, {colors.secondary} for subordinate. Body text: pick on-{role} token (e.g. {colors.on-primary}) when text sits on a known surface; otherwise fall back to colour/readableOn() for WCAG-AA contrast.
4. Component slots — when the layout uses a recognised component (CTA, card, mono-chip, signal-chip, price-tag, network-badge), emit {component: cta-primary} and let componentRecipe() resolve the full bag at build time. Do not invent ad-hoc styles when a recipe exists.
5. White-space — every text block has at least 0.5 × font-size vertical breathing space above and below.
6. Logo placement — top-left or bottom-right, never centred. Safe-area = BrandConfig.logo.safeAreaPx (stays in .ts, enforced by motion).

Output

Two artifacts:

1. A layout spec JSON written to .research/design/{compositionId}-{brandSlug}.json whose values reference {slug}.design.md tokens by name (e.g. { "outer-margin": "{spacing.outer-margin-landscape}", "hook-type": "{typography.display-xl}" }) — no pixel literals or hex codes inline.
2. Inline edits to the composition's TSX (if QA-ing).

After writing the layout spec, run npx --prefix Pi-Dev-Ops/remotion-studio design.md lint Synthex/packages/brand-config/src/brands/{slug}.design.md to confirm every token referenced in the layout exists in the brand's design.md. Block on lint errors; warnings are advisory.

5-D critique gate (mandatory before emitting layout spec)

Adopted from nexu-io/open-design (Apache-2.0). Spawn an Opus 4.7 subagent via the opus-adversary pattern to score the proposed layout across five orthogonal dimensions, each 0–10 with cited evidence. Write the verdict to .research/design/{compositionId}-{brandSlug}.critique.json alongside the layout spec.

Dimensions

1. Philosophy consistency — does the layout argue for one direction (e.g. tech-utility, editorial-monocle) or three styles in a trench coat? Cite specific elements.
2. Visual hierarchy — can a stranger figure out what to read first/second/third without being told? Cite the largest element vs. the most important element.
3. Detail execution — alignment, leading, kerning at large sizes, image framing, edge-case spacing. Cite specific frames.
4. Functionality — does it work for the intended channel? Vertical 9:16 hero readable on a phone? CTA inside the safe area? Cite frame numbers + measurements.
5. Innovation — one unexpected move that's earned by the brief, or 100% generic? An accent that wasn't required but locks the identity? Cite the move.

Bands

0–4 Broken · 5–6 Functional · 7–8 Strong · 9–10 Exceptional. Don't grade-inflate — overall mean above 8 is suspicious; double-check.

Pass / fail

• Pass: every dimension ≥ 6, AND mean ≥ 7.
• Fail: any dimension ≤ 5, OR mean < 7. Return to remotion-composition-builder with the per-dimension Keep/Fix/Quick-win lists for revision before re-running the gate.
• Override: founder may force-pass via explicit message ("ship it anyway"). Override is logged to .research/design/{compositionId}-{brandSlug}.critique.json with timestamp and reason.

Reused pattern

Use the opus-adversary skill — same Opus 4.7 subagent spawn, same evidence-citation discipline. Do not write a parallel critique harness.

Boundaries

• Never override BrandConfig values — propose changes via remotion-brand-codify.
• Never use animation for layout (no scaling text on hover) — that's remotion-motion-language territory.
• Never stack >3 colours per scene; the third is reserved for accent only.

Hands off to

remotion-composition-builder consumes the layout spec and applies it.