@palate/cli 0.0.0-stage → 0.0.1

package/kb/inspiration/index.json

@@ -0,0 +1,79 @@
+{
+  "about": "palate's own short list of well-crafted public product sites: links with palate's own tags and one-line notes, nothing else. palate ships no screenshots, code, copy, images or fonts from these sites. `palate research` looks at a few of them live, on the user's machine, only when the user asks for a design (robots.txt respected, a few seconds between pages, nothing uploaded). Tags: kind (which page), mood, industry. The list grows on each user's machine as they run research (~/.palate/research/inspiration.json).",
+  "browse": [
+    { "url": "https://godly.website", "name": "Godly", "note": "A gallery for a human to browse by hand. palate never scrapes it or copies its collection." },
+    { "url": "https://land-book.com", "name": "Land-book", "note": "A gallery for a human to browse by hand. palate never scrapes it or copies its collection." },
+    { "url": "https://www.siteinspire.com", "name": "SiteInspire", "note": "A gallery for a human to browse by hand. palate never scrapes it or copies its collection." },
+    { "url": "https://www.awwwards.com", "name": "Awwwards", "note": "A gallery for a human to browse by hand. palate never scrapes it or copies its collection." },
+    { "url": "https://www.lapa.ninja", "name": "Lapa Ninja", "note": "A gallery for a human to browse by hand. palate never scrapes it or copies its collection." },
+    { "url": "https://minimal.gallery", "name": "Minimal Gallery", "note": "A gallery for a human to browse by hand. palate never scrapes it or copies its collection." }
+  ],
+  "sites": [
+    { "url": "https://front.com", "name": "Front", "kind": ["landing"], "mood": ["confident", "dense", "corporate"], "industry": ["shared-inbox", "email", "support", "customer-service"], "note": "The category leader for shared inboxes; sells to larger teams with product proof and customer logos." },
+    { "url": "https://missiveapp.com", "name": "Missive", "kind": ["landing"], "mood": ["friendly", "crafted", "light"], "industry": ["shared-inbox", "email", "collaboration"], "note": "Shared inbox and team chat in one app; a smaller, friendlier voice than the enterprise players." },
+    { "url": "https://www.helpscout.com", "name": "Help Scout", "kind": ["landing"], "mood": ["warm", "human", "friendly"], "industry": ["shared-inbox", "support", "customer-service"], "note": "Support inbox with a warm, human tone; leans on people and plain language rather than tech." },
+    { "url": "https://hiverhq.com", "name": "Hiver", "kind": ["landing"], "mood": ["corporate", "dense"], "industry": ["shared-inbox", "email", "support"], "note": "Shared inbox that lives inside Gmail; a typical B2B SaaS landing structure." },
+    { "url": "https://www.intercom.com", "name": "Intercom", "kind": ["landing"], "mood": ["bold", "premium", "technical"], "industry": ["support", "customer-service", "ai"], "note": "Support platform with a confident, high-production marketing site." },
+    { "url": "https://superhuman.com", "name": "Superhuman", "kind": ["landing"], "mood": ["premium", "precise", "dark", "fast"], "industry": ["email", "productivity"], "note": "Email client sold on speed; premium, restrained and very sure of itself." },
+    { "url": "https://www.hey.com", "name": "HEY", "kind": ["landing"], "mood": ["opinionated", "playful", "editorial", "warm"], "industry": ["email", "productivity"], "note": "Email with a strong opinion; long, argued copy and hand-drawn warmth instead of feature grids." },
+    { "url": "https://basecamp.com", "name": "Basecamp", "kind": ["landing"], "mood": ["opinionated", "calm", "warm", "editorial"], "industry": ["project-management", "collaboration"], "note": "Calm project management argued in plain words; personality from writing, not decoration." },
+    { "url": "https://culturedcode.com/things/", "name": "Things", "kind": ["landing", "product"], "mood": ["calm", "crafted", "quiet", "premium"], "industry": ["productivity", "tasks"], "note": "A to-do app presented like a well-made object; quiet, careful, lets the product breathe." },
+    { "url": "https://bear.app", "name": "Bear", "kind": ["landing"], "mood": ["calm", "friendly", "crafted"], "industry": ["notes", "writing"], "note": "Notes app with a calm, friendly page and a single warm accent." },
+    { "url": "https://ia.net/writer", "name": "iA Writer", "kind": ["product"], "mood": ["editorial", "minimal", "quiet", "typographic"], "industry": ["writing"], "note": "Typography is the product and the page; reads like a well-set essay." },
+    { "url": "https://www.are.na", "name": "Are.na", "kind": ["landing"], "mood": ["calm", "minimal", "quiet", "opinionated"], "industry": ["research", "creative", "collaboration"], "note": "A calm, anti-feed tool for collecting ideas; plain and deliberately unflashy." },
+    { "url": "https://mymind.com", "name": "mymind", "kind": ["landing"], "mood": ["calm", "premium", "editorial", "crafted"], "industry": ["notes", "research", "productivity"], "note": "Private memory app with a serene, editorial presentation and a clear stance." },
+    { "url": "https://readwise.io/read", "name": "Readwise Reader", "kind": ["product"], "mood": ["calm", "technical", "dense"], "industry": ["reading", "productivity"], "note": "Reading app that shows real product states and explains workflows clearly." },
+    { "url": "https://linear.app", "name": "Linear", "kind": ["landing"], "mood": ["precise", "dark", "premium", "technical"], "industry": ["project-management", "dev-tools"], "note": "Precise and dark; the product UI carries the page and every detail is tuned." },
+    { "url": "https://linear.app/changelog", "name": "Linear changelog", "kind": ["changelog"], "mood": ["precise", "editorial"], "industry": ["project-management", "dev-tools"], "note": "A changelog that doubles as proof of a team's pace and care." },
+    { "url": "https://stripe.com", "name": "Stripe", "kind": ["landing"], "mood": ["premium", "technical", "bold", "crafted"], "industry": ["payments", "finance", "dev-tools"], "note": "High craft across type, motion and diagrams; dense information made easy to scan." },
+    { "url": "https://stripe.com/pricing", "name": "Stripe pricing", "kind": ["pricing"], "mood": ["technical", "precise"], "industry": ["payments", "finance"], "note": "Pricing explained as plain numbers with the detail one click deeper." },
+    { "url": "https://vercel.com", "name": "Vercel", "kind": ["landing"], "mood": ["technical", "dark", "minimal", "precise"], "industry": ["dev-tools", "infrastructure"], "note": "Monochrome, grid-driven developer marketing with sharp hierarchy." },
+    { "url": "https://www.raycast.com", "name": "Raycast", "kind": ["landing"], "mood": ["dark", "crafted", "playful", "premium"], "industry": ["productivity", "dev-tools"], "note": "Launcher app with crafted dark visuals and keyboard-first storytelling." },
+    { "url": "https://arc.net", "name": "Arc", "kind": ["landing"], "mood": ["playful", "warm", "bold", "crafted"], "industry": ["browser"], "note": "A browser sold with colour, warmth and personality rather than specs." },
+    { "url": "https://www.notion.com", "name": "Notion", "kind": ["landing"], "mood": ["friendly", "illustrated", "light"], "industry": ["notes", "docs", "productivity"], "note": "Friendly, illustrated, light; a broad product explained in simple blocks." },
+    { "url": "https://www.figma.com", "name": "Figma", "kind": ["landing"], "mood": ["bold", "playful", "colourful"], "industry": ["design-tools", "creative", "collaboration"], "note": "Design tool with bold colour and playful energy aimed at makers." },
+    { "url": "https://www.framer.com", "name": "Framer", "kind": ["landing"], "mood": ["dark", "bold", "premium"], "industry": ["design-tools", "creative"], "note": "Website builder that shows off motion and high production values." },
+    { "url": "https://www.tldraw.com", "name": "tldraw", "kind": ["landing"], "mood": ["playful", "minimal", "hand-drawn"], "industry": ["design-tools", "collaboration"], "note": "A whiteboard whose own hand-drawn style becomes the brand." },
+    { "url": "https://pitch.com", "name": "Pitch", "kind": ["landing"], "mood": ["bold", "colourful", "premium"], "industry": ["presentation", "collaboration"], "note": "Presentation software with a confident, colourful, editorial feel." },
+    { "url": "https://www.loom.com", "name": "Loom", "kind": ["landing"], "mood": ["friendly", "light"], "industry": ["video", "collaboration"], "note": "Async video; friendly B2B marketing with clear product shots." },
+    { "url": "https://cal.com", "name": "Cal.com", "kind": ["landing"], "mood": ["minimal", "light", "technical"], "industry": ["scheduling"], "note": "Scheduling with a clean, light, monochrome page and a live booking widget." },
+    { "url": "https://plane.so", "name": "Plane", "kind": ["landing"], "mood": ["technical", "light"], "industry": ["project-management"], "note": "Open-source project tool; a typical modern product-led landing." },
+    { "url": "https://resend.com", "name": "Resend", "kind": ["landing"], "mood": ["dark", "minimal", "crafted", "technical"], "industry": ["email", "dev-tools"], "note": "Email API with a quiet dark page, a little 3D craft and code as proof." },
+    { "url": "https://supabase.com", "name": "Supabase", "kind": ["landing"], "mood": ["dark", "technical"], "industry": ["dev-tools", "infrastructure"], "note": "Developer platform; dark, green-accented, code-forward." },
+    { "url": "https://posthog.com", "name": "PostHog", "kind": ["landing"], "mood": ["playful", "opinionated", "illustrated", "dense"], "industry": ["analytics", "dev-tools"], "note": "Breaks SaaS conventions on purpose: humour, density and a strong voice." },
+    { "url": "https://clerk.com", "name": "Clerk", "kind": ["landing"], "mood": ["crafted", "technical", "light"], "industry": ["dev-tools", "security"], "note": "Auth components shown as real, interactive UI pieces." },
+    { "url": "https://mercury.com", "name": "Mercury", "kind": ["landing"], "mood": ["calm", "premium", "quiet"], "industry": ["banking", "finance"], "note": "Banking presented with calm, premium restraint and atmospheric imagery." },
+    { "url": "https://ramp.com", "name": "Ramp", "kind": ["landing"], "mood": ["bold", "confident"], "industry": ["finance"], "note": "Finance software with bold claims and product proof up front." },
+    { "url": "https://attio.com", "name": "Attio", "kind": ["landing"], "mood": ["precise", "crafted", "light", "premium"], "industry": ["crm"], "note": "CRM with crisp product UI, fine lines and careful type." },
+    { "url": "https://tuple.app", "name": "Tuple", "kind": ["landing"], "mood": ["friendly", "crafted", "opinionated"], "industry": ["dev-tools", "collaboration"], "note": "Pair-programming app; honest, specific copy and a friendly, crafted page." },
+    { "url": "https://reflect.app", "name": "Reflect", "kind": ["landing"], "mood": ["calm", "dark", "premium"], "industry": ["notes"], "note": "Note-taking app with a calm, atmospheric dark presentation." },
+    { "url": "https://www.craft.do", "name": "Craft", "kind": ["landing"], "mood": ["crafted", "light", "premium"], "industry": ["docs", "notes"], "note": "Docs app with polished product shots and a soft, premium feel." },
+    { "url": "https://www.todoist.com", "name": "Todoist", "kind": ["landing"], "mood": ["friendly", "calm", "light"], "industry": ["productivity", "tasks"], "note": "To-do app with a calm, friendly page and a single brand red." },
+    { "url": "https://1password.com", "name": "1Password", "kind": ["landing"], "mood": ["bold", "confident"], "industry": ["security"], "note": "Security made approachable with bold colour and clear claims." },
+    { "url": "https://tailscale.com", "name": "Tailscale", "kind": ["landing"], "mood": ["calm", "technical", "friendly"], "industry": ["infrastructure", "security"], "note": "Networking explained calmly; technical without being cold." },
+    { "url": "https://fly.io", "name": "Fly.io", "kind": ["landing"], "mood": ["playful", "illustrated", "technical"], "industry": ["infrastructure", "dev-tools"], "note": "Infrastructure with illustrated whimsy and plain-spoken copy." },
+    { "url": "https://www.warp.dev", "name": "Warp", "kind": ["landing"], "mood": ["dark", "technical", "bold"], "industry": ["dev-tools", "ai"], "note": "Terminal app; dark, product-forward, demo-driven." },
+    { "url": "https://zed.dev", "name": "Zed", "kind": ["landing"], "mood": ["minimal", "technical", "crafted", "precise"], "industry": ["dev-tools"], "note": "Code editor with a restrained, typographic, engineering-proud page." },
+    { "url": "https://obsidian.md", "name": "Obsidian", "kind": ["landing"], "mood": ["dark", "calm", "technical"], "industry": ["notes", "writing"], "note": "Notes app with a calm dark page that lets the graph and editor speak." },
+    { "url": "https://dovetail.com", "name": "Dovetail", "kind": ["landing"], "mood": ["bold", "premium"], "industry": ["research", "ai"], "note": "Customer-research tool with bold type and strong art direction." },
+    { "url": "https://www.descript.com", "name": "Descript", "kind": ["landing"], "mood": ["playful", "bold", "colourful"], "industry": ["video", "creative"], "note": "Media editing made friendly with bright colour and product demos." },
+    { "url": "https://spline.design", "name": "Spline", "kind": ["landing"], "mood": ["playful", "bold", "dark"], "industry": ["design-tools", "creative"], "note": "3D design tool whose page is itself a showcase of interactive 3D." },
+    { "url": "https://rive.app", "name": "Rive", "kind": ["landing"], "mood": ["dark", "bold", "crafted"], "industry": ["design-tools", "creative"], "note": "Interactive animation tool; the page moves the way the product does." },
+    { "url": "https://www.granola.ai", "name": "Granola", "kind": ["landing"], "mood": ["calm", "warm", "crafted", "quiet"], "industry": ["ai", "notes", "productivity"], "note": "AI meeting notes presented calmly and warmly, with a light, papery feel." },
+    { "url": "https://www.cursor.com", "name": "Cursor", "kind": ["landing"], "mood": ["minimal", "technical", "dark"], "industry": ["dev-tools", "ai"], "note": "AI code editor; product-first and spare." },
+    { "url": "https://www.shopify.com", "name": "Shopify", "kind": ["landing"], "mood": ["bold", "premium"], "industry": ["commerce"], "note": "Commerce platform with large imagery and bold, confident sections." },
+    { "url": "https://gumroad.com", "name": "Gumroad", "kind": ["landing"], "mood": ["playful", "bold", "brutalist"], "industry": ["commerce", "creative"], "note": "Creator commerce with a loud, brutalist, colourful personality." },
+    { "url": "https://plausible.io", "name": "Plausible", "kind": ["landing"], "mood": ["calm", "minimal", "light", "friendly"], "industry": ["analytics"], "note": "Simple analytics sold simply; one live dashboard as the proof." },
+    { "url": "https://usefathom.com", "name": "Fathom Analytics", "kind": ["landing"], "mood": ["calm", "friendly", "light"], "industry": ["analytics"], "note": "Privacy-first analytics with a calm page and plain claims." },
+    { "url": "https://whimsical.com", "name": "Whimsical", "kind": ["landing"], "mood": ["calm", "friendly", "light", "playful"], "industry": ["design-tools", "collaboration"], "note": "Diagramming tool with a soft, friendly, uncluttered page." },
+    { "url": "https://teenage.engineering", "name": "teenage engineering", "kind": ["landing", "product"], "mood": ["minimal", "bold", "crafted", "typographic"], "industry": ["hardware", "creative"], "note": "Hardware maker whose site is as distinctive and spare as its products." },
+    { "url": "https://www.headspace.com", "name": "Headspace", "kind": ["landing"], "mood": ["calm", "warm", "illustrated", "friendly"], "industry": ["wellness"], "note": "Calm through warmth: soft colour, round shapes and gentle illustration." },
+    { "url": "https://www.calm.com", "name": "Calm", "kind": ["landing"], "mood": ["calm", "quiet", "atmospheric"], "industry": ["wellness"], "note": "Calm through atmosphere: nature imagery and very little on screen." },
+    { "url": "https://www.aesop.com", "name": "Aesop", "kind": ["landing"], "mood": ["calm", "editorial", "premium", "quiet"], "industry": ["commerce", "retail"], "note": "Retail as an editorial, unhurried experience; restraint as luxury." },
+    { "url": "https://www.kinfolk.com", "name": "Kinfolk", "kind": ["landing"], "mood": ["calm", "editorial", "quiet", "airy"], "industry": ["publishing", "creative"], "note": "Magazine site with generous white space and a slow, editorial rhythm." },
+    { "url": "https://www.sentry.io", "name": "Sentry", "kind": ["landing"], "mood": ["playful", "dark", "illustrated"], "industry": ["dev-tools"], "note": "Error monitoring with a playful, illustrated, opinionated voice." },
+    { "url": "https://retool.com", "name": "Retool", "kind": ["landing"], "mood": ["technical", "bold"], "industry": ["dev-tools"], "note": "Internal-tools builder with dense product proof and strong grids." },
+    { "url": "https://www.airtable.com", "name": "Airtable", "kind": ["landing"], "mood": ["friendly", "colourful"], "industry": ["productivity", "collaboration"], "note": "Database for teams explained with colourful, friendly product views." },
+    { "url": "https://www.lemonsqueezy.com", "name": "Lemon Squeezy", "kind": ["landing"], "mood": ["playful", "colourful", "friendly"], "industry": ["payments", "commerce"], "note": "Payments for software sellers with a bright, playful identity." }
+  ]
+}

