Brand Setup

Brand Setup

Run this once, before your first video. This repo ships with a house brand — a calm, premium indigo look. It's a real, working brand, not a placeholder, and you're welcome to keep it. But if you never touch it, every video you make here looks like the channel it came from. This skill fixes that in one pass.

What this skill owns

Three files that must stay in sync, and this skill is the only thing that should write all three:

They drift silently. brand.md says indigo, brand.ts says teal, and nothing errors — the docs just quietly stop describing the videos. That's why one skill writes all three in one pass.

Every shot imports from brand.ts / fonts.ts, so changing a value here re-brands every video in the repo, retroactively. That's the whole point of a contract.

The flow

Stage 1 — Interview (ONE message, not twenty questions)

Ask it all at once, and say up front that "keep the default" is a valid answer to any of it — most people care about two or three of these and have no opinion on the rest.

1. Channel identity — the wordmark text, and what the channel is about in a sentence. The wordmark renders in three parts with the middle part in the accent color (['Learn','With','Hasan'] → the "With" is indigo). Two-part marks use an empty third (['Acme','Labs','']). Also: the sign-off line for the end card.
2. The feeling — calm/premium, loud/energetic, playful, editorial, technical? This drives motion and shape more than color does.
3. Palette — do they have brand colors already (paste hex), or should you propose from the feeling? Light base or dark base? The accent is the single most important choice: it's the key words, the highlights, the CTAs, the wordmark's middle.
4. Type — existing brand fonts, or propose to fit the feeling? Must be Google Fonts (see the hard gate in Stage 3).
5. Delivery specs — what does your camera actually shoot? Resolution and frame rate. This is not taste; it's the one value that must match reality (see the trap below).
6. SFX taste — subtle accents under the voice, or louder/punchier?

Stage 2 — Propose before you write

Show the full proposal in the chat first — palette as a table (role · hex · what it's for), the font names, the motion feel, the delivery specs. Get a yes.

Reading hex codes in a table is cheap. Rewriting three files and re-rendering is not. Do not skip to writing because the answers "seem clear."

Stage 3 — Hard gate: the fonts must actually exist

Fonts are the #1 way this breaks the build. fonts.ts imports from @remotion/google-fonts, so a family that isn't in that package fails to resolve. A local/purchased/system font will not work — if they name one, tell them plainly and pick the closest Google family.

Verify before writing. Both checks, every font:

cd remotion

# 1. Does the family exist? (PascalCase, no spaces: "Space Grotesk" -> SpaceGrotesk)
ls node_modules/@remotion/google-fonts/dist/esm/ | grep -i "^Poppins\."

# 2. Does it HAVE the weights you're about to request?
grep -oE '"[0-9]{3}":' node_modules/@remotion/google-fonts/dist/esm/Poppins.mjs | sort -u

~1,800 families are available, so there is almost always a good match.

The weight trap is real, not theoretical. Space Grotesk stops at 700 — no 800/900. Oswald stops at 700. Requesting a weight the family doesn't ship gives you a silent fallback or a broken render, and you won't notice until a headline looks wrong. Check, then request only what exists.

Stage 4 — Contrast gate

Text has to be readable, and a beautiful palette that fails here produces unreadable videos. Compute it, don't eyeball it (chroma-js is already a dependency):

cd remotion && node -e "
const chroma = require('chroma-js');
const C = { ink:'#1a1a2e', muted:'#6b6b7b', paper:'#fffef7', accent:'#6366F1' };
const p = [['ink','paper'],['muted','paper'],['accent','paper'],['paper','accent']];
for (const [a,b] of p) console.log(a.padEnd(7),'on',b.padEnd(7), chroma.contrast(C[a],C[b]).toFixed(2)+':1');
"

Judge each pair by how it's actually used, not one blanket number:

For reference, the house default measures 16.87 / 5.17 / 4.42 / 4.42. Note the accent sits at 4.42 — comfortable for big words, tight for small ones. That's the normal shape of this tradeoff: a saturated accent that pops on a light base rarely also clears 7:1. Fine. Just don't put small text on it.

Below 3:1 on any pair, do not ship it — darken the shade and re-check. Between 3:1 and the gate, say so out loud and let them choose. Never silently accept a palette that can't be read.