@palate/cli 0.0.0-stage → 0.0.2

package/kb/sections/numbered-editorial-columns.md

@@ -0,0 +1,105 @@
+---
+id: numbered-editorial-columns
+name: Editorial columns, numbered only when ordered
+kind: features
+shape: editorial-columns
+layout: "a top rule and a heading spanning the width, then 3 columns of short editorial prose (4/12 each); each column ends in a small product fragment or figure; numerals only when the order is real"
+fits: [editorial, crafted, publishing, calm, quiet, heritage, premium, education, media, honest, portfolio, agency]
+avoid: [gaming, playful-kids, data-dense-tool, energetic]
+needs: ["three ideas that each deserve a paragraph", "a small fragment or figure for each (a product detail, a diagram, a real photo crop)"]
+imagery: any
+density: airy
+effort: s
+moves: [editorial-drop-cap, editorial-grid-pull-quotes, code-drawn-diagram, hand-drawn-annotations]
+---
+
+## When it's right
+
+The product's case is made in sentences, not screens: a publication, a studio, a principled tool, a service where how you think is the feature. Three short columns of real prose, set like a magazine's opening spread, under one heading that spans them. Each column closes with a small, specific thing (a cropped product detail, a little diagram, a measured figure) so the prose lands on evidence.
+
+Numbers are allowed only when the columns have a real order (the three steps of onboarding, the three chapters of a method, an index the page navigates by). Otherwise, no numerals (M17). Not for products whose features are best shown working (use `alternating-rows-live-tiles`), or for more than three ideas.
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols, gutter 24
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ ──────────────────────────────────────────────────────────────────────────── │  ← 1px rule, full container
+│ H2 cols 1–9, display-ish 48–64px, 2 lines, balanced                           │
+│                                                                    --s-8      │
+│ ┌ cols 1–4 ──────────────┐ ┌ cols 5–8 ──────────────┐ ┌ cols 9–12 ─────────────┐│
+│ │ 1  (only if ordered)    │ │ 2                       │ │ 3                       ││  ← numeral 48–64px, display face,
+│ │ h3 column title         │ │ h3                      │ │ h3                      ││    ink-3, tabular, on a shared
+│ │                         │ │                         │ │                         ││    baseline
+│ │ 80–140 words of prose,  │ │ prose                   │ │ prose                   ││
+│ │ body 17px, 1.6 leading, │ │                         │ │                         ││
+│ │ first column may open   │ │                         │ │                         ││
+│ │ with a drop cap         │ │                         │ │                         ││
+│ │                         │ │                         │ │                         ││
+│ │ ┌ fragment ───────────┐ │ │ ┌ fragment ───────────┐ │ │ ┌ figure ─────────────┐ ││  ← fragments share a top line
+│ │ └─────────────────────┘ │ │ └─────────────────────┘ │ │ └─────────────────────┘ ││    and a height (200–260)
+│ │ caption, small          │ │ caption                 │ │ caption                 ││
+│ └─────────────────────────┘ └─────────────────────────┘ └─────────────────────────┘│
+│   1px vertical hairlines between columns (optional, full column height)        │
+└──────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column, side padding 16
+┌──────────────────────────────┐
+│ ──────────────────────────── │
+│ H2 32–36px                   │
+│ 1                            │
+│ h3                           │
+│ prose                        │
+│ ┌ fragment ────────────────┐ │
+│ └──────────────────────────┘ │
+│ ──────────────────────────── │  ← rule between columns replaces the vertical hairlines
+│ 2  …                         │
+└──────────────────────────────┘
+```
+
+At 390 the columns stack in order, each separated by a full-width hairline and `--s-7`; the fragment follows its prose at full width. The prose stays 16–17px; numerals shrink to 36–40px.
+
+## Finish
+
+- Top rule: 1px `--hairline-strong` across the container, `--s-5` above the H2. The rule is the section's edge; no background change at the same line (M28).
+- H2: `--t-display` at the lower end (48–64px), the display face, tracking −0.025em, leading 1.05, `text-wrap: balance`, cols 1–9 (leaves air on the right on purpose).
+- Columns: body `--t-body` at 17px, leading 1.6, `text-wrap: pretty`, `hanging-punctuation` on quotes (`_finish.md` type details). Column width ~38ch at 1440 is right for this format.
+- Optional vertical hairlines between columns (`--hairline`, from the numeral's top to the caption's bottom). Use either vertical hairlines or generous gutters, not boxes.
+- Numerals (when ordered): display face, 48–64px, `--ink-3`, `font-variant-numeric: tabular-nums lining-nums`, on one baseline across columns. Not in a circle, not "01 —" in mono (M16, M18).
+- Fragments: same top line and same height across columns (P04). Product crops use the product frame at `--r-md`, `--shadow-1`; diagrams are line drawings in ink at 1–1.5px (move `code-drawn-diagram`); photos follow the page's one treatment. Caption `--t-caption`, `--ink-3`.
+- Drop cap on the first column only, if the page's voice is editorial (move `editorial-drop-cap`).
+- Ground: `--paper` or a paper-fibre band (`_finish.md` textures) if the page has an editorial material.
+
+## Content
+
+- Heading: a statement of belief or method, not a category label ("We write the tests before we write the pitch").
+- Each column: a short title, then 80–140 words that make one argument with a concrete detail (a number, a name, an example). No bullet lists.
+- Fragments: the smallest true evidence for that column's argument: a cropped UI detail, a three-line diagram, a measured figure with its source.
+- Only number the columns if a reader would be confused by reading them out of order.
+
+## States and motion
+
+- Static by default; this archetype's quality is in the setting. One allowed moment: the fragments may perform once on entering view (a diagram line draws in 600ms, a hand-drawn note appears, move `hand-drawn-annotations`).
+- Links inside prose underline with `text-underline-offset: .2em`, `text-decoration-thickness: 1px`, and thicken on hover.
+- Long translations: columns grow in height together (grid with `align-items: stretch`); fragments stay aligned at the bottom via `margin-top: auto`.
+
+## Pitfalls
+
+- "01 / 02 / 03" on columns that have no order (M17), or in mono (M18).
+- Prose that is really three marketing taglines padded to length (M09).
+- Columns of very different lengths, so fragments sit at different heights (P04).
+- Centred column text (M06).
+- Boxing each column in a card: it kills the editorial page feel (M21, M23).
+- More than three columns: lines get too short and attention falls off to the right (M22).
+
+## Floor checks
+
+- Does a rule or clear top edge mark the start of the section, with a heading spanning more than one column?
+- Is each column real prose of several sentences, left-aligned, rather than a tagline?
+- Does every column end in a small product fragment, figure or diagram?
+- Do the fragments in the three columns start at the same height and share a size?
+- If the columns are numbered, does the content actually have an order (steps, chapters or sequence)?
+- Is the section free of boxes or cards around the columns?
+- Are the body lines of a comfortable length (no column narrower than about 30 characters per line)?

package/kb/sections/object-first-hero.md

@@ -0,0 +1,106 @@
+---
+id: object-first-hero
+name: Object-first hero
+kind: hero
+shape: object-first
+layout: "a short headline 32–48px and one line of lead above; the product object 1100–1240px wide directly under it, the first and largest thing seen; actions sit on the object's top edge or just above it"
+fits: [saas, developer, productivity, technical, data-rich, crafted, honest, ai, b2b]
+avoid: [luxury, fashion, heritage, crisis, nonprofit, food, portfolio]
+needs: ["a product UI rich enough to fill 1100px without padding it out", "one real moment of the product with real labels and data", "a headline of eight words or fewer"]
+imagery: product-ui
+density: dense
+effort: l
+moves: [self-playing-product-demo, screenshot-detail-crops, real-world-data]
+---
+
+## When it's right
+
+The interface is the argument. The product is a tool people live in (an editor, a database console, a timeline, a canvas) and anyone who sees it at full size understands it faster than any sentence could. So the words step back: a small headline, one line of lead, an action, and then the product at nearly the full container width, starting high enough that it is the first thing the eye lands on. The page reads like opening the app.
+
+It only works when the object is rich: real panes, real rows, one thing happening. A thin or empty UI at this size exposes itself. If the product's screen is modest, use `split-hero-live-object`; if the value is an interaction the visitor should try, use `touchable-tool-hero`.
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols, gutter 24
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ nav ──────────────────────────────────────────────────────────────────── [Secondary][Pri]│
+│                                                                                          │
+│   H1 40–48px, one or two lines, left aligned  ┆   lead 17–20px, 2 lines, ink-2           │  ← cols 1–7 | cols 8–12
+│                                               ┆   [Primary action]  link →               │    same top line
+│                                                                                          │
+│ ┌ product frame: cols 1–12, 1180–1240 wide, radius 20, shadow-2 ─────────────────────────┐│
+│ │ chrome: the product's own bar, skeletonised                                            ││
+│ ├──────────┬───────────────────────────────────────────────────────┬────────────────────┤│
+│ │ sidebar  │ the working area: real rows, a document, a canvas      │ inspector /        ││
+│ │ ▤ ▤ ▤    │                                                       │ details pane       ││
+│ │ ▤ ▤      │   one moment happening: a row arrives, a cell         │ with real values   ││
+│ │          │   recalculates, a cursor drags                         │                    ││
+│ │          │                                                       │                    ││
+│ │          │                                                       │                    ││
+│ └──────────┴───────────────────────────────────────────────────────┴────────────────────┘│
+│   frame top at 240–300px from the hero top; frame height 620–720; bottom runs ~96px      │
+│   into the next band, which is paper-2                                                   │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column, side padding 16
+┌──────────────────────────────┐
+│ nav            [Pri]  ☰      │
+│ H1 32–36px, 2–3 lines        │
+│ lead 16px, 2 lines           │
+│ [Primary action, full width] │
+│ ┌ object, cropped ──────────── │  ← working area only (sidebar and inspector dropped),
+│ │ text ≥ 12px                │    left edge on the gutter, bleeds off the right;
+│ │                            │    top within the first 560px
+│ └─────────────────────────── │
+└──────────────────────────────┘
+```
+
+At 390 the words stay on top but shrink to a 3-line block; the object is cropped to the working area at roughly 1:1 scale (not the whole desktop UI scaled to 30%), 420–520px tall, its left edge on the 16px gutter and its right edge clipped by the hero (`overflow-x: clip`). The inspector pane can return as a second, smaller crop below if it carries the moment.
+
+## Finish
+
+- Words: H1 at `--t-h2` size scale (40–48px), weight 600, tracking −0.02em, leading 1.05, `text-wrap: balance`. It is deliberately smaller than a normal hero headline: the object leads (P06 still holds for text; the object is the visual focal point). Lead in `--t-lead` or 17px, `--ink-2`, `max-width: 48ch`.
+- The words row is a two-part line: H1 in cols 1–7, lead + actions in cols 8–12, both top-aligned to the H1 cap height. This keeps the headline block under 180px tall so the object starts high.
+- Hero padding top `--s-8` under the nav; words to object `--s-7`.
+- Bleed: the frame's bottom runs off the hero's bottom edge into the next band (or is cropped by it), so the product reads as bigger than the screen. The crop goes through filler (the last rows, the end of the sidebar), never through the working area or 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` at `--r-lg` (20) with `--shadow-2`; inner panes square or `--r-sm`, nested concentrically. Panes divided by `--hairline`, not by gaps and cards (M23). Text inside 13–14px at 1440, readable at 100% (P40).
+- The object straddles a ground change: hero on `--paper`, a `--paper-2` band begins at about 60% of the object's height and carries on into the next section, so the object sits on the page like a laid-down slab.
+- The page's primary action (`.btn-primary`) and at most its secondary. No fact line, no logos: everything else waits for the next section.
+
+## Content
+
+- H1: what it is, in eight words or fewer ("The SQL editor that explains its own plans"). It is a caption for the object, so it names the thing the visitor is looking at.
+- Lead: one sentence of mechanism or outcome.
+- Object: the product at its most useful moment, populated from the project: real table names, a realistic record, the product's vocabulary. Sidebar labels are real navigation items; the inspector shows real field names with plausible values. Never lorem ipsum, never "Acme Corp".
+- If parts of the UI are not built yet, skeleton them; never draw features the product does not have.
+
+## States and motion
+
+- Server render: the object complete and informative, no `opacity: 0` anywhere in the first viewport (M45).
+- One live moment on a 4–8s loop (or a full run, pairs with move `self-playing-product-demo`): a new row slides in at 240ms ease-out, a value updates, a cursor completes one action. Pauses off screen, on hover and focus; reduced motion shows the end frame.
+- The object is `aria-hidden` with one `aria-label` on its group describing what it shows (L21).
+- Hover inside the object does nothing that looks clickable but isn't: no pointer cursors on fake buttons.
+
+## Pitfalls
+
+- An object that is wide but empty: three skeleton bars in a 1200px frame. Richness is the price of this layout.
+- Scaling a 1600px screenshot down to 1240 so the text becomes 9px (L04, P40).
+- A big headline on top of the big object: the hero becomes two screens tall and the object starts below the fold. Keep the words small.
+- Fake browser chrome or a laptop mockup around it (M19, L03).
+- Glow, beams or a gradient halo behind the frame (M20, M12).
+- At 390, the whole desktop UI shrunk to fit the width.
+
+## Floor checks
+
+- Does the product object span at least 75% of the section's width at 1440?
+- Does the top edge of the product object appear in the first 900px of the page at 1440?
+- Does the object run off an edge (its bottom into the next band, or a side to the viewport), cropped through secondary UI such as extra rows or a sidebar's end rather than through the working area the headline names?
+- Is the text inside the product object readable at 100% zoom?
+- Does the object show real-looking content (named rows, values, labels) across most of its area rather than empty skeleton bars?
+- Is the headline block short (at most two lines at 1440) so the object, not the words, is the largest thing on screen?
+- Is there exactly one primary action above the object?
+- Is the object shown without fake browser chrome, device frames or glow behind it?
+- At 390, is the object cropped to a readable part rather than the whole desktop UI shrunk to fit?

package/kb/sections/object-timeline.md

@@ -0,0 +1,105 @@
+---
+id: object-timeline
+name: Timeline of the product's real object
+kind: story
+shape: timeline
+layout: "one horizontal time axis across the container with 4–7 dated stops; above each stop the real object as it was then (a version of the screen, a prototype photo, a print, a release); the current one largest at the right; scrolls sideways inside the section when it overflows"
+fits: [crafted, heritage, honest, hardware, developer, editorial, technical, community, publishing, cultural, sustainability, launch, saas, retro]
+avoid: [crisis, clinical, playful-kids, waitlist]
+needs: ["4–7 real past versions of the product's main object (screens, prototypes, editions, releases) with dates", "one line per stop on what changed and why", "the current version"]
+imagery: any
+density: balanced
+effort: m
+moves: [changelog-as-magazine, technical-drawing-lines, screenshot-detail-crops, shape-continuity-morph]
+---
+
+## When it's right
+
+The product has a history you can show with objects rather than adjectives: v0.1's ugly first screen next to today's, the cardboard prototype next to the shipping unit, the first edition next to the tenth, the model's outputs a year apart. Showing the object change over time proves care and momentum in one look, and it is a story only this product can tell.
+
+Not for a company "milestones" list (founded, raised a round, moved office: nobody cares), not when there are fewer than 4 real stops, and not when the past versions are reconstructions made for the page. Pairs well after a features section and before proof; it often replaces an "About" block.
+
+## Structure
+
+```
+1440 ─ container 1240; the track may overflow and scroll inside the section
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "Eleven versions of the same editor"                              [←] [→]  2019–2026 │ ← heading left; scroll buttons and
+│ lead: one line on what stayed the same, ink-2                                            │   range right, same baseline
+│                                                                                          │
+│   ┌───────┐      ┌────────┐      ┌─────────┐        ┌──────────┐      ┌───────────────┐  │
+│   │ v0.1  │      │ v0.4   │      │ 1.0     │        │ 2.0      │      │ today         │  │ ← objects bottom-aligned on one
+│   │ obj   │      │ obj    │      │ object  │        │ object   │      │ object,       │  │   baseline, growing in size
+│   └───────┘      └────────┘      │         │        │          │      │ largest,      │  │   toward the present
+│                                  └─────────┘        └──────────┘      │ shadow-2      │  │
+│                                                                       └───────────────┘  │
+│ ──●──────────────────●──────────────────●──────────────────────●──────────────────◉───── │ ← the axis: 1px hairline-strong,
+│   Mar 2019           Nov 2019           Jun 2021               Feb 2024           Now    │   dots at stops, years in
+│   First sketch in a  Ran on one         Public. Kept the       Rewrote the        …      │   tabular figures
+│   notebook. 3 users. laptop.            one-pane layout.       renderer.                 │ ← one line each, small, ink-2,
+│                                                                                          │   max 28ch
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ the timeline turns vertical; the axis runs down the left gutter
+┌──────────────────────────────┐
+│ H2, 2–3 lines                │
+│ lead                         │
+│ ◉ Now                        │ ← newest first on phone
+│ │ ┌────────────────────────┐ │
+│ │ │ today's object, 1:1 or │ │
+│ │ │ cropped to its detail  │ │
+│ │ └────────────────────────┘ │
+│ │ one line                   │
+│ ● Feb 2024                   │
+│ │ ┌──────────────┐           │
+│ │ │ object, 70%  │           │
+│ │ └──────────────┘           │
+│ │ one line                   │
+│ ● … (max 5 stops on phone)   │
+└──────────────────────────────┘
+```
+
+At 390 the axis turns vertical down the left gutter (dot column 16px wide), newest first, and each stop stacks its date, object and line. Show at most 5 stops on phone (drop the least telling ones in the phone build, or collapse the oldest into "Earlier versions" disclosure). Objects keep readable detail: crop to the part that changed rather than shrinking a whole screen.
+
+## Finish
+
+- Track: a flex row with `align-items: end` so every object sits on one baseline above the axis; `gap: var(--s-7)`. Object widths grow toward the present (for example 160 → 200 → 240 → 280 → 400px), which makes time read as growth without a chart. When the row exceeds the container, the track scrolls inside the section: `overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--page-x);` starting scrolled to the newest stop (set `scrollLeft` on load, or put the track in `direction: rtl` with LTR children), with the scroll buttons visible and the next stop peeking.
+- Objects: past screens rebuilt or real screenshots shown honestly (screenshots are fine here: they are historical records, not marketing visuals), each in a plain frame: `--r-md`, `--shadow-1`; today's in the product frame with `--shadow-2`. Photographs of physical prototypes use the page's one photo treatment and no frame, sitting on the ground with a soft contact shadow (`0 12px 16px -12px` tinted ink). Old versions keep their old look; never restyle them in today's brand.
+- Axis: 1px `--hairline-strong`, full track width, `--s-5` under the objects' baseline. Stop dots 9px, `--ink`, on the axis exactly under each object's left edge (or centre: pick one); today's dot is a 13px ring in `--brand`. No arrowheads.
+- Dates: `--t-small`, weight 500, tabular figures, `--ink`; `--s-3` below the axis. Line: `--t-small`/1.45, `--ink-2`, max 28ch, `--s-1` below the date.
+- Ground: works on `--paper` or `--paper-2`; a faint paper fibre texture (`_finish.md`) behind the track suits heritage and hardware stories. Nothing behind the dates.
+
+## Content
+
+- Stops: real versions with real dates, from the project's history (git tags, changelog, photos, old releases). Each line says what changed and why in under 12 words, ideally with a small fact ("3 users", "first paid customer", "rewrote the renderer").
+- The heading names the object and the span ("Eleven versions of the same editor", "Seven years of the same backpack"), not "Our journey".
+- The lead says what stayed constant: that is the brand's point.
+- Never invent past versions or round dates to look tidy. Gaps in time are honest; space the stops by sequence, not to scale, unless the gaps matter to the story.
+
+## States and motion
+
+- No-JS: the whole track renders; it scrolls natively; the buttons are hidden.
+- Scroll buttons move by one stop (`scrollBy` with `behavior: smooth`, instant under reduced motion), disable at the ends, and have labels ("Earlier versions", "Later versions"). The track is focusable (`tabindex="0"`, `role="region"`, `aria-label`) so arrow keys scroll it.
+- Optional, one moment: as the section enters, the axis draws from left to right over 700ms (`stroke-dashoffset` or `scaleX` from the left) with the dots appearing as it passes them. Objects are visible from the start. Off under reduced motion.
+- Optional: move `shape-continuity-morph` when clicking a stop morphs a detail view of that version; keep it out of the default build.
+
+## Pitfalls
+
+- A milestone list of company events with icons and no objects: that is an About page row, not this.
+- All objects the same size: time has no direction. Grow toward the present.
+- Past versions restyled to match today's brand (it destroys the evidence).
+- Long paragraphs at each stop; this is a picture timeline, words stay one line.
+- A track that scrolls the whole page sideways on phone instead of turning vertical.
+- Starting the scroll at the oldest version with today's off screen: lead with the present at 1440 too if the track overflows.
+
+## Floor checks
+
+- Does each stop show the actual object (a screen, prototype, edition) rather than only an icon or text?
+- Are there at least four dated stops along one visible axis?
+- Do the objects sit on one shared baseline, with the present version visibly the largest?
+- Does every stop carry a real date and a one-line note on what changed?
+- Do the past versions look like their own time (not restyled in today's brand)?
+- If the track overflows, is it clear it scrolls (a peeking next item and visible scroll buttons)?
+- At 390, does the timeline run vertically with nothing scrolling the page sideways?

package/kb/sections/one-huge-number.md

@@ -0,0 +1,100 @@
+---
+id: one-huge-number
+name: One huge number with its context
+kind: stats
+shape: single-statement
+layout: "one real figure at giant size (160–280px) on its own band, left-aligned or set on the grid's left two thirds, with one context sentence beside or under it, a source line, and an optional tiny sparkline"
+fits: [finance, data-rich, saas, developer, b2b, editorial, honest, bold, minimal, sustainability, nonprofit, launch]
+avoid: [playful-kids, crisis, clinical, accessibility-first]
+needs: ["one real, specific, sourced number the product or company can stand behind", "a sentence saying what the number means", "a date or source for it"]
+imagery: type
+density: airy
+effort: s
+moves: [typographic-numeral-hero, inline-sparklines-in-copy, dark-band-contrast-section]
+---
+
+## When it's right
+
+The product has one number that carries the argument: hours returned, money moved, errors caught, a time to first result, the number of real teams. Instead of a row of four rounded numbers (M11), set the one that matters at architectural size, say plainly what it means, and show where it came from. Scale gives it hierarchy; the source line gives it credibility.
+
+Use it as a pause between busy sections (after a feature bento, before pricing), often as the page's one inverted band. If the hero is already `typographic-statement-hero` or uses move `typographic-numeral-hero`, do not use this too: one giant number per page.
+
+Not when the number is vanity, rounded marketing ("10x", "99.9%"), or has no source. Then use `ruled-facts-table` with honest facts, or skip the section.
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols; band padding --section
+┌──────────────────────────────────────────────────────────────────────────────────────┐
+│                                                                                      │
+│  ┌ cols 1–8 ──────────────────────────────────┐  ┌ cols 9–12, bottom-aligned ──────┐ │
+│  │                                            │  │                                 │ │
+│  │   41                                       │  │ of the 120 checks a reviewer   │ │
+│  │   ███  █                                   │  │ used to run by hand now run    │ │
+│  │      █ █       giant numeral 200–280px     │  │ before the PR opens.           │ │
+│  │      █ █ %     unit at h2, same baseline   │  │ lead size, ink-2, 3–4 lines     │ │
+│  │                                            │  │                                 │ │
+│  └────────────────────────────────────────────┘  │ ╱╲_╱‾╲_╱‾‾  sparkline 120×24     │ │
+│                                                  │ Source: internal telemetry,      │ │
+│                                                  │ 2,140 repos, Sep 2026 →          │ │
+│                                                  └─────────────────────────────────┘ │
+│                                                                                      │
+└──────────────────────────────────────────────────────────────────────────────────────┘
+  context text's last baseline aligns with the numeral's baseline
+```
+
+```
+390 ─ side padding 16
+┌──────────────────────────────┐
+│ 41%   numeral 96–120px       │
+│ context sentence, 17px,      │
+│ 3–4 lines                    │
+│ ╱╲_╱‾╲ sparkline             │
+│ Source: …, Sep 2026          │
+└──────────────────────────────┘
+```
+
+At 390 the context drops under the numeral; the numeral steps down to 96–120px and stays on one line (check the widest value fits in 358px). Band height at most 520px on phone.
+
+## Finish
+
+- Numeral: `--t-giant` (160–280px at 1440), the display face, weight 500–700, tracking −0.035em to −0.04em, leading 0.85, lining tabular figures (`font-variant-numeric: lining-nums tabular-nums`). Optically align it to the grid's left edge (pull left by its side bearing, 0.04–0.06em), so its stem, not its box, sits on the line.
+- Unit: `--t-h2`, same face, `--ink-2`, sitting on the numeral's baseline (`vertical-align: baseline` in a flex row with `align-items: last baseline`). A non-breaking space before word units, none before `%`.
+- Context: `--t-lead`, `--ink` for the first clause, `--ink-2` for the rest, max 30ch, `text-wrap: pretty`; bottom-aligned so its last baseline meets the numeral's baseline.
+- Sparkline (optional): an inline SVG 120×24, 1.5px stroke in `--ink-2`, last point a 4px dot in `--brand`; real series only (move `inline-sparklines-in-copy`). Labelled with its range in `--t-caption`.
+- Source line: `--t-caption`, `--ink-3`, the source, sample size and date; links to a method note if there is one.
+- Ground: a band of its own. Best as the page's one inverted band: ink ground (the brand's darkest shade, not #000), paper text, numeral in `--paper`; the grain from `_finish.md` at 4% with `screen` blend is allowed. On a light page, use `--paper-2`.
+- Section padding `--section` top and bottom; nothing else in the band (no buttons; a single text link at most).
+
+## Content
+
+- The number: real, specific, sourced. "41%" with a sample beats "40%+"; "11 min" beats "10x faster". Not rounded to look bigger.
+- The sentence says what was counted and why it matters to this visitor, in plain words. It names the comparison ("of the checks a reviewer used to run by hand").
+- Source: who measured, on what, when. If it is the company's own data, say so ("our telemetry"); if it is a customer's, name them only with permission.
+- If the project cannot supply a sourced number, this archetype is wrong for the page.
+
+## States and motion
+
+- No count-up (M11): the final value is there from the first paint.
+- One optional moment: the sparkline draws in once when scrolled into view (stroke-dashoffset, 700ms ease-out); reduced motion shows it drawn.
+- Long values (locale formatting "1 240 000"): test the widest real value at 1440 and 390; if it overflows, step down to the next size rather than wrapping.
+- Dark band: check `--ink-2` and `--ink-3` equivalents still pass 4.5:1 on the dark ground.
+
+## Pitfalls
+
+- A row of three or four big numbers (M11): nothing leads, nothing is believed.
+- Count-up animation that delays the one thing the visitor came to read.
+- Gradient-filled numerals or a glow behind them (M02, M20).
+- The context sentence floating at the top of the numeral's box, leaving a hole under it; align baselines.
+- No source, or a source in 10px grey nobody can read.
+- A second giant number elsewhere on the page.
+
+## Floor checks
+
+- Is there exactly one giant number in the section, clearly the largest thing in it?
+- Is there a visible source or date for the number?
+- Is there a sentence next to or under the number saying what it measures, in plain words?
+- Is the number specific (not a round marketing figure like "10x" or "99.9%")?
+- Does the section have its own ground (an inverted or second-tone band) so it reads as a pause?
+- Does the context text align to the numeral's baseline or top edge rather than floating in the middle with gaps?
+- At 390, does the number fit on one line without overflowing the screen?

