# Stackless brand and campaign kit

**Working version:** 2026-09-23. **Status:** editable concepts and review artwork. Current local source was inspected; deployed appearance, client approval, email-client rendering, print proofs and vendor specifications have not been verified.

## Identity decision

This kit follows the current site source at `Stackless source: src/app/globals.css` and `src/app/layout.tsx`: warm cream `#F4F1E8`, near-black `#211F1A`, restrained amber `#E3B12F`, Manrope for interface/body, and Newsreader for editorial display. `colors.json` and `tokens.css` hold the complete source palette. The supplied `brand-kit/BRAND-GUIDELINES.md` describes an older palette (`#F7F6F2`, `#1C1917`, `#D4A017`) and Avenir Next. Do not quietly mix its tokens into new material; reconcile the guide with the owner before naming a production standard. The site checkout is dirty, so this is a source-based direction, not proof of the deployed site.

The four supplied SVGs are copied byte-for-byte here. The icon is a 4 × 3 rack-grid S formed by dark tote cells and amber lid bars. Keep its grid and bar pattern unchanged. The current site uses the supplied icon with live Manrope text for its wordmark. The supplied standalone wordmark SVGs use live **Inter** text, and their colors reflect the older guide. Those files remain useful original references; their lettering may substitute differently on machines without Inter. PNGs in this kit are raster exports of those exact SVGs. No vector redrawing or rebrand is implied.

| Asset | Best use | Limitation |
|---|---|---|
| `logo-icon.svg`, `logo-icon-light.svg` | Icon on light/dark flat backgrounds | Original older-palette amber remains in mark |
| `logo-icon-64.png`, `logo-icon-512.png` and light equivalents | Email and digital placements | Transparent raster, not an editable master |
| `logo-wordmark.svg`, `logo-wordmark-light.svg` | Editable original wordmark references | Live Inter text, not outlined; not the current site lockup |
| `logo-wordmark-640.png`, `logo-wordmark-1280.png` and light equivalents | Review/reference raster | Rendered from supplied SVG; compare with actual current site before print |

Give the icon at least one grid-cell of clear space. Use it no smaller than 24 px; use the supplied wordmark no narrower than 120 px. Avoid busy photography behind either. Keep the source SVGs intact. The site's separate icon-plus-text lockup can be recreated in a layout using the icon asset and Manrope text. Font licensing or embedding is not included; HTML/SVG files name Manrope and Newsreader with system fallbacks.

## Art direction

The campaign is an **organizing plan**, not a gadget demonstration. Cream space represents the floor returned to use; a black grid suggests individual storage positions; short amber bars echo the icon's tote lids. A thin ruled frame, numbered labels and generous margins bring a quiet workshop-editorial character. Amber marks an action or a useful measurement; it is not a full-page fill. Dark copy sits on cream or white. Use `#72520B` rather than bright amber for small text. Set headlines in Newsreader and practical copy in Manrope. Draw only an abstract slot grid here, so an illustration cannot misstate how the fixed wooden rack works.

Voice: direct, practical, calm. Use “tote.” Say “made-to-order wooden racks for compatible 27-gallon totes.” A tote lifts and pulls with two hands; the frame and rails stay fixed. A compatible tote has an individual slot. Ask for the tote model/outside dimensions and confirm fit before production. No all-totes-fit promise, customer outcome metric, testimonial, load rating, price, timeline or installation claim is introduced by this kit.

## Campaign development

The audience is a garage owner who has to move a stack to reach one tote. The source-backed benefit is using fixed individual slots to keep compatible totes off the floor and reachable. The working CTA is **Configure & price** at `https://mystackless.com/#sizes`, followed by a fit check before production.

Three creative directions were considered:

1. **The floor is not a shelf.** A short, memorable correction with a literal band of empty visual floor. Chosen because it reads quickly on a billboard and becomes a useful sequence in a folded mailer.
2. **Find one without unstacking.** Very clear mechanism, useful as supporting copy, but less distinctive at a glance.
3. **Give the garage its floor back.** Strong outcome, but broad enough to fit many garage products and weaker at explaining Stackless.

Selected family: **The floor is not a shelf.** The door hanger uses the contrast of a crowded top and open lower edge; its back explains one tote per fixed slot and the fit check. The postcard leads with the single thought, then gives a short next step. The six-panel folded mailer unfolds from the everyday pile to the fixed-slot method, the fit questions and the CTA. The billboard keeps only the headline, brand and short URL. Social artwork repeats the open floor band. Everyday stationery keeps the structure and palette but leaves room for correspondence.

The headline does not claim the rack fits every tote or that every garage becomes completely clear. All product imagery on the current site is labeled illustrative; none is reused here as customer proof.

## Files and use

- `signature.html` is the business-level populated example with the verified Stackless name, `hello@mystackless.com`, and `mystackless.com`. `signature.txt` is the plain-text fallback. `signature-staff.html` is the same layout with explicit staff placeholders. Copy the table markup into an email client's signature editor and test in the actual clients before installing it for a team. The icon is a relative file path here; host or attach it through the owner's approved method for email distribution.
- `stationery.html` contains editable business-card front/back, letterhead, proposal/quote, invoice and one-page overview. Click text marked by a dotted underline to edit a review copy, or edit the HTML source. Bracketed fields are placeholders. No tax ID, payment instructions, legal terms, pricing or staff identities have been supplied.
- `presentation.html` contains four reusable 16:9 slide layouts: title, content, evidence/proof and closing. The proof slide contains an evidence placeholder, not an invented testimonial.
- `social-square.svg` (1080 × 1080), `story.svg` (1080 × 1920), `cover.svg` (1500 × 500) and `avatar.svg` (512 × 512) are editable vector templates. Text is live. Check each destination's current crop/safe-area rules before posting.
- `campaign.html` contains reviewable door-hanger front/back, postcard front/back, a distinct six-panel folded mailer and a billboard concept. The suggested review proportions are 4 × 9 in, 6 × 4 in, 11 × 8.5 in flat with three panels, and 4:1 respectively. These are **concept assumptions**, not vendor files. Printer and mail-service requirements for dielines, handle cuts, trim, bleed, safe zones, folds, postage, address panel, color profile and outdoor dimensions still need to be selected and checked. Printing, postage, media purchase, distribution and installation have not occurred.

All HTML is editable source and opens locally with the assets in this folder. Browser display is a review rendering; final print PDFs, email installation, posted social files and vendor production files require the stated checks. The SVGs are also directly editable in vector design software. `manifest.json` lists the package.

## Source and rights inventory

- Four original Stackless logo SVGs: copied from `Stackless source: brand-kit/`; their source rights and ownership should be confirmed by the Stackless owner before external distribution. Matching icon SVGs are used by the current site.
- Product/claim wording, CTA and contact: current local Stackless site source, including `Hero.tsx`, `HowItWorks.tsx`, `Footer.tsx` and `layout.tsx`; source-reviewed, not independently validated customer evidence.
- New layouts, type hierarchy, abstract grid drawings and campaign copy: created for this kit. No stock image, purchased font or third-party photograph is bundled.