wand-kit 0.3.2 → 0.5.0

package/PROMPT.md

@@ -1,13 +1,14 @@
 # Wand Power Prompt — Studio (v0.1)
 
 One design surface for every material a sales or marketing team needs, on
-either Wand brand. The page is HTML; it is composed from a component library on
+any of the three Wand brands. The page is HTML; it is composed from a component library on
 brand tokens; Chromium renders it; every gate measures that render; and every
 export (PDF, PNG, PowerPoint, a one-file HTML) is read from it, so nothing can
 drift from what was reviewed on screen.
 
 This document is the design system and the pipeline, and the source of truth
-on every design question. `brand/BRAND.md` and `brand-next/BRAND.md` win on
+on every design question. `brand/BRAND.md`, `brand-next/BRAND.md` and
+`brand-interim/BRAND.md` win on
 values (a hex, a face, an asset); `STATUS.md` is state; `SKILL.md` is procedure.
 
 **Why this exists.** The outputs that reviewed best in October 2026 (the
@@ -22,24 +23,27 @@ components, gates, exports.
 
 ## 0. Ground truth
 
-Two brands, one component set.
+Three brands, one component set.
 
 | Brand | Directory | Faces | Guideline |
 |---|---|---|---|
 | `current` | `brand/` | Geist | the Kearney leadership deck; `brand/BRAND.md` |
-| `next` | `brand-next/` | FK Roman Standard Light, Overused Grotesk | the website, read 2026-10-05; `brand-next/BRAND.md` |
+| `next` | `brand-next/` | FK Roman Standard Light, Overused Grotesk | the staging website, read 2026-10-05; `brand-next/BRAND.md` |
+| `interim` | `brand-interim/` | Geist, Newsreader | the live wand.ai, read 2026-10-21, and the social design approved on it 2026-10-22, which wins where they differ; `brand-interim/BRAND.md` |
 
 Each directory's `tokens.json` carries the brand as values a kit can draw with:
 `swatch` (the measured hexes), `roles` (what each value is for, once per
 ground), `faces` (the files and their PowerPoint names), `shape` (radius,
-strokes) and `art` (which file plays which role). A component asks for a role
+strokes, and `artShade`, the shade the kit lays over a dark page's art, 0.3
+unless a brand says otherwise) and `art` (which file plays which role). A component asks for a role
 (`--ink`, `--accent`, `--emph`) and never for a hex. Where a hex in
 `tokens.json` and `BRAND.md` differ, `BRAND.md` is right and `tokens.json` has
 drifted.
 
-`current` is the default while the two overlap; a job is on `next` when the
-user asks for the new brand. The default is one constant, `DEFAULT_BRAND` in
-`kit/lib/brand.js`, and `doctor` prints the rule from it. The FK Roman
+`current` is the default while the brands overlap; a job is on `next` when the
+user asks for the new brand and on `interim` when they ask for the interim
+brand or the live site's look. The default is one constant, `DEFAULT_BRAND`
+in `kit/lib/brand.js`, and `doctor` prints the rule from it. The FK Roman
 Standard licence for documents is still to be confirmed
 (`brand-next/fonts/LICENSE-FONTS.md`).
 
@@ -80,13 +84,47 @@ the ground's values, so one component draws on both.
 | `label` | 6C5CE7 | A78BFA | tags, section numbers |
 | `emph` / `emphInk` / `emphText` / `emphAccent` | 251C63 / FFF / DCD6F5 / AA9BFF | 4D2E8C / FFF / DCD6F5 / C4B5F4 | the emphasis card and what sits on it |
 | `stroke` / `rule` / `track` / `surface` | E4E0F2 / E4E0F2 / E9E6F5 / EBE8F8 | 5B4BB0 / 3A2E63 / 1A1033 / 1A1033 | card strokes, hairlines, meter tracks, tiles |
+| `second` / `secondSm` | 6C5CE7 / 6C5CE7 | 9481FF / 9481FF | a title's phrase, large / small (on this brand, the accent itself) |
+| `gradeLow` / `gradeHigh` | 240F48 / F8F6FB | the same | the photograph grade: where blacks lift to, where highlights settle |
 
 The next brand fills the same roles from the website (gold the one accent,
-violets as grounds, beige as paper); see `brand-next/tokens.json`.
+violets as grounds, beige as paper); see `brand-next/tokens.json`. Its
+`second` is a quiet tone, not gold (7B7B79 on light, 9D99A8 on dark, large
+type only; `secondSm`, the text grey, below that size).
+
+The interim brand fills them from the live site and the social design
+approved on it (2026-10-22), which wins where they differ: the approved
+ground (`14101C`) is the dark ground, with ink `F7F5F9` and lavender
+(`D4BCE8`) the accent for what is drawn; stone (`F5F3EF`) the light ground
+with strong violet (`6D41B3`) the accent; a title's phrase is `violet`
+(`C2A1EF`) on dark, on every page including the art pages (`accentText`), and
+`765098` on light, the site's own `h1 em` colours; the spark takes the
+phrase's colour. See `brand-interim/BRAND.md`.
 
 **Rules.**
 - One accent. The accent phrase in a title is the single most recognisable
   device in the system: one per title, never two, the sentence period in ink.
