@palate/cli 0.0.0-stage → 0.0.2

package/kb/moves/moves.yaml

@@ -0,0 +1,450 @@
+# Design moves: the creative layer. A move is one deliberate idea that makes a screen *this product's*
+# screen instead of a template. The design system decides how things look; a move decides what the
+# screen does that others don't. `palate concept` picks a few that fit the request and the applied
+# system, and avoids ones this project (and this machine) used recently.
+#
+# Fields: id · family · kinds (tool, marketing, commerce, docs) · signals (request words that make it
+# relevant) · fits / avoid (system facets) · cost (low, med, high) · do (how to execute it) · test (how
+# to tell it worked).
+#
+# Add moves freely. A good move is specific enough to execute and general enough to fit many domains.
+
+moves:
+  # ── Composition: marketing ──────────────────────────────────────────────────
+  - id: product-is-the-hero
+    family: composition
+    kinds: [marketing]
+    signals: [app, tool, saas, platform, product, software, dashboard, ai]
+    cost: high
+    do: The first screen is the product, not a headline about it. A real, interactive product window takes most of the fold; the headline sits beneath or beside it at a modest size and reads like a caption for what you are looking at.
+    test: Cover the headline. Can someone still tell what the product does from the first screen?
+
+  - id: off-axis-hero
+    family: composition
+    kinds: [marketing]
+    signals: [launch, product, landing, hero]
+    cost: med
+    do: Left-aligned headline in a narrow column (8–12 words wide), product or artifact anchored to the right edge and running off it. Nothing centred on the first screen.
+    test: Nothing on the first screen is centred, and the crop never cuts the key action.
+
+  - id: document-index
+    family: composition
+    kinds: [marketing, docs]
+    signals: [api, developer, research, legal, finance, report, editorial, documentation, consulting]
+    fits: { palette: [restrained, accented] }
+    cost: med
+    do: Structure the page like a well-made document. A numbered index (01–06) near the top, sections as numbered entries with a sticky number and title in the left margin, content in a readable measure on the right.
+    test: The page could be printed and still make sense; the numbers do real navigation work. If they don't navigate, drop them (decorative 01/02/03 is a template tell), and never pair them with a kicker label on every section.
+
+  - id: sticky-claim-scrolling-proof
+    family: composition
+    kinds: [marketing]
+    signals: [feature, features, how, works, workflow, steps]
+    cost: med
+    do: One sticky column holds a single claim per section; the other column scrolls the proof (real UI states, numbers, artifacts). The claim changes as the proof changes.
+    test: Each claim has a specific proof next to it, not an illustration.
+
+  - id: one-dominant-tile
+    family: composition
+    kinds: [marketing, tool]
+    signals: [features, overview, home, dashboard]
+    cost: low
+    do: Where a grid is needed, one cell is the story (2×2 or full height) and the rest are clearly supporting. Never a grid of equal tiles.
+    test: Squint. One area wins; the rest step back.
+
+  - id: edge-cropped-display
+    family: composition
+    kinds: [marketing, commerce]
+    signals: [brand, bold, launch, fashion, studio, agency, portfolio, event]
+    fits: { displayClass: [display, grotesk, geometric-sans, serif] }
+    cost: low
+    do: One word or number set at viewport scale and deliberately cropped by the edge of the page or its section. It's architecture, not a headline; the real headline stays readable at normal size.
+    test: The cropped type still reads as a word and isn't the only place the message lives.
+
+  - id: manifesto-column
+    family: composition
+    kinds: [marketing]
+    signals: [mission, about, story, manifesto, values, studio, nonprofit, editorial, premium]
+    cost: low
+    do: An essay section in one narrow column (60–68ch), large body type and generous leading, no cards and no icons. The argument is the design.
+    test: It reads well as text alone; nothing decorative was needed.
+
+  - id: before-after-switch
+    family: composition
+    kinds: [marketing]
+    signals: [replace, migrate, faster, automate, instead, compare, alternative]
+    cost: med
+    do: One section where the reader flips a switch between "the old way" and "with this product", shown with the same real content both ways (the messy spreadsheet vs the clean view, the 14-step form vs one field).
+    test: The difference is visible in under two seconds and uses identical data on both sides.
+
+  - id: artifact-gallery
+    family: composition
+    kinds: [marketing, commerce]
+    signals: [invoice, report, receipt, recipe, ticket, contract, document, card, menu, label, certificate]
+    cost: med
+    do: Show the things the product produces (invoices, reports, labels, menus) as beautifully rendered HTML objects laid out like a physical spread, slightly overlapping, at real scale.
+    test: Each artifact is legible and specific to this domain, not a grey placeholder.
+
+  # ── Composition: tools ──────────────────────────────────────────────────────
+  - id: lead-with-the-answer
+    family: composition
+    kinds: [tool]
+    signals: [dashboard, overview, home, analytics, report, admin, queue]
+    cost: low
+    do: The top of the screen is one sentence answering the question people open it for ("3 deals have gone quiet this week, worth $82k"), with the action next to it. Metrics come after, in service of that sentence. No row of four KPI cards.
+    test: Someone who opens the screen for five seconds leaves knowing what to do.
+
+  - id: summary-in-the-table
+    family: composition
+    kinds: [tool]
+    signals: [table, list, records, crm, deals, invoices, orders, companies]
+    cost: low
+    do: Put the totals and counts where the data is (sticky table footer, segmented-control counts, a header line describing the filtered set) instead of cards above the table.
+    test: Changing a filter changes every number on the screen.
+
+  - id: list-detail-split
+    family: composition
+    kinds: [tool]
+    signals: [inbox, messages, tickets, records, review, queue, approvals, mail]
+    cost: med
+    do: List on the left, the selected record on the right, moving with the keyboard. Detail opens without a page change, and the list keeps its scroll and selection.
+    test: You can triage ten items with only the keyboard.
+
+  - id: grouped-by-state
+    family: composition
+    kinds: [tool]
+    signals: [tasks, issues, pipeline, deals, orders, members, approvals, status]
+    cost: low
+    do: Group rows by their state (Needs you · In progress · Done) with collapsible group headers and counts, instead of a status column people must sort.
+    test: The most urgent group is first and open; finished work is collapsed.
+
+  - id: time-as-the-axis
+    family: composition
+    kinds: [tool, marketing]
+    signals: [schedule, timeline, history, activity, events, bookings, calendar, log, deploys, runs]
+    cost: high
+    do: Lay records along time (a horizontal day/week track, or a vertical log with a time rail) when "when" matters more than "what". Gaps and clusters become visible.
+    test: You can see at a glance when things bunch up or go quiet.
+
+  - id: progressive-row
+    family: composition
+    kinds: [tool]
+    signals: [table, list, members, invoices, runs, logs]
+    cost: med
+    do: Rows are compact; selecting one expands it in place to show detail and actions, pushing the rest down. No modal, no page change.
+    test: The table never loses its place.
+
+  # ── Type ────────────────────────────────────────────────────────────────────
+  - id: numbers-as-display
+    family: type
+    kinds: [tool, marketing]
+    signals: [finance, money, revenue, metrics, analytics, bank, usage, pricing, stats]
+    cost: low
+    do: The key figure is set in the display role with tabular figures and its unit small and muted beside it; labels in the caption role. One number per view earns this, not four.
+    test: The number is the focal point and lines up with its neighbours.
+
+  - id: machine-values-in-mono
+    family: type
+    kinds: [tool, docs, marketing]
+    signals: [developer, api, logs, ids, deploy, infra, data, technical, terminal, code]
+    cost: low
+    do: Every value a machine produced (IDs, hashes, timestamps, durations, amounts in logs) is in the mono face at body-sm; everything a person wrote stays in the sans. The split carries meaning.
+    test: Mono never appears on prose or labels.
+
+  - id: editorial-scale-jump
+    family: type
+    kinds: [marketing, commerce]
+    signals: [premium, editorial, luxury, magazine, story, brand, fashion, food]
+    cost: low
+    do: A big jump between the display role and body (5–7×) with nothing in between on the first screen. The tension between huge and small does the work, not weight.
+    test: The first screen uses at most three sizes.
+
+  - id: numbered-sections
+    family: type
+    kinds: [marketing, docs]
+    signals: [steps, process, how, guide, method, onboarding]
+    cost: low
+    do: Section numbers in the mono or caption role, aligned to a fixed margin column, used as real wayfinding (they match the index or the steps).
+    test: The numbers are consistent and mean something, and appear once per page as a device (not on every section alongside kickers).
+
+  - id: domain-voice-labels
+    family: type
+    kinds: [tool, marketing, commerce]
+    signals: []
+    cost: low
+    do: Labels, empty states and buttons use the domain's own words (a kitchen says "86'd", a newsroom says "filed", a lab says "assay"), not generic product words (Items, Records, Manage).
+    test: 'Read only the labels: you can tell the domain.'
+
+  # ── Colour and material ─────────────────────────────────────────────────────
+  - id: one-colour-moment
+    family: colour
+    kinds: [marketing, commerce]
+    signals: [brand, launch, product, landing]
+    fits: { palette: [restrained, accented] }
+    cost: low
+    do: The whole page is neutral except one surface in full brand colour (a single section, the final call to action, or one card). It's the only colour moment and it lands where the decision is.
+    test: There is exactly one coloured surface, and it sits next to the main action.
+
+  - id: data-is-the-colour
+    family: colour
+    kinds: [tool]
+    signals: [analytics, dashboard, heatmap, usage, status, monitoring, health]
+    cost: low
+    do: Colour only encodes data (intensity, status, category), never decoration. The interface itself is neutral, so any colour on screen is information.
+    test: Remove the data and the screen is grey.
+
+  - id: dark-island
+    family: colour
+    kinds: [marketing]
+    signals: [product, app, developer, ai, tool]
+    fits: { theme: [light] }
+    cost: low
+    do: A light page with one dark band holding the product or the most technical proof, like a stage. The transition is a hard edge, not a gradient.
+    test: The dark band holds the most important proof, not decoration.
+
+  - id: domain-material
+    family: colour
+    kinds: [marketing, commerce]
+    signals: [paper, print, craft, food, publishing, architecture, engineering, books, coffee, wine, garden]
+    cost: med
+    do: One surface borrows a material from the domain at very low contrast (paper grain for print, blueprint grid for engineering, linen for textiles, receipt stock for retail), on one surface only.
+    test: You notice it on the second look, not the first.
+
+  - id: tinted-neutrals
+    family: colour
+    kinds: [tool, marketing, commerce, docs]
+    signals: [warm, calm, brand, friendly]
+    cost: low
+    do: Pull every neutral (canvas, surfaces, hairlines, muted text) 2–4% toward the brand hue so the greys feel owned. Keep contrast ratios.
+    test: Next to pure grey the page feels warmer or cooler, but no one would call it coloured.
+
+  # ── Data ────────────────────────────────────────────────────────────────────
+  - id: trend-in-the-row
+    family: data
+    kinds: [tool]
+    signals: [table, metrics, accounts, companies, revenue, usage, deals, portfolio]
+    cost: med
+    do: A tiny sparkline or 7-bar strip inside the row, 64–96px wide, neutral, with the last point in the accent only when it matters.
+    test: You can spot the row that's turning without opening it.
+
+  - id: change-in-words
+    family: data
+    kinds: [tool, marketing]
+    signals: [analytics, metrics, dashboard, report, finance]
+    cost: low
+    do: Write changes as sentences with context ("up 12% since Monday, mostly from Northwind") instead of bare arrows and percentages.
+    test: Each delta says compared with what and why.
+
+  - id: distribution-not-average
+    family: data
+    kinds: [tool]
+    signals: [analytics, latency, performance, scores, survey, grades, prices, response]
+    cost: med
+    do: Show the spread (a dot strip, a small histogram, p50/p95 marks) instead of one average, so outliers are visible.
+    test: The outlier someone would care about is visible.
+
+  - id: specific-sample-data
+    family: data
+    kinds: [tool, marketing, commerce, docs]
+    signals: []
+    cost: low
+    do: 'Sample data is specific, plausible and of this domain: real-sounding names from varied cultures, uneven numbers ($18,420 not $10,000), real-looking dates, one awkward long value. Never John Doe, Acme or Lorem.'
+    test: A domain expert wouldn't wince at the sample data.
+
+  - id: stage-as-a-path
+    family: data
+    kinds: [tool]
+    signals: [pipeline, stage, progress, onboarding, steps, order, shipping, deal]
+    cost: low
+    do: Show position on a path as a short segmented track plus the stage name, so "how far along" reads without parsing words.
+    test: You can rank rows by progress at a glance.
+
+  # ── Interaction ─────────────────────────────────────────────────────────────
+  - id: try-it-on-the-page
+    family: interaction
+    kinds: [marketing]
+    signals: [app, tool, ai, product, editor, calculator, generator]
+    cost: high
+    do: One real interaction on the marketing page (approve a request, type into the editor, drag a slider and watch the price) with an undo. It responds instantly and does one thing well.
+    test: A visitor learns something by touching it that the copy couldn't say.
+
+  - id: keyboard-is-visible
+    family: interaction
+    kinds: [tool]
+    signals: [inbox, editor, developer, power, fast, keyboard, triage]
+    cost: low
+    do: Shortcuts are shown where the action lives (a Kbd hint in the button, the search field, the row menu), not in a help page.
+    test: A new user learns two shortcuts in the first minute.
+
+  - id: undo-not-confirm
+    family: interaction
+    kinds: [tool]
+    signals: [remove, delete, archive, settings, members, roles]
+    cost: low
+    do: Reversible actions happen immediately and offer Undo in a toast; only irreversible ones confirm first.
+    test: There are no "Are you sure?" dialogs for things that can be undone.
+
+  - id: inline-edit
+    family: interaction
+    kinds: [tool]
+    signals: [settings, table, records, profile, members, crm]
+    cost: med
+    do: Values are edited where they're shown (click, edit, Enter to save, Esc to cancel), with a quiet saved state. No edit page.
+    test: Changing one value takes one click and one keystroke.
+
+  - id: peek-on-hover
+    family: interaction
+    kinds: [tool]
+    signals: [table, list, links, references, records, people]
+    cost: med
+    do: Hovering or focusing a reference (a person, a company, a linked issue) shows a small card with the three facts people check most, after a short delay.
+    test: People stop opening records just to check one thing.
+
+  # ── Motion ──────────────────────────────────────────────────────────────────
+  - id: motion-means-change
+    family: motion
+    kinds: [tool, marketing]
+    signals: []
+    cost: low
+    do: Motion only where something actually changed (a number rolls, a row settles into its new place, a stage advances). Nothing animates on scroll for its own sake.
+    test: Every animation answers "what just changed?".
+
+  - id: scroll-drives-the-product
+    family: motion
+    kinds: [marketing]
+    signals: [how, works, workflow, steps, features, story]
+    cost: high
+    do: One sticky product window whose state advances as the reader scrolls through the steps, so the same UI tells the whole story. Respects reduced motion with stepped states.
+    test: Scrolling back reverses the state cleanly, and it works with motion off.
+
+  # ── Content and voice ───────────────────────────────────────────────────────
+  - id: concrete-headline
+    family: content
+    kinds: [marketing, commerce]
+    signals: []
+    cost: low
+    do: The headline names a concrete outcome in the reader's words, with a noun from their world or a number ("Close the month in two days", "Forty hours of burn, one pour"), never a slogan about the future.
+    test: The headline couldn't be moved to a competitor's page.
+
+  - id: show-the-work
+    family: content
+    kinds: [marketing]
+    signals: [agency, studio, consulting, ai, automation, service]
+    cost: med
+    do: Instead of benefits, show the work itself (the actual output, an unedited before and after, a real log of what the product did overnight).
+    test: There's at least one thing on the page a competitor couldn't fake.
+
+  - id: answer-the-objection
+    family: content
+    kinds: [marketing]
+    signals: [security, enterprise, pricing, migrate, switch, trust, privacy, bank]
+    cost: low
+    do: A section that names the reader's main doubt in their words and answers it directly with specifics (what data leaves, how migration works, what it costs at their size).
+    test: The doubt is stated as plainly as a sceptic would say it.
+
+  - id: changelog-as-proof
+    family: content
+    kinds: [marketing]
+    signals: [developer, startup, tool, saas, product]
+    cost: low
+    do: Recent shipped improvements with dates, as proof the product is alive, instead of a grey logo strip.
+    test: Dates are recent and entries are specific.
+
+  - id: one-long-voice
+    family: content
+    kinds: [marketing, commerce]
+    signals: [customer, testimonial, review, case, story]
+    cost: low
+    do: One customer's longer account with context (who, what changed, a number), set editorially, instead of a carousel or a grid of three short quotes.
+    test: The quote contains a specific detail and a number.
+
+  # ── Commerce ────────────────────────────────────────────────────────────────
+  - id: sensory-spec-sheet
+    family: content
+    kinds: [commerce]
+    signals: [candle, coffee, wine, perfume, tea, food, skincare, fashion, fabric, furniture]
+    cost: low
+    do: Specs in the domain's own vocabulary as a structured, typographic list (notes, burn time, origin, weave, finish), set like a label or a menu.
+    test: A connoisseur would recognise the vocabulary.
+
+  - id: material-close-up
+    family: composition
+    kinds: [commerce]
+    signals: [candle, fashion, furniture, jewellery, ceramics, coffee, craft, handmade]
+    cost: med
+    do: Pair every product image with a close-up of its material or making (wax surface, weave, glaze) at the same size, so texture carries the quality.
+    test: The close-up shows something the product shot couldn't.
+
+  - id: consistent-object-light
+    family: composition
+    kinds: [commerce]
+    signals: [shop, store, collection, products, catalogue]
+    cost: med
+    do: All product images on one surface, one light direction, one angle and one crop, so the collection reads as a set. Image slots have fixed aspect ratios.
+    test: The grid looks like one photo shoot.
+
+  # ── Docs ────────────────────────────────────────────────────────────────────
+  - id: runnable-first
+    family: content
+    kinds: [docs]
+    signals: [api, sdk, quickstart, reference, developer]
+    cost: med
+    do: The first thing on each page is the smallest working example with a copy button and the exact output it produces; explanation follows.
+    test: Copying the first block and running it works.
+
+  - id: path-picker
+    family: interaction
+    kinds: [docs]
+    signals: [sdk, language, framework, install, setup]
+    cost: med
+    do: A persistent choice of language or framework at the top that rewrites every snippet on every page, remembered between visits.
+    test: Changing it once changes every example.
+
+# The AI defaults. These appear on almost every generated page, so they make a screen look generated.
+# Use one only when the job really needs it, and then give it a twist the concept justifies.
+cliches:
+  - id: centred-hero-glow
+    kinds: [marketing]
+    what: Centred headline + subhead + two buttons over a gradient glow or blurred blob.
+  - id: eyebrow-pill
+    kinds: [marketing]
+    what: A pill or eyebrow label above the headline ("✨ New", "Introducing …").
+  - id: eyebrow-label
+    kinds: [marketing]
+    what: A small uppercase, letter-spaced label above every section heading ("THE PIPELINE", "PRICING").
+  - id: icon-feature-trio
+    kinds: [marketing]
+    what: Three or four equal cards, each with an icon in a tinted square, a title and two lines of text.
+  - id: logo-strip
+    kinds: [marketing]
+    what: '"Trusted by" row of grey logos directly under the hero.'
+  - id: stat-row
+    kinds: [marketing, tool]
+    what: A row of 3–4 big numbers with small labels (10×, 99.9%, 24/7), or four KPI cards with ▲% deltas on a dashboard.
+  - id: quote-grid
+    kinds: [marketing]
+    what: Testimonial carousel or a grid of three short quotes with avatars and star ratings.
+  - id: three-tier-pricing
+    kinds: [marketing]
+    what: Three pricing cards with the middle one raised and badged "Most popular".
+  - id: gradient-cta-band
+    kinds: [marketing]
+    what: FAQ accordion then a full-width gradient band saying "Ready to get started?".
+  - id: equal-bento
+    kinds: [marketing]
+    what: A bento grid of near-equal tiles, often glassy, each with a mini illustration.
+  - id: purple-blue-gradient
+    kinds: [marketing, tool]
+    what: Purple-to-blue or neon gradients, glows and noise as decoration.
+  - id: serif-italic-accent
+    kinds: [marketing]
+    what: One italic serif word inside a sans headline (the 2025–26 default).
+  - id: icon-sidebar
+    kinds: [tool]
+    what: Sidebar of ten icon+label items with a user avatar block at the bottom, regardless of how many destinations the product has.
+  - id: pill-rainbow
+    kinds: [tool]
+    what: Filled coloured status pills in every row so the table looks like confetti.
+  - id: generic-sample
+    kinds: [tool, marketing, commerce, docs]
+    what: John Doe, Jane Smith, Acme Inc., round numbers, Lorem ipsum, emoji used as icons.

