# Building an MMGY deck The point of this system: **hand over a brief, get back a deck.** A document, an RFP, a set of notes — the deck is assembled from patterns that already exist, so the work is judgement about *which* pattern and *what* to say, never CSS. --- ## The map ``` mmgy/ ← the system. Change this and you change every deck. mmgy.css tokens: 4 colours, 2 typefaces, the type scale, margins mmgy-motion.css entrance animations + click-through builds mmgy-ui.css components: accordion, tabs, timeline, cards, tables… mmgy-charts.css chart styling + the brand tint ramp mmgy-charts.js 10 SVG chart types mmgy-icons.js 56 stroke icons mmgy-deck.js the engine: builds, click nav, PDF, share links, gate deck-stage.js third-party slide shell — scaling, rail, print. Don't edit. templates.html the original 19 static patterns assets/ logo, photos, illustrations, textures library/index.html 52 live patterns. The catalogue AND the demo. decks//index.html one folder per deck docs/AUTHORING.md this file index.html landing page vercel.json deploy config ``` --- ## Making a new deck ```bash cp -r "decks/we-are-mmgy" "decks/client-name" ``` Then register it — one object in `decks/decks.json`: ```json { "id": "client-name", "path": "decks/client-name/index.html", "client": "Client Name", "title": "Integrated Brand & Media", "subtitle": "One line on what this deck is for.", "date": "2026-08-18", "status": "draft", "passcode": "somethingunguessable", "owner": "Name Lastname" } ``` It appears on the index page on the next load. `status` is one of `template · draft · sent · won · archived`, and it drives both the tag on the card and the sort order — live work floats to the top, archived sinks. That register is the **only** file to touch when a deck is added. Slide lists are deliberately not stored in it: the share-link builder reads them live out of each deck, so a link can never offer a slide that was renamed last week. Then, in the deck itself, in order: 1. **Outline first.** Map the brief onto sections. A proposal that works is roughly: open → who we are → what we heard → the insight → our approach → proof → team & terms → close. Nine sections is a lot; five is usually right. 2. **Pick patterns**, don't invent layouts. Open `library/index.html`, walk the rail, hit **Copy** on the slide you want, paste it in. 3. **Write the copy into the pattern**, not the other way round. If the words don't fit the pattern, pick a different pattern. 4. **Replace every placeholder.** Search the file for `Client Name`, `Name Lastname`, `000`, `Month Day`, and `media-ph`. 5. **Set the passcode** on ``, or delete the attribute. ### The slide contract ```html

data-chapter="Approach" data-steps data-no-click-advance> ``` - Slides are direct children of ``. **Nothing else may be** — a stray ` ``` Set `width`/`height` inline — the chart may be measured while hidden inside a build step, and inline size is what it falls back to. **Content inside `