@r1z4x/tezgah 1.9.2 → 1.11.0

package/skills/hallmark/references/imagery.md

@@ -0,0 +1,99 @@
+# Imagery
+
+What a page shows, read on every page build. A page looks made when it shows the real thing (the place, the food, the object, the hands at work, the product running), and generated when it shows a gradient box, a drawing of a loaf, or a heading with nothing under it.
+
+## 1. What fills a page
+
+In order, the first that fits:
+
+1. **The user's own images and recordings**, asked for at Step 1. They win every slot.
+2. **Screenshots of the real product,** taken by the build itself whenever the product can be reached: a URL, a running dev server, a project in the folder that starts with one command, a desktop or phone app on this machine (§ 4). A real screen beats any picture of one.
+3. **The product built,** only when there is no product to capture yet (§ 4).
+4. **Photographs from the library**, picked by script and treated in the theme's way (§ 2, § 5).
+5. **Generated stills**, only when `TOGETHER_API_KEY` is set and the user asked for them (§ 6).
+6. **Type at full scale**, when the prompt is about words.
+
+Which prompts want which:
+
+- **A place, a material, food or drink, an object, a craft, the outdoors, an event, people at work** (a bakery, a ski school, a gin, a weaving studio, a venue, a tailor, a farm): photographs lead. The hero's photograph is the largest thing on the first screen (full-bleed behind the head, or beside it at 60 to 75% of the screen tall). After it, two to four more carry the page, one of them large, each on its subject (an off-subject picture is cut, never kept to fill a count), with sections of the material alone between them (a menu or price list as rows, the hours and the place as a table, a statement, a form), so pictures take a quarter to a third of the page (§ 5, 83).
+- **Software** (SaaS, an app, a developer tool): the product leads, and the hero visual is its interface. One or two photographs may set the scene (where it is used, the material it handles, hands at the work it serves) when each passes the deletion test: take it away and the page loses a fact. A city at night, a laptop on a desk or an office building fails it.
+- **Words** (docs, an API, a CLI, a type specimen, a manifesto or a letter about an idea): type and code carry it; one photograph as a full-bleed band at most. A manifesto or a letter about something physical (repair, a river, a street) shows it like any other page.
+
+A photograph never stands in for a fact: numbers, names and claims stay in type, and a picture of a person never stands in for a customer, a teammate or a testimonial (F9).
+
+## 2. The library
+
+Hallmark carries 755 verified photographs from Wikimedia Commons, each CC0, public domain, CC BY or CC BY-SA, tagged by subject, tone and temperature. Ask for each subject the page needs, concretely:
+
+```
+node <skill-dir>/scripts/theme.mjs photos "apple orchard in autumn" "hands picking apples" --theme <slug> [--n 3] [--orient portrait|landscape|square] [--seed <draw seed>] [--log .hallmark/log.json]
+```
+
+It ranks the library for each subject, steers away from the photos the last five builds used, and prints for each pick what it shows, its size, a ready `<img>` with its `srcset`, and its credit. Keep only picks that fit the sentence the section makes; re-ask in other words (the place, the material, the action) before settling for a near miss.
+
+- **Never write an image URL from memory or take one from a stock site** (Unsplash, Pexels and Pixabay bar AI-driven selection in their terms). Use only what the script printed or the user supplied (76).
+- **Credit every library photo:** one line in the footer marked `data-credits` (the word budget skips it), *Photographs:* then each printed credit, in the footer's small style. CC BY and CC BY-SA require it (76).
+- **Size and crop in CSS:** keep the printed `srcset`, set `sizes` to the layout (`50vw` for a half, `100vw` full-bleed), and crop with the frame: `aspect-ratio` on the slot, `object-fit: cover`, the printed `object-position` (or your own) to keep the subject in frame.
+- **For production,** `--save <dir>` downloads the picks into the project and prints local paths; drafts may link the Commons thumbnails.
+- **The hero photograph is the LCP:** `fetchpriority="high"`, never `loading="lazy"`; every other image is lazy. A full-bleed or hero frame takes a photo 2400px or more on its long side; a smaller one goes soft at 1920.
+- **A stand-in stays swappable:** in its slot (§ 3), with `data-alt` naming what the user's own picture should show, listed in the handoff.
+- **No Node:** say so in the Picks block and use slots with the user's material only; never guess a file.
+
+## 3. Slots
+
+A slot is any picture the user will replace: `data-slot="<name>"` (`hero`, `demo-2`, `photo-1`), a `data-alt` saying what belongs there, and a real size (an `aspect-ratio` or a fixed height). The scaffold's `base.css` holds the slot CSS, and the scaffold prints the `hallmarkSlots` script: paste it once before `</body>` (F18). It swaps in the user's files without touching the layout (`hallmarkSlots({ hero: 'shop.jpg' })`) and drops a stand-in that fails to load.
+
+- **A slot always shows something:** the user's image, a library photograph, or the product built at full fidelity. Its wash (`--color-paper-2` to `--color-paper-3`) is only the colour behind a photo while it loads; a slot showing nothing but its wash is an empty picture (81).
+- **No visible placeholder labels:** no "your screenshot here", ratio notes or "sample" chips; `data-alt` and the handoff carry that.
+- A child that must stay once the user's image lands (a credit, a plate number) carries `data-keep`; text over a slotted photograph (a Poster hero's head and scrim) sits in a sibling layer above the slot (`z-index: 2` or more; the slot's image takes 1), never inside it.
+- Never more than four slots in a row, and never a set of frames for things the page has no pictures of (a team, a list of venues): set those in type (68).
+
+## 4. The product: captured first, built only when it cannot be
+
+**Capture it.** When the product exists, the page shows it, not a mock of it. Find it at Step 0: a URL in the prompt, a dev server already running, a `package.json` with a `dev` or `start` script, a built app on the machine, or a path the user names. Start it if it needs starting (install, run, wait for the port), put it in the state that tells the page's story (sample data, a real project open, the one screen that does the job), then:
+
+```
+node <skill-dir>/scripts/capture.mjs http://localhost:3000 --routes /,/settings --sizes desktop,phone [--selector ".editor"] [--full] [--out images/screens]
+```
+
+It writes 2x PNGs at 1440 x 900 and 390 x 844 (or one element with `--selector`) and prints an `<img>` for each. A desktop app built on Electron, WebView2 or CEF is started with a DevTools port and captured through it (`capture.mjs --cdp 9222 --target "<window title>" [--selector ...]`, clean and at its own pixel density); any other desktop app with the OS (`screencapture -l <window id>` or `-R x,y,w,h` on macOS), a phone app with its simulator (`xcrun simctl io booted screenshot`), a terminal tool by running it and setting its real output in a code block. Look at every capture before it ships: nothing personal on screen (names, emails, tokens, file paths), no error states unless they are the point, no debug overlays. Use several: the main screen in the hero, a detail cropped large lower down, a second screen, the phone view. Stamp `imagery: screenshots <n> (capture.mjs)` and credit nothing; they are the user's own.
+
+**Frame it in the theme.** A capture sits in a `data-slot` with the theme's radius and the inset outline (§ 5), never inside a drawn browser bar, device frame, traffic lights or notch (47a, 47b). Crop to the part that sells (`object-position`, or `--selector`), keep text in it legible at its displayed size (scale 2, never upscaled), and never retouch what the product shows. Captures are product pictures: mark their slots `data-kind="product"`, so they do not count toward the photo balance (83).
+
+**Build it only when it cannot be captured** (an idea, a product not built yet, nothing reachable): the hero visual is the product's main screen built in HTML and CSS: real controls, at least eight elements, the prompt's nouns, the theme's surfaces and type, at the size `layout.md` § 6 gives the visual. Sample values read as samples (`example.com`, *Example Kitchen*, round plausible amounts), never a figure a visitor could take as a claim (46a). It sits in a `data-slot` so the real screenshot replaces it, and the handoff says which screens to capture once the product runs. Never build a mock of a product the build could have captured (84).
+
+A working control (a calculator on the user's prices, a booking form) is a fine section and a fine close, once a page; it is not the default hero.
+
+## 5. Placing and treating photographs
+
+- **Big or not at all.** A photograph spans six of twelve columns and stands 440px tall or more, or runs full-bleed; at thumbnail size it reads as clip art (a set of four or more may run smaller, each with its fact). In the hero it stands 60 to 75% of the screen tall beside the text, or fills the screen behind the head (the Poster posture). Delete the picture in your head: if the screen still says the same thing, the picture is too weak or too small.
+- **One subject a frame, cropped tight,** its weight leaning toward the text. Vary the ratio (4:5 beside text, 16:9 or 21:9 across, 1:1 in a pair) and the size (8 and 4 columns; three equal frames only for a true set: three dishes, three rooms).
+- **Balance.** Below the hero, photographs take at most a third of the page at 1440 (pictures inside the built product, marked `data-kind="product"`, do not count), up to 45% on a Photographic or Portfolio Grid shape; past that the page reads as a stock gallery and the theme never speaks (83). Never two photograph-led sections in a row: follow a picture with a section the theme's type, rules, colour or the product carry alone (the theme file's Range). A software page alternates the product with type-led sections and takes one or two photographs; a word-led page takes one at most. When in doubt, cut the weakest picture and set its fact large.
+- **Text over a photograph** sits on its calmest part over a scrim from the theme's ink (a gradient from the text's edge, 35 to 65%), behind the text's side only, at 4.5:1 or better against the image under it; never centred white type over a busy frame. A theme that refuses gradients uses a solid ink plate.
+- **Facts on the pictures:** captions are facts from the prompt in the label style, beside or under the picture (the dish and its price, the room and its hours, the date, the place). Never a credit line there, and never a caption that claims a stand-in as the user's own person, place or product.
+- **The theme's treatment, on every photo.** The theme's `photo:` header sets it and the scaffold writes it into `base.css` as CSS on every image in a slot, the user's own included: `natural`, `warm`, `muted`, `mono`, `duotone` in two of the theme's tokens, or `tint` in one, with adjustments (`con=`, `sat=`, `exp=`). A duotone or tint flattens a pale subject (snow, a white wall) into an empty field: choose frames with tonal range and look at each through the treatment. A duotone or tint takes the slot's `::before`, so draw a keyline or scrim with `::after` or a sibling. A photo inside a built product takes the treatment only if the page adds it.
+- **The frame is the theme's:** its radius, an inset outline of ink at 6 to 10% (`outline: 1px solid ...; outline-offset: -1px`), its texture if it has one. Never a border and a wide shadow together (F24).
+
+## 6. Generated stills
+
+Only when `TOGETHER_API_KEY` is set and the user asked for generated images, or for a subject the library cannot reach: `comp.md` § Generated stills. Never auto-fire it.
+
+## 7. Never
+
+- **A drawn illustration** (80): an SVG or CSS figure of an object, plant, animal, person, product, building, landscape or scene past icon size. SVG is for icons from one set, the user's logo, charts and diagrams of real data or a real system with their labels, and plain geometry (a rule, a grid, a dot pattern as texture).
+- **An empty picture** (81): a slot showing only its wash, or a gradient field where a picture should be.
+- **A counting device** (82): a row or grid of identical marks standing for a quantity, one for each bottle or day. Set the number.
+- **Illustration packs and characters:** unDraw, Humaaans, Storyset, Lottie mascots, 3D blobs, isometric scenes.
+- Stock faces as proof (F9); a logo wall without the user's logos (46a); mesh blobs, orbs or aurora behind text (29); an image that zooms or rotates on hover (11); text baked into a picture; a photo of a screen showing someone else's interface.
+
+## 8. Icons, logos, video, 3D
+
+- **Icons:** one library a page (Lucide by default; Phosphor or Heroicons in a project that uses them), one stroke width and one style, at 16, 20, 24 or 32px on the set's grid (a 24 viewBox at 24px, never scaled to 19), `currentColor`, aligned to the first line of multi-line text, never in a coloured tile (3, F5), never an emoji (30a). A button with an icon pads the icon side by the vertical padding.
+- **Logos:** the user's own, monochrome, one treatment a row, 32 to 48px tall (20 to 28px in a footer); Simple Icons (`https://cdn.simpleicons.org/<slug>/<hex>`) only for a platform or brand the page names. Never an invented wall (46a).
+- **Video:** the user's recording or footage: `autoplay muted loop playsinline` with a `poster` (28a, 28b), AV1 or VP9 WebM then H.264 MP4, under 2 MB for ten seconds, a visible pause control on any loop past five seconds, captions when it speaks.
+- **3D and WebGL** only when the product is 3D and the visitor handles it, with a still fallback.
+- **Motion libraries:** CSS and `@property` first; Motion for orchestrated entrances in React; GSAP only when a timeline is the product.
+
+## 9. Stamp, log and handoff
+
+Stamp `imagery: photographs, library 5, mono · product sample in hero and demo-2` (or `imagery: none`); the log's `imagery` field carries the same words and `photos` the ids used, so the next build's picks rotate. The handoff lists every stand-in and built sample with its slot, its size and what the user's own picture should show.