package/kb/sections/one-person-story.md

@@ -0,0 +1,103 @@
+---
+id: one-person-story
+name: One person's story, told with consent
+kind: story
+shape: split
+layout: "one real person's outcome as a short feature: a photograph of them (or of their place or thing) on one side; on the other their own words set large, three or four sentences on what changed, the programme's part stated modestly, and a quiet consent line and link to more stories"
+fits: [nonprofit, community, education, health, honest, warm, serious, quiet]
+avoid: [saas, developer, b2b, playful-kids, gaming]
+needs: ["one real person who agreed to be featured, with how they want to be named (full name, first name, or none)", "their own words, from an interview or letter, lightly edited with their approval", "a photograph they approved, of them or of something that stands for their story"]
+imagery: photo
+density: airy
+effort: m
+moves: [editorial-drop-cap]
+---
+
+## When it's right
+
+A nonprofit, a civic programme, a school or a health service where the work is measured in people. Numbers say how many; one story says what it means. Dave, 52, a forklift driver, reading a bedtime story to his granddaughter for the first time after a year of Thursday evenings at the library; Bethan testing the Wye every month since 2021; Aaliyah, 11, whose “Taco Cat Runner” won the showcase. One person, in their words, with their consent, does more than a wall of testimonials.
+
+Use it once per page, after the numbers (`impact-numbers-sourced` or `one-huge-number`) or before the ways to help. Not for customer quotes about a product (use `proof-single-honest-quote`), not when consent is uncertain, and not for a composite or invented person: if the story is a composite, say so or don't use it.
+
+## Structure
+
+```
+1440 ─ container 1240; photo cols 1–5, words cols 7–12
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ ┌──────────────────────────────────┐                                                     │
+│ │                                  │     Dave's story                ◂ --t-small, ink-2  │
+│ │  photograph, 4:5                 │                                                     │
+│ │  Dave at the Longsight library   │     “I'd been hiding it for       ◂ quote, --t-h2,   │
+│ │  table, his granddaughter's      │     forty years. The first        display face      │
+│ │  book open                       │     book I finished was hers.”                      │
+│ │                                  │                                                     │
+│ │                                  │     Dave, 52, drives a forklift in Trafford. He      │
+│ └──────────────────────────────────┘     came to Lantern in 2024 after his daughter      │
+│  Photo: Nkechi Adeyemi, with Dave's       found the number at the library. He met his    │
+│  permission                               tutor, Pat, on Thursdays for eleven months.    │
+│                                           ──────────────────────────────                │
+│                                           Dave asked us to use his first name.          │
+│                                           More learners' stories →                      │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+  photo top-aligned with the kicker; quote to body --s-6; body max 56ch
+```
+
+```
+390 ─ photo, then words
+┌──────────────────────────────┐
+│ ┌──────────────────────────┐ │
+│ │ photo, 4:5               │ │
+│ └──────────────────────────┘ │
+│ Photo credit                 │
+│ Dave's story                 │
+│ “I'd been hiding it for      │
+│ forty years …”               │
+│ three sentences              │
+│ consent line                 │
+│ More learners' stories →     │
+└──────────────────────────────┘
+```
+
+At 390 the photograph comes first at 4:5, full width minus 32px, then the kicker, quote (28–32px), body and consent line. The section stays under about 1.8 screens.
+
+## Finish
+
+- Photograph: one, at 4:5, the page's image treatment from `_finish.md`, no frame. A portrait made with the person (not a candid taken without them), or a photo of their place or object if they would rather not be shown.
+- Quote: the display face at `--t-h2`, leading 1.15, `text-wrap: balance`, curly quotes with the opening mark hanging (`_finish.md` hanging punctuation). Their words only; no bold emphasis on a phrase.
+- Body: `--t-lead` or `--t-body` at 17–18px, `--ink`, max 56ch; a drop cap (move `editorial-drop-cap`) only if the page uses one elsewhere.
+- Kicker: “Dave's story” in `--t-small`, `--ink-2`; no badge, no category pill.
+- Consent line: `--t-small`, `--ink-2`, above a hairline or after `--s-5`: how they asked to be named and that they approved the words and photo.
+- Ground: the section on `--paper` with plenty of air (`--s-10` above and below); nothing else in the band.
+
+## Content
+
+- A real person, a real outcome, in specifics: what they could not do before and can now, how long it took, who helped.
+- The programme's role stated modestly (“He met his tutor on Thursdays for eleven months”), never “Lantern changed Dave's life”.
+- Numbers only if they belong to this person and are true.
+- Their naming choice respected: first name, initials, or “a learner in Gorton”. Nothing that identifies a child beyond a first name and age, with a guardian's consent.
+- One link to more stories, or to the way to help that this story connects to.
+
+## States and motion
+
+- Static. No carousel of stories rotating through people; if there are more, link to them.
+- Photo eager if near the fold, with the average colour placeholder.
+- Optional: the quote fades in once below the fold (400ms), off under reduced motion; never a typing effect.
+
+## Pitfalls
+
+- A carousel of five smiling faces with star ratings: that is a review widget, not a story.
+- Stock photos of “beneficiaries”, or generated people (M47): an absolute no.
+- Saviour framing (“we rescued”, “gave them a voice”) or pity imagery.
+- A quote card with a big coloured quotation-mark icon and a shadow.
+- No sign of consent, or a full name and photo of a child.
+- Statistics pasted into a personal story to make it bigger.
+
+## Floor checks
+
+- Is the story about one named or clearly described real person, with a photograph of them or their place?
+- Is the person's own quote set large and in their words?
+- Does the text say concretely what changed for them, with the programme's role stated modestly?
+- Is there a visible line about consent or how the person chose to be named?
+- Is the section free of carousels, star ratings and quote cards with decorative icons?
+- Is the photograph real (not stock or generated) and treated like the rest of the page's photos?
+- At 390, does the photo come first and the quote stay readable without crowding?