package/kb/moves/museum-painting-backdrop.md

@@ -0,0 +1,59 @@
+---
+id: museum-painting-backdrop
+name: CC0 museum paintings as backdrops
+kind: imagery
+fits: [calm, crafted, heritage, nature, artsy, premium, editorial, cultural, quiet]
+avoid: [playful-kids, gaming, data-dense-tool, finance-trust-first, low-bandwidth]
+signature: true
+effort: s
+perf: "resized copies (1600–2400 px, ~150–350 KB WebP/JPEG), next/image or srcset with honest sizes; priority only for the hero"
+a11y: "decorative (alt=\"\"), credit as visible text; a wash only where text sits on the painting, with contrast checked"
+pairs_with: [canvas-grain, feature-films-on-painted-stages, engraving-colour-lens, hero-paints-itself-in]
+deps: none
+---
+
+## What it is
+
+Public-domain paintings, from museums that release their photographs as CC0, used as the stage behind a hero, feature windows or a footer, each credited in small type (artist, title, year, museum). Instead of gradients, blobs or stock 3D, the page's colour and atmosphere come from real art.
+
+## Why it works
+
+- A painting carries depth, light and a mood that no gradient can, and it is instantly *not* the AI default (glow blobs, mesh gradients, dotted grids).
+- Landscapes give calm space for UI to sit on: a sky behind a headline, a field behind a window.
+- Crediting them is honest and reads as taste: it says someone chose this picture.
+- CC0 photos are free for any use, so there is no licensing risk when the source is the museum's own open-access release.
+
+## When to use / when not
+
+Use for calm, crafted, editorial or heritage brands, or any product that wants warmth and authorship without illustration budget. Choose landscapes and calm scenes with low-detail areas (sky, water, fields) where UI and text will sit. Use a handful across a page, one per section at most.
+
+Not for: playful or kids' brands, gaming, dense tools, or a brand whose palette fights every painting (pick paintings whose colours agree with the brand: palate's emerald sits well in green landscapes). Never use a painting whose photo isn't CC0 or public domain, and never a living artist's work.
+
+## Recipe
+
+1. **Source.** Only museum open-access programmes that mark images CC0 (e.g. National Gallery of Art, Washington; the Met's Open Access; Art Institute of Chicago; Cleveland Museum of Art). Confirm the CC0 / public-domain mark on the object's page; save the object URL with the file.
+2. **Choose.** Calm composition, a low-detail area where content goes, colours that agree with the brand. Prefer landscapes; avoid faces as backdrops (eyes compete with text).
+3. **Prepare.** Resize to 1600 px (2400 for a full-width hero), export WebP/JPEG at quality ~80. Keep a typed registry: `{ src, w, h, artist, title, year, museum, at? }` where `at` is the `object-position` that keeps the interesting part in frame. One `credit(a)` helper formats `Artist, Title, Year · Museum`.
+4. **Backdrop.** A container with `position: relative; isolation: isolate; overflow: hidden; border-radius` holding the image (`fill` + `object-cover` + `object-position` from `at`, `-z-10`), the canvas grain, then the content.
+5. **Readability.** Only where text sits on the painting: a soft top-down dark wash (e.g. `linear-gradient(180deg, rgba(6,24,18,.42), rgba(6,24,18,.22) 45%, rgba(6,24,18,.08) 75%, transparent)`) and a faint text-shadow. No glows anywhere else.
+6. **Credit** in 12 px type: under a framed stage as a `<figcaption>`, or in a corner of a full-bleed hero (hide it on phones if it collides, but keep it in the footer or an about page).
+7. **Responsive.** Check the crop at 390 px: set `at` so the subject stays in frame; the phone crop is usually the sky and centre.
+8. React/Tailwind: `next/image` with `fill`, `sizes` that match the layout (`(min-width: 768px) 58vw, 100vw`), `priority` only for the hero.
+
+## Pitfalls
+
+- A painting behind dense UI: the window must be a solid white surface with a shadow; never put small text straight on paint.
+- Too many paintings with different palettes: pick a family (greens and golds, or blues), and never two adjacent sections in different moods.
+- Missing credit, or a credit that is wrong: keep the registry as the single source.
+- Heavy dark overlays that kill the painting: wash only where text is.
+- Assuming "old" means free: the *photograph* must be released CC0 by the institution.
+
+## How to verify
+
+- `palate shoot` at 1440 and 390: subject in frame at both widths; text on paint passes WCAG AA contrast; every painting has a visible credit.
+- `palate details`: image weights within budget; only the hero image is priority.
+- Swap test: replace the paintings with grey; if the page loses its identity, the move is doing its job.
+
+## Examples
+
+- palate's own site: the hero (Constable, "Wivenhoe Park, Essex"), every feature stage (Monet's "Water Lilies" and "The Japanese Footbridge", Inness's "The Lackawanna Valley", van Gogh's "Wheat Field with Cypresses", Church's "The Heart of the Andes") and the footer (Church's "Twilight in the Wilderness"), each credited (`art.ts`).

