@palate/cli 0.0.0-stage → 0.0.1

package/kb/sections/proof-output-wall.md

@@ -0,0 +1,84 @@
+---
+id: proof-output-wall
+name: A wall of real things made with it
+kind: proof
+shape: masonry
+layout: "a packed wall of real outputs made with the product (pages, prints, renders, files), each with its maker and a link, one or two set larger"
+fits: [crafted, ai, developer, community, artsy, portfolio, honest, saas, consumer, launch, agency, music]
+avoid: [enterprise-compliance, clinical, crisis, finance-trust-first, government]
+needs: ["8–20 real outputs made with the product (by the team counts, labelled as such)", "the maker's name and a link or permission for each", "thumbnails at true aspect ratios"]
+imagery: any
+density: dense
+moves: [honest-testimonial-wall, made-with-proof, marquee-done-right]
+effort: m
+---
+
+## When it's right
+
+The product makes something people can see: sites, designs, images, music, documents, code, prints. The strongest proof is the output itself, so the section shows a lot of it, real and attributed. Works before there are famous customers: early outputs made by the team, labelled "made by us while building it", still prove the product works. Pairs with the moves `made-with-proof` and `honest-testimonial-wall`. Not for products whose output is private (finance, health records) or invisible (infrastructure; use `proof-measured-numbers`).
+
+## Structure
+
+```
+1440 ─ full container 1200 (or wider, 1320, if the outputs are images)
+┌──────────────────────────────────────────────────────────────────────────┐
+│ H2 "Made with Loom & Line"                  412 shared this month →      │  ← count only if real and linked
+│ ┌───────────────┐ ┌──────┐ ┌──────────┐ ┌──────┐                          │
+│ │               │ │      │ │          │ │      │                          │
+│ │  large (2×)   │ │      │ └──────────┘ │      │                          │
+│ │               │ └──────┘ ┌──────────┐ └──────┘                          │
+│ └───────────────┘ ┌──────┐ │          │ ┌──────┐                          │
+│ ┌──────┐┌───────┐ │      │ └──────────┘ │      │                          │
+│ └──────┘└───────┘ └──────┘              └──────┘                          │
+│ each tile: the output at true ratio; under it: maker · what it is · ↗    │
+│ [ See all 412 ]   [ Add yours ]                                          │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ two columns of tiles (one column if outputs are text-heavy)
+H2, count
+tiles in 2 masonry columns, 8 shown
+[ See all ] full width
+```
+
+At 390, 2 columns with 8px gaps if outputs are visual (thumbnails stay legible as pictures); one column if each output needs reading (code, documents). The large tiles become normal size.
+
+## Finish
+
+- Masonry via CSS columns (`columns: 4 260px; column-gap: 16px; break-inside: avoid`) or a grid with `grid-auto-flow: dense` for fixed ratios. Gaps 16 at 1440, 8–12 at 390. Tiles keep their true aspect ratio; no cropping that hides what the thing is.
+- Each tile: the output, `--r-sm`, an inset 1px outline at 6–8% opacity (D20) so light images don't bleed into the page. No card box around the caption; caption sits 8px under the image, small size: maker (primary), what it is (secondary), an arrow link.
+- One or two tiles set at 2× width, chosen as the best work, placed top-left so the eye starts there.
+- Heading left-aligned; the count on the same baseline at the right, in secondary type, linked to the full gallery.
+- Buttons: "See all" secondary; "Add yours" (if there is a submission path) as a text link. The page's primary action stays in the closing section.
+
+## Content
+
+- Only real outputs, with the maker's consent or a public link. Outputs made by the team are labelled ("made by our team") rather than passed off as customers.
+- Variety: different makers, styles and uses, so the wall shows range, not one template repeated.
+- The count is a real, queryable number with a date or "this month", or no count at all.
+- Never generated "sample" outputs presented as user work. Never stock images.
+
+## States and motion
+
+- Images lazy-load with a fixed aspect-ratio box and a flat placeholder in `--hairline`, so the wall doesn't reflow.
+- Hover (fine pointer): the caption's link underlines, the image lifts 2px with `--shadow-1` (resting, `_finish.md`). Click opens the output's source or a lightbox with the full piece and maker link; Escape closes.
+- Optional slow marquee for very large walls only per `marquee-done-right` (pause on hover and focus, static under reduced motion). Default is static.
+
+## Pitfalls
+
+- Twelve outputs that all look the same: proves one template, not the product.
+- Cropping every tile to a square so typography and composition are lost.
+- Captions in tiny grey on top of images.
+- Outputs without makers: reads as stock.
+- A "trusted by thousands" line with no number you can check.
+
+## Floor checks
+
+- Does the wall show many actual outputs of the product rather than descriptions of them?
+- Does each output carry who made it (or say it was made by the team)?
+- Do the outputs show visible variety in style and use?
+- Is one piece clearly larger so the eye has a place to start?
+- Are images shown at their true proportions without awkward crops?
+- Is there no empty area larger than a third of the section?
+- At 390, are the outputs still recognisable at their tile size?

