Skip to content

Brand & Theming

Brand control in the Director system is theme-token based: every document carries a theme (accent, background, fonts, surfaces) and optional logo overlay, applied uniformly across all scenes. You set brand inputs once in the brief, and they flow into the assembled ResolvedIR.

Where brand lives

ResolvedIR.theme      { accent, bg, surface, surfaceAlt, text, fontFamily, … }
ResolvedIR.logo?      { src, placement, size, padding, opacity }
ResolvedIR.voice?     narration voice for the whole video
ResolvedScene.theme?  per-scene overrides (merged over document theme)

Blueprints reference the brand accent via a {{brandColor}} slot; resolveBlueprint substitutes it so a single color recolors the whole video.

Setting brand in the brief

In the DirectorPanel brand section you provide:

  • Brand name
  • Accent color (color picker) → becomes theme.accent
  • Logo image (upload) → stored in uploads/, attached as a document-level overlay

assembleIR() applies these to the document so every scene inherits the brand consistently.

Editing theme in the editor

The Document inspector (web/src/components/inspector/DocInspector.tsx) exposes theme tokens directly:

  • Accent / background / fonts — setThemeToken on the IR store
  • Logo overlay — placement, size, opacity
  • Document background — solid / gradient / animated / image / video
  • Voice — the narration voice

Per-scene theme overrides are available on the Scene inspector; they merge over the document theme at render time (VideoDocument interpolates document + scene themes).

Fonts & emoji in renders

The render container ships fonts including Noto Color Emoji, so emoji render correctly in exported MP4s (an earlier Segoe-only setup produced emoji tofu).

Legacy brand-document extraction (Express)

Not wired into the Director engine

The retired v1 had a brand-kit pipeline that parsed an uploaded brand PDF/DOCX into a BrandGuidelines JSON (colors, typography, tone, imagery rules) via server/src/pipeline/brand.ts and /api/brand/*. Those Express endpoints still exist and are proxied through Next.js, and the email and SVG generators still read brand guidelines from them. However, the v2 Director/video engine does not consume BrandGuidelines — video brand comes from the brief's accent/logo and the document theme described above. Unifying the two brand sources is future work.

Summary

Surface Brand source
Video (Director) Brief accent + logo → document theme / logo (token-based)
Email (legacy) BrandGuidelines JSON via Express /api/brand
SVG (legacy) BrandGuidelines colors + heading font via Express