package/kb/moves/animated-comparison-table.md

@@ -0,0 +1,58 @@
+---
+id: animated-comparison-table
+name: A comparison that shows the difference
+kind: data
+fits: [saas, developer, b2b, technical, productivity, honest, data-rich, ai]
+avoid: [luxury, calm, playful-kids, enterprise-compliance]
+signature: false
+effort: m
+perf: "real <table>, server-rendered; bars are transform: scaleX on one element per cell; one IntersectionObserver"
+a11y: "a real table with th scope; every value is text; bars aria-hidden; the toggle is a radio group"
+pairs_with: [explorable-control, interactive-pricing-calculator, before-after-slider]
+deps: none
+---
+
+## What it is
+
+A comparison of your product against "the old way" (or a named category, not a named competitor) where the numbers are drawn as bars that grow to their length when the row comes into view, so the gap between the two is something you see, not something you read and subtract.
+
+## Why it works
+
+- A table of ticks makes every row look equal; length makes magnitude obvious (3 min vs 9 s is a bar 20× shorter).
+- The motion happens once, along the axis that matters, so it explains rather than decorates.
+- Comparing to a process ("by hand", "with spreadsheets") is more honest and more relatable than attacking a competitor, and avoids trademark trouble.
+
+## When to use / when not
+
+Use when you have 3–6 measurable differences (time, cost, steps, errors) with real numbers from benchmarks or customer data.
+
+Not for: tick-box feature lists (just use a table), calm brands where growing bars feel salesy, or numbers you can't source. Avoid naming competitors unless legal has approved the data.
+
+## Recipe
+
+1. **Real numbers with a source line** under the table ("Median of 1,240 builds, Oct 2026"). Same unit per row, smaller-is-better rows labelled as such.
+2. **Markup** is a semantic `<table>`: `<caption>`, `<th scope="col">` for "By hand" / "With Acme", `<th scope="row">` for each measure. Each cell holds the value as text and, behind it, a bar `<span aria-hidden>`.
+3. **Bars.** Each bar is `position:absolute; inset-block: 25%; left:0; width:100%; transform-origin: left; transform: scaleX(var(--v))` where `--v = value / rowMax`. Old way in a neutral grey, yours in the brand colour. Values sit at the end of the bar in tabular-nums.
+4. **The grow.** With JS, mark the table `data-js` and set bars to `scaleX(0)`; when the row enters view (IntersectionObserver, threshold 0.5) set the final scale with `transition: transform 700ms cubic-bezier(.23,1,.32,1)`, rows staggered 80 ms. The old-way bar grows first, then yours, so the difference lands last. No-JS and reduced motion: bars are at full length from the start (the CSS default).
+5. **The difference callout.** At the end of each row, a short derived figure ("20× faster", "−14 steps") fades in 200 ms after the bars finish.
+6. **Optional toggle** (radio group, not tabs): "per build / per month" recomputes values and the bars animate between lengths.
+7. **Mobile:** stack each measure as a small card with two bars, same semantics (keep the table and restyle rows with `display:grid`).
+
+## Pitfalls
+
+- Axes that don't start at zero, or per-row scales that exaggerate small gaps.
+- Ticks and crosses with bars mixed in one table: pick one language.
+- Re-animating every time a row scrolls into view: animate once.
+- Hiding values until the animation runs; no-JS readers see empty cells.
+- Naming a competitor with unverifiable numbers.
+
+## How to verify
+
+- `palate shoot` with JS off: full bars and values visible.
+- `palate animate --check`: only transform changes; no layout shift; reduced motion shows final state.
+- Screen reader: reads as a table with headers; every value announced.
+- Each number traces to a source in the repo or the source line.
+
+## Examples
+
+- A widely used landing-page pattern; palate's guidance is to compare against a process and draw the gap, rather than list ticks.

