Brand & DESIGN.md

A video should look like it came from you, not from a template pack. Brand reaches the render two ways: a DESIGN.md in your repo, which the CLI reads automatically, or an explicit brandKit in the config. Both resolve to the same tokens.

DESIGN.md, read from your repo

render and validate walk up from the config file's directory to the repo root looking for a DESIGN.md. Its front-matter maps straight onto the brand kit:

---
colors:
  primary: "#22c55e"      # → brandKit.accent
  secondary: "#c9922e"    # → brandKit.secondary
  background: "#0d1129"   # → brandKit.bg
typography:
  - fontFamily: "Inter"   # → style.font
---

Config-explicit values always win, so anything you set in the JSON overrides the file. vanillasky brand prints what would be applied without rendering, and --no-design-md skips ingestion entirely.

One tradeoff worth knowing: mapping background to bg collapses gradient-led templates to a flat backdrop. If you want scenes to keep their generated brand gradients, leave background out.

The resolved tokens

Whatever the source, everything resolves through one path — so a built-in template, an installed primitive and an ejected custom scene all draw from the same values instead of each inventing their own:

An ejected custom_* scene receives these as a tokens prop. Custom source can't import anything, so this is the only way it reaches the brand — a body that hardcodes white and a drop-shadow looks generic next to a frame that is on-brand.

Style presets

style.preset is the frame-level look — background family, headline treatment and title placement moved together by one token. It is the main lever against every video looking the same, so choose one deliberately per video rather than leaving it unset:

• bold (default) — drifting two-colour brand mesh, heavy tight headlines at the top. Launches and product moments; the loudest of the three.
• editorial — calm vertical wash, lighter and wider-tracked headlines, centred. Reviews, thoughtful updates, premium and B2B brands.
• stark — a single hard spotlight on near-black, uppercase and tightly tracked. Dev tools, technical claims, maximum weight on very few words.

Set it once on style, never per scene. The validator rejects an unknown name rather than letting it silently fall back.

Setting it by hand

"style": {
  "font": "Inter",
  "preset": "stark",
  "brandKit": {
    "accent": "#22c55e",
    "secondary": "#c9922e",
    "bg": "#0d1129",
    "logoDataUrl": "data:image/png;base64,…"
  }
}

logoDataUrl must be a data URL for the closer to render it — see the VideoConfig format. You can also edit all of this visually in the local Studio.