# Reference library — browse & cherry-pick Everything in this folder is **Mitchell's original design kit** and reference material. It is **not ShopConnect canonical** — it's here so the team can *see what Mitch built, pick the moves we like, and pull them into ShopConnect.* ## What's here | Item | What it is | How to use it | |---|---|---| | `reference.html` | The pattern index — 9 canonical patterns, each with a rule + render. **Brand picker at top re-themes it live** (pick `shopconnect` to preview our green). | Look for a pattern before building a new one. Lift the canonical render. | | `harness.html` | Pitch-mode tool — ingest a brand (URL/color/logo), see it on storefront, dashboard, landing, stadium block, quiet moment. | Preview ShopConnect (or a prospect's brand) across surfaces. | | `typefaces.html` | Font lab — same hero in 6 running-font candidates + display picks. | Compare fonts when choosing a ShopConnect display face. | | `tokens-preview.html` | Visual dump of every token. | Quick reference for names/values. | | `reference-patterns-10-11-12.html` | Three quieter patterns drafted to be added to `reference.html`. | Splice in, or just browse. | | `inspirations/` | Mitch's mood/reference images (Sam Fender, The 1975, fintech landings, his product shots). | Pull the vibe; don't copy competitor color. | | `screenshots/` | Dnero POS + BurgerFuel captures the original patterns came from. | Understand where a rule came from. | | `mitch-original-README.md` | Mitch's untouched v0.2 README. | Provenance — what the kit was before we forked it. | ## To promote something from here into ShopConnect 1. Decide it fits a ShopConnect surface (`surface-matrix.md`). 2. If it's a token/pattern → propose the edit to the **root** files (`tokens.css`, `principles.md`) via PR. 3. If it's a photo/asset we own → move it to `brand/shopconnect/assets/`. 4. Note *why* in the PR. That's how the ShopConnect brand accretes taste over time. Mitch's presets (TicketFlo, givvv, kepa, kōdo, nexus, Lloy) live in `tokens.css` under "MITCH'S REFERENCE PRESETS" — apply any via `` to preview.