+- **On the next brand a title has two tones and gold is rare.** The phrase
+  takes `second`, a quieter tone of the ink; gold stays for the pages that
+  carry the brand's art (the cover, a statement, the close), for figures and
+  for the spark. The website's own headings carry no gold at all, and the
+  wand.ai rebuild (October 2026) read as a template while every heading's
+  second line was gold: when gold is everywhere it means nothing. On the
+  current brand `second` is the accent, so nothing changes there.
+- **On the interim brand a title's phrase changes face, not weight.** `<em>`
+  sets in Newsreader at the display's weight, the site's own `h1 em`; on the
+  pages that carry the art (the cover, a statement, the close) it is the
+  italic, as the hero's and the approved lockup's are. Its colour is one
+  violet on dark, the art pages too, as the approved banners set it; the
+  lavender accent stays for what is drawn, the figures and nothing else.
+- **On the interim brand the cover is the approved composition.** The planet's
+  rim, four trails sweeping under the title to their dots and up through the
+  hero's oval, drawn unshaded (`shape.artShade` 0) with the title untracked
+  (`faces.display.coverTracking` 0). The composition itself
+  (`brand-interim/assets/social/composition.json`, drawn by
+  `brand-interim/lib/composition.mjs`) is what a link preview or a social
+  banner on this brand is cut from: a window of it at one scale, never its
+  parts re-proportioned.
 - One emphasis card per row, at most one or two per page.
 - Light pages carry no art. Dark pages carry art on the cover, the closing and
   a statement; a dark content page is flat.
@@ -101,11 +139,16 @@ Three face roles per brand: `display` (titles, figures, the lockup), `body`
 Tracking and leading travel with the face in `tokens.json`; the CSS sets them
 from the same values.
 
-| Role | current | next |
-|---|---|---|
-| display | Geist SemiBold, −0.02em | FK Roman Standard Light, −0.07em, 1.06 |
-| body | Geist Regular | Overused Grotesk, −0.02em |
-| label | Geist SemiBold, +0.18em, caps | FK Roman Standard Light, caps |
+| Role | current | next | interim |
+|---|---|---|---|
+| display | Geist SemiBold, −0.02em | FK Roman Standard Light, −0.07em, 1.06 | Geist Medium (500), untracked, 1.025 |
+| body | Geist Regular | Overused Grotesk, −0.02em | Geist Regular |
+| label | Geist SemiBold, +0.18em, caps | FK Roman Standard Light, caps | Geist Medium, +0.11em, caps |
+| phrase | the display face | the display face | Newsreader Medium (500, optical size 72), untracked; italic on the art pages |
+
+A brand that sets a title's phrase in another face declares `faces.phrase`;
+the CSS reads it as `--face-phrase` and friends, and a brand without it leaves
+the phrase in the title's face, unchanged.
 
 **Weight carries no hierarchy on the next brand** (the serif ships one weight);
 the face does. Components therefore never rely on bold to separate levels, and
@@ -120,7 +163,8 @@ Figures are tabular (`font-variant-numeric: tabular-nums` on the page).
 ## 4. Chrome
 
 Drawn by `c.page()` on every page: eyebrow (`job.tag | eyebrow`), mark, footer
-(`job.footer`, page number). The cover and closing pages are `c.cover()` and
+(`job.footer`, page number; a page's own `footer` replaces the line, for a
+source note such as "Illustrative operating sequence"). The cover and closing pages are `c.cover()` and
 `c.closing()`, which place the brand art and the lockup; a job gives them
 words, never styling. Every piece of chrome is `.deco` or chrome-classed, so
 the gates know what is content and what is frame.
@@ -142,6 +186,7 @@ The components (`node wand.js components`; `kit/lib/components.js`):
 | `quote({ text, by, emph })`, `who` | testimonial cards, name over role, no photographs |
 | `stats`, `delta(from, to)` | figures, before-and-after |
 | `steps(items)` | next steps with arrows |
+| `photo(name, { pos })` | a brand photograph filling its box, with the brand's grade |
 | `callout`, `list`, `chapter`, `img`, `icon`, `tile` | the rest |
 | `enter(kind, i)`, `step(n, html)`, `countup(text)`, `stat({ count })` | motion in a talk (§12) |
 | `video({ src, poster })`, `demo({ src, poster })` | a clip or a live page on a slide (§12) |
@@ -163,8 +208,30 @@ decide, and that make or break a page:
   ground.
 - **Short lines in cards.** One sentence and an outcome. The card's body is
   never the place for the argument.