package/kb/moves/one-colour-brand-world.md

@@ -0,0 +1,56 @@
+---
+id: one-colour-brand-world
+name: One-colour brand world
+kind: texture
+fits: [calm, crafted, minimal, premium, editorial, trustworthy, saas, quiet]
+avoid: [playful-kids, energetic, gaming]
+signature: false
+effort: s
+perf: "tokens only; nothing to load"
+a11y: "the brand colour is checked at 4.5:1 for text and 3:1 for controls on both its surfaces; state is never colour alone"
+pairs_with: [dark-band-contrast-section, tactile-button, museum-painting-backdrop, designed-dark-mode]
+deps: none
+---
+
+## What it is
+
+The whole page uses one brand hue and neutrals, nothing else. Buttons, links, selection, focus, the picked state, the dark band and every illustration are tints and shades of that one colour. Other colour only enters through content (a photo, a painting, a real brand logo).
+
+## Why it works
+
+- A single owned colour is the fastest brand memory there is; spread across six accents it means nothing.
+- It is a constraint that forces hierarchy through value and size instead of hue, which reads calmer and more expensive.
+- When every interactive thing is the one colour, users learn "that colour means I can act" in seconds.
+
+## When to use / when not
+
+Use for most product and SaaS sites, studios and calm premium brands. It suits pages where a picture or the product UI should be the colourful thing.
+
+Not for: kids' and gaming brands that live on energy and many colours; data visualisation with categorical series (charts need their own palette, keep it separate from brand).
+
+## Recipe
+
+1. **Pick the hue and a ramp.** One brand colour (e.g. emerald `#0B6E4F`), then a ramp in OKLCH at fixed hue: 50 (wash, e.g. `#f2f7f4`), 100, 200, 500 (brand), 600 (hover), 900 (deep, e.g. `#062A20`). Neutrals slightly tinted toward the hue (chroma ≤ 0.01).
+2. **Assign jobs.** Brand 500: primary actions, links, focus ring option, picked state. 600: hover. 50–100: washes and selected rows. 900: the dark band and headings on washes. Text body stays neutral grey, never brand (it would read as links).
+3. **Tokens.** `:root { --brand; --brand-hover; --brand-deep; --brand-wash }` and in Tailwind `@theme inline { --color-brand: var(--brand) ... }`. Ban raw hex in components (lint or `palate check`).
+4. **Selection and focus too.** `::selection { background: var(--brand-100) }`, caret colour brand, checkbox `accent-color: var(--brand)`.
+5. **Illustrations and icons** in the ramp only. Logos of other brands stay in their official colours; they are content.
+6. **Dark band.** One section on `--brand-deep` with white type (see `dark-band-contrast-section`).
+7. **No JS, no motion involved.** Works everywhere; check forced-colors mode keeps borders on buttons (`border: 1px solid transparent`).
+
+## Pitfalls
+
+- A second "accent" creeping in for badges or charts: decide where it's allowed (data only) and keep it out of the brand surface.
+- Brand-coloured body text: reads as links.
+- Pure black UI accents next to the brand: they compete. Use the deep shade.
+- Ramp made by opacity: tints over different backgrounds drift; use solid ramp values.
+
+## How to verify
+
+- `palate shoot` + colour sampling: every saturated colour on the page is on the brand ramp, except content (paintings, logos, product screenshots).
+- Contrast: brand on white and white on brand pass 4.5:1 for button text.
+- `palate check`: no raw hex outside the tokens file.
+
+## Examples
+
+- palate's own site: a white page where all colour comes from one emerald (buttons, links, the picked state, the selection) and from public-domain paintings; its taste rules forbid cream backgrounds and black accents.

