# Brand Delivery Kit / Volume 03

A reusable client identity and handover kit by Weezie. The sample brand, Atelier North, is fictional.

## Open this first

Extract the ZIP, then open **START-HERE.html**. Open **index.html** for the visual gallery and brand editor. All 36 designs have image previews before download. Open any card for a larger view. The gallery images and source-preview links work even without JavaScript; JavaScript enables brand customization, filtering and export. It works locally without installing a design app or running a server. Keep the extracted folders together.

## What is actually included

| Collection | Editable layouts | Contents |
| --- | ---: | --- |
| Stationery | 7 | Card front/back, letterhead, invoice, DL envelope front, compliments slip, folder cover |
| Social | 5 | Square post, portrait post, story, profile banner, avatar |
| Ads | 6 | Square, portrait, story, landscape, display rectangle, leaderboard |
| Outdoor | 4 | Wide and standard billboard, bus shelter, roll-up display |
| Packaging | 3 | Label, hang tag, flat box-sleeve artwork |
| Merchandise | 2 | Tote print and T-shirt chest print |
| Signage | 2 | Storefront and wayfinding |
| Proposals | 2 | A4 cover and scope page |
| Presentations | 3 | Cover, content slide, campaign overview |
| People | 1 | Team ID front |
| Digital | 1 | Website share image |
| **Total** | **36** | Each has a finished sample SVG and a blank starting SVG |

Also included:

- 3 photographic mockup JPGs: billboard, stationery and packaging/tote.
- 12 editable SVG logo variants, plus 24 transparent PNG logo exports.
- 6 favicon PNG sizes and a multi-size ICO.
- 8-page sample brand-guidelines PDF and editable HTML brand book.
- 4-page stationery proof PDF: two cards with 3 mm bleed, A4 letterhead and invoice.
- Full-size PNG exports of the 36 finished sample layouts, and smaller gallery previews.
- HTML email signature, CSS/JSON design tokens and saved brand settings.
- Discovery, strategy, identity rules, approvals, delivery checklists and client walkthrough documents.
- Start guide, production guide, mockup guide, category inventory, license and checksum manifest.

## Customize it

1. Open index.html. Choose **Customize brand**.
2. Enter the brand name, promise, campaign, call to action, colors, fonts and contacts. Choose **Start blank** to remove sample photography.
3. Add approved client photography. It stays in the current browser session and is embedded in exported SVGs. Save the image separately and load it again after re-opening the editor.
4. Use **Save settings** to download a JSON file. Load that file to resume the text and color settings later.
5. Open a design from the gallery. Choose **Export SVG** for editable artwork or **Export PNG** for a full-size flattened image.
6. **Export all 36 editable designs** downloads a branded ZIP with SVGs, logo starting points, settings, tokens, signature HTML, an editable HTML book and a short file guide.
7. Finish the SVGs in an SVG-capable vector editor. Replace the North sample mark with the client's approved logo, refine typography and replace document copy.
8. Edit the strategy text in the HTML brand book, then use the browser's print dialog to save a PDF. PDF samples in the master kit do not automatically update when you rebrand.

The custom export contains the 36 current SVG applications. The full-size sample PNGs, studio documents and static photographic mockups are in the purchased master kit. The photographic mockups do not automatically change with the editor settings.

## What the file types mean

| Format | Use it for | Editing |
| --- | --- | --- |
| SVG | Logos and application artwork | Editable vector text, shapes and embedded photographs. Use Inkscape, Illustrator or another SVG-capable editor. |
| PNG | Social publishing, image uploads and transparent logos | Flattened image. Return to SVG to change text or shapes. |
| JPG | Photographic mockup examples | Flattened picture showing a brand in use. No separate logo/material layers. |
| HTML | Local gallery, editable brand book, signature and guides | Open in a browser. The book has editable content; source can be edited in a text editor. |
| PDF | Reviewing and sharing the sample guidelines and proofs | Export a new PDF after changing the source. |
| JSON / CSS | Saved brand values and developer handover | Structured settings, colors, fonts and spacing. |

A **mockup** is a picture of the design in use, such as a logo on a tote or a campaign on a billboard. The JPGs are presentation examples, not layered PSD smart objects or editable 3D models. The matching flat designs are supplied as SVGs. To make a fresh client mockup, place the edited artwork in your own licensed mockup scene or produce a new presentation image.

## Folder map

- **00-studio to 04-guidelines:** process, discovery, strategy and identity guidance.
- **05-tokens:** sample design-to-code values. Custom exports contain updated values.
- **06-assets:** sample logos, logo PNGs, favicons and original AI-generated workshop photography.
- **07-applications:** production and mockup guides, application inventory and email signature.
- **08-handover:** approval and handover checklists, client walkthrough and licensing notes.
- **09-mockups:** three photographic presentation JPGs.
- **sample/ready-to-use:** 36 finished sample SVGs, signature and settings.
- **sample/png-exports:** full-size flattened PNGs of all 36 layouts.
- **sample/previews:** smaller review thumbnails, not full-size upload files.
- **sample/*.pdf:** sample brand book and stationery proofs.
- **editable-templates:** 36 blank starting SVGs, editable HTML book and settings.
- **template-catalog.json:** application names, dimensions, categories and filenames.
- **brand-engine.js, campaign-templates.js, editor.js, brand-book.js, zip.js:** editable source. The bundled editor runs offline.
- **manifest.json:** versioned file inventory and SHA-256 checksums.

## Before production

Read **07-applications/PRODUCTION-GUIDE.html**. Billboard and signage sizes are artwork ratios, not approved supplier specifications. Labels and tags are concept sizes. The sleeve and folder cover are artwork concepts, not engineered cutting dielines. Tote and T-shirt files are graphics for printing, not garment patterns. Confirm actual dimensions, bleed, safe areas, stock, color profiles and proof requirements with the supplier.

SVG and PNG application artwork uses RGB. The supplied PDFs are design proofs, not certified PDF/X press files. Text remains editable and depends on installed fonts. Georgia and Arial are the sample system fonts; font files are not redistributed. Record licenses for any replacement fonts. Native .fig, .ai, Canva, PSD, DOCX, PPTX, 3D and motion project files are not included.

Ads are designed image assets, not live campaigns. Add the click destination, accessible text and tracking inside the ad platform. The invoice and proposal contain example content, not billing calculations or a signed agreement. Replace client details, dates, materials, prices and payment terms. The mockup stationery has illustrative printed contact details; use the editable source for your actual contact information.

For the signature, host the approved PNG over HTTPS and update the sample logo URL before installation. Review the rendered signature in your email app.

## Final client handover

Deliver the approved guidelines PDF, approved logo SVG/PNG files, agreed application sources and ready-to-use exports, font/license notes, usage guide and supplier notes. Keep draft concepts and unused sample assets out of the final client folder. Walk the client through one edit, one image export and one print handoff. Use the checklist in 08-handover.

The kit is a broad starting collection. The exact client scope still depends on the business: packaging, signage, campaigns, motion, vehicle graphics, retail menus and other specialist work should be agreed separately when needed.

## License

Adapt the kit for unlimited client projects under LICENSE.txt. You may deliver completed client brand packages. Do not resell this template collection as a competing product or present the fictional sample as a real client case study. Mockups and workshop imagery were made using OpenAI image generation.

Questions: enang@weezie.site