package/kb/sections/proof-single-honest-quote.md

@@ -0,0 +1,81 @@
+---
+id: proof-single-honest-quote
+name: One large quote, with a real person and context
+kind: proof
+shape: single-statement
+layout: "one customer's own words set large across the content width, their photo, name, role and company, plus the context: what they used it for and a link to the source"
+fits: [crafted, editorial, premium, calm, honest, trustworthy, b2b, saas, agency, quiet, warm, publishing]
+avoid: [crisis, clinical, playful-kids]
+needs: ["one real quote, with permission, from a named person", "their photo or a real photo of their work", "the context: what they did with the product and a source link or case study"]
+imagery: photo
+density: airy
+moves: [honest-testimonial-wall, editorial-grid-pull-quotes]
+effort: s
+---
+
+## When it's right
+
+The product has one great, specific, attributable quote from a customer people will recognise as real: a named person, a role, a company, a concrete result in their own words. One quote set large is more believable than a carousel of nine, because it looks chosen, not collected. Use when the quote is specific ("it caught the empty state I forgot", not "game-changing tool"). The consent and attribution rules are those of `honest-testimonial-wall`; on long editorial pages it can sit as a pull quote (`editorial-grid-pull-quotes`). Not when the only quotes are vague or anonymous: use `proof-output-wall` or `proof-measured-numbers` instead.
+
+## Structure
+
+```
+1440 ─ container 1200, quote across cols 2–11
+┌──────────────────────────────────────────────────────────────────────────┐
+│                                                                          │
+│   “We shipped the redesign in nine days. The part I didn't expect:       │  ← quote, h2–display size, hanging
+│    it caught every empty state we'd forgotten.”                          │     opening quote mark
+│                                                                          │
+│   ┌────┐  Ama Mensah                     Rebuilt the Northwind dashboard │  ← attribution left, context right
+│   │ ph │  Head of Design, Northwind      with Acme, Sep 2026             │
+│   └────┘                                 Read the story →                │
+│                                                                          │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390
+quote, h3–h2 size, left aligned
+photo 48 + name + role
+context line, link
+```
+
+At 390 the quote drops two steps on the type scale (stays at least 24px) and the context moves under the attribution. Everything stays left-aligned.
+
+## Finish
+
+- Quote: h2 to small-display size (about 36–48px at 1440), weight 400–500 in the display or text face, line-height 1.2, `text-wrap: balance`, max 28–32 words. Left-aligned, opening quotation mark hung into the left margin (`text-indent: -0.45em` or a negative margin) so the text edge stays on the grid (P05). Curly quotes (M32).
+- Attribution row 48px below the quote: photo 56px circle (their real photo; D32), name body 600, role and company small secondary. Context on the same row at the right: one line, what they used the product for, and a link to the source or case study.
+- No card, no box, no background tint by default; the size is the treatment. If the page needs a band here, a full-width surface one step off the page background, never a gradient.
+- No accent-coloured word inside the quote (M14).
+- Section padding the page's larger section spacing (128 at 1440); this section is allowed to be airy because it is short.
+
+## Content
+
+- The quote is their words, trimmed with an ellipsis if needed, never rewritten. Keep it specific; specifics persuade.
+- Name, role, company, and either a source link (post, review, case study) or a record of consent kept by the team.
+- The photo is of that person (or, if they prefer, a real photo of their work). Never a stock or generated face (M10).
+- If no such quote exists, do not ship this archetype.
+
+## States and motion
+
+- None needed. The quote is just there; no carousel, no typing effect, no fade-up (M44).
+- The context link has the page's link hover and a visible focus ring.
+- Long names and roles wrap without moving the photo off the name's first line.
+
+## Pitfalls
+
+- A vague quote set large: size makes emptiness obvious.
+- First name only, or no company: reads invented.
+- Centred multi-line quote with a ragged left edge (M06).
+- A giant decorative quotation mark graphic as the main visual.
+- Accenting one word in the quote.
+
+## Floor checks
+
+- Is the quote attributed as fully as the project's facts allow (a name and role at least), with nothing invented?
+- Is any photo of the person or their work real (from the project), never a stock face; with no photo in the facts, does the quote stand on its own instead of a placeholder?
+- Does the quote mention something concrete (a result, a task, a detail) rather than generic praise?
+- Is there context for the quote (what they did, or where it came from) as far as the project's facts give it?
+- Is the quote the single clear focal point of the section, with no carousel controls?
+- Is the quote left-aligned with a straight left edge?

