@palate/cli 0.0.0-stage → 0.0.1

package/kb/sections/book-a-slot-honest.md

@@ -0,0 +1,116 @@
+---
+id: book-a-slot-honest
+name: Book a slot, honestly
+kind: signup
+shape: form-led
+layout: "split: the opening times and how it works on one side; a short booking form on the other (service with its price, day, drop-off slot as a short list of times, name and phone); what happens next and the walk-in alternative stated under the button"
+fits: [local, honest, friendly, trustworthy, crafted, health, hardware]
+avoid: [saas, developer, b2b, enterprise]
+needs: ["the services people book, each with its real price or ‘from’ price", "the real opening times and drop-off windows", "what happens after booking (a confirmation text, a photo when it's ready)", "the walk-in alternative, if there is one", "a booking endpoint, or the honest fallback: a request confirmed by text or phone"]
+imagery: none
+density: balanced
+effort: m
+---
+
+## When it's right
+
+A local service books people into time slots: a bike shop's service drop-off (Torque Cycles: drop off before 9, ride home the same evening), an alterations shop's 10-minute drop-off (Patch & Mend), a class seat (Bramble Bindery, 6 people a Saturday), a physio or a barber. The visitor wants to know three things before they commit: what it costs, when they can come, and what happens next.
+
+The median build embeds a booking widget that looks like enterprise scheduling software: a month grid of tiny dates, a timezone dropdown, a progress stepper, an account to create. Or it fakes scarcity (“Only 2 slots left!” on every day). This archetype is a short, honest form beside the opening times, with the price shown before anything is asked, availability stated only when it is real, and the walk-in option said out loud.
+
+Not for food pre-orders (use `order-ahead-ticket`), for multi-staff calendars with many service types (use a real booking system and link to it), or for enquiry-only businesses (a plain contact form and a reply time).
+
+## Structure
+
+```
+1440 ─ container 1240; words cols 1–5, form cols 7–12
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "Book a service"                  ┌ form, on --surface, --r-lg, --shadow-1 ─────────┐ │
+│                                      │ Service                                          │ │
+│ Drop it off before 9,                │ (•) Standard Service              $129           │ │ ← radios as a ruled list,
+│ ride it home after 5.                │ ( ) Safety Check                   $49           │ │   price right, tabular
+│ ← --t-lead                           │ ( ) E-bike Service           from $169           │ │
+│                                      │ ( ) Full Overhaul                 $289           │ │
+│ Open                                 │ ──────────────────────────────────────────────── │ │
+│ Mon–Fri   7:30 am – 6:30 pm          │ Day        [ Thu 6 Nov ▾ ]                       │ │ ← native select / date
+│ Sat       9 am – 4 pm                │ Drop off   ( ) 7:30–8:00  (•) 8:00–8:30          │ │ ← 3–6 windows, in words
+│ Sun       closed                     │            ( ) 8:30–9:00                         │ │
+│ ───────────────────────────          │            3 same-day slots left on Thursday     │ │ ← only if live
+│ Every service ends with a text       │ Name       [______________________]              │ │
+│ and a photo of what we replaced.     │ Phone      [______________________]              │ │
+│ Need a bike meanwhile? Loan          │ Note       [ "back brake squeals" (optional) ]   │ │
+│ bikes $10/day.                       │                                                  │ │
+│                                      │ [ Book Standard Service · $129 ]                 │ │ ← one primary, price in label
+│ Just a flat? No booking: walk in,    │ Pay when you collect. No account needed.         │ │ ← reassurance, --t-small
+│ under 15 minutes, $25.               │ We'll text to confirm within the hour.           │ │
+│                                      └──────────────────────────────────────────────────┘ │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ side padding 16; the promise, then the form, then hours
+┌──────────────────────────────┐
+│ H2                           │
+│ Drop it off before 9 …       │
+│ ┌ form ────────────────────┐ │
+│ │ Service radios, ruled    │ │
+│ │ Day [ select ]           │ │
+│ │ Drop off: radios, 2 cols │ │
+│ │ Name / Phone             │ │
+│ │ [ Book … $129 ] full     │ │
+│ │ Pay when you collect…    │ │
+│ └──────────────────────────┘ │
+│ Walk-in line                 │
+│ Opening times table          │
+└──────────────────────────────┘
+```
+
+At 390 the one-line promise and the form come first; the opening times and the walk-in line follow. Radios are 44px rows; inputs 16px text; the slot windows wrap into two columns. Nothing in a modal.
+
+## Finish
+
+- Form surface: `--surface`, `--r-lg`, `--shadow-1`, padding `--s-6`; inputs nest at `--r-sm` (`_finish.md` radius nesting). Labels above or left of fields, `--t-small` weight 500, `--ink`.
+- Service list: native radios restyled as a ruled list, each row 48px with a 1px `--hairline` between, name left in `--t-body`, price right in `tabular-nums` (“from $169” where it varies). The selected row gets weight 600 and a 2px `--ink` rule at its left edge, not a filled coloured card.
+- Day: a native `<select>` of the next 10–14 open days (closed days omitted), or a native date input. No month-grid calendar for a shop that takes drop-offs on weekdays.
+- Drop-off windows: 3–6 radio options as plain text times. Availability shown in words under them only when it comes from the shop's real system (“3 same-day slots left on Thursday”); full windows are disabled with “full” after the time, never hidden.
+- Primary button: the page's `.btn-primary` (its button language), full form width, label includes the service and price (“Book Standard Service · $129”) so the visitor sees what they're agreeing to.
+- Reassurance under the button: `--t-small`, `--ink-2`: how payment works, no account, when they'll hear back.
+- Words column: the promise in `--t-lead`; hours as a small `<table>` (`tabular-nums`, hairlines, today's row in weight 600); what happens after the service; the walk-in alternative in its own short paragraph.
+- Ground: `--paper`; the form is the only raised surface. A real photograph of the workshop bench may sit above the words, captioned, if the page has one; never stock.
+
+## Content
+
+- Real services and prices from the shop. If a price varies, say “from” and what makes it vary.
+- Opening times and drop-off windows as the shop really runs them.
+- What happens next in sentences: confirmation by text within an hour; a photo of what was replaced; collection after 5.
+- The walk-in option (“Flat Fix While You Wait, no booking”) and loan bikes or other honest extras.
+- Ask only for what's needed: name, phone (or email), an optional note. No account, no address unless it's a pickup service.
+- No invented scarcity. “3 slots left” only from live data; otherwise say nothing.
+
+## States and motion
+
+- No-JS: the form posts to the shop's endpoint and returns a plain confirmation page; if there's no endpoint, the form is a request (“We'll text to confirm”) and says so in the button's reassurance line.
+- Validation: on submit, errors under each field in `--t-small` with a plain fix (“Add a phone number so we can text you”); focus moves to the first error.
+- Sending: the button reads “Booking…” and is disabled; no full-screen spinner.
+- Confirmed: the form is replaced in place by a short note in words: “Booked: Standard Service, Thursday 6 November, drop off 8:00–8:30. We've texted 04xx xxx 123. Pay when you collect.” plus “Add to calendar” as a secondary link. No status tracker, no confetti.
+- Full day: the windows show “full” and a line suggests the next day with space.
+
+## Pitfalls
+
+- An embedded enterprise scheduling widget with a month grid, timezone selector and account creation.
+- A numbered stepper (“1 Service · 2 Time · 3 Details · 4 Confirm”) for a four-field form.
+- Fake scarcity or countdowns.
+- Price revealed only after the visitor has entered their phone number.
+- Service options as icon cards with badges and pills (“Popular”, “Fast”): app chrome on a workshop.
+- No mention of the walk-in alternative when there is one, so people book what they didn't need to.
+
+## Floor checks
+
+- Is every bookable service shown with its price (or a ‘from’ price) before the visitor gives any details?
+- Are the opening times (or, for a business without a counter, how soon a reply comes) visible near the form?
+- Is the form short (service, day, time, name, contact) with no account required?
+- Does the page say what happens after booking, in words?
+- Is there exactly one primary button, naming what is being booked?
+- Is the section free of month-grid widgets, step indicators, status pills and icon cards with badges?
+- Is any availability or scarcity message plainly factual rather than a countdown or ‘hurry’ banner?
+- At 390, are the form fields and options large enough to tap, with nothing scrolling sideways?

package/kb/sections/capability-prompt-ledger.md

@@ -0,0 +1,68 @@
+---
+id: capability-prompt-ledger
+name: What it can do, one prompt each
+kind: docs
+shape: stacked-rows
+layout: "one ruled row per thing the product can do: its name and one sentence on the left; on the right an example prompt in the user's words (copyable), what happens next in two or three short steps, and the command or tool it maps to"
+fits: [docs, developer, ai, technical, productivity, saas, honest, friendly, calm, education]
+avoid: [cinematic, luxury, fashion, kids]
+needs: ["each real capability, named the way the product names it", "an example prompt per capability, in the words a user would type", "what actually happens after the prompt"]
+imagery: none
+density: balanced
+effort: s
+---
+
+## When it's right
+
+Products people drive by asking (agents, assistants, CLIs with natural-language input): the fastest way to learn them is to see the exact words to type and what follows. Each row is a capability someone can try in a minute. Not for products driven by a UI (show the UI) or for a list of twenty small features (that's a reference table).
+
+## Structure
+
+```
+reading column, or the container at 1440 with two columns per row
+──────────────────────────────────────────────────────────────────────────
+Fix it in place                  "the headings are three different sizes"   [Copy]
+A small change, made and         → changed in place, one screenshot to check
+checked once. No loop.           → about 12k tokens
+                                 palate plan · direct
+──────────────────────────────────────────────────────────────────────────
+Build a page                     "build the pricing page"                    [Copy]
+...
+```
+
+```
+390 ─ each row stacks: name, sentence, prompt card, steps, the command
+```
+
+## Finish
+
+- Rows divided by hairlines, 32–40px padding; the name at H3 (18–20px, 500), the sentence small and secondary, 36ch.
+- The prompt: set as speech, in the body face (not mono), at lead size, in quotes, on a faint tint card with a copy button; it reads like something a person says.
+- Steps: two or three short lines with a quiet arrow or number, small, secondary; numbers that matter (time, tokens) tabular.
+- The command or tool name last, in mono, small, as a link to its reference entry.
+
+## Content
+
+- Name capabilities the way the product does; no invented feature names.
+- Prompts in lowercase, casual, the way people actually type them.
+- What happens is honest, including cost and time where the product reports them.
+
+## States and motion
+
+- Copy: "Copied" for 2s on the prompt card.
+- Rows have ids for deep links (`#fix`, `#build`).
+- No hover animation on rows; they're reading, not cards.
+
+## Pitfalls
+
+- Feature cards with icons and no example of how to use them.
+- Prompts written as marketing ("Effortlessly craft stunning pages").
+- Every row the same length because the copy was padded to fit.
+
+## Floor checks
+
+- Does every capability have an example prompt a user could type as is?
+- Can each prompt be copied with one click?
+- Does each row say what happens after the prompt?
+- Are the rows ruled and scannable rather than identical boxed cards?
+- At 390, does each row stack cleanly with the prompt full width?

package/kb/sections/case-study-band.md

@@ -0,0 +1,113 @@
+---
+id: case-study-band
+name: One project told as a band of pictures and facts
+kind: story
+shape: editorial-columns
+layout: "one project across the full container: a lead picture large, 2–4 supporting pictures in a measured sequence, a narrow facts column (client, place, year, size, team, materials) and 2–3 short paragraphs on what the brief was and what was made; ends with a link to the full project"
+fits: [portfolio, agency, editorial, crafted, artsy, quiet, premium, cultural]
+avoid: [saas, developer, b2b, data-dense-tool]
+needs: ["one finished project with 3–5 real pictures (the whole, a detail, the people or place in use)", "the project's facts: client or subject, place, year, size or run, team, materials or medium", "2–3 short paragraphs from the maker: the brief, the decision that mattered, the result", "a quote from the client, with permission (optional)"]
+imagery: photo
+density: balanced
+effort: m
+moves: [editorial-grid-pull-quotes]
+---
+
+## When it's right
+
+A practice wants a visitor to understand how it thinks, and one project told properly does that better than twenty thumbnails. An architect's school, a photographer's whole wedding day, a print studio's tour poster run, a score built from estuary recordings. The band reads like a spread in a monograph: pictures sized by importance, the facts in a narrow column, a few paragraphs in the maker's voice about the one decision that made the project.
+
+Use one or two per page, after a `gallery-first-hero` or before a `project-index-ruled`. Not for projects without real pictures and facts, and not as a template repeated six times down a page (that is a portfolio grid in disguise: use `project-index-ruled`).
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols, gutter 24
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ Lia Skole                                                                    2024        │ ← project name as H2, year right
+│ A primary school for 420 pupils in Malvik                                                │   one line under it, ink-2
+│                                                                                          │
+│ ┌ lead picture, cols 1–12, 16:9 or 3:2 ─────────────────────────────────────────────────┐│
+│ │                                                                                       ││
+│ │                    the whole building in its place                                    ││
+│ │                                                                                       ││
+│ └───────────────────────────────────────────────────────────────────────────────────────┘│
+│ ┌ facts, cols 1–3 ─┐  ┌ text, cols 4–8 ────────────────┐  ┌ detail, cols 9–12, 4:5 ────┐ │
+│ │ Client           │  │ The brief asked for a school    │  │                            │ │
+│ │ Malvik kommune   │  │ that could grow by two classes… │  │   a detail: the glulam     │ │
+│ │ Size  5,900 m²   │  │                                 │  │   joint at the stair       │ │
+│ │ Structure  CLT,  │  │ “A school should feel like a    │  │                            │ │
+│ │ glulam           │  │  good morning.”                 │  └────────────────────────────┘ │
+│ │ Carbon  −41%     │  │                                 │  The stair, first morning      │
+│ │ Team  …          │  │ Read the full project →         │                                │
+│ └──────────────────┘  └─────────────────────────────────┘                                │
+│ ┌ in use, cols 1–7, 3:2 ──────────────────┐ ┌ plan or second detail, cols 8–12 ────────┐ │
+│ └─────────────────────────────────────────┘ └──────────────────────────────────────────┘ │
+│ Photographs: Ivar Hagen                                                                  │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column in reading order
+┌──────────────────────────────┐
+│ Lia Skole              2024  │
+│ A primary school for 420 …   │
+│ ┌──────────────────────────┐ │
+│ │ lead picture, 4:5 crop   │ │
+│ └──────────────────────────┘ │
+│ The brief asked for …        │ ← text before facts on phone
+│ “A school should feel …”     │
+│ Client     Malvik kommune    │ ← facts as label/value rows
+│ Size       5,900 m²          │
+│ ┌──────────────────────────┐ │
+│ │ detail, 4:5              │ │
+│ └──────────────────────────┘ │
+│ Read the full project →      │
+└──────────────────────────────┘
+```
+
+At 390: name and year, the lead picture in its phone crop, the paragraphs, the facts as label/value rows with hairlines, then at most two more pictures (the rest stay on the project page), then the link. Never taller than 3 phone screens.
+
+## Finish
+
+- Pictures: one treatment for all (`_finish.md`), two aspect ratios for the band (e.g. 3:2 and 4:5), `width`/`height` set, no cards, no shadows, radius none or `--r-sm`. The lead picture runs the full container width; supporting pictures are smaller in proportion to their importance, never a row of equals.
+- Facts column: a definition list. Labels `--t-caption` caps +0.08em, `--ink-2`; values `--t-small`, `--ink`, `tabular-nums` for sizes, years and percentages, with units. 1px `--hairline` between pairs. Top-aligned with the first paragraph's cap height.
+- Text: `--t-body` at 17–18px, max 62ch, `text-wrap: pretty`, first person plural or singular as the practice speaks. A pull quote (client or maker) in the display face at `--t-h3`, hanging punctuation (`_finish.md`), with the person's name and role under it.
+- H2: the project's name in the display face at `--t-h2`; the year right-aligned on the same baseline in `--t-small` `tabular-nums`.
+- Captions: under supporting pictures, `--t-caption`, `--ink-2`, saying what the picture shows ("The stair, first morning"), not repeating the project name. Photographer credit once, at the band's end.
+- Spacing: lead picture to the columns `--s-7`; between pictures `--s-5`; the band's internal rhythm never uses more than two gaps (P12).
+- Link to the project page as a text link with an arrow, under the text.
+
+## Content
+
+- The brief in one sentence, the decision that mattered in one paragraph ("we kept the corridor wide enough to be a classroom"), the result in one sentence with a real number if there is one.
+- Facts only if true and published; the carbon figure says what it is measured against.
+- Pictures show the whole, a detail that proves care, and the thing in use (pupils, guests, the poster on a wall). Real photographs, credited.
+- Client quote with permission and their real name and role; otherwise none.
+- No "we're passionate about", no "elevating spaces".
+
+## States and motion
+
+- Static. Pictures below the lead lazy-load with their dominant colour as background.
+- Each picture can open larger (a link to the full image or the project page); focus ring follows the picture's edge.
+- Optional with move `view-transitions-between-pages`: the lead picture morphs into the project page's hero.
+- Reduced motion: nothing moves; no-JS: everything is visible as above.
+
+## Pitfalls
+
+- Six pictures of equal size in a grid, which reads as a stock gallery, not a told project.
+- The facts column turned into stat tiles with big numbers and icons (a dashboard in a portfolio).
+- Tag pills for disciplines ("Architecture", "Interiors").
+- Long paragraphs of process jargon; the band is read in a minute.
+- A carousel of the project's pictures.
+- Pictures without captions or credit.
+
+## Floor checks
+
+- Is one project told with a large lead picture and smaller supporting pictures, rather than a grid of equal tiles?
+- Is there a narrow column of real project facts (client or subject, place, year, size or run) set as label and value?
+- Are there two or three short paragraphs (each under about 80 words) explaining the brief and what was made?
+- Are the facts and labels free of stat tiles, icons and tag pills?
+- Do the supporting pictures carry short captions, with a photographer credit for the band?
+- Is there a clear link to the full project?
+- At 390, does the band read in a single column (name, picture, text, facts) without sideways scrolling?

package/kb/sections/centred-stack-hero.md

@@ -0,0 +1,107 @@
+---
+id: centred-stack-hero
+name: Centred lockup over a full-width product object
+kind: hero
+shape: centred-stack
+layout: "a short centred lockup (headline ≤ 2 lines at 56–80px, lead ≤ 2 lines, one primary and one link) and directly under it a rich product object 1000–1240px wide whose top shows on the first screen; the object is most of the hero's area"
+fits: [saas, developer, productivity, ai, b2b, launch, consumer, technical, friendly]
+avoid: [editorial, heritage, luxury, artsy, crisis, food, portfolio]
+needs: ["a product UI rich enough to fill 1000px+ with real content", "a headline of ten words or fewer", "one clear first action"]
+imagery: product-ui
+density: balanced
+effort: m
+moves: [self-playing-product-demo, product-in-context, screenshot-detail-crops]
+---
+
+## When it's right
+
+The centred stack is the most common hero on the web, which is why it is allowed only on strict terms. It is right when the product is broad (several kinds of user, several surfaces), the headline is short and symmetric, and the product object below is rich enough to carry the page. The lockup is a label on a big object; the object does the work. Done well (short words, huge real product, nothing else), it is calm and confident.
+
+Done badly (a pill badge, a two-line gradient headline, three buttons, a small screenshot far down), it is the AI default page. If the object is modest, use `split-hero-live-object`. If the product object should dominate even more, use `object-first-hero`.
+
+## Structure
+
+```
+1440 ─ container 1240
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ nav ──────────────────────────────────────────────────────────────────── [Secondary][Pri]│
+│                                                                                          │
+│                    H1 56–80px, max 2 lines, centred, max 16ch per line                   │
+│                    lead 18–20px, max 2 lines, centred, max 52ch                          │
+│                          [Primary action]   link →                                       │
+│                                                                                          │
+│  ┌ product object: 1000–1240 wide (≥ 80% of the container), radius 20, shadow-2 ──────┐ │
+│  │ chrome: the product's own bar                                                        │ │
+│  ├─────────┬───────────────────────────────────────────────────────────────────────────┤ │
+│  │ ▤ nav   │ real working area, full of real content, one thing happening              │ │
+│  │ ▤       │                                                                           │ │
+│  │ ▤       │                                                                           │ │
+│  │         │                                                                           │ │
+│  └─────────┴───────────────────────────────────────────────────────────────────────────┘ │
+│   object top ≤ 520px from the page top at 1440×900; object height 560–720;              │
+│   bottom half sits on a paper-2 band that continues into the next section               │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column, side padding 16
+┌──────────────────────────────┐
+│ nav            [Pri]  ☰      │
+│      H1 36–44px, centred,    │  ← 3 lines max at 390
+│      3 lines max             │
+│      lead 16px, 3 lines      │
+│ [Primary action, full width] │
+│           link →             │
+│ ┌ object, cropped ──────────── │  ← working area only, bleeds off the right,
+│ │ text ≥ 12px                │    top within the first 640px
+│ └─────────────────────────── │
+└──────────────────────────────┘
+```
+
+At 390 the lockup stays centred because it is short (centred multi-line is fine at 3 lines, never more). The object is cropped to its working area at readable scale and bleeds off the right edge (`overflow-x: clip` on the hero), 400–480px tall. The top of the object must appear on the first screen.
+
+## Finish
+
+- Lockup: everything centred as one unit (P03): H1, lead, actions. H1 `--t-display` (56–80px), weight 600, tracking −0.03em, leading 1.0, `text-wrap: balance`, `max-width: 16ch`. Lead `--t-lead`, `--ink-2`, `max-width: 52ch`, `text-wrap: balance`. H1 → lead `--s-5`, lead → actions `--s-6`, actions → object `--s-8`.
+- Top padding under the nav `--s-9` at most; if the object's top would fall below 520px at 1440×900, reduce it to `--s-8` rather than shrinking the object.
+- Actions: one primary and its secondary in the page's button language (`.btn-primary`, `.btn-secondary`), side by side, centred together. Never two primaries of equal weight (P09).
+- Bleed: the object is cut by the hero's bottom edge or runs into the `--paper-2` band, never floating with a margin under it. The cut goes through filler (later rows, the foot of a sidebar), never through the moment the headline names. One frame style per page: every product window, screenshot and device uses the same radius, the same edge (a shadow or a border, not both) and the same shadow level, the system's product frame from `_finish.md`.
+- Object: the product frame from `_finish.md`, `--r-lg`, `--shadow-2`, ≥ 80% of the container width; panes nested with concentric radii; text 13px+ at 1440 (P40).
+- Ground plan: `--paper` above, a `--paper-2` band beginning at about 55% of the object's height (`_finish.md` background planning), so the object sits across the change. No glow, beams, grid backgrounds or gradient blobs behind it (M20, M12).
+- Type colour solid ink: no gradient headline (M02), no purple or indigo unless it is truly the brand (M01).
+
+## Content
+
+- H1: ten words or fewer, says what the product does. Centred type only works short.
+- Lead: who it is for and the mechanism, two lines.
+- Primary action: the real first step. Link: one secondary path.
+- Object: the product's main view populated with the project's real vocabulary and plausible data. If the product has several surfaces, pick the one where the value happens; do not tile four small screenshots.
+- No badge above the headline unless it announces dated, real news and links to it (M07). No logos under the buttons.
+
+## States and motion
+
+- First paint: complete lockup and object (no `opacity: 0`, M45).
+- One live moment inside the object: a 4–8s loop or a full run (move `self-playing-product-demo`), paused off screen, on hover, focus and under reduced motion (end frame shown).
+- Optional: the object rises 24px into place once on load over 600ms, only if it starts visible (translate, not opacity from 0); off under reduced motion.
+- Long translations: the H1 may wrap to three lines; reduce `--t-display` one step rather than letting it reach four.
+
+## Pitfalls
+
+- Centred paragraphs longer than two lines (M06).
+- The pill badge above the H1 (M07) and an accented or gradient word in the H1 (M02, M14).
+- Purple-to-indigo hero gradient (M01) or a blurred glow behind the product (M20).
+- A small screenshot at 60% width far below the fold: then it is just a centred text hero, the weakest hero there is.
+- Three buttons, or two filled buttons of equal weight (P09).
+- Fake browser chrome around the object (M19).
+
+## Floor checks
+
+- Is the product object at least 80% of the content container's width at 1440?
+- Does the top of the product object appear on the first screen at 1440×900?
+- Does the object run off the hero's bottom edge (or into the next band) rather than floating with a margin all round, and is the part that edge cuts secondary UI rather than the part the headline describes?
+- Is the object rich with real-looking content across most of its area, not mostly empty or skeleton?
+- Is the headline at most two lines and the lead at most two lines?
+- Is there exactly one primary action, with any second action visibly quieter?
+- Is the hero free of a pill badge above the headline, gradient headline text and glow blobs behind the object?
+- Is the text inside the product object readable at 100% zoom?
+- At 390, does the top of the product object appear on the first screen, cropped to a readable part?

package/kb/sections/closing-demo-final-state.md

@@ -0,0 +1,81 @@
+---
+id: closing-demo-final-state
+name: The demo's final state, and one action
+kind: closing
+shape: object-first
+layout: "the product shown at the end of the job the page has been demonstrating (the finished, shipped, resolved state), large, with one line and one action beneath it"
+fits: [saas, developer, ai, productivity, crafted, calm, technical, b2b, premium, minimal, cinematic]
+avoid: [crisis, government, enterprise-compliance, food, portfolio]
+needs: ["a demo or story earlier on the page with a clear end state", "the product UI buildable in HTML in that end state", "one primary action"]
+imagery: product-ui
+density: airy
+moves: [self-playing-product-demo, confetti-free-celebration]
+effort: m
+---
+
+## When it's right
+
+The page has been showing a job in progress (a hero demo, a scroll story, a process): a draft becoming a page, an inbox being triaged, a build running. The closing shows the same job finished: the live URL, the empty inbox, the green check, the signed contract. It resolves the page's story (peak-end) and puts one action under the payoff. It is the natural ending for a page that opened with `self-playing-product-demo`; mark the arrival the way `confetti-free-celebration` describes, never with confetti. Use whenever the page has a demo. Not when nothing above sets up an end state; then use `closing-result-previewed` or `closing-three-real-steps`.
+
+## Structure
+
+```
+1440 ─ container 1200, object up to 960 wide, centred
+┌──────────────────────────────────────────────────────────────────────────┐
+│                                                                          │
+│        ┌ the product, finished ─────────────────────────────────┐        │
+│        │  ✓ Deployed  ·  marlow.shop  ·  9.4 s                  │        │  ← the same UI the hero showed
+│        │  ┌──────────────────────────────────────────────┐      │        │     working, now done
+│        │  │ live page preview                            │      │        │
+│        │  └──────────────────────────────────────────────┘      │        │
+│        └────────────────────────────────────────────────────────┘        │
+│                                                                          │
+│                 Your first deploy is nine seconds away.                  │  ← one line, h2, centred lockup
+│                 [ Deploy your repo ]   Read the docs                     │  ← primary + text link
+│                                                                          │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390
+object full width (16 gutters), cropped to the status bar + top of the result
+H2 (2 lines max), primary button full width, the secondary under it
+```
+
+At 390 the object crops to the part that says "done" (the status, the URL, the check) plus the top of the result. The heading and action follow directly; nothing sits between.
+
+## Finish
+
+- The object is the same component the hero/demo used, in its final state, at `--shadow-2` (raised, `_finish.md`) and `--r-lg` (the product frame); inner panels nest concentrically. It should be recognisable as the same thing.
+- The object is the largest element; the heading is one size step below the page's h2 or equal to it, never larger than the object visually.
+- Heading and actions form a short centred lockup (centring is fine: one line and two controls, P03). 48px from object to heading, 24 heading to buttons.
+- Primary button (the page's `.btn-primary`) names the action on the visitor's own thing ("Deploy your repo"); one secondary (`.btn-secondary`), quieter. No form unless the action needs one field, and then it is not the hero's field.
+- Background: the page background, or a quiet band one step off it to separate from the footer; no glow behind the object (M20).
+
+## Content
+
+- The end state uses the same sample data the demo used (same names, same URL), so it reads as the same story's ending.
+- The one line states the payoff in the visitor's terms with a real figure if there is one ("nine seconds away" only if median is nine seconds).
+- One action. A second, quieter link for the cautious (docs, pricing).
+
+## States and motion
+
+- On entering view, the final step plays once: the status turns from "Building…" to "✓ Deployed" (300ms), the result fades in under it. Reduced motion and no-JS: final state only.
+- Doesn't loop. Doesn't replay when scrolled past again.
+- Buttons per `_finish.md` with hover, press and focus.
+
+## Pitfalls
+
+- A different product shot than the demo: the story doesn't close.
+- Repeating the hero headline and form.
+- A huge gradient band with a slogan and the object shrunk to a thumbnail.
+- Two equal buttons.
+
+## Floor checks
+
+- Does the section show the product in a finished, successful state rather than repeating the hero?
+- Is the product object the largest thing in the section?
+- Is there exactly one primary action, named for what the visitor will do?
+- Is the product text readable at 100% zoom?
+- Does the heading state a payoff rather than a generic slogan?
+- At 390, is the "done" state visible above the heading?

package/kb/sections/closing-full-bleed-line-and-form.md

@@ -0,0 +1,86 @@
+---
+id: closing-full-bleed-line-and-form
+name: A full-bleed band, one strong line, and the form
+kind: closing
+shape: full-bleed-media
+layout: "an edge-to-edge image or texture band (60–80vh) with one strong line and a single-field form or button set on a quiet, legible area of it"
+fits: [crafted, editorial, cinematic, nature, travel, food, warm, artsy, premium, calm, events, local, sustainability, heritage]
+avoid: [data-dense-tool, low-bandwidth, enterprise-compliance, developer]
+needs: ["one real photograph, painting or texture the brand owns or may use, with a calm area for text", "one line written for the end of the page", "one action (a single field or a button)"]
+imagery: photo
+density: airy
+moves: [canvas-grain, riso-print-texture]
+effort: m
+---
+
+## When it's right
+
+Brands that sell a feeling or a place (food, travel, crafts, events, studios) where the last thing should be atmosphere plus one clear step. The band is new at the end: a picture the page hasn't used yet, or the hero's picture in its evening state. The line is written for the close (not the hero headline again). If the hero used the same form, change the job: the closing asks for something different (book a date, get the print catalogue, join the season's list). Not for developer tools or data products, where `closing-demo-final-state` says more.
+
+## Structure
+
+```
+1440 ─ full bleed, 72vh (min 560, max 800)
+┌────────────────────────────────────────────────────────────────────────────┐
+│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
+│ ░░ image / texture, object-fit: cover, focal point kept right ░░░░░░░░░░░░ │
+│ ░░                                                             ░░░░░░░░░░░ │
+│ ░░  Dinner is on the hill again in May.                        ░░░░░░░░░░░ │  ← line, display size, cols 1–6
+│ ░░  Twelve seats, one long table.                              ░░░░░░░░░░░ │  ← one supporting line
+│ ░░                                                             ░░░░░░░░░░░ │
+│ ░░  [ your@email          ][ Hold me a seat ]                  ░░░░░░░░░░░ │  ← single field + button joined
+│ ░░  We write once, when booking opens.                         ░░░░░░░░░░░ │
+│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ photo: R. Okafor, 2025 ░░░░░░░░░░ │  ← credit bottom right, small
+└────────────────────────────────────────────────────────────────────────────┘
+text block aligned to the page container's left edge, bottom third
+```
+
+```
+390 ─ full bleed, image 60vh then text below on solid surface
+┌ image, cropped to focal point ┐
+└───────────────────────────────┘
+line, supporting line
+field (full width), button (full width) stacked
+reassurance, credit
+```
+
+At 390 text over a photo rarely stays legible, so the image becomes a full-bleed block on top and the text and form sit below it on the page surface (or on a solid band sampled from the image's darkest tone). The focal point is set with `object-position` for each width.
+
+## Finish
+
+- The band runs edge to edge; the text aligns to the page container's left edge, not to the viewport (P01).
+- Legibility first (P36): place text on the image's calm area and add a scrim only where needed: a linear gradient from the text side, max 55% opacity of the image's own dark tone (not black), or a solid surface. Check 4.5:1 for the supporting line and 3:1 for the display line at every width.
+- Line: display size of the page's scale, weight per the brand face, line-height 1.05–1.1, `text-wrap: balance`, max two lines. Supporting line lead size (`--t-lead`), 16px below. Form 32px below.
+- Form: one field joined to its button (shared height 52–56px, the field's right radius 0 and the button's left radius 0, or a 4px gap with matching radii). The page's `.btn-primary` in the accent or the image's light tone, whichever passes contrast. Reassurance line small, 12px under.
+- Image credit (photographer, year, licence if required) small, bottom right of the band, at 3:1 or better.
+- Texture alternative: a grain or paper texture (see `canvas-grain`, `riso-print-texture`) in the brand colour fills the band instead of a photo; same layout.
+
+## Content
+
+- The image is real and licensed: owned photography, commissioned work, or a public-domain painting with credit. Never stock clichés (M47) or AI images passed as photos.
+- One line written for the end; it can echo the hero but must say something new (a date, a season, an invitation).
+- The form asks for one thing. If it is an email, the reassurance says how often you'll write.
+
+## States and motion
+
+- Image lazy-loaded with a low-quality placeholder in its average colour; fixed aspect box so nothing shifts.
+- Optional: a slow 1.04 → 1.0 scale on the image as the band enters (1.2s, ease-out), once; none under reduced motion. No parallax that moves text.
+- Form states: focus, loading (button keeps its label with a spinner, D02), success replaces the form in place with a one-line confirmation and the date they'll hear back, error inline under the field.
+
+## Pitfalls
+
+- The hero's headline and form, again, on a stock photo.
+- White text on a busy part of the photo.
+- A black 60% overlay over the whole image: the picture dies.
+- Text centred over the image's subject (a face, the dish).
+- Missing image credit when the licence requires it.
+
+## Floor checks
+
+- Is the line new (not the hero headline repeated) and is it the only large text?
+- Is the text clearly legible against the image at its position?
+- Is there one action, with a single field or a single button?
+- Does the image fill the band edge to edge without a visible stretched or blurry crop?
+- Is the image's subject left uncovered by the text?
+- If the image needs a credit, is it shown?
+- At 390, is the text on a solid surface (or still clearly legible) with a full-width button?