package/kb/moves/playful-404.md

@@ -0,0 +1,58 @@
+---
+id: playful-404
+name: A 404 that keeps the site's voice
+kind: easter-egg
+fits: [calm, crafted, friendly, saas, developer, playful, honest, minimal]
+avoid: [crisis, clinical]
+signature: false
+effort: s
+perf: "static page, no extra assets; reuses the site's own components and CSS animation"
+a11y: "real h1 that says what happened; the missed address is text; two clear links back; the reused animation is static under reduced motion"
+pairs_with: [pointer-highlight-word, tactile-button, tiny-game-easter-egg]
+deps: none
+---
+
+## What it is
+
+The not-found page as a small, finished screen in the site's own voice: the normal header, one clear line ("This page doesn't exist."), the address that missed shown back to the visitor, and two obvious ways on. The one touch of play comes from the site's own signature, reused, so it feels like the same place rather than a joke page.
+
+## Why it works
+
+- A 404 is a moment of mild failure; a calm, specific page that shows *what* missed ("Nothing lives at /pricng") and offers the way back rescues the visit.
+- Reusing the site's signature (here, the hero's highlight drawn around one word) says "you're still on our site" and adds a wink without a cartoon.
+- Most 404s are default or overdone; a finished one is a small proof of care.
+
+## When to use / when not
+
+Every site needs one. Go more playful (a tiny game, an illustration) for playful brands; stay plain and helpful for crisis, health or clinical services, where a joke reads badly.
+
+Not for: jokes that blame the user, or pages that hide the way back behind an animation.
+
+## Recipe
+
+1. **Keep the frame.** The normal header with the logo (link home) and the primary action, and a minimal footer. Visitors should feel they're still on the site.
+2. **One line, one word marked.** An `h1` like "This page doesn't exist." with the site's signature applied to one word: palate draws its pointer-highlight box around "exist" with the cursor arriving, the same component as the hero (`pointer-highlight-word`).
+3. **Show the missed address.** A client component reads the pathname and shows it in a small mono chip, decoded (`decodeURI` in try/catch), truncated at ~240 px with the full value in `title`. Before JS (server render) it reads "this address": "Nothing lives at /pricng. The link may be old, or the address has a typo."
+4. **Two ways on.** The primary button back home ("Back to palate", brand colour, tactile) and a secondary to the most useful page ("See it work"). If the site has search or a sitemap, offer it as the third.
+5. **Metadata.** `title: "Page not found · Brand"`, a description, and a real 404 status (Next's `not-found.tsx` does this).
+6. **Optional:** a likely match ("Did you mean /pricing?") from a small list of known routes by edit distance, only when confident.
+7. **Reduced motion:** the highlight box and cursor are simply there; no-JS shows the same page with "this address".
+8. **Mobile:** headline scales from 60 to 40 px, buttons wrap and stay ≥ 44 px tall.
+
+## Pitfalls
+
+- Returning 200 for missing pages (bad for SEO and monitoring).
+- A different visual language from the rest of the site.
+- Jokes at the visitor's expense ("You broke it!").
+- Echoing the raw path unescaped (XSS); render it as text.
+- Auto-redirecting home after a few seconds.
+
+## How to verify
+
+- Request a missing route: status 404, title set.
+- `palate shoot /does-not-exist` at both widths: header, the line with its highlight, the missed path chip, two buttons; JS off reads "this address".
+- A very long or encoded path truncates without overflow.
+
+## Examples
+
+- palate's own site (`not-found.tsx`, `MissedPath.tsx`): the site header, "This page doesn't exist." with the hero's pointer-highlight around "exist", the missed address in a mono chip, and two ways back: "Back to palate" and "See it work".