package/kb/moves/before-after-slider.md

@@ -0,0 +1,58 @@
+---
+id: before-after-slider
+name: Before/after slider
+kind: interaction
+fits: [honest, crafted, ai, saas, productivity, hardware, consumer, trustworthy]
+avoid: [heritage, luxury, low-bandwidth]
+signature: true
+effort: s
+perf: "two same-size images or two live DOM states; clip-path inset on one layer, updated once per rAF; images lazy below the fold"
+a11y: "the handle is a native range input (keyboard, screen readers); both states described in text; works as a static side-by-side without JS"
+pairs_with: [screenshot-detail-crops, hand-drawn-annotations, explorable-control, animated-comparison-table]
+deps: none
+---
+
+## What it is
+
+Two versions of the same thing stacked exactly on top of each other (the messy page and the finished page, the raw photo and the enhanced one, the old dashboard and the new), with a vertical handle the reader drags to wipe between them. The difference is shown, not claimed.
+
+## Why it works
+
+- Proof you operate yourself is more persuasive than a claim: the reader finds the difference with their own hand.
+- Identical framing on both sides isolates the change; nothing else can account for the improvement.
+- It's honest by construction when both sides are real outputs, which is why it suits AI, editing and "make it better" products.
+
+## When to use / when not
+
+Use when the product transforms something visible (polish, retouching, redesign, cleanup, upscaling, translation) and you have a real before and a real after with identical framing.
+
+Not for: products whose value isn't visual, before/after pairs that aren't from the product (staged "befores" are dishonest), luxury brands where showing a "bad" state cheapens the page, or more than one per page.
+
+## Recipe
+
+1. **Assets.** Two images at identical size and crop (or two live renders of the same component with different props). Real outputs only; label each ("Your agent's build", "After palate").
+2. **Stack.** A container with `position: relative; aspect-ratio` set from the images. Both layers `position: absolute; inset: 0`. The "after" layer on top with `clip-path: inset(0 0 0 var(--pos))` where `--pos` is 0–100%.
+3. **Handle = range input.** An `<input type="range" min="0" max="100" step="0.5" aria-label="Compare before and after">` spanning the whole container, visually transparent (`opacity: 0`, full size, `cursor: ew-resize`) so dragging anywhere works and keyboard/screen readers get a real slider. On `input`, set `--pos` (in a rAF). Draw the visible handle (a 2px line and a 36px round grip with ‹ › arrows) as an `aria-hidden` element positioned at `left: var(--pos)`.
+4. **Start position.** 50%, or better, the position that cuts through the most important difference. Optionally, when it first scrolls into view, ease the handle from 50% to 70% and back over 1.2 s once, to teach that it moves (skip under reduced motion).
+5. **Labels.** "Before" and "After" chips in the top corners, each fading out when the handle covers its side (opacity based on `--pos`).
+6. **No JS.** Without JS the input does nothing, so the server markup shows the two images **side by side** (or stacked on phones) with captions; JS adds `data-js` and switches to the overlay layout.
+7. **Reduced motion.** No teaching animation; the slider itself still works (it's user-driven).
+8. **Phones.** The whole container is the slider; make sure vertical page scrolling still works (`touch-action: pan-y` on the container, the range handles horizontal drags).
+
+## Pitfalls
+
+- Mismatched crops or exposure: the comparison is unfair and reads as a trick.
+- A custom div-based handle with no keyboard support.
+- A fake "before" made worse than reality: people can tell, and it costs trust.
+- Clip on the wrong layer, so the labels are swapped relative to the sides.
+
+## How to verify
+
+- `palate shoot` with JS off: two labelled images side by side; with JS: overlay at the start position.
+- Keyboard: Tab to the slider, arrows move it, the clip follows.
+- `palate animate --check`: only clip-path changes; no layout shift; the teach nudge absent under reduced motion.
+- Visually: at 0% and 100% each image shows completely and aligns pixel for pixel.
+
+## Examples
+
+- The pattern: a photo-enhancement product where you drag a line across a portrait to wipe between the original and the restored version.

package/kb/moves/bento-live-tiles.md

@@ -0,0 +1,57 @@
+---
+id: bento-live-tiles
+name: Bento with live tiles
+kind: layout
+fits: [saas, developer, ai, productivity, b2b, technical, data-rich, launch]
+avoid: [editorial, heritage, low-bandwidth, luxury]
+signature: false
+effort: l
+perf: "each tile animates only while in view (IntersectionObserver), CSS/transform motion, no video per tile; tiles render their finished state on the server"
+a11y: "every tile has a heading and real text; animation is decorative and pauses on hover/focus; finished state for reduced motion and no JS"
+pairs_with: [self-playing-product-demo, screenshot-detail-crops, inline-sparklines-in-copy, live-data-ticker]
+deps: none
+---
+
+## What it is
+
+A feature grid of unequal tiles (one large, a few medium and small), where every tile is a small slice of the real product *working*: a search typing and returning real results, a chart drawing with real data, a notification arriving. Each tile has a one-line headline; the motion shows the feature instead of describing it.
+
+## Why it works
+
+- Bento grids became the default because they summarise well; they became forgettable because the tiles are icons and stock gradients. Live tiles keep the scan-ability and add proof.
+- Showing a feature happening is more convincing than a sentence about it, and a small loop is cheap to watch.
+- Unequal sizes give hierarchy: the main feature gets the big tile.
+
+## When to use / when not
+
+Use on product landing pages with 4–7 features that each have a visible behaviour.
+
+Not for: editorial, heritage or luxury brands (the grid reads tech-generic), products whose features are invisible (security, compliance: use words and proof instead), or when you'd fill tiles with icons anyway.
+
+## Recipe
+
+1. **Grid.** CSS grid, 6 or 12 columns at desktop, `grid-auto-rows: minmax(220px, auto)`; one tile spans 2×2 (the story), others 1×1 or 2×1. Gap 12–16px, radius 20px outer / 12px inner (inner = outer − padding). One column on phones, the big tile first.
+2. **Tile anatomy.** Headline (16–18px, medium) + one line of body, then a stage with the live piece. Real product components or faithful miniatures built in HTML, with real content (names, values), never grey skeleton bars.
+3. **Script each loop.** A small array of `[ms, statePatch]` beats per tile, played by one shared hook. The finished state renders first on the server; when the tile enters view it holds the finished state ~1.4s, then replays the loop from content (never from blank).
+4. **Play only when seen.** One IntersectionObserver (threshold 0.35) per tile toggles a `playing` flag; pause on `pointerenter`/`focusin`, resume on leave. Stop all loops when `document.hidden`.
+5. **Motion vocabulary.** Transform and opacity only; 150–300ms, `cubic-bezier(.23,1,.32,1)`. Typing at 35–45ms per character. No parallax or tilt on tiles.
+6. **Tiles stay interactive.** If a tile shows a control, it works: hovering stops the loop and lets the visitor try it.
+7. **Fallbacks.** No JS and reduced motion: the finished state, static, full content. Screen readers: each tile's text describes what the loop shows (an `sr-only` sentence).
+
+## Pitfalls
+
+- Every tile animating at once, all the time: noise and CPU. In view only, and stagger starts by 200–400ms.
+- Loops that start from an empty tile: the first frame a visitor sees is blank.
+- Equal tiles: no hierarchy, back to a template.
+- Fake data ("Lorem", "John Doe", $1,234): reads as a mock.
+- A video per tile: heavy; build it in code.
+
+## How to verify
+
+- `palate shoot` (JS off): every tile shows its finished, populated state.
+- `palate animate --check`: tiles move only in view; no layout shift as states change (fix tile heights); reduced motion static.
+- Hover a tile mid-loop: it pauses; leave: it resumes cleanly.
+
+## Examples
+
+- palate's own site: the feature cards (triage, never-repeats, measured references) each play a real slice of the product on a loop, start from their finished state, and pause while hovered.

package/kb/moves/calm-motion-system.md

@@ -0,0 +1,63 @@
+---
+id: calm-motion-system
+name: A calm motion system
+kind: motion
+fits: [calm, crafted, minimal, premium, quiet, productivity, saas, trustworthy, health]
+avoid: [energetic, gaming, playful-kids, experimental]
+signature: false
+effort: s
+perf: "transform and opacity only; CSS transitions/keyframes, no animation library; nothing longer than 400 ms except one entrance"
+a11y: "every animation sits in a prefers-reduced-motion: no-preference block; content is visible without JS; no motion conveys meaning alone"
+pairs_with: [view-transitions-between-pages, sliding-nav-indicator, tactile-button, shape-continuity-morph]
+deps: none
+---
+
+## What it is
+
+A small, named set of motion tokens (two durations, one easing, three entrance distances) used for every movement on the site, so the whole product moves with one temperament: quick, soft, never bouncy. It is not a moment; it is the reason everything else feels like it belongs to one product.
+
+## Why it works
+
+- Consistency reads as care. When every popover, tab and card moves on the same curve, people stop noticing motion and start trusting the interface.
+- Strong ease-out (fast start, long settle) feels responsive because the element is nearly there in the first 80 ms; the long tail feels soft.
+- Restraint makes the one signature moment on the page land: if everything bounces, nothing does.
+
+## When to use / when not
+
+Use on almost every product and marketing site, and always when the brand is calm, premium or about wellbeing and focus. It is the floor under any signature move.
+
+Not the right *lead* for energetic, playful or gaming brands, which want springier, bigger motion; even there, keep the token idea and just choose livelier values.
+
+## Recipe
+
+1. **Tokens** (CSS custom properties, mirrored in Tailwind `@theme`):
+   - `--ease-out: cubic-bezier(.23, 1, .32, 1)` for everything entering or responding.
+   - `--ease-in-out: cubic-bezier(.65, 0, .35, 1)` only for things moving across the screen while visible.
+   - `--dur-fast: 150ms` (hover, press, colour), `--dur: 240ms` (popovers, tabs, small layout), `--dur-enter: 360ms` (page entrances).
+   - Distances: 4px (small), 8–10px (cards and headlines), never more than 16px.
+2. **Rules.** Hover changes colour/opacity only, 150 ms. Press scales to 0.97 on `:active`, 100 ms. Popovers fade + scale from 0.96 with `transform-origin` at their trigger, 180–240 ms; exit faster (120–150 ms) than enter. Lists stagger by 30–50 ms per item, capped at 5 items. No bounce, no overshoot, no infinite loops except loaders.
+3. **Entrances.** One rise on the hero (opacity 0 → 1, translateY 10px → 0, 360 ms, staggered 50/100/130 ms across headline, lead and action). Below the fold, prefer no entrance or a single opacity fade on scroll via `animation-timeline: view()` with `animation-range: entry 0% entry 40%` (Chromium/Safari 26+; Firefox: no timeline means the element is simply shown, so set the visible state as the base style).
+4. **Enter from nothing** with `@starting-style` for popovers and dialogs (Chromium, Safari 17.5+, Firefox 129+): base style is the open state, `@starting-style` holds opacity 0 / scale .96, and `transition` covers `opacity, transform, display allow-discrete, overlay allow-discrete`.
+5. **Reduced motion.** Put every animation inside `@media (prefers-reduced-motion: no-preference)`. Under reduce: no translation or scale, instant or opacity-only (≤ 150 ms) changes, spinners slowed rather than removed.
+6. **No-JS.** Initial states are the final states; animations only decorate the arrival. Never `opacity: 0` in the base CSS waiting for JS to reveal.
+7. Write the tokens down in the project's README or design tokens file so later builds reuse them.
+
+React/Tailwind notes: Tailwind `ease-[cubic-bezier(.23,1,.32,1)]` as a theme token `--ease-out`; `motion-safe:` variants for every animate class; if the project already uses Motion, set `MotionConfig reducedMotion="user"` and one shared `transition` object.
+
+## Pitfalls
+
+- `ease-in` for entrances: the element starts slow and feels laggy.
+- Default `ease` / `linear` mixed with custom curves: the site feels assembled from parts.
+- Animating `height`, `top`, `box-shadow` or `filter: blur` on many elements: jank on mid phones.
+- Scroll-reveal on every section: content hidden until scrolled is a screenshot and SEO risk, and gets tiring by section three.
+- Long exits: anything leaving should be faster than it arrived.
+
+## How to verify
+
+- `palate animate --check`: all durations ≤ 400 ms except the hero entrance; no layout shift; reduced-motion strip shows no translation; JS-off strip shows every element visible.
+- Grep the CSS: one easing token used everywhere, no stray `ease`/`ease-in`.
+- Click every interactive element fast, twice: nothing queues up or lags behind the pointer.
+
+## Examples
+
+- palate's own site: one ease-out curve (`.23, 1, .32, 1`) throughout, a 360 ms staggered rise on the hero, 150 ms hover colours, a 0.96–0.97 press scale, and every keyframe gated on reduced motion.

package/kb/moves/canvas-grain.md

@@ -0,0 +1,58 @@
+---
+id: canvas-grain
+name: Canvas grain over paintings
+kind: texture
+fits: [calm, crafted, heritage, artsy, premium, editorial, tactile, nature, quiet]
+avoid: [data-dense-tool, clinical, minimal, enterprise-compliance]
+signature: false
+effort: s
+perf: "one inline SVG tile (~600 bytes) as a CSS background; static, no JS, no per-frame cost"
+a11y: "purely decorative, pointer-events none; never over text-heavy UI"
+pairs_with: [museum-painting-backdrop, engraving-colour-lens, feature-films-on-painted-stages, riso-print-texture]
+deps: none
+---
+
+## What it is
+
+A fine fractal grain plus a faint woven crosshatch, laid over a painting (or a photo) and blended into it, so the picture reads as paint on canvas rather than a stock JPEG on a screen. One CSS class, one inline SVG tile.
+
+## Why it works
+
+- Digital images are perfectly smooth; real surfaces aren't. A little texture tells the eye "material", which makes a resized museum photo feel like an object.
+- Blended with `overlay` it adds tooth without changing colour much, so it never fights the brand.
+- It also hides banding and JPEG blocking in skies and gradients.
+
+## When to use / when not
+
+Use on paintings, photographic backdrops and illustration stages in calm, crafted or heritage brands. Pin it inside anything that moves with the picture (a lens, a parallax layer) so it travels with the paint.
+
+Not for: UI surfaces, text panels, data tools, or clean minimal brands whose point is flatness. Never over the whole page.
+
+## Recipe
+
+1. One class, placed right after the image and under the content:
+   ```css
+   .canvas-grain { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
+     background-image: url("data:image/svg+xml;utf8,<svg …>"); mix-blend-mode: overlay; opacity: .42; }
+   ```
+2. The SVG tile (180 × 180, written inline, URL-encode `#` and `%`): a `<filter>` with `feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="3" stitchTiles="stitch"` then `feColorMatrix type="saturate" values="0"` applied to a full rect; plus a 3 × 3 `<pattern>` of two diagonal hairlines (one white at 6% opacity, one black at 6%) filling a second rect: the weave.
+3. Markup: `<span aria-hidden className="canvas-grain" />` inside the positioned, `isolation: isolate` container, after the `<img>` (with `-z-10` if the image is `-z-10` too).
+4. Tune per picture: opacity 0.3–0.5. Darker paintings take more; pale skies less.
+5. Static by design: no animation (animated grain is a video-filter cliché and costs paint every frame). Nothing to do for reduced motion or no-JS.
+
+## Pitfalls
+
+- Grain on UI cards or text: it reads as dirt and lowers legibility.
+- `mix-blend-mode` without an isolated parent: it blends with whatever is behind the section. Add `isolation: isolate` to the container.
+- Animating the noise (`background-position` jitter): costly and distracting.
+- A grain PNG instead of SVG: heavier and blurry at 2×.
+
+## How to verify
+
+- Zoom to 200% on a sky: a fine tooth and faint weave are visible; no visible tile seams.
+- `palate shoot`: colours of the painting barely shift (compare a crop with and without the class).
+- `palate animate --check`: nothing animates from this layer.
+
+## Examples
+
+- palate's own site: `.canvas-grain` in `globals.css`, over the hero painting, every feature stage and inside the footer's colour lens.

package/kb/moves/changelog-as-magazine.md

@@ -0,0 +1,56 @@
+---
+id: changelog-as-magazine
+name: Changelog as a magazine
+kind: layout
+fits: [developer, saas, productivity, crafted, editorial, ai, community, honest]
+avoid: [enterprise-compliance, serious-news, kids]
+signature: false
+effort: m
+perf: "static pages from Markdown/MDX; media lazy, sized; short looping clips as muted MP4/WebM with posters"
+a11y: "each entry is an article with a dated heading; clips have captions or a text summary; RSS and plain anchors for each entry"
+pairs_with: [editorial-grid-pull-quotes, screenshot-detail-crops, editorial-drop-cap, scroll-scrubbed-product-film]
+deps: none
+---
+
+## What it is
+
+The changelog is treated as a publication: each release is an "issue" with a cover (the headline feature, a big visual, a one-paragraph story of why it exists), followed by smaller items and fixes in a tight list. Dates, version numbers and authors are typeset with care, and the archive reads like a back catalogue.
+
+## Why it works
+
+- A changelog is proof the product is alive; most teams waste it as a log nobody reads.
+- Leading with one story per release gives people a reason to come back and share; the small fixes still show momentum.
+- Credits (who built it) make the team visible, which builds trust and community.
+
+## When to use / when not
+
+Use for products that ship often (weekly or monthly) and have real, visible changes: dev tools, SaaS, AI products, open source.
+
+Not for: products with rare, invisible releases (security patches), compliance contexts where a changelog must be a formal record (keep that separately), or if you can't keep it up: a magazine whose last issue is from last year is worse than a plain list.
+
+## Recipe
+
+1. **Content model.** One MDX file per release: `date`, `version`, `title`, `cover` (image/clip + alt/poster), `authors`, body (the story), then `improvements` and `fixes` lists.
+2. **Cover entry.** Date and version in mono, small, above; title 32–44px; a 2–3 sentence story ("You asked for X; here's why it took us until now"); the cover visual at `wide` width, real product in a real state, ideally a 4–8s muted loop (`autoplay muted loop playsinline`, poster set, paused out of view and under reduced motion).
+3. **Then the small stuff.** A two-column list: improvements and fixes, 15px, one line each, each linking to docs where relevant.
+4. **Index rhythm.** The archive page lists issues as a magazine contents page: date column (tabular numerals) + title + one-line deck, newest first, with the year as a large heading between years.
+5. **Permalinks.** Each entry has an `id` anchor and its own page; ship RSS/Atom. Copy-link button on hover.
+6. **Authors.** Small avatars and names of the people who built it, with consent (real photos or initials).
+7. **Fallbacks.** Static HTML; videos have posters and work without JS (`controls` added under reduced motion instead of autoplay).
+
+## Pitfalls
+
+- Covering every release with a big feature: when there isn't one, ship a "small things" issue honestly.
+- Marketing language in fixes ("Improved experience"): say what changed.
+- Heavy uncompressed GIFs: use video.
+- Inconsistent dates and versions: pick a format (`26 Oct 2026 · v2.4`) and keep it.
+
+## How to verify
+
+- `palate shoot` the latest entry and the archive: hierarchy is clear (one cover per issue), dates align in a column.
+- `palate states`: an issue with no cover, a very long title, many fixes.
+- Clips pause out of view and don't autoplay under reduced motion.
+
+## Examples
+
+- Some developer-tool companies publish changelogs with a hero image and a short story per release; describe it to a builder as "one cover story per release, then a tight list of fixes".

package/kb/moves/code-drawn-diagram.md

@@ -0,0 +1,56 @@
+---
+id: code-drawn-diagram
+name: Illustration drawn in code from the product's own shapes
+kind: imagery
+fits: [technical, developer, crafted, minimal, saas, ai, honest, calm]
+avoid: [luxury, fashion, playful-kids, food]
+signature: true
+effort: m
+perf: "HTML/CSS/SVG only; a few KB; animations on transform/opacity, paused off screen"
+a11y: "a figcaption or sr-only text states what the diagram shows; interactive parts are buttons with labels; static under reduced motion"
+pairs_with: [self-playing-product-demo, isometric-illustration-system, technical-drawing-lines, explorable-control]
+deps: none
+---
+
+## What it is
+
+The page's illustrations are built as components from the product's real vocabulary (its cards, nodes, status dots, timeline rows, brand radii) rather than drawn as raster art. A diagram of how a request flows is made of the same chips the app uses; a hero visual is the product's own objects, arranged.
+
+## Why it works
+
+- It's unmistakably this product: no stock illustration could contain its actual parts.
+- Vector-sharp at every size, tiny to ship, and it can animate and respond to state.
+- Keeping illustration in code keeps it in sync when the product's look changes.
+
+## When to use / when not
+
+Use for software products with a distinctive UI grammar: developer tools, AI products, workflow and data tools. Great for "how it works" sections and heroes that would otherwise use a 3D blob.
+
+Not for consumer brands that sell emotion through photography, nor for food, fashion or luxury. Don't use if the product's own UI is still generic; you'd be illustrating with defaults.
+
+## Recipe
+
+1. **Inventory the product's shapes**: list 6–10 visual atoms from the real app (node card, edge line, status pill, avatar, keycap, log row). Reuse their exact tokens (radii, colours, font sizes).
+2. **Sketch the idea in one sentence** ("a prompt becomes three files"): the diagram must say something, not decorate.
+3. **Build** a component on a fixed coordinate grid: a container with `aspect-ratio` and `container-type: inline-size`, inner font-size `calc(100cqw / 40)` so every child sized in em scales together. Lines in an absolutely positioned SVG sharing the same grid.
+4. **Animate one idea.** E.g. a dot travels along an edge (`offset-path: path(...)`, 1.6s, ease-in-out), then the target card's status flips. Run when in view (IntersectionObserver, threshold 0.4), loop with a 2–4s rest, pause when off screen or hidden.
+5. **Fallback.** Server-render the final state; that's no-JS and reduced motion. Add `<figcaption>` describing the flow.
+6. **Make it inert** if it contains real-looking controls (`inert` attribute or `aria-hidden` + `tabindex=-1`), so people don't tab into fake buttons.
+
+## Pitfalls
+
+- Inventing new decorative shapes instead of the product's own: the point is lost.
+- Pixel units: the diagram breaks at other widths. Use em on a container.
+- Endless looping motion with no rest: tiring.
+- Fake controls that are focusable but do nothing.
+
+## How to verify
+
+- `palate shoot` at 1440 and 390: proportions identical at both widths (scaled, not reflowed); text ≥12px rendered.
+- `palate animate --check`: no layout shift; paused off screen; reduced motion shows the final state.
+- Diff the diagram's tokens against the app's tokens: same radii and colours.
+
+## Examples
+
+- palate's own site: the product demo is built in code from palate's real parts (its agent rail, point overlay pins and taste card) on one em grid, so every cursor lands exactly on the part it builds.
+- Seen on Stripe (https://stripe.com/blog/connect-front-end-experience): their engineering blog describes drawing product visuals, including a laptop, in a small amount of CSS rather than images.

package/kb/moves/colophon.md

@@ -0,0 +1,54 @@
+---
+id: colophon
+name: A colophon that shows how the site was made
+kind: footer
+fits: [crafted, editorial, developer, honest, publishing, artsy, portfolio, agency]
+avoid: [enterprise-compliance, finance-trust-first, crisis]
+signature: false
+effort: s
+perf: "static text; optional type specimens use fonts already loaded"
+a11y: "plain headings and lists; links have real names; no motion needed"
+pairs_with: [made-with-proof, editorial-drop-cap, museum-painting-backdrop, inspect-our-taste]
+deps: none
+---
+
+## What it is
+
+A short section (in the footer or on a /colophon page) that lists how the site was made, like the colophon at the back of a book: typefaces and their designers, the colour palette with values, the image sources and their licences, the stack, who built it, and when it was last updated.
+
+## Why it works
+
+- It shows care: makers who name their materials are proud of them.
+- It's a natural place to credit artists, type designers and open-source work properly, which earns goodwill.
+- Designers and developers (often the buyers of crafted tools) read colophons; it's a quiet reward for curious visitors.
+
+## When to use / when not
+
+Use on crafted sites, studios, portfolios, publications, developer tools and any site that uses credited art (museum paintings, illustration, licensed type).
+
+Not on compliance-heavy enterprise or financial sites where it adds noise, or crisis/emergency pages.
+
+## Recipe
+
+1. **Gather facts** from the project, never invented: font names and foundries (from the font files or package), the brand tokens, image sources with licence (CC0 museum, own photography), framework and hosting, the people who made it.
+2. **Structure** as a definition list: `Type`, `Colour`, `Images`, `Built with`, `Made by`, `Updated`. Each value one line.
+3. **Show, briefly.** Type entries render a sample word in that face ("Aa Geist Sans, by Vercel"); colour entries render 16px swatches with hex values in mono. Keep it to one screen.
+4. **Placement.** A link "Colophon" in the footer's bottom bar to /colophon, or a collapsed `<details>` at the end of the footer. `<details>` works without JS.
+5. **Credits.** Every image credit links to its source page (museum record) with title, artist, year, institution and licence.
+6. **Updated date** from the build (an env var set at build time), not hard-coded.
+
+## Pitfalls
+
+- Bragging lists of every npm package: keep it to what shapes the experience.
+- Out-of-date facts (fonts changed, credits missing): generate what you can from the project.
+- Hiding the image credits only here: the visible credit belongs next to the image too.
+
+## How to verify
+
+- `palate details`: every font and image used on the site is listed; links resolve.
+- `palate shoot` the colophon at 390: swatches and samples don't overflow.
+- Facts match the code (font families in CSS, tokens in the theme).
+
+## Examples
+
+- No public example cited; the colophon is a book-printing tradition that many personal and studio sites carry on.