hiapi-brand-kit

# HiAPI Brand Kit Idea → strategy → **logo you can edit (SVG)** → colours, type, voice → **mockups with your exact logo** → brand book. The logo is drawn as vector code by the agent (crisp, editable, no AI-text glitches); the mockups are generated by GPT Image 2.5 through HiAPI using the rendered logo as a reference image, so the mark stays exactly the same everywhere. Reference: `examples/ember-oat/` (a wood-fired bakery café) — brief, logo SVGs, mockup plan, mockups, brand book. `HIAPI_API_KEY` comes from the environment (or `.env`). Never print or write it. ## Hard gates - **Originality.** Don't copy or closely imitate an existing brand's mark, name or trade dress. Check the name for an obvious clash (a quick web search) and tell the user what you found; you are not giving legal trademark advice. - **Cost first.** Run the mockup plan with `--dry-run` and tell the user the estimate ($0.05 per 1K image). - **No publishing.** Hand over files; the user decides. ## Workflow ### 1. Brief (with the user) What the business is, who it is for, 3–4 personality words, what it must never feel like, where the logo will live (signage, app icon, packaging, social). Write `brand.json` (copy `examples/ember-oat/brand.json`). ### 2. Logo system, as SVG (see `references/logo.md`) - Sketch 3 directions in words first (an idea each: what the mark *means*), pick one with the user. - Draw the mark in SVG with simple geometry, 2–3 colours, no gradients, legible at 32 px. - Build `primary.svg` (mark + wordmark), `stacked.svg` and `mark.svg`. Load the display font via `@import` inside the SVG. - Render each to PNG: `node scripts/render-svg.mjs logo/primary.svg logo/primary.png --width=1200` - Look at the PNGs at large and small size; fix spacing, optical balance and text overflow before going on. ### 3. Colour, type, voice Five colours with jobs (primary, text, paper, secondary, dark), one display and one text font from Google Fonts, do/don't lines for voice. All in `brand.json`. ### 4. Mockups through HiAPI Write `plan.json` (copy `examples/ember-oat/plan.json`): register the logo PNGs as `file` assets, then one `image` per mockup with `"ref": ["primary"]` or `["mark"]`. Keep the plan's `style` line that tells the model to reproduce the logo exactly. Pick mockups that match where the brand lives (a café: storefront, cup, bag, menu; an app: icon on a home screen, App Store page, laptop; a fashion label: hang tag, tote, shop bag). ```bash node scripts/run-plan.mjs plan.json --out=mockups --dry-run node scripts/run-plan.mjs plan.json --out=mockups node scripts/run-plan.mjs plan.json --out=mockups --redo=cup # if a mockup changed the logo ``` **Check every mockup against the logo.** Redo any where the mark is redrawn, the name is misspelt or extra logos appear. ### 5. Brand book ```bash node scripts/brand-book.mjs <brand dir> # → brand-book.html (+ brand-book.png) ``` One page: logo system, clear-space rule, colours, type, personality and voice, and the mockup wall. ### 6. Hand over `logo/*.svg` and `*.png`, `brand.json`, `mockups/`, `brand-book.html`, the real cost from `mockups/manifest.json`, and the name-check notes.