+- **Two lines a paragraph on a slide, at most** (Carlos, 2026-10-27: past two
+  "it breaks a lot", in PowerPoint and Google Slides above all). Keep the
+  words and give them room: two by two instead of four across, a ruled row
+  (the title left, the line right) instead of a narrow column, a band for a
+  unit, a lead under its title. The `lines` gate counts each block's lines
+  from the browser's own line boxes; it warns on every deck and fails a job
+  that sets `maxLines`. Titles balance and paragraphs wrap pretty
+  (`text-wrap`), so no word sits alone on a line.
 - **Equal heights in a row** (`stretch`), titles at one height, and the empty
   space at the foot of a page shared by its sections, never left under one.
+- **One arc.** Night, then day, then first light: the dark cover with its
+  art, the argument on light pages, one dark statement where the piece turns,
+  and the close. A piece that switches ground on every page reads as a
+  slideshow of boxes.
+- **No composition three pages running.** The same heading, then the same
+  three cards, page after page, is what makes a set of pages read as a
+  template; the variety gate names the run. Vary it: a statement set large,
+  a split with a photograph, a figure, a page that is one exhibit.
+- **Photographs large or not at all**, through `photo()`: full bleed or a full
+  column, never a thumbnail; architecture and light from the brand's set,
+  never stock (a person at a desk, a stethoscope, a form, a highway). Every
+  photograph takes the brand's one grade, so they read as one shoot.
+- **An exhibit on hairlines, not in a box.** A diagram or a flow sits on the
+  ground with rules; a frame around it reads as a dashboard widget.
 - **A slide balances and sizes itself.** Its body sits in the space under the
   title, not in the top quarter; a slide whose content fills under 55% of it
   takes the type scale a step up (`.big`) when that still fits, and the space
@@ -191,7 +258,12 @@ new ─▶ argue ─▶ content ─▶ compose ─▶ build ─▶ review ─▶
    per page, the contact sheet. `watch` does this on every save in under a
    second with the browser kept warm.
 6. **review** — look at `out/sheet.png`, then at any page the gates named.
-   Read the pages as the reader will: does each carry its claim?
+   Read the pages as the reader will: does each carry its claim? Then read
+   the sheet as a creative director would, the questions the build prints
+   under it: is one page memorable, and which; is the accent rare;
+   are photographs large or absent; are hairlines and type doing the
+   separating. A piece where no page would stop someone who has seen a
+   hundred decks is not finished: make one page that does.
 7. **ship** — `node wand.js ship <job> [--pptx]`: the build, the one-file HTML,
    the PowerPoint. A deck's HTML is a talk (§12), a storyboard's plays (§13),
    and either runtime is driven before it ships. `--brand next` (or `current`)
@@ -204,6 +276,7 @@ new ─▶ argue ─▶ content ─▶ compose ─▶ build ─▶ review ─▶
 |---|---|---|
 | fit | anything in the content box runs past it, under the footer, or off the sides | a page that fits and reads badly |
 | space (warn, slides) | a slide still uses under 40% of its content area after sizing itself | whether the content deserves the slide |
+| variety (warn) | three pages running share one composition (the same blocks in the same order) | two pages composed alike but far apart |
 | coverage | a line of `content.txt` is not on the page (whole, or in its declared parts), less the `cut` lines | a line that is present and in the wrong place |
 | overlap | one text box sits on another | text on art |
 | brand | a computed colour, border or fill that is not a token or a declared theme colour | gradients and images |
@@ -214,13 +287,17 @@ new ─▶ argue ─▶ content ─▶ compose ─▶ build ─▶ review ─▶
 | pdf text | the PDF's text misses a line, or carries an em dash | |
 | contrast (warn) | text under WCAG AA against its background, chrome excepted | |
 | measure (warn) | a paragraph over the surface's characters-per-line | |