package/kb/sections/resources-searchable-list.md

@@ -0,0 +1,110 @@
+---
+id: resources-searchable-list
+name: The catalogue as a searchable ruled list
+kind: features
+shape: table
+layout: "one search field and a handful of filter words above a ruled list of real items, like a library's catalogue drawer: item, what kind, where it is or when it's back, and one action; a result count, an honest empty state, and the whole list served as plain HTML before any script"
+fits: [nonprofit, education, community, government, accessibility-first, docs, local, honest]
+avoid: [saas, developer, b2b, luxury, fashion]
+needs: ["the real catalogue or resource list (20 to several thousand items) with a field for kind and availability", "a link or reserve action per item", "the 4–8 kinds people actually filter by"]
+imagery: none
+density: dense
+effort: m
+---
+
+## When it's right
+
+The organisation's value is a collection people browse: a tool library's 2,300 items from a tape measure to a tile saw, a literacy programme's free reading list, a river group's open data by site, a school's resources for parents. The visitor arrives asking “do you have a…?” and the honest answer is the catalogue itself, searchable, on the landing page. Set it like a library's card catalogue: a field, a few words to narrow it, and ruled lines of real items with their availability in plain words.
+
+Not for a handful of items (use `events-calendar-list` or a plain list), not for product shopping with prices and a basket, and not for app data that needs sorting by ten columns. On a landing page show the search and the first 8–12 items, with a link to the full catalogue page.
+
+## Structure
+
+```
+1440 ─ container 1240; search cols 1–8, count right; list full width
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "Borrow from 2,300 tools"                                                             │
+│                                                                                          │
+│ ┌ Search the catalogue ───────────────────────────────┐      2,312 items                 │
+│ │ e.g. drill, ladder, tent                     [Search]│                                  │
+│ └──────────────────────────────────────────────────────┘                                  │
+│ Show: All · Power tools · Ladders · Garden · Camping · Cleaning   ◂ text links, current underlined │
+│                                                                                          │
+│ ───────────────────────────────────────────────────────────────────────────────────────  │
+│ Cordless drill, DeWalt 20V        Power tools     On the shelf           Reserve →       │
+│ ───────────────────────────────────────────────────────────────────────────────────────  │
+│ Stepladder, 8 ft                  Ladders         Back Thursday 6 Nov    Join the queue →│
+│ ───────────────────────────────────────────────────────────────────────────────────────  │
+│ Carpet cleaner                    Cleaning        2 of 3 on the shelf    Reserve →       │
+│ ───────────────────────────────────────────────────────────────────────────────────────  │
+│ Tent, 4-person                    Camping         Back Monday 10 Nov     Join the queue →│
+│ ───────────────────────────────────────────────────────────────────────────────────────  │
+│ Showing 12 of 2,312 · See the whole catalogue →                                          │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+  columns: item 5 · kind 2 · availability 3 · action 2; rows 48–56px
+```
+
+```
+390
+┌──────────────────────────────┐
+│ H2                           │
+│ ┌ search ──────────────────┐ │
+│ └──────────────────────────┘ │
+│ [Search, full width]         │
+│ Show: All · Power tools ·    │  ← filter words wrap; no sideways scroll
+│ Ladders · Garden …           │
+│ 2,312 items                  │
+│ ──────────────────────────── │
+│ Cordless drill, DeWalt 20V   │
+│ Power tools · On the shelf   │
+│ Reserve →                    │
+│ ──────────────────────────── │
+│ …                            │
+└──────────────────────────────┘
+```
+
+At 390 each item becomes a three-line block (name; kind and availability; action) between hairlines. The search field is 48px tall with 16px text; the search button sits under it full width. Filter words wrap onto two lines.
+
+## Finish
+
+- Search: a real `<form role="search" method="get">` with a visible `<label>` (“Search the catalogue”), an input 48–52px tall, `--r-sm`, 1px `--hairline-strong` border, 16px+ text, and a secondary button. Focus ring per `_finish.md`. The form works without JS (query string to the server or a static search page).
+- Filters: plain text links or a row of underlined words, current one in `--ink` weight 600 with `aria-current`, others `--ink-2`. Not chips, not pill toggles.
+- List: real `<table>` (with a visually hidden or quiet caps header) at 1440, restyled as blocks at 390; hairlines between rows, no zebra, no cards. Item name `--t-body` weight 500; kind and availability `--t-small` or `--t-body` `--ink-2`.
+- Availability in words: “On the shelf”, “Back Thursday 6 Nov”, “2 of 3 on the shelf”. Never coloured dots or green/red pills; if a mark helps, a plain glyph in `--ink` beside the words.
+- Count line: `--t-small`, `--ink-2`, `tabular-nums`, updated in an `aria-live="polite"` region when results change.
+- Ground: `--paper` or `--paper-2`; the section may sit on a card-catalogue tone if the brand has one, but no dashboard panel or sidebar.
+
+## Content
+
+- Real items from the catalogue with their real availability, refreshed at build or request time; “last updated” in the count line if it's not live.
+- Item names as people search for them (“stepladder, 8 ft”), with the brand where it matters.
+- Kinds that match how people think (“Garden”, “Camping”), 4–8 of them.
+- One action per item, honest to the rules (“Reserve” needs membership: say so once above the list, with the sliding-scale price).
+- Examples in the placeholder from the most-borrowed items.
+
+## States and motion
+
+- No-JS and first paint: the first 12 items server-rendered; search and filters submit as a normal form.
+- With JS: results filter as you type after 200ms debounce; the count updates; focus stays in the field.
+- Empty result: “No tile saws right now. Ask us to add one →” with a link to suggest or donate; never a blank list.
+- Loading: keep the old results visible and dim them to 60% while fetching; no skeleton shimmer.
+- Keyboard: Tab reaches the field, filters, then each row's action; Enter submits.
+
+## Pitfalls
+
+- A SaaS-style data grid with column sort arrows, checkboxes, pagination chips and a filter sidebar.
+- Availability as coloured status pills or dots with no words.
+- Search that only works with JS, or a field with only a placeholder and no label.
+- Fake or sample items standing in for the real catalogue.
+- An empty state that says “No results” and nothing else.
+- Filter chips that scroll sideways at 390.
+
+## Floor checks
+
+- Is there a single, clearly labelled search field with a visible search button?
+- Are the items real, each on its own ruled row with a name, a kind and its availability in words?
+- Is availability written out (“On the shelf”, “Back Thursday”) rather than shown as coloured pills or dots?
+- Is there a visible count of results and a link to the full catalogue?
+- Does the section avoid dashboard chrome (sidebars, sort arrows, checkboxes, pagination chips)?
+- Is each item's action a clear text link or button that says what it does?
+- At 390, does each item read as a short block, with the search field full width and nothing scrolling sideways?

