Capture a brand
What does the person have? A live website, a brand kit or guide, only a code repo, or
only footage? That decides the route. Every route ends in the same file,
refs/brand.md, that the titles, captions and cards are built from, and a look the
person has seen before anything is built on it.
Routes
| Route | Pick it when | Cost and time | What you get | Load |
|---|---|---|---|---|
| A. Read the live site's computed styles | The brand has a website (a product page, a project homepage, a community page) | Free, a few minutes in the browser | The fonts as the site loads them, every colour with a count, the buttons with their exact words, the icons | references/computed-styles.md |
| B. The brand kit or guide | The person has one (a PDF guide, a Canva brand kit, a Figma file) | Free | The intended palette and fonts, do and don't rules | workflow-sales-video-from-canva-deck for a Canva kit |
| C. The repo's own colours or social card | A code project with no site | Free | A palette from the repo's language colours, logo or social card; a mono plus a sans | |
| D. A starter look from the footage | Nothing above exists | Free | Two colours pulled from the set or wardrobe and one heavy display font, proposed, never assumed | guide-add-titles-and-motion-graphics |
Route A beats a screenshot: colours read off a screenshot drift with compression and anti-aliasing, and fonts can't be read off pixels at all.
Process
- Capture. For route A, open the site in your browser and run the snippet in
references/computed-styles.mdin the page. Take one screenshot of the hero for reference. - Write
refs/brand.md:- Heading and body font families, weights, case and letter-spacing, and where each loads from (a Google Fonts URL in the page head is common).
- Text, background and accent colours as hex.
- The CTA button: shape, fill, border, and its exact words.
- The logo: download it into
refs/brand/. The 180–192 px apple-touch icon PNG is usually the cleanest mark; theog:imageis the social card. - The site's one signature element (a terminal window, a code card, a chip style, glass pills), which the cards and the end card can echo.
- The route you took, and anything you had to substitute.
- Gate. Show the person a still of one title or card in the brand (built with
hn4a-compositor-motion-graphics) before the rest of the layout is built on it.
Choosing
- The accent colour is often rare in the count. The top of the colour count is text and background; the accent sits on links, plus signs and one button. Pick the colour the site uses for emphasis, not the most frequent one. Colours sampled from a logo's gradient make good accent text.
- A licensed font can't be embedded (an Adobe Fonts kit, a foundry licence). Use the
closest Google Font, preferably one the site already loads, and say so in
refs/brand.md. - Every text layer names its font family: the compositor aborts on a fallback
(
hn4a-compositor-motion-graphics). - Inline the logo as a
data:URI or use an image layer; an image path inside a text layer renders blank. - The CTA is the site's own. Recreate its button (same shape, colours and words) for the end card rather than inventing a new one.
- No site and no kit for a code project (route C): say which colours you used and why, before building.
Avoid
- Eyeballing colours from a screenshot when the site is live.
- Putting the brand's logo on a piece that isn't theirs, such as a news short about them. Use their logo only on work made for or with the brand.
- Logos of partner products beyond what the brand itself shows (its integrations list, its own launch video).
Related
guide-add-titles-and-motion-graphics: what to build with the brand once it's captured.hn4a-compositor-motion-graphics: loading the fonts and the spec.workflow-sales-video-from-canva-deck: a Canva brand kit as the source.