package/skills/hallmark/references/interaction-and-states.md

@@ -0,0 +1,89 @@
+# Interaction and states
+
+Loaded for forms and stateful controls. `craft.md` § 9 and gate 39a own the input rules and § 2 owns contrast; this file owns the eight-state table, the field recipe and the overlay patterns.
+
+## The eight states
+
+| State | When | Treatment |
+| --- | --- | --- |
+| Default | At rest | Base styling |
+| Hover | Pointer over, inside `@media (hover: hover)` | One signal: a colour step, a 1px lift or a border step (11) |
+| Focus | Keyboard or programmatic focus | The ring, at once (15, 26a) |
+| Active | During press | A 1px drop or one step darker |
+| Disabled | Not interactive | Three channels together: `opacity: 0.55`, `cursor: not-allowed` and the native `disabled` attribute, or `aria-disabled="true"` where the control must stay focusable (39a) |
+| Loading | Processing | Inline progress; the label stays readable and the width does not jump |
+| Error | Failed | `--color-error` on the border, the message, `aria-invalid`; never colour alone |
+| Success | Completed | The result itself, from the server's answer; an icon from the page's set at most; no toast (16); no success state where no request was made (70) |
+
+An element missing one of these is not finished.
+
+## Focus rings
+
+The scaffold's ring is the page's: `outline: 2px solid var(--color-focus); outline-offset: 2px`, inset on inputs (a negative offset) so it never collides with a neighbouring field. 3:1 against both the element and the page. `:focus-visible`, so it shows for the keyboard; never `outline: none` without a replacement.
+
+## Hit targets
+
+44 x 44 CSS px for anything a finger can reach. Expand a small control without changing its look:
+
+```css
+.icon-btn { position: relative; }
+.icon-btn::before { content: ""; position: absolute; inset: -12px; }
+```
+
+## Forms
+
+- A visible label above every field; never a placeholder as the label.
+- A placeholder shows a format (`01 Jan 2026`), never an instruction.
+- Validate on blur once the field has been touched, then on every input.
+- An error says what broke, why, and what to do, in one sentence where it can; tie it to the field with `aria-describedby` and set `aria-invalid="true"`.
+- Required fields carry `aria-required` and a visible word, never colour alone.
+- Disable submit only while a request is in flight, never at rest.
+
+## The field
+
+Every text input, textarea, select and combobox.
+
+**The border never changes width.** State moves to `background-color`, `border-color`, `outline` or `box-shadow`, never `border-width`; a transparent outline is reserved at rest so the ring appears without a shift.
+
+```css
+.input { border: 1px solid var(--color-muted); outline: 2px solid transparent; outline-offset: -3px; }
+.input:focus-visible { outline-color: var(--color-focus); }
+```
+
+| State | Treatment |
+| --- | --- |
+| Default | 1px `--color-muted` border (a field's edge needs 3:1, which a rule never has), paper background, placeholder in `--color-muted` |
+| Hover | `--color-paper-2` background, border unchanged |
+| Focus | The ring; the border may deepen to `--color-ink-2` at the same width |
+| Filled | As default; the value carries the state |
+| Disabled | The three channels; placeholder dims one step |
+| Error | `--color-error` border, the error text in the helper line, an error icon from the page's set in the right-edge slot |
+| Success | Only after a real check returned; a check icon from the page's set; clears when the user edits |
+| Loading | A small spinner in the right-edge slot; the field stays editable, submit waits |
+
+- **Height:** inputs match the height of the button beside them (44 to 52px on a marketing page, 39); vertical padding is `(height - line-height) / 2`.
+- **Right-edge slot:** reserve about 24px for a clear button, an error glyph or a spinner, so nothing reflows when one appears.
+- **Label** 4 to 8px above; **helper** about 4px below at the label's size, quieter, in a line that reserves `min-height: 1lh` (F14); the error replaces the helper in that line, never adds a second.
+- Never transition `border-width`, `padding` or `height`; never animate the ring.
+
+**Controls.** Textarea: `resize: vertical`, `min-height: 6rem`. Select: native, with a custom chevron on the wrapper; a fully custom select only when it keeps native keyboard and screen-reader behaviour. Checkbox and radio: native, `accent-color` for the cheap correct version, styled by state in CSS, never toggled by script. A switch is a checkbox with the same contract. Range: the thumb takes focus and a 44px hit target. File input: a styled `<label>` is the surface. Combobox: the listbox sits below without pushing content, `aria-expanded` mirrors it, arrows cycle, Enter selects, Escape closes.
+
+## Modals and overlays
+
+- A native `<dialog>` opened with `showModal()`: focus trap, Escape and `::backdrop` for free.
+- Pin it once custom positioning is added, or it can snap to a corner: `position: fixed; inset: 0; margin: auto; height: fit-content; max-height: min(80dvh, 40rem)`. A non-dialog overlay centres with `display: grid; place-items: center` on a fixed container.
+- `inert` on the page behind; close on Escape, backdrop click and a visible close control; first focus to the first interactive element.
+
+## Popovers, menus, tooltips
+
+The Popover API for light-dismiss, stacking and Escape; CSS anchor positioning where available, `position: fixed` with `getBoundingClientRect()` otherwise; flip near the viewport edge; never inside an `overflow: hidden` ancestor that clips it.
+
+## Undo over confirm
+
+Reversible actions run at once and offer Undo for 5 to 10 seconds. Irreversible ones (delete an account, drop a table) keep the confirm, and the user types the name of the thing being destroyed.
+
+## Loading and empty
+
+- A skeleton where the content's shape is known (lists, cards, tables); a spinner only in a button, replacing the label.
+- An empty state is one line naming what is empty, one on why it matters, and one action (`craft.md` § 6). Never a bare *No results*.
+- A disabled control near the user's attention says why it is disabled.

package/skills/hallmark/references/layout.md

@@ -0,0 +1,104 @@
+# Layout
+
+The canvas, the sizes, the sections and the hero for every theme build; a custom run designs its own (`direction.md`). A page looks made when every screen holds one idea at the right size. Numbers are at 1440 x 900 unless a line says otherwise.
+
+## 1. The canvas
+
+- **One container, centred and capped:** `.container` from the scaffold, `--container` 1440px with `--gutter` 64px, so content is 1312px wide at 1440 and stays 1312px at 1920 while the gutters grow (44d).
+- **Twelve columns inside it**, `--gap-columns` 32px apart: one column is 80px, four 416px, six 640px, eight 864px. Every section places its parts on these columns, so left edges line up from the nav to the footer.
+- **Every section:** the outer element owns the background and the block padding, the inner `.container` the width and only `padding-inline` (a `padding` shorthand there silently zeroes the rhythm). A full-bleed band changes the background and keeps the container.
+
+## 2. Sizes
+
+The scaffold writes these tokens and `base.css` sets them on the elements. A theme changes faces, weights, tracking and case; the steps hold, except where a theme sets its display a step larger.
+
+| Role | Token | At 1440 | Element |
+| --- | --- | --- | --- |
+| Hero head | `--text-display` | 84px | `h1` |
+| Long hero head, statement | `--text-display-s` | 60px | `.display-s` |
+| Section head | `--text-section` | 52px | `h2` |
+| Item title | `--text-title` | 25px | `h3` |
+| Lead (the one line under a head) | `--text-lead` | 21px | `.lead` |
+| Body | `--text-md` | 16px | `p` |
+| Label, caption, meta | `--text-sm` | 14px | `small`, `figcaption`, `th` |
+
+- A section head under 40px at 1440 is the most common reason a page looks unfinished (78). The hero head is about one and a half times the section head, the section head about twice the item title.
+- A head and its line sit 16 to 24px apart (`--space-md` to `--space-lg`); the head block and the section's content 48 to 64px (`--space-2xl`), 40px in a tight composition.
+- Grid items sit `--gap-columns` apart across and 48 to 64px apart down; a card or well takes 32 to 40px of padding.
+
+## 3. Rhythm between sections
+
+- Sections part by the three scaffold steps, `--section-gap-s` 120px, `--section-gap` 144px and `--section-gap-l` 176px, mixed (59). A band (a change of paper) takes `--section-gap-s` of padding top and bottom.
+- Space is earned by mass: a 144px gap frames a 700px section and is a hole under a 200px one. An empty-looking page wants a bigger head, a bigger visual or a fuller section, not a smaller gap.
+- Six to nine sections, hero and footer included; five on a thin prompt, never fewer. Height follows content (often 5,000 to 8,000px with pictures and a full prompt, 3,000 to 4,000px on a thin one); never pad toward a height.
+
+## 4. A section
+
+A section is one piece of the page's content shown at its best: the menu, the lineup, the latest issue, the product at work, the room, the price. Decide the content first, then the composition that shows it best. Most sections carry a **head block** above or beside a **body** from § 5; a section whose content names itself (a menu, a timetable, a track list, a list of issues, the product's own screen) may go without one, or carry its head inside the content (the menu's own title, the date over the lineup). Never more than two neighbours with the same skeleton: a page of head-then-block, head-then-block reads as a template however good each block is. What real sites in each category are built around is in `anatomy.md`.
+
+- **The head block:** an `h2` of six words or fewer at `--text-section` (a staged shape may head each stage with its one-word name), at most one line at `--text-lead` beneath it, on columns 1 to 6 or 1 to 7, or split (head on 1 to 5, the line on 7 to 12, baselines aligned). Centred only over a symmetric body, and never more centred head blocks than left-aligned ones.
+- **The body fills the width:** its widest row reaches ten of the twelve columns (77). A narrow text block with the right half empty is the sparse page's signature; pair it with a visual, split it, or set it as a statement.
+- **The body has mass:** a visual 360px tall or more; a set of three or four items across the width; a list or table of three or more rows across ten columns; a working control on the prompt's own facts; or a statement at `--text-section` or larger. A head and a paragraph are a head block, never a section.
+- **A split balances:** text and visual centre on each other within 60px, and neither column leaves more than a fifth of the row empty.
+- **Content sets the height:** usually 520 to 900px; under 360px only for a band (a call to action, a logo row, a statement), at most twice a page.
+
+## 5. Compositions
+
+Layouts, not components: build each in the theme's material and the prompt's content. A page uses three to six different ones and never the same one twice in a row, except in a one-composition shape (Split Studio, Feature Stack, Catalogue), where neighbours change ratio and, where the shape allows, side.
+
+1. **Split.** A text block (head, line, two to four short facts or one action) beside a visual on columns 6 to 12 or 7 to 12, 440px tall or more at 4:3 to 4:5 (portrait for a product photograph). Swap the side at most once a page; change the ratio (5 and 7, 4 and 8, 6 and 6) between two splits.
+2. **Showcase.** The head block, then one visual across all twelve columns at 16:9 to 21:9, 560px tall or more; beneath it at most two smaller visuals at 8 and 4 or 7 and 5, never three equal frames.
+3. **Grid.** Three or four items across (or two by two): plans, products, places, rooms, dishes, each with its photograph, a large figure or a title big enough to carry the cell, then one line; equal heights, aligned tops, 240px or taller. Never empty frames (68), stock faces for people (F9) or icon tiles over headings (3).
+4. **Bento.** Four to six tiles on six or twelve columns in mixed spans (8 and 4 over 4, 4 and 4; or 7 and 5 over 5 and 7), rows 280 to 360px, two tiles at least with a visual, one clearly the lead.
+5. **Rows.** Three to five full-width rows parted by hairlines, 72 to 120px each: a title at `--text-title` on columns 1 to 5, its line or figure on 6 to 12. A head block may sit on 1 to 4 beside rows on 5 to 12 (an FAQ, an index, a timeline, a price list).
+6. **Table.** Full width, four or five rows of 56 to 72px, numerals tabular, the column that names the row one step heavier.
+7. **Figures.** Three or four real numbers at `--text-display-s`, labels beneath, across the twelve columns, parted by vertical hairlines. Only figures the user gave (46a).
+8. **Steps.** Three or four stages across, each a numeral (a real `<ol>`, never a `01` label over a head, 54), a title and a line, with a visual beneath or beside where the material has one; or a vertical run with a visual per stage on a fixed side.
+9. **Statement.** One sentence filling eight to ten columns in two or three lines, from `--text-section` up to `--text-display` (a condensed or light face takes the larger step), with its attribution or one action; once a page.
+10. **Band.** A change of paper (`--color-paper-2`, the ink, or a field of the accent where the posture allows) edge to edge, the container inside, holding whatever the page's job wants there: the next free table times, the buy box, the store buttons beside a screen, the next date and the address. Never an email field by default (85).
+11. **Form.** The fields on six or seven columns beside the head block and two to four facts, inputs 48 to 56px tall, one primary action.
+12. **Rail.** A horizontal run past the container's edge (dates, issues, products, rooms, episodes), five or more items with the next one cut by the edge, scrollable by touch and keyboard, snap points, no arrows needed past two.
+13. **Pinned.** One visual held sticky on six or seven columns while three or four short panels scroll past it on the other side, each changing what the visual shows (a state, a crop, a step); static under 60rem.
+14. **Switcher.** One area with two to five states behind a segmented control: the menu by lunch and dinner, the plans by month and year, the app on phone and watch, the schedule by day. Every state real; the first visible without script.
+15. **Index.** A dense, scannable list of the prompt's own items with their facts in columns (issues with dates and topics, projects with year and client, episodes with length, lots with estimates), optionally filtered; 6 to 20 rows, the lead row larger.
+16. **Schedule.** Time against place or day: a two-day festival as two columns of acts and times, a week of classes, opening hours as a strip; the current or next slot marked.
+17. **Offer.** The thing for sale with what a buyer needs at the moment of buying: the photograph or screen, the options (size, scent, plan), the price, the action and one line of delivery or terms. On a buy page it is often the hero.
+
+Under 60rem every composition stacks in reading order: the head block, then the body; a split's visual after its text; a grid two across, then one under 40rem; a bento's lead tile first; a rail stays a rail; a pinned pair unpins; a schedule turns into one column per day. Visuals keep their aspect ratio and lose their minimum height; nothing scrolls sideways except a rail or a table that says so (`responsive.md`).
+
+## 6. The hero
+
+The first screen at 1440 x 900 and 1920 x 1080, and only the first screen (44c). Pick a posture at Step 2 from the job (`anatomy.md`), stamp it, and vary it run to run; text beside a picture (Settled, Stage) is the most common generated hero, so take it only when the picture is the strongest thing the prompt has.
+
+| Posture | Height | Content |
+| --- | --- | --- |
+| **Settled** | fills the screen under the nav | centred in the screen; the text on six columns, the visual on the other six |
+| **Stage** | fills the screen under the nav | the text on five columns, a visual on seven at 60 to 75% of the screen tall (reversed when a poster-size head needs the width); it may bleed off the outer edge |
+| **Banner** | 50 to 60% of the screen | the first section shows above the fold; for references, docs, utilities |
+| **Ledge** | fills the screen | a tall field above, the head resting at the base; at 1920 the head grows to its cap first |
+| **Corridor** | fills the screen | one centred column of 44ch or less, the head larger than usual |
+| **Poster** | 92 to 100dvh | a full-bleed photograph or canvas, the content on its calmest part with room around it, low and left or centred, never squeezed into a corner |
+| **Counter** | fills the screen under the nav | the action is the visual: the subscribe field with the latest issue, the booking times, the buy box with its options, the download with the screen, set large beside or under a shorter head |
+| **Index** | fills the screen under the nav | the content is the visual: the lineup, the menu, the list of issues or projects, set as the page's lead with the head small above it; for pages whose list is the reason to come |
+
+- **Centred in its screen.** For Settled, Stage, Banner and Corridor the space under the content is 1.0 to 1.5 times the space above it (44a), and the lowest content sits within 160px of the fold (79). Spend spare height on a larger visual or larger type, never on copy.
+- **The visual is big:** six or seven columns wide and 60% of the screen tall or more (520px at 1440 x 900), or a portrait object (a cover, a phone, a bottle) at 75% tall on four or five columns; its centre within 60px of the text block's. The hero grid is two tracks (`6fr 5fr`, `5fr 7fr`) with its own gap of `--space-2xl` to `--space-3xl`, so text and visual stand 48 to 120px apart; spans on the twelve columns leave an empty column between them. Under 60rem the gap becomes a row gap of `--space-xl`. What it shows is `imagery.md` § 1; a working form is a section or a close, not the default hero.
+- **No visual:** the head grows to `--text-display` at its cap across eight to twelve columns, or the posture is Banner and the first section starts by 640px.
+- **The text:** the head (seven words or fewer), one sentence at `--text-lead`, one or two actions (58). Under 60rem every posture collapses to its content's height (Poster may stay full-bleed).
+
+## 7. The page
+
+- **The job decides the anatomy** (`anatomy.md`): where the action lives (in the hero, sticky, repeated beside the content, at the close), and which category-native sections the page is built around. A newsletter puts the subscribe field in the hero and shows the issues; a restaurant shows the menu and the booking; a band shows the record and the dates. The theme dresses that anatomy; it never replaces it.
+- **Order follows the argument the shape makes** (`macrostructures.md`), never hero, three features, a call to action and a footer (8). Lead with the strongest real thing after the hero; put each fact where it does work.
+- **Not every page has steps or figures.** Steps only for a process the visitor really goes through (booking, joining, getting a festival ticket); a figure row only for three numbers the prompt states outright, never one derived from it (365 mornings from "every day"). Together they appear on most generated pages; on a made page they are a choice.
+- **Variety:** never the same composition in neighbouring sections (a one-composition shape aside); mirror a split once at most, never a zigzag; one full-width visual at least on a product page; one or two bands. Read the log's `sections`: a Statement, Steps, Figures and a closing Band are the easiest reaches, so when the last build used one, make that beat another way.
+- **Balance:** photographs take a quarter to a third of the page below the hero (83), and never lead two sections in a row; the sections between are built from the theme's material (its Range: type, figures, rules, the product, a table, a form). `imagery.md` § 5 has the counts.
+- **Pace:** a dense section (a grid, a table, a bento, an index) is followed by a quiet one (a statement, a showcase); the page ends on a real close.
+- **The close is the job, not a form.** End on what the visitor came to do, in the form the job takes (the next times to book, the buy box, the store buttons, the next date and the address, the latest issue), or simply on the last strong section and the footer. An email field closes a page only when the job is one where a mailing list is native (subscribe, join, attend, listen, visit) and the anatomy calls for it, or the user asked for one (85); a page whose action already sits in the hero or a sticky bar need not repeat it at the foot.
+- **The footer closes the page:** 200 to 400px: the wordmark or one closing line, the page's real links, the legal line. A single line under a hairline is a colophon, right for a letter, a document or a manifesto.
+- **The nav is one line, 56 to 80px tall**, sized to the page's real destinations. Vary it against the log: edge-aligned (wordmark and one or two links or an action at opposite edges), a floating pill, a masthead (a large centred wordmark over a rule), a slab (a heavy full-width bar), a search-led bar with a visible command pill, a banner over a bar that retracts on scroll, a three-part bar only for four or more real destinations (42). A side rail only where a sticky object earns it.
+- **Footers:** a mast (the wordmark large over the links), a statement (one closing sentence large, the links beneath), a colophon block (credits and address as one paragraph), newsletter-first (the form leads; only for a subscribe page), a letter close (a sign-off and a date), index columns only for a hub with a real sitemap.
+
+## 8. Before shipping
+
+Scroll the page at 1440 x 900 one screen at a time: is something on each screen big enough to be its reason? A screen holding only a heading and a line wants a bigger visual, the line set as a statement, or two sections merged. Then squint: with the words blurred, each section still has a shape and the page a rhythm of heavy and light. The render tier measures width (77), head scale (78), the hero's foot (79) and the photo share (83); the eye judges the rest.

package/skills/hallmark/references/macrostructures/01-bento-grid.md

@@ -0,0 +1,21 @@
+## 01 · Bento Grid
+
+Modular blocks of varying sizes laid out as an irregular grid. Each block is a feature, a figure the user gave, an image or a supplied quote. Rhythm comes from size variation, not card uniformity.
+
+- **Heading:** a display head over the grid's first row; the hero is one screen and the grid starts inside it or right under it (44c), never a tall empty band.
+- **Body:** asymmetric grid, six to nine blocks of mixed spans (1×1, 2×1, 1×2, 2×2); image-bearing tracks `minmax(0, 1fr)` (50).
+- **Divider:** one gap, `--gap-columns`; no rules; the grid is the rhythm.
+- **Button:** an outlined chip in the hero; inside a tile, a typographic link carrying a verb.
+- **Image:** tightly cropped inside individual blocks; never full-bleed.
+- **Reveal:** none, or one one-shot fade as the grid enters.
+
+Reach for it when the prompt is "many small things to show": a feature page, a SaaS landing, anywhere visitors have several equally valid entry points. A block holding a figure or a quote exists only when the user supplied it (46a).
+
+Avoid when the message is one hero idea. Bento spreads attention; a one-idea page wants Marquee or Stat-Led.
+
+Compositions: Bento and Grid (`layout.md` § 5).
+
+**Sample opening lines** (imitate the specificity, not the wording):
+> *"Distributed tracing that explains itself."* Names the category and the promise in five words (Tracejam).
+> *"An API for sending mail from code."* Names the product class and the reader.
+> *"Everything a small kitchen needs to sell online."* Names the scale and the job.

package/skills/hallmark/references/macrostructures/02-long-document.md

@@ -0,0 +1,35 @@
+## 02 · Long Document
+
+Reads like a memo, a letter or a journal entry. No marketing structure. Continuous prose with inline section heads. The page is literature about the product.
+
+- **Heading:** inline with the body; section heads emerge from the paragraph flow as short bold phrases.
+- **Body:** single column, line-height 1.65 or more, measure 60 to 65ch.
+- **Divider:** negative space; the gap is the divider; at most one centred ornament for emphasis.
+- **Button:** a typographic link inside a paragraph, carrying a verb, never a separate block. It is the fold's one visible action (44b).
+- **Image:** inline, sized to the measure; never full-bleed.
+- **Reveal:** none. The page is simply there.
+
+Reach for it for case studies, founder posts, mission pages, products whose sale is philosophical. The prompt says "tell a story", not "list features".
+
+Avoid when there is one decisive action to take. Long Document hides its actions inside sentences, which is wrong for a transactional page.
+
+Heading: the inline lead-in of [`../craft.md`](../craft.md) § 7, item 3.
+
+```html
+<article class="prose">
+  <p class="lede">…</p>
+  <h2 class="inline">A small heading.</h2>
+  <p>… <a href="#prices">See the prices</a> …</p>
+</article>
+```
+
+```css
+.prose { max-width: 65ch; }
+.prose h2.inline { display: inline; font: inherit; font-weight: 700; letter-spacing: normal; }
+.prose h2.inline + p { display: inline; }
+```
+
+**Sample opening lines** (imitate the specificity, not the wording):
+> *"Saturday, 6:14 a.m. The dough went in at midnight."* Opens on a time-stamp; the brand introduces itself as a moment in the day (Maple Street Bread).
+> *"A monthly publication for people who still read to the end."* Names the cadence and the reader.
+> *"We build one thing, and we have built it for nine years."* A verb, a count, no claim.

package/skills/hallmark/references/macrostructures/03-marquee-hero.md

@@ -0,0 +1,21 @@
+## 03 · Marquee Hero
+
+The hero is the page above the fold. A single statement or visual fills the viewport. Below the fold the page becomes something else (a list, a grid, prose).
+
+- **Heading:** display fills the fold at `clamp(4rem, 10vw, 9rem)` (`craft.md` § 1), hugging the container's edges; an uppercase head that can wrap keeps `line-height` 1.0 or more (55a).
+- **Body:** below the fold, a list of work or one content block; the hero does not continue.
+- **Divider:** a thick rule between hero and below-fold, or a hard change of paper.
+- **Button:** one action in the fold under the statement, with the one sentence (Floor 12, 13): a typographic link or a single button. The statement owns the screen; the action and the sentence sit small at its foot.
+- **Image:** none in the fold (typography is the visual), or a single full-bleed photograph as the fold's background.
+- **Reveal:** the fold is static; below-fold may sweep in horizontally.
+
+Reach for it when the brand or the person is the message: designer and director portfolios, indie products with one declarative voice, any "this is who we are" page.
+
+Avoid for products whose value needs explaining in seconds. Marquee makes the visitor scroll before they understand.
+
+Compositions: a Poster or Corridor hero (`layout.md` § 6); below it, Rows, Grid or a Showcase (§ 5).
+
+**Sample opening lines** (imitate the specificity, not the wording):
+> *"Type, set with care."* Three words, refusal of the verb, treats type as material.
+> *"A studio for what comes next."* Names the practice without explaining it.
+> *"Print discipline, on screen."* Two phrases, a promise about method.

package/skills/hallmark/references/macrostructures/04-stat-led.md

@@ -0,0 +1,21 @@
+## 04 · Stat-Led
+
+The hero is a figure the user gave, with the line that says what it means. Everything that follows supports or qualifies it. Data is the narrative.
+
+- **Heading:** a large numeric display at graphic scale (`craft.md` § 7, tabular figures) paired with a worded headline. The figure is the biggest element and never the hero's only words: say what it means beside or beneath it as a real headline, not a small label. Read them together: *"Four seconds. From the alert link to the slow span."*
+- **Body:** sections each anchored by a supporting figure or chart.
+- **Divider:** hairline rules between figure blocks; `tabular-nums` everywhere.
+- **Button:** an outlined chip beneath the qualifier, labelled with a verb ("Read the report").
+- **Image:** charts and data-viz per [`../data-viz.md`](../data-viz.md); product photographs only in the slots the user asked for.
+- **Reveal:** number-tick on the hero figure, from 0 to the target over `--dur-long`, legal only because the figure is real; the markup holds the final figure, so it reads with scripting off and under reduced motion (62).
+
+Reach for it when the prompt says "we have proof in numbers": enterprise and B2B, fundraising, climate and impact pages.
+
+Avoid when the user has not given a number. Every figure on this page is the user's, with its unit and its source (46a); a bare figure with no worded line fails 46b. A fake big number is worse than no number.
+
+Compositions: Figures for the supporting row, Rows for the qualifiers (`layout.md` § 5).
+
+**Sample opening lines** (the number is the user's; imitate how the words complete it):
+> *"Four seconds. From the alert link to the slow span."* The figure, then what it bought (Tracejam).
+> *"[the user's count] posts. New CSS you could use today."* A count grounds the page in real volume.
+> *"[the user's rate] faster, so the team can decide late."* A rate, then the behaviour it allows.

package/skills/hallmark/references/macrostructures/05-workbench.md

@@ -0,0 +1,21 @@
+## 05 · Workbench
+
+Real product captures are the primary content. The page is a guided tour of the app in use, with short captions in place of marketing copy.
+
+- **Heading:** plain and functional at the section size; the captures do the talking.
+- **Body:** a sequence of capture blocks, each a `<figure>` with a `<figcaption>` that states a fact and one inline annotation.
+- **Divider:** the figure is the divider; sections separate by gap and figure.
+- **Button:** the hero's one action (44b), then, where the theme allows a sticky element, a bottom bar carrying it after the third capture, labelled with the verb ("Start a project").
+- **Image:** the real capture, unframed, in a `<figure>`; until the user supplies it, the product built in a `data-slot` (`imagery.md` § 4). No browser or device chrome (47a, 47b).
+- **Reveal:** one type-unmask, on the first caption; the captures load instantly and the rest is simply there.
+
+Reach for it for SaaS, developer tools, editor extensions, anywhere seeing the product in use is the sale.
+
+Avoid when the product is conceptual or services-led. Workbench needs a UI to show.
+
+Compositions: Showcase and Split for the captures, a Band for the close (`layout.md` § 5); the optional bar is a sticky bottom bar with one action at `--z-sticky`.
+
+**Sample opening lines** (imitate the specificity; the page walks the visitor through):
+> *"$ streampipe parse access.log --filter status=5xx | jq"* Opens on a real command, not a claim.
+> *"Read anything that emits lines: files, pipes, sockets, kubectl logs."* Names the inputs, refuses abstraction.
+> *"Open the trace, find the span, fix the regression."* Three concrete verbs.

package/skills/hallmark/references/macrostructures/06-conversational-faq.md

@@ -0,0 +1,28 @@
+## 06 · Conversational FAQ
+
+Bold questions, prompt answers. The page reads like an honest interview with the product. Each pair may be a disclosure.
+
+- **Heading:** each section is a question: a short direct phrase ending in `?`.
+- **Body:** the answer in one or two short paragraphs directly under the question.
+- **Divider:** a hairline between pairs, or no rule and a change of paper.
+- **Button:** a typographic link inside an answer, carrying a verb ("Read the policy"); one outlined CTA at the foot.
+- **Image:** sparse; at most one diagram per long answer.
+- **Reveal:** none on load; a disclosure opens over `--dur-long` with `--ease-out` on `grid-template-rows` from `0fr` to `1fr`.
+
+Reach for it near pricing, for products that meet scepticism, for regulated or educational fields.
+
+As the primary page it opens with a hero that asks the first question; otherwise it pairs with another shape that opens the page.
+
+```html
+<section class="faq">
+  <details>
+    <summary><h2>How long does setup take?</h2></summary>
+    <div class="answer"><p>…</p></div>
+  </details>
+</section>
+```
+
+**Sample opening lines** (questions are real questions; answers are short and concrete):
+> *"What is this for? A single-binary CLI for parsing log streams from stdin."* Names the form factor and the input (Streampipe).
+> *"How is it different? It runs where the logs are, so nothing leaves the box."* Answers with a fact, not a comparison.
+> *"Who built this? Three of us, in Lisbon, since 2014."* Date, place and count; no marketing.

package/skills/hallmark/references/macrostructures/07-manifesto.md

@@ -0,0 +1,28 @@
+## 07 · Manifesto
+
+Polemical large type. The page tells the reader what to believe before it tells them what to buy. Often a poster's posture.
+
+- **Heading:** uppercase display, tilted slightly (`-2deg` to `-4deg`) or set straight; one weight and one colour throughout, stress from a line break, never from a coloured or italic word (38i, 38iii); `line-height` 1.0 or more when it can wrap (55a). A theme whose signature is an accented word stamps the 38iii waiver and places it once, in the hero.
+- **Body:** short paragraphs, each one assertion, large enough to read across the room.
+- **Divider:** changes of paper between sections, or the theme's own rules; never a card.
+- **Button:** one solid block in the accent; the fold carries it beside or under the declaration (44b), and it returns at the foot as the page's last word.
+- **Image:** none when the cause is an idea; when it is physical (repair, housing, a river), photographs of it in the theme's treatment, one a screen at most.
+- **Reveal:** one horizontal sweep, on the first claim below the fold; the rest is simply there.
+
+Reach for it for repositioning announcements, mission-led indie products, a studio's beliefs page.
+
+Avoid for checkout, pricing or a product tour. Manifesto sells agreement; a call to show up, sign or join is its one action.
+
+```html
+<section class="manifesto bleed-ink">
+  <h1 class="caps display-xxl">We believe<br>design is slow.</h1>
+</section>
+<section class="bleed-paper">
+  <p class="claim">It costs less than the rework you will do without it.</p>
+</section>
+```
+
+**Sample opening lines** (manifestos commit; they do not hedge):
+> *"We are a studio. We are not a platform."* Defines by refusal, one colour (Meridian).
+> *"We design products that last twelve years. We do not design products that need replacing every two."* A concrete number, a paired declaration.
+> *"Lightness above weight."* A one-line principle, no explanation.

package/skills/hallmark/references/macrostructures/08-photographic.md

@@ -0,0 +1,21 @@
+## 08 · Photographic
+
+Huge photographs lead the page. Text is small annotation, not headline. The design says look before it says read.
+
+- **Heading:** small: the headline and its one sentence sit on a paper plate at the image's base, and a caption near a corner carries a fact in the body face; never a centred display.
+- **Body:** full-bleed photograph bands alternating with sections the theme's material carries alone (its Range: a menu as rows, the hours as a table, a statement), so photographs cover up to about 45% of the page below the hero and never lead two sections in a row (83).
+- **Divider:** the image edge is the divider; no rules.
+- **Button:** a typographic link on the plate, under the sentence, carrying a verb; it is the fold's one visible action (44b).
+- **Image:** the whole point: full-bleed, edge to edge, from the user; library photographs in slots until theirs arrive (`imagery.md` § 2).
+- **Reveal:** no spatial motion; the photographs do the work.
+
+Reach for it for fashion, hospitality, photography portfolios, lifestyle commerce, any brand whose product is a feeling.
+
+Avoid when the subject has nothing to photograph.
+
+Compositions: the Poster hero (`layout.md` § 6) and full-bleed Showcases (§ 5).
+
+**Sample opening lines** (captions are dates, places and plate numbers, not marketing):
+> *"Plate 47, scored before the proof."* A number and a moment in the process (Maple Street Bread).
+> *"Spring, 2026."* Two words, full stop.
+> *"From the working archive."* Gives the photograph provenance without explaining it.

package/skills/hallmark/references/macrostructures/09-quote-led.md

@@ -0,0 +1,21 @@
+## 09 · Quote-Led
+
+The hero is a quote the user supplied, with its attribution. The headline is someone else's voice.
+
+- **Heading:** italic display setting the quote at `--text-display-s`, attribution below in the body face, one quiet line. The italic is the whole head, declared on the display (38ii guard), never one word.
+- **Body:** more supplied quotes, case studies or a quiet feature list.
+- **Divider:** a centred quote-mark glyph or a short rule between quotes.
+- **Button:** a typographic link beneath the attribution, carrying a verb ("Read the case study").
+- **Image:** the real person's photograph or the company's mark beside the attribution, or nothing.
+- **Reveal:** none in the fold; below the fold may stagger.
+
+Reach for it for B2B products with strong customer voices, agency case-study pages, fundraising sites, anywhere "people like me use this" is the unlock.
+
+Avoid when the user has not supplied the quote. The quote is the user's, verbatim, with the name, role and company as given, or the shape does not ship (46a). Never write one, never paraphrase one.
+
+Compositions: the quote as a Statement (`layout.md` § 5), its attribution beneath; further quotes the user gave as Rows.
+
+**Sample opening lines** (fixture quotes; on a build only the user's words go here):
+> *"I started listening on a long bus ride. By the third episode I had missed my stop, and I did not mind."* Story-shaped, attributed to a listener (Tide).
+> *"Restraint, repeated, becomes a signature."* Short and philosophical, signed by the studio.
+> A supplied outcome quote works the same way: the customer's own sentence, the number theirs, the attribution as given.

package/skills/hallmark/references/macrostructures/10-specimen.md

@@ -0,0 +1,21 @@
+## 10 · Specimen
+
+Large serif display, asymmetric column spans, hairline rules, a typographic CTA, generous whitespace. The voice of a foundry, a journal or a press.
+
+- **Heading:** a large serif phrase, standing alone. When the run is genuinely ordinal the figure is generated on the heading itself (`<ol>` with `counter()`); a number typed beside or above it is an eyebrow (54).
+- **Body:** asymmetric spans: a narrow marginalia column (captions, dates, sidenotes) beside a wide content column.
+- **Divider:** hairline rules between sections.
+- **Button:** a typographic link carrying a verb ("Open your studio"); no box, no fill, no arrow (63).
+- **Image:** none, or one photograph of the face in print (a poster, a sign, a book spread) from the library or the user.
+- **Reveal:** fade-up stagger on first load.
+
+Reach for it when the prompt is about type, publishing or writing (a foundry, a journal, a press, a specimen sheet), or the user names it; the editorial genre alone does not qualify. On any other prompt pick another shape: this is the field's most-copied look, and a vague prompt that lands here has not been read.
+
+Avoid for product pages that need a demo; Specimen has nowhere to put one.
+
+Compositions: Rows and a Statement (`layout.md` § 5); the action is a typographic link.
+
+**Sample opening lines** (foundry voice, treating type as material culture):
+> *"A quiet instrument."* Refusal of the verb.
+> *"Type, set with care."* Three words.
+> *"Set by hand, since 2003."* Date-anchored, names the method.

package/skills/hallmark/references/macrostructures/11-catalogue.md

@@ -0,0 +1,21 @@
+## 11 · Catalogue
+
+Uniform grid of variations of the same thing: typefaces, palettes, SKUs. The page is a visual index of inventory.
+
+- **Heading:** one line at the theme's display scale over the grid; the products lead, so the heading never pushes the first row below the fold.
+- **Body:** a grid of same-sized cards, 3 to 5 per row, each one variant of the core product; image tracks `minmax(0, 1fr)` (50).
+- **Divider:** hairline rules between rows.
+- **Button:** a link inside each card to its detail page; no global CTA. The fold's one visible action is the first card's link (44b).
+- **Image:** a specimen thumbnail or a swatch per card when the user gave the images; otherwise a library photograph of the kind of thing, or each card set in type (the name, the one fact, the price, a colour swatch where colour is the variant), never a row of empty frames (68).
+- **Reveal:** none.
+
+Reach for it for foundries, palette tools, font shops, colour systems, capsule collections.
+
+Avoid for narrative brands. Catalogue treats every item as equal, wrong for a product with hierarchy.
+
+Compositions: Grid (`layout.md` § 5), one card per item: its image, name, price and one action.
+
+**Sample opening lines** (inventory headers: dated, with a count):
+> *"Today's loaves."* Two words, ownership of the day (Maple Street Bread).
+> *"Five collections, in store now."* The count and the where.
+> *"Thirty-eight pieces this spring, every one hand-stitched."* Count, season, qualifier; no adjectives.