Brand Kit Starter

You give a small business a usable visual identity in a day: a logo that works from a favicon to a shop sign, a palette that passes contrast, two typefaces they can use everywhere for free, and a one-page sheet that tells anyone how to use them. You design the marks yourself as vectors from type and geometry, test them small and in one colour, and hand over a clean, versioned folder. The standard is a kit a printer, a web developer and a new employee can all use without asking questions.

When to use

• "We need a logo." / "Make us a simple brand for the new café."
• "Pick our colours and fonts so everything stops looking different."
• "Our logo is a blurry JPEG; make proper files." (Rebuild as vector, with the owner's approval of any change.)
• "Make a favicon and a profile picture from our logo."
• "Write down how to use our logo" (a usage sheet for an existing logo).
• The business is about to order signage, packaging or uniforms and has no proper logo files.

What you need

• The business: name exactly as it should appear, what it sells, to whom, where, and five personality words. Ask with clarify; run a short interview if there is no brief.
• Anything that already exists: signage, colours in use, an old logo, packaging, the website. Never discard an established asset without the owner's say-so.
• Two or three competitors or businesses the owner admires, to know what to stand apart from.
• Your computer set up: run the check in references/setup.md first, every time (installs outside /home/user are lost when the computer is rebuilt). Copy scripts/brand_tools.py, scripts/render.py, scripts/gfx_check.py and references/templates/brand-sheet.html into the job.

Method

1. Brief.
   • Write one paragraph: who the business serves, the five personality words, what competitors look like, where the logo will live (sign, cups, website, vans).
   • Get the owner's nod before designing.
2. Mood board (optional).
   • Use image_generate for 4 to 6 images of the intended feel (materials, light, photography style), never for the logo itself.
   • Show them on a show_card and confirm direction.
3. Type shortlist.
   • Set the business name in 6 to 10 open-licence candidates (fetch with tools/brand_tools.py font "<Family>" --weight 700 --out fonts/), render one comparison sheet, look at it with vision_analyze, keep three.
   • Pairing rules and starting points: references/palette-and-type.md.
4. Three logo concepts, each a different direction (wordmark; lettermark or symbol plus wordmark; one braver option), built as SVG:
   • wordmarks with tools/brand_tools.py wordmark fonts/X-700.ttf "Name" logo/a-wordmark.svg --fill "#hex" --tracking -0.01 (outlined, kerned);
   • symbols as hand-written SVG on a grid with consistent strokes and radii. Method and construction details: references/logo-design.md.
5. Test the concepts.
   • On one board: light, dark and photo backgrounds; black and white only; 16, 32, 64 px and full width; inside a circle.
   • vision_analyze the board and drop what fails small.
   • Present the survivors with show_card (type media) and one sentence each; the owner chooses with clarify.
6. Refine the chosen mark: spacing by eye at large size, alignment to cap height or x-height, one-colour versions, a compact mark for small spaces.
7. Palette.
   • Choose primary, optional secondary, accent; then tools/brand_tools.py palette --primary "#..." --accent "#..." --out brand/.
   • Render palette.html, look at it, and record which pairs pass for text (4.5:1 body, 3:1 large) and which are fills only.
8. Type system. Display and text families, weights, a 1.25 type scale, line-heights; licence note per family in fonts/LICENCES.md.
9. Export the files (references/usage-sheet.md): SVG masters, black and white versions, transparent PNGs at 512 and 2048 px, favicons (tools/brand_tools.py favicons logo/png/mark-512.png icons/ --bg "#primary"), a circle-safe avatar.
10. Usage sheet and BRAND.md. Fill templates/brand-sheet.html with the real logo, colours, type, clear space, minimum size and do-nots; render to PDF and PNG and check both with vision_analyze.
11. First conflict check and sign-off.

• Search the name and look at the national trademark office's free database for identical or similar marks in the business's field; report findings plainly.
• State in the hand-off that this is not legal clearance: a qualified trademark attorney or agent should clear and register the mark before the owner spends on signage or print.
• You never file anything.

Output

• brand-kit/ exactly as laid out in references/usage-sheet.md: logo SVG and PNG versions, compact mark, icons, avatar, palette files, fonts with licences, brand sheet PDF and PNG, BRAND.md with version and date.

  brand-kit/
    BRAND.md  brand-sheet.pdf  brand-sheet.png
    logo/     wordmark.svg  wordmark-black.svg  wordmark-white.svg  mark.svg  png/
    icons/    favicon.ico  icon-192.png  icon-512.png  apple-touch-icon.png
    social/   avatar-1080.png
    palette.css  palette.json  palette.html
    fonts/    *.ttf  LICENCES.md
  

• A short hand-off: the chosen concept and the idea behind it, the palette and type in one line each, the conflict-check findings, and the legal sign-off note.
• show_card (type media) with the brand sheet and the logo on light and dark.

Checks before you finish

• The logo is vector, text outlined, readable at 32 px and in one colour; the compact mark reads at 16 px.
• Every text colour pair listed as approved passes its contrast threshold (the palette tool's table).
• Every font is open-licence (or licensed by the owner), with its licence recorded.
• PNGs are transparent where they should be, with clean edges on dark and light.
• The brand sheet has no leftover sample names, colours or text; version and date are set.
• Nothing in the kit came from image_generate except labelled mood images.
• The legal sign-off note is in the hand-off.

Pitfalls

• Detail that dies small. Gradients, thin lines, tiny symbols and long taglines inside the logo fail on favicons and embroidery. Simplify.
• Generated logos. Raster, hard to reproduce, possibly derivative, and often not protectable. Design from type and geometry.
• Typing the name in a font and calling it a logo. Tune spacing, choose one deliberate detail, outline it.
• Too many colours. Primary, accent, neutrals; anything more needs a reason.
• An accent used as body text when it fails contrast. Document it as a fill colour.
• Skipping the one-colour test. Stamps, receipts and engraving need it.
• Implying legal clearance. A web search is a first look, not a trademark opinion.
• Designing in the brand colour first. Get the mark right in black, then add colour.