-| images | an image did not load | an image that loaded and is the wrong one |
+| lines (warn; hard with `maxLines`) | a block of text on a slide that sets in more than two lines (or the job's `maxLines`), counted from its line boxes; autosizing never steps a slide up past it | a two-line paragraph that reads badly |
+| crop (warn, og) | a share image's words leave the centre square, which Slack and WhatsApp cut as their thumbnail | the chrome, and how the image reads at 128pt |
+| images | an image did not load, or is drawn at another shape than its own (stretched or squeezed past 2%; only `object-fit` cover, contain or none may change a box's shape) | an image that loaded and is the wrong one |
 | media | a demo, a clip or its poster is missing | a demo that loads and misbehaves |
 | console | a page error | |
 | runtime (ship, decks) | a slide or step the keyboard cannot reach, the overview or notes not opening, the presenter view out of step, a demo that never loads | how the motion feels |
 | timing (warn, boards) | the board is more than 10% off its `target` | the real voiceover's pace |
 | frames (warn, boards) | a frame is still to draw | a frame that is drawn and wrong |
 | player (ship, boards) | the player does not run, scrub, or caption | |
+| social (each image) | the lockup leaves its place or the centre square, the ring is cut, type under the floor, a share image over 300 KB | how it reads at 128pt: the review questions |
+| library (`--check`) | a library file is not the one approved, or the kit no longer draws it within its tolerance | a file that was approved and is wrong |
 
 The gates read the DOM Chromium laid out for the PDF; nothing is inferred from
 the spec. What no gate sees: the argument, the pacing, and whether the right
@@ -274,7 +351,9 @@ component was chosen. That is the review.
 4. **A scratch voice.** The Wand OS film timed its board against a voice from
    macOS `say`; the chat sandbox has none, so timing here is words at `wpm`.
    A recorded voiceover passed as `audio` leads the player.
-4. **Email and banner surfaces**: declared in §1's spirit, not yet in the table.
+5. **Email surfaces**: declared in §1's spirit, not yet in the table. Banners
+   exist on the interim brand, drawn from its composition (§14); on the other
+   brands they are still to come.
 
 ## 12. Talks: motion and the presenter
 
@@ -293,7 +372,11 @@ figure final, every poster.
 - **Kinds.** `rise` (the default), `fade`, `pop` for a mark or a figure,
   `grow` for a bar going up, `widen` for a bar going across, `draw` for a
   line that tells a trend (an SVG path with `pathLength="1"`), `count` for a
-  figure the room should watch arrive (`stat({ count: true })`, `countup()`).
+  figure the room should watch arrive (`stat({ count: true })`, `countup()`),
+  `words` for a title whose words rise out of their lines (every title does
+  this under `motion: "auto"`), `lit` for a statement that lights word by
+  word, `window` for a photograph that opens like a window. A page's art
+  (the cover's light, a statement, the close) comes up like first light.
 - **Steps** when the order of the argument is the point: `step(1, html)`, then
   2, then 3. Never more than four on a slide. Going back undoes the last step.
 - **Notes on every slide of a talk**, and `seconds` on each when the talk has a
@@ -342,3 +425,122 @@ direction (the line, camera, motion, on screen, sound, into next).
 - **Both brands:** the board is one job; `--brand next` builds it on the
   website's brand beside the first. Frames drawn as sketches or on brand roles
   follow; an image frame is per brand when it shows the brand.
+
+## 14. Social images
+
+A brand that carries an approved composition draws its social images from it
+(`node wand.js social <social.json>`, `kit/lib/social.js`), not from a page.
+The interim brand does: its X header, LinkedIn banner, LinkedIn company
+banner and avatar (approved 2026-10-22) measured into one artwork in master
+units (`brand-interim/assets/social/composition.json`: the planet and its
+glow, four trails with their tint and fade, eight dots, the hero's oval, the
+lockup, the marks), drawn by `brand-interim/lib/composition.js`. Every format
+is a window onto it at one scale (`formats`), so a part never changes its
+proportion to the others. Redrawn from it, the three approved banners match
+their exports within 2.5 to 3.8 levels in 255.
+
+| Kind | Size (export) | How it sits on the composition |
+|---|---|---|
+| `linkedin-banner` | 1584 × 396 (2x) | the approved banner's window |
+| `x-header` | 1500 × 500 (2x) | the approved header's: lockup 28 higher, ring 38 left |
+| `linkedin-company` | 1128 × 191 (2x) | the approved company banner's |
+| `share` | 1200 × 630 | the art from the planet's rim to past the ring; the lockup set on its own in the centre square |
+| `square` | 1080 × 1080 | the art's right half on its diagonal; the lockup in the corner it leaves |
+| `avatar` | 800 × 800 | `avatar.svg` full bleed; every platform cuts its own circle |
+| `profile-photo` | 800 × 800 | the banner's art behind the profile photo's circle, continued below the banner's edge, a cut-out of the person over it in the brand's photo grade |
+| `icons` | 16, 32, 48, 180, 192, 512 | `avatar.svg` set at each size: the favicons as the disc on transparent, the apple-touch and manifest icons full bleed (iOS and Android cut their own shape); `favicon.ico` (16, 32, 48), `favicon.svg`, `site.webmanifest` |
+
+**Start from what is live.** Before redrawing a page's preview, read it as
+the feeds do: `node wand.js social --audit <url> [more urls]` reads each
+page's og: and twitter: tags and its image, and shows that image in
+LinkedIn's compact card, Slack's square, X's 2:1 and WhatsApp's thumbnail,
+with the centre square outlined (`audit/audit.png`). Its rows name what the
+2026-10-23 fix found by hand: no image, missing tags, an em dash, an
+og:title that repeats the image, one image for every page, a file over 300
+KB or off 1.91:1. A chat without web access is told so and passes a saved
+page and its image instead (`--image`). A share card's `before` (the image
+live now) puts the old image above the new one in the preview.
+
+**A share image (og:image) is seen small and cut** (Hope Frank's feedback,
+2026-10-23, on Rotem Alaluf's post and a Slack unfurl; `runs/2026-10-23-wand-og-fix`):
+
+- Slack and WhatsApp show a square cut from the image's centre, so the
+  wordmark and the words sit inside the centre square (x 285 to 915 of 1200),
+  24px clear of it; the composition's gate and, on a page, the crop row hold
+  it. The banners' wide, stepped lockup does not survive that cut: the share
+  image sets it left-aligned without the step.
+- LinkedIn shows a link in a post with text as a compact card, the whole
+  image about 128pt wide: the words as large as the square allows (64px for
+  the site's line), the wordmark at 1.5x the lockup's ratio, and no small
+  print at all.
+- One image per page. An article carries its own headline, verbatim (X now
+  shows a link card's image with only the domain over it). The site's own
+  image carries its line.
+- The `og:title` does not repeat the image's words (the site's became
+  `Wand AI`), and nothing in the tags carries an em dash. `head-tags.html`
+  holds each page's block: the image's absolute https URL, type, size and alt,
+  and one `twitter:card` with the X tags.
+- Every upload goes to a new file name or folder, since every platform caches
+  an image by its URL; then LinkedIn Post Inspector, and Slack after its
+  cache (about 30 minutes). A post made before keeps its old preview.
+
+**The hand-over carries its own instructions.** Every `social` job writes
+`INSTALL.md` beside the images: where each file goes (the banner's pencil,
+the company page's header, the upload folder), the Post Inspector and Sharing
+Debugger links for each page, the cache to wait out, and that nothing is
+verified until it is live. With the PNGs, `head-tags.html` and `preview.png`,
+it goes into one zip (`<name>-<date>.zip`), which is what a web developer or
+a social lead receives. The build prints review questions under the preview,
+the ones that settled the 2026-10-23 cards: does the lockup read at 128pt,
+does Slack's square keep it whole, does the phrase end where the dots meet
+it, is the ring whole and clear, is the banner's lockup clear of the photo.
+
+**A profile photo that continues the banner** needs a cut-out of the person
+(a PNG with a transparent ground): Photos or Preview on a Mac lift a subject
+in one step. The kit does not cut a person out itself; from a plain photo it
+asks for the cut-out rather than guess an edge. Its circle is placed where
+LinkedIn's desktop profile puts it; on mobile the photo sits elsewhere and the
+art lines up only roughly, which the dark ground hides.
+
+On a brand without a composition, social cards are pages on the `square` and
+`og` surfaces; the crop row warns when a share image's words leave the
+centre square.
+
+
+## 15. The library: approved files, handed out as they are
+
+Most asks for a Wand file are not design jobs: "send me the LinkedIn
+banner", "the logo on dark", "the favicon set for the site". The answer is
+the file a person approved, not a new drawing of it. The kit carries those
+files in `library/` (`kit/library/index.json`): on the interim brand the
+LinkedIn banner, the X header, the company banner, the avatar, the share
+images for wand.ai and the NandaIndex article with their tags, and the
+site's icons; on both live brands the wordmark, the mark and the slide art,
+which it names inside the brand folders rather than copying.
+
+- **List, then hand over.** `node wand.js library [words]` lists what there
+  is; `node wand.js library get <id> --to <folder>` copies it and prints where
+  each file goes and who approved it. It needs no browser. A bare name
+  (`wordmark`) resolves on the brand the rule gives; a vague one lists the
+  candidates.
+- **Never redraw an approved file** to hand it over, never re-export or
+  recompress it, never retouch it. If the file asked for is not in the
+  library, say so and offer to make it (`social`, or a page): what the kit
+  makes is a candidate until a person approves it.
+- **One file, one record.** Each carries its size, use, approval and
+  sha256; `get` refuses a copy that does not match.
+- **The library and the kit cannot drift.** `node wand.js library --check`
+  proves every file is the one approved (its sha256), then draws again every
+  file the kit can draw, from the recipes in the index, and compares: within
+  its tolerance it passes; a visible difference warns (a 2px move of the
+  share image's lockup does); past 4 levels in 255 or 2% of pixels visibly
+  off it fails (a 6px move does). The share images are the files delivered
+  on 2026-10-23, drawn at 2x and reduced, which the kit's 1x redraw matches
+  within 0.75 levels; every other file is the kit's own, matched exactly.
+- **A file enters only once approved**, through `tools/library.mjs` in the
+  repo (`add` for a file, `build` to draw the recipes and rewrite each
+  record). A changed sha256 is a changed approved file: the CHANGELOG says so.
+
+What is deliberately not in it: the square card and the light-ground
+versions (never approved), profile photos (one person's), and the next
+brand (no approved social design, and its face's licence is open).

package/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: wand-design
-description: Rebrand or create Wand material on the current or new brand - decks and talks, documents, case studies, storyboards from a script, social cards. Use when a file is attached or branded work is wanted.
+description: Rebrand or create Wand decks, documents, storyboards and social images on any Wand brand, or hand out approved Wand files (logos, banners, link previews, icons). Use for branded work or a Wand asset.
 compatibility: Requires Node.js 18+, code execution enabled in claude.ai (Settings > Features), and a Chromium the kit can find (Playwright's cache or the system). No network needed once installed. Python 3 embeds fonts in the .pptx; without it the deck ships with the faces named, not embedded.
 license: Proprietary - Wand AI
 metadata:
-  version: "0.3.2"
+  version: "0.5.0"
 ---
 
 
@@ -25,7 +25,9 @@ node wand.js doctor
 
 Every row must be clear, and `chromium` must name a binary. If it does not,
 **stop and say so**: nothing renders without a browser, and never report checks
-you did not run. Every path below is relative to the kit folder.
+you did not run. The one exception is handing over an approved file
+(`library`, below), which needs no browser. Every path below is relative to
+the kit folder.
 
 ## Whichever Wand skill brought you here
 
@@ -57,31 +59,56 @@ page. `node wand.js components` lists the vocabulary.
 
 ## Which brand
 
-Two brands, one kit: `current` (Geist) and `next` (the website's). `doctor`
-ends with the brand rule: which one is the default, and the words that ask
-for the other. Follow it as printed. When the user names no brand, build on
-the default without asking; when their words ask for the other, pass
+Three brands, one kit: `current` (Geist), `next` (the staging website's) and
+`interim` (the live wand.ai's as its approved social design sets it: Geist
+and Newsreader on a near-black ground, the metallic oval and its trails). `doctor` ends
+with the brand rule: which one is the default, and the words that ask for
+each of the others. Follow it as printed. When the user names no brand, build
+on the default without asking; when their words ask for another, pass
 `--brand` to `new`. One brand per piece, never a mix, and the review note
 says which. The rule lives in the kit, not here, so it can change without
 anyone reinstalling the skill.
 
-**The same piece on the other brand:** `node wand.js ship <job> --brand next`
-(or `current`) builds the job again on that brand, into `out-<brand>/`
-beside the first. Nothing in the job changes.
+**The same piece on another brand:** `node wand.js ship <job> --brand next`
+(or `interim`, or `current`) builds the job again on that brand, into
+`out-<brand>/` beside the first. Nothing in the job changes.
 
 ## Read only what the job needs
 
 | Job | Read |
 |---|---|
+| An existing Wand file: a logo, a banner, a link preview, the icons, slide art | nothing: `node wand.js library` (PROMPT.md §15 if in doubt) |
 | A document, a two-pager, a case study | `PROMPT.md` §5 and `templates/page.mjs`; `examples/overview/job.mjs` for a finished one |
 | A deck | §5 and `templates/slide.mjs` |
 | An animated deck, a talk, a live demo | §12 and `templates/slide.mjs`; `examples/talk/job.mjs` for a finished one |
 | A storyboard from a script | §13 and `templates/storyboard.mjs`; `examples/storyboard/job.mjs` |
-| Social cards, a banner | `templates/card.mjs` |
+| Social images on the interim brand: banners, link previews, icons, a profile photo | PROMPT.md §14 and `examples/social/social.json` |
+| Social cards on another brand | `templates/card.mjs` |
 | Edit a job this kit built | the job's `job.mjs` only, then `build` |
 
 ## The jobs
 
+### Ask for an existing file (the cheapest job: start here when it fits)
+
+"The LinkedIn banner", "our logo on dark", "the favicon for the site", "the
+image wand.ai shares as": these are approved files, and the library hands
+them over as they are (PROMPT.md §15).
+
+1. `node wand.js library <words>` (for example `library banner`, `library
+   logo`) lists what matches; `node wand.js library` lists everything.
+2. `node wand.js library get <id> --to <folder>`: the folder the chat
+   delivers files from (in claude.ai, `/mnt/user-data/outputs`). A bare
+   `wordmark`, `mark` or `slide-art` takes the brand the rule gives; if it
+   names several, pick by the brand rule or ask which.
+3. Deliver the files with the `use` line it prints (where each goes) and its
+   size. For a share image, its tags file goes with it and the install steps
+   of PROMPT.md §14 apply.
+
+Never redraw, re-export, resize or recompress a library file to hand it over.
+If what they ask for is not there, say so and offer to make it (the social
+job below, or a page); what you make is a draft until someone approves it,
+and the note says so.
+
 ### Rebuild from a source they attached (a .pptx, .docx, .pdf, .html)
 
 1. Dump the source's strings verbatim, one per line, into `content.txt`:
@@ -94,7 +121,14 @@ beside the first. Nothing in the job changes.
    in `edits` (no em dashes: swap them for commas or semicolons there) and
    every line left out in `cut`.
 4. `node wand.js build work/<name>/job.mjs` until every hard gate is ok. Look
-   at `out/sheet.png`. Open a page only where something looks off.
+   at `out/sheet.png`. Open a page only where something looks off. Then answer
+   the review questions the build prints under the gates, as a creative
+   director would; if the variety row names a run of pages, recompose it.
+   On a deck, no paragraph sets in more than two lines: the lines row names
+   any that do. Re-lay, never reword: two by two instead of four across, a
+   ruled row (title left, line right) instead of a narrow column. Set
+   `maxLines: 2` in the job to make it a hard gate. A source note under one
+   slide goes in that page's `footer`.
 5. `node wand.js ship work/<name>/job.mjs --pptx` for a deck; without `--pptx`
    for a document. Deliver the PDF (and the .pptx, and the .html) with the
    review note.
@@ -105,6 +139,12 @@ Skip `content.txt` (delete the `content:` line in the job). Write the page list
 with its claims first, then the pages. Coverage is skipped and says so; the
 review reads the argument instead. Three sections a page, not four.
 
+On the next brand, a title's phrase is its quiet second tone and gold is kept
+for the cover, a statement, the close and the figures; photographs go through
+`c.photo("walk")` (the brand's set, graded), large or not at all. On the
+interim brand the phrase changes face instead: `<em>` sets in Newsreader, the
+italic only on the pages that carry the art.
+
 ### Make it generic (an industry version of a client piece)
 
 Author from the client piece: remove the client's figures, names, quotes and
@@ -120,8 +160,9 @@ talk adds:
 1. Notes on every slide, and `seconds` on each when the talk has a slot.
 2. Motion where it carries the argument (PROMPT.md §12): `step(n, html)` for
    a reveal in order, `stat({ count: true })` for a figure to watch arrive,
-   `enter("draw")` on a trend line, `enter("grow", i)` on bars. Restraint: one
-   moment a slide.
+   `enter("draw")` on a trend line, `enter("grow", i)` on bars, `enter("lit")`
+   on a statement, `enter("window")` on a photograph. Titles rise word by word
+   on their own. Restraint: one moment a slide.
 3. A live demo: one self-contained HTML file, then its poster on the deck's
    brand: `node wand.js poster demo.html --play 3 --brand <brand>`, and
    `c.demo({ src, poster })` on the slide. A clip: `c.video({ src, poster })`.
@@ -144,10 +185,45 @@ talk adds:
    HTML with its player. Say in the note that timing is scratch timing at the
    `wpm` given until a real read exists, and which frames are still to draw.
 
-### Social cards
-
-`--surface square` or `og`; one `c.page()` per card; `out/pages/pNN.png` are
-the deliverables.
+### Social images
+
+**First, is it already approved?** `node wand.js library <words>`: if the
+file exists, hand it over (the job above) instead of drawing it again.
+
+**On the interim brand** the banners, link previews, square, avatar and site
+icons are the approved design itself, drawn from the brand's composition
+(PROMPT.md §14):
+
+1. For a link preview that is live and wrong (someone sent a screenshot of a
+   bad unfurl), read it first: `node wand.js social --audit <url> [more]`.
+   Its rows and `audit/audit.png` show what the feeds do to it; say what is
+   wrong in the note. Without web access it says so: ask for the saved page
+   and its image and pass them (`--audit page.html --image og.png`).
+2. Copy `examples/social/social.json` beside the work and set `line` (the
+   words), the `cards` wanted, and for each share image its page's `url`,
+   `title`, `description` and `alt`, plus `upload` (where the images will
+   live: a new folder each time) and `before` (the image live now, if any).
+   An article's share image takes its headline verbatim as `lead` and
+   `phrase`. `{ "kind": "icons", "upload": "/assets/<date>/" }` adds the
+   favicons, app icons and manifest.
+3. `node wand.js social work/<name>/social.json`. Every image has a row; a
+   share image fails if its words leave the centre square or its type falls
+   under the floor. Look at `out/preview.png`: each image as the profile, the
+   LinkedIn compact card, Slack, X and WhatsApp show it, the live image above
+   the new one. Then answer the review questions printed under it.
+4. Deliver the zip (`out/<name>-<date>.zip`: the images, `head-tags.html`,
+   `INSTALL.md`, the preview). `INSTALL.md` already says where each file goes
+   and how to check it; the note adds that nothing is verified until it is
+   live, and that what you drew is a draft until approved.
+
+A profile photo that continues the LinkedIn banner is a `profile-photo` card
+with `photo`, a cut-out of the person (transparent ground). If they gave a
+plain photo, ask for the cut-out (Photos or Preview: lift the subject) rather
+than cutting it yourself.
+
+**On another brand**: `--surface square` or `og`; one `c.page()` per card;
+`out/pages/pNN.png` are the deliverables. The crop row warns when a share
+image's words leave the centre square: keep them there.
 
 ### Older Wand work
 
@@ -165,11 +241,15 @@ two kits, or `edit --set`; none of it applies to anything else.
 Which brand it is on; what was changed from the source and why (every edit,
 every cut); the gate table as printed; what a human still has to decide (a figure to confirm, a
 quote to clear, a claim legal should see). A file delivered without the gate
-table has been checked by nobody.
+table has been checked by nobody. A library file is the exception: it was
+checked when it was approved, so its note is the `use` and `approved` lines
+`get` prints.
 
 ## Available scripts
 
-- **`wand.js`** — doctor, new, build, check, ship, watch, poster, gallery, components, brands
+- **`wand.js`** — doctor, new, build, check, ship, watch, poster, social, library, gallery, components, brands
+- **`lib/library.js`**, **`library/`** — the approved files, their records and the check
+- **`lib/social.js`** — the social set from a brand's approved composition; **`lib/audit.js`** — a live page's link preview, read
 - **`lib/engine.js`** — the render and the gates
 - **`lib/components.js`** — the vocabulary and its CSS
 - **`lib/pptx.js`**, **`tools/embed_fonts.py`** — the PowerPoint export

package/START-HERE.md

@@ -6,9 +6,20 @@ node wand.js new work/acme --surface letter            # the default brand; doct
 #   write work/acme/job.mjs (pages(c)) and, for a rebuild, work/acme/content.txt
 node wand.js build work/acme/job.mjs                  # gates, PDF, a PNG per page, out/sheet.png
 node wand.js ship  work/acme/job.mjs --pptx           # + one-file HTML, PowerPoint
-node wand.js ship  work/acme/job.mjs --brand next     # the same job on the other brand, in out-next/
+node wand.js ship  work/acme/job.mjs --brand next     # the same job on another brand (next, interim), in out-<brand>/
 ```
 
+Asked for a file that already exists (the logo, a banner, a link preview, the
+icons), hand over the approved one: `node wand.js library banner`, then
+`node wand.js library get linkedin-banner --to <folder>`. PROMPT.md §15.
+
+On the interim brand, `node wand.js social examples/social/social.json` draws
+the approved social set (banners, link previews with their tags, square,
+avatar, a profile photo that continues the banner, the site's icons) from the
+brand's own composition, with `INSTALL.md` and a zip of the hand-over;
+`node wand.js social --audit <url>` reads a live page's preview first.
+PROMPT.md §14 has the rules.
+
 A deck's HTML is a talk: entrances, steps, a presenter view (P). A demo needs
 a poster: `node wand.js poster demo.html --play 3`. A storyboard starts from
 `node wand.js new work/film --surface storyboard`; its HTML plays the board.

package/brands/current/tokens.json

@@ -54,7 +54,11 @@
       "rule": "E4E0F2",
       "track": "E9E6F5",
       "surface": "EBE8F8",
-      "emphLabel": "AA9BFF"
+      "emphLabel": "AA9BFF",
+      "second": "6C5CE7",
+      "secondSm": "6C5CE7",
+      "gradeLow": "240F48",
+      "gradeHigh": "F8F6FB"
     },
     "dark": {
       "bg": "240F48",
@@ -74,7 +78,11 @@
       "rule": "3A2E63",
       "track": "1A1033",
       "surface": "1A1033",
-      "emphLabel": "C4B5F4"
+      "emphLabel": "C4B5F4",
+      "second": "9481FF",
+      "secondSm": "9481FF",
+      "gradeLow": "240F48",
+      "gradeHigh": "F8F6FB"
     }
   },
   "faces": {

package/brands/interim/assets/avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" role="img" aria-label="Wand"><circle cx="400" cy="400" r="400" fill="#261d3d"/><g transform="translate(180.48 300.24) scale(0.187233) translate(0 -512)"><path d="M0 530A18 18 0 0 1 18 512L352.5 512A18 18 0 0 1 370.5 530L370.5 1347A278 278 0 0 0 926.5 1347L926.5 530A18 18 0 0 1 944.5 512L1279 512A18 18 0 0 1 1297 530L1297 1347A278 278 0 0 0 1853 1347L1853 734A18 18 0 0 1 1871 716L1873 716Q1882 716 1888.13 722.59L1940.35 778.75A134.03 134.03 0 0 0 2136.65 778.75L2188.87 722.59Q2195 716 2204 716L2205.5 716A18 18 0 0 1 2223.5 734L2223.5 1347A648.5 648.5 0 0 1 1125.96 1814.89Q1111.75 1800.82 1097.54 1814.89A648.5 648.5 0 0 1 0 1347Z" fill="#ffffff"/><path d="M2021.58 -300.31A16.61 16.61 0 0 1 2055.42 -300.31A426.81 426.81 0 0 0 2465.31 109.58A16.61 16.61 0 0 1 2465.31 143.42A426.81 426.81 0 0 0 2055.42 553.31A16.61 16.61 0 0 1 2021.58 553.31A426.81 426.81 0 0 0 1611.69 143.42A16.61 16.61 0 0 1 1611.69 109.58A426.81 426.81 0 0 0 2021.58 -300.31Z" fill="#c2a1ef"/></g></svg>