package/kb/sections/rooms-and-rates.md

@@ -0,0 +1,107 @@
+---
+id: rooms-and-rates
+name: Rooms and rates, one row per room
+kind: features
+shape: stacked-rows
+layout: "each room type a full-width row: its real photograph at 3:2 on one side (alternating sides optional), on the other its name, a short ruled list of facts (sleeps, bed, view), the rate from per night, what's included, minimum stay, and one “Check dates” action"
+fits: [travel, local, calm, heritage, premium, nature, warm, quiet]
+avoid: [saas, developer, b2b, data-dense-tool, enterprise]
+needs: ["2–6 room types with real photographs of each room (≥ 1600px wide)", "real rates from the booking system or the rate card, with the season they apply to", "what every stay includes, and minimum stays or closures"]
+imagery: photo
+density: balanced
+effort: m
+moves: [duotone-photography, product-in-context]
+---
+
+## When it's right
+
+An inn, a guesthouse, a hostel, a cabin rental: the visitor has decided they like the place and now asks which room, how much, what's included. Each room type gets a row with a real photograph and the facts set like a good guidebook entry. The room's own name (the inn names its rooms after boats; the hostel's 6-bed dorm is "the Loft") carries the character; the rate and inclusions carry the decision.
+
+Not for hotels with dozens of room types (link to the booking engine and show 3 representative rows), not without real photos of each room (use `services-price-ledger` with no photos rather than one stock bedroom repeated), and not for a single room or cottage (use `full-bleed-image-band` and a facts line).
+
+## Structure
+
+```
+1440 ─ container 1240; rows of photo cols 1–7 + facts cols 8–12; --s-9 between rows
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "Rooms"                         All rooms look at the water. Breakfast included.      │
+│                                                                                          │
+│ ┌──────────────────────────────────────┐   Harbour rooms · 9 rooms                       │
+│ │                                      │   “Wren”, “Dory”, “Patience” and six more       │
+│ │   photograph of a Harbour room, 3:2  │   ───────────────────────────────────           │
+│ │   window and water in frame          │   Sleeps       2                                │
+│ │                                      │   Bed          queen                            │
+│ └──────────────────────────────────────┘   View         the harbour                      │
+│  Photo: the Wren room, morning             ───────────────────────────────────           │
+│                                            from $295 a night, May–June                   │
+│                                            Two-night minimum on July and August weekends │
+│                                            [ Check dates ]                               │
+│                                                                                          │
+│   Point suites · 4 rooms                   ┌──────────────────────────────────────┐      │
+│   …facts…                                  │   photograph, 3:2                    │      │
+│   [ Check dates ]                          └──────────────────────────────────────┘      │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+  rows alternate sides or all photo-left; facts block top-aligned with the photo
+```
+
+```
+390 ─ photo first, then the facts; one row after another
+┌──────────────────────────────┐
+│ H2 "Rooms"                   │
+│ one line: breakfast included │
+│ ┌──────────────────────────┐ │
+│ │ photo, 4:3 crop          │ │
+│ └──────────────────────────┘ │
+│ Harbour rooms · 9 rooms      │
+│ Sleeps 2 · queen · harbour   │
+│ from $295 a night            │
+│ [ Check dates ]              │
+│ ──────────────────────────── │
+│ ┌ next room photo ─────────┐ │
+└──────────────────────────────┘
+```
+
+At 390 every row is photo (re-cropped to 4:3 around the window or bed), then name, a single facts line, rate and a full-width "Check dates" button. Rows are separated by a hairline and `--s-8`. No sideways carousels of rooms.
+
+## Finish
+
+- Photographs: one treatment for all rooms (`_finish.md` image treatment), the same aspect ratio for every room, `--r-md` or square corners to match the page; no frame, no shadow. A caption line in `--t-caption` `--ink-2` names the actual room shown.
+- Room name `--t-h3` in the display face; the count ("9 rooms") and names of individual rooms in `--t-small` `--ink-2`.
+- Facts: a three- or four-line ruled list (label `--ink-2` left, value `--ink` right, hairlines between, 40px rows), the same labels in every row so rows compare.
+- Rate: `--t-lead` weight 600, `tabular-nums`, "from" and "a night" in `--t-small`; the season it applies to on the same line. Minimum stays and closures under it in `--t-small`.
+- Action: one secondary button per row ("Check dates"), linking to the booking engine pre-filtered to that room. The page's one primary (Book a stay) lives in the hero or closing, not repeated six times.
+- What every stay includes is said once in the section lead, not ticked under each room.
+
+## Content
+
+- Real room types, counts and names. Facts that matter to choosing: sleeps, bed, bathroom, view, fireplace, accessibility (step-free, ground floor).
+- Rates as published, with the season or "from" honestly; never a crossed-out "was" price.
+- Inclusions said once: "Breakfast, kayaks and bikes included."
+- Conditions plainly: minimum stays, closed months, pets, children.
+- For a hostel, dorms are rows too ("6-bed dorm, curtains, reading light, USB-C, from €24").
+
+## States and motion
+
+- Static. Photos lazy-load below the first row with the photo's average colour as the placeholder.
+- Optional: a row's photo can be a small set (2–3 images) with plain previous/next text buttons; never auto-advancing.
+- Sold out for a season: "Booked through August; September open" in words under the rate.
+- No entrance animation beyond the page's default reveal.
+
+## Pitfalls
+
+- Room "cards" in a 3-up grid with icons for wifi, coffee and towels: a booking app, not this inn.
+- Amenity pills ("Sea view", "Breakfast") as coloured chips on every room.
+- The same stock bedroom photo for different rooms, or no photo of the actual room.
+- Rates missing ("Contact for rates") when a rate card exists.
+- Six filled "Book now" buttons competing on one screen.
+- An auto-playing carousel of room photos.
+
+## Floor checks
+
+- Does each room type show a real photograph of that room, all in the same aspect ratio and treatment?
+- Does every row give the same facts in the same order so rooms compare at a glance?
+- Is a real rate (with “from” and the season where it varies) shown for every room?
+- Are inclusions and minimum stays stated plainly, once?
+- Is the section free of amenity icon grids and coloured chips?
+- Does each row have one quiet action to check dates, with no competing filled buttons?
+- At 390, does each room stack photo first, then facts and rate, with nothing scrolling sideways?

package/kb/sections/ruled-facts-table.md

@@ -0,0 +1,108 @@
+---
+id: ruled-facts-table
+name: Ruled facts table
+kind: stats
+shape: table
+layout: "an editorial table of 5–9 real facts about the product or company: label column, value column at h3 size in tabular figures, and a quiet source/notes column, rows separated by hairlines, no cards; a short heading and intro to its left on wide screens"
+fits: [honest, editorial, technical, developer, finance, trustworthy, serious, scientific, b2b, enterprise, hardware, sustainability, crafted, data-rich]
+avoid: [playful-kids, kids, fashion, luxury]
+needs: ["5–9 real facts with values and units (limits, speeds, uptime, sizes, dates, counts)", "a source, date or method for each fact that needs one"]
+imagery: none
+density: dense
+effort: s
+moves: [inline-sparklines-in-copy, real-world-data, colophon]
+---
+
+## When it's right
+
+The page needs to say "here is what we can stand behind" and the honest answer is several facts, not one headline number. Instead of a stat banner of rounded figures (M11), set the facts as a ruled table you would find in an annual report or a datasheet: what it is, the value with its unit, and where it comes from. It reads as confidence because nothing is decorated.
+
+Fits developer tools, infrastructure, finance, hardware and any company whose buyers check numbers. Works as the anti-stat-banner after a feature section, or as the "the company in numbers" block on an about page. For product specifications (dimensions, formats, limits per plan) the sibling is `spec-sheet-features`; this one is about outcomes and the company's facts.
+
+Not for brands sold on mood, or when there are fewer than four real facts (use `one-huge-number` or nothing).
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols
+┌──────────────────────────────────────────────────────────────────────────────────────┐
+│ ┌ cols 1–4 ──────────────┐  ┌ cols 5–12: the table ──────────────────────────────────┐ │
+│ │ H2 h2, 2 lines         │  │ ───────────────────────────────────────────────────── │ │ ← top rule, hairline-strong
+│ │ "The numbers we        │  │ Median time to first deploy   4 min 10 s   telemetry,  │ │
+│ │  publish every month"  │  │                                            Sep 2026    │ │
+│ │                        │  │ ───────────────────────────────────────────────────── │ │
+│ │ intro, body, ink-2,    │  │ Uptime, last 12 months        99.982 %     status page │ │
+│ │ 3 lines                │  │ ───────────────────────────────────────────────────── │ │
+│ │                        │  │ Regions                       14           list →      │ │
+│ │ link: method →         │  │ ───────────────────────────────────────────────────── │ │
+│ │                        │  │ Largest customer project      2.1 TB       with consent│ │
+│ │ (sticky top: --s-9     │  │ ───────────────────────────────────────────────────── │ │
+│ │  while the table       │  │ Open-source packages          37           GitHub →    │ │
+│ │  scrolls, if long)     │  │ ───────────────────────────────────────────────────── │ │
+│ └────────────────────────┘  │ label 4 cols · value 3 cols · source 3 cols (of 8)     │ │
+│                             └────────────────────────────────────────────────────────┘ │
+│ "Updated 1 Oct 2026" caption, right-aligned under the table                           │
+└──────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ side padding 16
+┌──────────────────────────────┐
+│ H2                           │
+│ intro                        │
+│ ──────────────────────────── │
+│ Median time to first deploy  │  ← label, small, ink-2
+│ 4 min 10 s                   │  ← value, h3, tabular
+│ telemetry, Sep 2026          │  ← source, caption, ink-3
+│ ──────────────────────────── │
+│ Uptime, last 12 months       │
+│ 99.982 %                     │
+│ …                            │
+└──────────────────────────────┘
+```
+
+At 390 each row stacks: label, value, source, with the hairline between rows kept. No sideways scroll. The heading block goes above the table and is not sticky.
+
+## Finish
+
+- Markup: a real `<table>` (or `<dl>` if there is no third column) with `<th scope="row">` labels; a `<caption>` that is visually the H2, or `aria-labelledby` to it.
+- Rules: top rule `--hairline-strong`, row rules `--hairline`, full width of the table column including under the source column (`_finish.md`, Hairlines). No vertical rules, no zebra, no cards, no icons.
+- Rows: 64–72px tall at 1440 (`padding-block: var(--s-5)`), first baselines aligned across columns (`vertical-align: baseline`).
+- Label: `--t-body`, `--ink-2`, max 32ch. Value: `--t-h3` (24–28px), weight 600, `--ink`, `font-variant-numeric: tabular-nums lining-nums`, right-aligned if the values are all numbers of the same unit, else left-aligned; unit in `--t-small`, `--ink-2`, non-breaking space before it. Source: `--t-caption`, `--ink-3`, links underlined on hover only.
+- Body face for every figure. Monospace only if a value is literally machine output (a version string, a hash).
+- Heading block: H2 `--t-h2`, intro `--t-body` `--ink-2` max 36ch, link to the method in the body face. Sticky (`position: sticky; top: var(--s-9)`) only if the table is taller than the viewport.
+- Ground: `--paper` or `--paper-2`, whichever differs from the section before; nothing raised.
+- "Updated" caption under the table: `--t-caption`, `--ink-3`, the date the facts were checked.
+
+## Content
+
+- 5–9 facts. Each is real, specific and checkable: "4 min 10 s median", not "minutes"; "14 regions", not "global".
+- Order: the fact this buyer cares about first, then the rest by importance; group by theme with a slightly heavier rule (1px `--hairline-strong`) between groups if there are two themes.
+- Sources: name them (status page, telemetry with sample, an audit with date, a public repo). A fact without a source says what it is ("as of 1 Oct 2026").
+- Never invent, round up or borrow a competitor's framing. If the project lacks the facts, do not build the section; say so in the brief.
+
+## States and motion
+
+- Static. No count-up, no reveal per row (M11, M44).
+- Live values (uptime from a status endpoint) render server-side with their timestamp; if the fetch fails, the last known value stays with its date, never a spinner or "—" alone.
+- Hover a row: nothing (it is not interactive) unless the source is a link, which underlines.
+- Long labels wrap in their column; long values never wrap mid-number (`white-space: nowrap` on the value).
+
+## Pitfalls
+
+- A row of big rounded numbers in cards with icons on top (M04, M11): the thing this archetype replaces.
+- Mono and caps everywhere to look technical (M18).
+- Zebra striping plus rules plus cards: three structures doing one job.
+- Rules that stop at the text and leave the source column floating.
+- Values not on the same baseline as their labels.
+- Facts without sources, or a "Sources" footnote nobody can map back to rows.
+
+## Floor checks
+
+- Are the facts set as rows separated by thin rules, with no cards, icons or shadows?
+- Does every row show a specific value with its unit (not a rounded marketing figure)?
+- Does every row, or a clear note under the table, show where the figure comes from or when it was measured?
+- Do the values line up in one column with tabular figures, on the same baseline as their labels?
+- Are there between five and nine rows?
+- Is there a date showing when the facts were last checked?
+- At 390, does each row stack label, value and source without sideways scrolling?

package/kb/sections/ruled-list-pinned-visual.md

@@ -0,0 +1,107 @@
+---
+id: ruled-list-pinned-visual
+name: Ruled list with a pinned visual
+kind: features
+shape: list-ruled
+layout: "a ruled list of 4–7 features left 5/12 (hairline rows, title + one line each), a sticky visual right 7/12 that swaps to match the hovered, focused or in-view row"
+fits: [saas, developer, productivity, technical, editorial, crafted, minimal, b2b, calm]
+avoid: [playful-kids, gaming, kids, food, portfolio]
+needs: ["4–7 features of similar weight", "one visual per feature: a product state, a figure or a drawing, all in one frame size"]
+imagery: product-ui
+density: balanced
+effort: m
+moves: [sliding-nav-indicator, screenshot-detail-crops, calm-motion-system]
+---
+
+## When it's right
+
+Four to seven features of about equal weight, each with one state of the product worth seeing. A plain ruled list is the calmest way to read many items: the eye runs down one left edge, each row is a title and one line, and a single large visual beside the list shows whichever row you are on. It reads as a well-set index rather than a card grid, and it lets each feature have a real picture without seven pictures competing.
+
+Not for two or three features (use `alternating-rows-live-tiles`), for one hero capability (use `asymmetric-bento-dominant`), or when the visuals can't share one frame size.
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols, gutter 24
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ H2 cols 1–5                                                                   │
+│ lead cols 1–5, ink-2                                                          │
+│                                                         --s-7                 │
+│ ┌ cols 1–5 ─────────────────────┐   ┌ cols 6–12, position: sticky; top: 96 ─┐ │
+│ │ ─────────────────────────────  │   │                                       │ │
+│ │ ▌Feature one (active)          │   │  visual for the active row            │ │
+│ │  one line, ink-2               │   │  product frame, 4:3 or 16:11          │ │
+│ │ ─────────────────────────────  │   │  same size for every row              │ │
+│ │  Feature two                   │   │                                       │ │
+│ │  one line                      │   │  caption line under the frame,        │ │
+│ │ ─────────────────────────────  │   │  small, names what is shown           │ │
+│ │  Feature three                 │   └───────────────────────────────────────┘ │
+│ │ ─────────────────────────────  │                                             │
+│ │  … 4–7 rows, 72–96 tall each   │                                             │
+│ │ ─────────────────────────────  │                                             │
+│ └────────────────────────────────┘                                             │
+└──────────────────────────────────────────────────────────────────────────────┘
+  list height ≈ visual height (±20%); if the list is much taller, the visual is sticky
+```
+
+```
+390 ─ one column, side padding 16
+┌──────────────────────────────┐
+│ H2                           │
+│ lead                         │
+│ ──────────────────────────── │
+│ Feature one                  │
+│ one line                     │
+│ ┌ its visual, full width ──┐ │  ← every row carries its own visual inline
+│ └──────────────────────────┘ │    (accordion only if 6–7 rows)
+│ ──────────────────────────── │
+│ Feature two                  │
+│ one line                     │
+│ ┌ visual ──────────────────┐ │
+│ └──────────────────────────┘ │
+└──────────────────────────────┘
+```
+
+At 390 the sticky visual goes away: each row shows its own visual under its line, at 4:3, cropped to the working part. With six or seven rows, rows become a disclosure list (one open at a time, the first open by default) so the section stays under about three screens. Hairlines stay full width.
+
+## Finish
+
+- List rows: `padding-block: --s-5`, a 1px `--hairline` above every row and below the last, running the full list width (`_finish.md` hairlines). No cards, no zebra.
+- Title `--t-body` to `--t-lead`, weight 600; line `--t-small`–`--t-body`, `--ink-2`, one line at 1440 (`max-width: 44ch`).
+- Active row: the title stays ink, inactive titles go `--ink-2`; a 2px bar in ink or brand at the row's left edge slides between rows (move `sliding-nav-indicator`, 240ms ease-out). Never a filled background block per row.
+- Visual: the product frame from `_finish.md` (`--r-lg`, `--shadow-2`), one fixed aspect ratio for every row so swaps don't jump. Caption under it in `--t-caption`, `--ink-3`.
+- Sticky: `position: sticky; top: calc(nav height + --s-6)`; the visual's column is `align-self: start`.
+- Ground: flat `--paper`; this archetype is quiet, so the section above or below carries the material band.
+
+## Content
+
+- Heading: the job these features do together. Lead: one sentence.
+- Rows: a title that names the feature by what it lets you do ("Undo across devices"), and one line that says how or with what limit. One line, not a paragraph.
+- Visuals: one product state per row, from the project's real screens or rebuilt in code. All at the same zoom so they read as one series.
+- Order rows the way a new user meets the features. Numbers only if the order is real (M17).
+
+## States and motion
+
+- Rows are buttons (`<button aria-controls>` or links to anchors) so hover, focus and click all activate them; keyboard arrows move between rows.
+- Scroll: the row whose middle crosses 45% of the viewport becomes active (IntersectionObserver); hover and focus override while the pointer is in the list.
+- Visual swap: crossfade 200ms plus a 4px rise on the incoming state, or a shared-element morph if both states are the same screen. No slide-in from the side.
+- Server render and no JS: first row active, its visual shown; every other visual is reachable as an inline figure under its row (hidden with JS on desktop).
+- Reduced motion: instant swap. `aria-live` is not needed; the visual has alt text per row.
+
+## Pitfalls
+
+- A visual that doesn't change, or changes to near-identical states, so the list feels broken.
+- Visuals of different sizes, so the right column jumps on every swap.
+- Rows with paragraphs: it stops being a list and becomes documentation (M22).
+- Activating on hover only: keyboard and touch users never see rows two to seven.
+- A list far taller than the visual, leaving a long empty column beside it once the sticky releases (P38).
+
+## Floor checks
+
+- Is there one large visual beside the list showing the product, rather than an icon per row?
+- Are the list rows separated by thin full-width rules with no card boxes around them?
+- Is each row a short title plus at most one line of text?
+- Is the active row visibly distinguished from the others?
+- Is the visual at least as wide as the list column at 1440?
+- Is there no empty band taller than 160px beside the list or under the visual?
+- At 390, does every feature show its own visual without sideways scrolling?