timscheuerai/launch-video-kit/launch-brand

Launch brand

Every launch film reads its look from brand/brand.json. This skill makes that file from the reader's own website, checks it, and hands it to launch-film. Run it once per brand, again when the site's look changes.

1. Extract

npm install                                   # once: puppeteer and its Chrome
node tools/brand-from-url.mjs https://your-site.com --out brand

It opens the page at 1920x1080, dismisses cookie banners, scrolls once so lazy content loads, and writes:

Flags: --no-fonts skips font files, --max-images 0 skips images. A local page works too (node tools/brand-from-url.mjs ./site/index.html). After editing brand.json by hand, re-render the sheet with node tools/brand-from-url.mjs --preview --out brand.

2. Review (never skip)

Read preview.png and screens/hero.png side by side. The roles are heuristics; the sheet shows in 10 seconds whether they picked right. Check, in this order:

1. Logo on ground and on dark. Both must read. A logo that disappears on dark needs a light

version: ask the reader for their file, or edit the colours inside logo-on-dark.svg.

1. Accent. It should be the colour people associate with the brand, usually the main button.

evidence.json lists accent_candidates with their votes. Swap in the right hex when it chose a hero illustration colour or a status colour.

1. Ground and ink. Statement scenes sit on ground with ink type. They must match the site's

feel (warm off-white, pure white, a tinted paper).

1. Dark. Hero cards use dark. It should look like the brand's own dark section, not a random

near-black. If the site has none, the tool darkens the accent; check that it looks intended.

1. Fonts. The display font must render in the sheet's hero words. evidence.json under fonts

shows which files were found.

1. Name and tagline. The tagline sits under the name in the lockup: 2 to 8 words, the site's own words.

Fix wrong values directly in brand.json, re-render the preview, show it to the reader, and only then set "reviewed": true. Record anything you changed by hand in one line in your reply.

What each role does in the film

Fallbacks

• No logo found. The tool falls back to the site icon and says so. Ask the reader for an SVG

(best) or a transparent PNG at 1000 px wide or more; put it in brand/ and point logo.file at it.

• Dark-mode site. mode is dark. The page's background becomes dark, and ground and ink

are derived for light statement scenes. If the brand wants dark statement scenes too, swap ground and dark (and ink and dark_ink) by hand.

• Monochrome brand. No saturated colour won a vote, so accent is the main button colour (often

black) and highlight is a light grey. Ask the reader whether they have a signature colour; if not, keep it monochrome and let type and motion carry the film.

• Web font not downloadable. Some foundries block direct downloads. Install the font locally

(the film falls back to installed fonts by family name) or pick the closest open font from Google Fonts and put its files in brand/fonts/.

• Font licensing. A web licence does not always cover video. Before the film ships, confirm the

display and body fonts are licensed for video or motion use, or use an open (OFL) font.

• The reader has a brand guide. Their guide wins. Enter its values into brand.json by hand

(keep the same keys), put the logo files in brand/, re-render the preview and mark it reviewed.

• The site blocks headless browsers. Save the page from a normal browser (File, Save Page As,

complete) and run the tool on the saved HTML file.

Hand-off

launch-film reads brand/brand.json at build time. A film built on "reviewed": false is a draft; say so when you show it.