@palate/cli 0.0.0-stage → 0.0.1

package/kb/moves/command-palette-site-nav.md

@@ -0,0 +1,58 @@
+---
+id: command-palette-site-nav
+name: Command palette on the website
+kind: navigation
+fits: [developer, technical, productivity, saas, docs, minimal, ai]
+avoid: [heritage, playful-kids, nature, luxury]
+signature: false
+effort: m
+perf: "lazy-loaded on first open; a static JSON index built at deploy; filtering in memory under 1 ms for a few hundred items"
+a11y: "real dialog (focus trap, Esc, return focus); combobox + listbox roles with aria-activedescendant; the shortcut is also a visible button"
+pairs_with: [sliding-nav-indicator, console-easter-egg, calm-motion-system, changelog-as-magazine]
+deps: none
+---
+
+## What it is
+
+Press ⌘K (Ctrl K) or `/` anywhere on the marketing site or docs and a search-and-go palette opens: pages, docs sections, changelog entries and a few actions ("Copy install command", "Toggle theme", "Contact sales"), all filtered as you type. A visible "Search ⌘K" button in the header opens the same thing.
+
+## Why it works
+
+- For developer and productivity audiences, ⌘K is the way their own tools work; meeting them in their idiom is a signal that the product is for them.
+- It turns a site with many pages into one fast surface, and it quietly demonstrates the product's speed and polish.
+- Actions in the palette ("copy the install command") reward power users without cluttering the page.
+
+## When to use / when not
+
+Use for devtools, productivity apps, AI tools and any site with docs, a changelog and more than ~15 pages.
+
+Not for: consumer, heritage or nature brands (it reads as a tool, not a story), small sites with five pages (the nav already does it), or as a replacement for visible navigation.
+
+## Recipe
+
+1. **Index.** At build time, emit `/search-index.json`: `{ title, section, href, keywords }` for every page and docs heading, plus a short list of actions `{ title, run: "copy-install" }`. Keep it under ~50 KB gzipped; larger docs want a proper search service.
+2. **Trigger.** Header button showing "Search" with a `<kbd>` hint (`⌘K` on Mac, `Ctrl K` elsewhere, detected from `navigator.platform`/`userAgentData`; hide the hint on touch). Global `keydown` for meta/ctrl+K and `/`, ignored while typing in inputs, textareas or contenteditable.
+3. **Load lazily.** The palette component and the index are dynamic imports on first open (or on hover/focus of the button, to prefetch).
+4. **Dialog.** Native `<dialog>` with `showModal()` (gives focus trap, Esc and top layer for free). Width min(640px, 100vw − 32px), top 12vh, radius 12px, a backdrop at 30–40% black. Enter with opacity + scale from 0.98, 160 ms ease-out; exit 120 ms. Use `@starting-style` for the entrance where supported.
+5. **Combobox.** Input `role="combobox" aria-expanded aria-controls aria-activedescendant`; results `role="listbox"`, items `role="option"`. Arrow keys move the active option (wrap around), Enter opens it, ⌘Enter opens in a new tab. Group by section with sticky group labels.
+6. **Matching.** Lowercase, split into words; score prefix matches on title highest, then words in keywords, then subsequence matches. Highlight matched characters with `<mark>`. Show recent pages (from `localStorage`, try/catch) when the query is empty.
+7. **No JS.** The header button is an `<a href="/search">` to a server-rendered search page (or the docs index), upgraded to open the palette when JS runs.
+8. **Reduced motion.** No scale; opacity only, or instant.
+
+## Pitfalls
+
+- Hijacking ⌘K when focus is in the page's own editor or input: always skip editable targets.
+- A palette that only searches page titles: it feels broken. Index docs headings and keywords.
+- No visible way to open it: most visitors never press shortcuts.
+- Loading the index on page load: wasted bytes for 95% of visitors.
+
+## How to verify
+
+- `palate states` on the palette: empty query (recents), no results ("No matches for "x". Try the docs index."), long titles truncate, 320px width.
+- Keyboard only: ⌘K opens, arrows move, Enter navigates, Esc closes and focus returns to the trigger.
+- Screen reader: the active option is announced as you arrow.
+- Network: the palette chunk and index load only on first open or button hover.
+
+## Examples
+
+- The pattern: a developer tool's docs site where ⌘K searches every page and heading and also offers "Copy npm install" as an action.

package/kb/moves/confetti-free-celebration.md

@@ -0,0 +1,58 @@
+---
+id: confetti-free-celebration
+name: Celebration without confetti
+kind: sound-free-feedback
+fits: [calm, crafted, premium, productivity, saas, quiet, honest, minimal]
+avoid: [playful-kids, gaming, energetic, crisis]
+signature: false
+effort: s
+perf: "CSS only: one icon morph, one tint, under 600 ms; no canvas, no particles"
+a11y: "the success is a sentence in a status region; focus moves to what's next; nothing flashes"
+pairs_with: [first-win-onboarding, waitlist-position-live, copy-confirmation, tactile-button]
+deps: none
+---
+
+## What it is
+
+A success moment that feels good through restraint: the check draws itself, the surface takes a brief warm tint, the copy says what was achieved in specific words, and the next step is already there. No confetti, no fireworks, no modal.
+
+## Why it works
+
+- Confetti has become the default "you did it", so it reads as generic and slightly childish; restraint reads as confidence.
+- Specific copy ("Your first invoice is out. Acme will see it in their inbox.") rewards more than a generic "Success!" because it confirms the outcome the user cared about.
+- Leading straight into the next step turns a pause into momentum.
+
+## When to use / when not
+
+Use for first wins, completed setups, sent payments, published pages, joined waitlists in calm or premium products.
+
+Not for: games and kids' products, where exuberance is the right register (there confetti may be fine); or for routine actions done many times a day, which deserve no celebration at all, just a quiet state change.
+
+## Recipe
+
+1. **Write the sentence first**: what happened, to whom, and what happens next. "Published. Your page is live at studio.com/spring."
+2. **The check.** An SVG check path with `stroke-dasharray: L; stroke-dashoffset: L`, animated to 0 over 320 ms `cubic-bezier(.23,1,.32,1)`, inside a circle that scales from 0.6 to 1 with a small overshoot (a spring with very little bounce, or a keyframe 0.6 → 1.06 → 1 over 360 ms).
+3. **The tint.** The container's background fades from the success tint (e.g. brand at 8%) to its resting colour over 900 ms, starting with the check. One tint, not a flash.
+4. **Copy and next step** appear 120 ms after the check with a 6 px rise and fade (200 ms). The primary next action takes focus (or the panel, `tabIndex=-1`) so keyboard users continue from here.
+5. **Announce.** Put the sentence in `role="status"` (polite). Never `alert` for success.
+6. **Reduced motion:** the check and tint appear without drawing or fading; the copy is simply there.
+7. **No JS:** the server renders the success state with the static check.
+8. **Milestones only.** Gate the full moment to firsts (first project, first payment). Later repetitions get only the check.
+
+## Pitfalls
+
+- Celebrating something the user does daily: it becomes friction.
+- A modal that has to be dismissed before continuing.
+- Vague copy ("Awesome!") that doesn't confirm what happened.
+- Pure colour signalling success (green alone) without the icon and words.
+- Stacking the moment with sound or vibration on the web.
+
+## How to verify
+
+- `palate animate --check`: the success sequence completes within ~600 ms; reduced motion shows the final state instantly.
+- `palate states`: the success state exists, says what happened in specific words, and has a next action.
+- Screen reader announces the sentence once; focus is on the next step.
+
+## Examples
+
+- palate's own site: joining the waitlist swaps the form for the result in place with a check that springs in 120 ms after the panel, the real position and the share link; no confetti (`Waitlist.tsx`).

package/kb/moves/console-easter-egg.md

@@ -0,0 +1,57 @@
+---
+id: console-easter-egg
+name: A note in the console
+kind: easter-egg
+fits: [developer, technical, crafted, community, playful, honest, saas, ai]
+avoid: [finance-trust-first, enterprise-compliance, serious-news, crisis, kids]
+signature: false
+effort: s
+perf: "one console.log on mount, once per page load; zero cost otherwise"
+a11y: "nothing visible changes; whatever it unlocks must also be reachable from the page"
+pairs_with: [inspect-our-taste, konami-secret, colophon]
+deps: none
+---
+
+## What it is
+
+One styled line in the browser console for the visitors who open DevTools: a short, friendly note in the brand's colour that tells them something useful only they would care about (a hidden feature, a shortcut, the stack, a hiring link), never an ASCII banner wall.
+
+## Why it works
+
+- Developers and designers open the console on sites they admire. Being met there feels like a wink between people who notice details.
+- It costs nothing and doubles as a pointer to a deeper easter egg (a shortcut, an inspector).
+
+## When to use / when not
+
+Use for developer and design audiences, tools and studios. Keep it to one or two lines that point somewhere.
+
+Not for: banks, regulated or serious contexts (a console message can look like a security warning to the wrong person), or as a place to hide information users need.
+
+## Recipe
+
+1. In a small client component that is always mounted (or the app root), in an effect, guarded by a module-level flag so it logs once per load even under React strict mode:
+   ```js
+   console.log("%c brand %c You found the console. Press P to see why this page looks the way it does.",
+     "background:#0B6E4F;color:#fff;font-weight:600;border-radius:4px;padding:2px 6px",
+     "color:#0B6E4F;font-weight:500");
+   ```
+2. Two `%c` segments: a brand chip, then one sentence in the brand colour. No images, no multi-line art (it breaks in narrow DevTools and dark themes).
+3. Point it at something real: a keyboard shortcut, an inspector, a colophon, a jobs page.
+4. Don't log in development builds if your team finds it noisy (`process.env.NODE_ENV === "production"`).
+5. Nothing visible changes; reduced motion and no-JS are irrelevant.
+
+## Pitfalls
+
+- A "STOP! This is a browser feature for developers" scare banner in the brand voice: that's for self-XSS warnings on social sites, not a delight.
+- Logging every render or every route change.
+- Huge ASCII art that wraps into noise.
+- Advertising a secret that doesn't work on touch devices without saying so.
+
+## How to verify
+
+- Open DevTools on the production build: exactly one styled line, readable in light and dark DevTools themes.
+- Follow its instruction: it works.
+
+## Examples
+
+- palate's own site: a one-line note in emerald pointing to the P shortcut for "inspect our taste" (`InspectTrigger.tsx`).

package/kb/moves/copy-confirmation.md

@@ -0,0 +1,57 @@
+---
+id: copy-confirmation
+name: A copy button that confirms in place
+kind: sound-free-feedback
+fits: [developer, docs, technical, saas, crafted, minimal, productivity, ai]
+avoid: [luxury, fashion]
+signature: false
+effort: s
+perf: "one state flag and one timer; icon swap with transform and opacity only"
+a11y: "visible label changes to 'Copied' inside the button (announced via aria-live polite); button width reserved for both words; works by keyboard"
+pairs_with: [referral-reward-reveal, tactile-button, command-palette-site-nav]
+deps: none
+---
+
+## What it is
+
+A Copy button whose icon and label swap to a check and "Copied" for about 1.8 seconds after a successful copy, then swap back, without the button changing size or a toast appearing elsewhere.
+
+## Why it works
+
+- Copying gives no visible result on its own; without feedback people copy twice or paste to check.
+- Feedback at the point of action is faster to notice than a toast in a corner.
+- Reserving the width makes the swap feel solid; a button that jiggles in size feels cheap.
+
+## When to use / when not
+
+Use for code snippets, install commands, API keys (masked), share and referral links, coupon codes.
+
+Not for: content that should be selected by hand anyway (long prose), or where the copy action is the whole page (then show a stronger confirmation).
+
+## Recipe
+
+1. **Copy with a fallback.** Try `navigator.clipboard.writeText(text)`; if it throws (insecure origin, old browser), create a hidden read-only `<textarea>`, select it, `document.execCommand("copy")`, remove it. Only confirm when it actually succeeded.
+2. **Reserve the width.** Render both labels stacked in one grid cell (`display:grid` with both spans in `grid-area: 1/1`), the inactive one `visibility:hidden` or opacity 0. The button's width is the wider word's.
+3. **Swap.** Icon: copy → check, cross-fade with a scale from 0.25 to 1 and a 4 px blur out (spring ~300 ms, no bounce). Label: "Copy" → "Copied". Hold 1.8 s, then swap back. Clicking again restarts the timer (clear the previous one; clear on unmount).
+4. **A11y.** The visible text is the accessible name, so the change is read; add an `aria-live="polite"` span (sr-only) that says "Copied" for screen readers that don't re-read buttons. Give icon-only variants an `aria-label` like "Copy your link".
+5. **Reduced motion:** plain opacity swap, no scale or blur.
+6. **No JS:** hide the button (render it only after mount) and make the text `select-all`, so one click selects it for manual copy.
+7. **Code blocks:** place the button top-right inside the block at 32 px, visible on hover *and* always on touch and focus.
+
+## Pitfalls
+
+- Showing "Copied" when the clipboard call failed.
+- A toast plus an inline change: double feedback.
+- Width jump between "Copy" and "Copied".
+- Copy buttons that only appear on hover: invisible on touch.
+- Copying with hidden characters (trailing newline, prompt `$`).
+
+## How to verify
+
+- Click: label and icon change within 100 ms, the button width is identical before and after (measure in `palate shoot` crops).
+- Paste: the clipboard holds exactly the intended text.
+- Keyboard: Enter and Space trigger it; screen reader announces "Copied".
+
+## Examples
+
+- palate's own site (`CopyButton.tsx`): the referral link's Copy button swaps icon and label for 1.8 s, keeps its width for both words, and falls back to the legacy copy command where the clipboard API is unavailable.

package/kb/moves/cursor-reactive-light.md

@@ -0,0 +1,57 @@
+---
+id: cursor-reactive-light
+name: Cursor-reactive light
+kind: interaction
+fits: [technical, developer, premium, ai, cinematic, saas, bold]
+avoid: [heritage, playful-kids, accessibility-first, low-bandwidth, daily-tool]
+signature: false
+effort: s
+perf: "two CSS custom properties updated once per rAF; a radial-gradient on a pseudo-element; no per-card listeners"
+a11y: "purely decorative; never the only hover or focus signal; static under touch, keyboard and reduced motion"
+pairs_with: [bento-live-tiles, dark-band-contrast-section, technical-drawing-lines, calm-motion-system]
+deps: none
+---
+
+## What it is
+
+A soft light that follows the pointer across a surface: card borders brighten where the cursor is near, a dark band shows a faint glow under the pointer, a grid of lines lights up locally. The light lives in the material (borders, grain, lines), not as a blob floating over content.
+
+## Why it works
+
+- It makes a dark, flat surface feel physical, as if there were a lamp moving over it; that sense of material reads as premium.
+- It rewards exploration without demanding it: the page works identically without it.
+- Because it's tied to the pointer, it confirms the interface is alive under the hand, which is especially convincing on technical product pages.
+
+## When to use / when not
+
+Use on dark sections, bento grids, pricing cards or a code/terminal band, for technical, AI and developer products. One surface per page.
+
+Not for: light, heritage or nature brands (it reads as tech-generic there), touch-first audiences (it never shows), pages where every section already has a glow (stack effects and it's slop), or in place of real hover/focus states.
+
+## Recipe
+
+1. **Track once.** One `pointermove` listener on the container (passive), mouse only (`e.pointerType === "mouse"` and `matchMedia("(hover: hover) and (pointer: fine)")`). Store `clientX/Y`; in a rAF, for the container (or each card, via `getBoundingClientRect` cached on enter/resize), set `--x` and `--y` in px relative to the element.
+2. **Border light (cards).** Each card has `position: relative` and a `::before` with `inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--x) var(--y), rgb(255 255 255 / .35), transparent 60%); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);` so only the 1px border ring lights up. `opacity: 0` by default, `1` while the pointer is inside the grid, 200 ms ease-out.
+3. **Surface light (bands).** A `::after` over the background (under content) with `radial-gradient(600px circle at var(--x) var(--y), rgb(255 255 255 / .06), transparent 70%)`. Keep it under 8% white; it should be felt, not seen.
+4. **Grid light.** For a line grid background, put the lines in a mask: `mask-image: radial-gradient(300px circle at var(--x) var(--y), #000, transparent)` on a brighter copy of the grid layered over a dim one.
+5. **Fallbacks.** Touch, keyboard, reduced motion and no JS: the light layer stays at `opacity: 0` (or a fixed, centred version at low strength). Focus states are separate, real outlines.
+6. **Colour.** Use the brand hue at low alpha or neutral white; never rainbow.
+
+React/Tailwind notes: a `useSpotlight(ref)` hook that writes the custom properties; Tailwind arbitrary values like `before:[background:radial-gradient(240px_circle_at_var(--x)_var(--y),…)]` work but a small CSS class is clearer.
+
+## Pitfalls
+
+- A floating glow blob behind content: that is decoration, not material, and a known AI-template tell. Light only borders, grain or lines.
+- Listeners per card, each calling `getBoundingClientRect` on every move: layout thrash. One listener, cached rects.
+- Too bright: anything over ~10% white on a dark surface competes with text.
+- Using the light as the hover state: keyboard users get nothing.
+
+## How to verify
+
+- `palate shoot`: with no pointer, the section looks finished (no half-lit artefacts).
+- `palate animate --check` with a scripted pointer path: only custom properties change; no layout shift; under reduced motion no light follows.
+- Performance panel while moving the mouse: no layout or long tasks, < 1 ms scripting per frame.
+
+## Examples
+
+- The pattern: a dark feature grid where the 1px card borders brighten in a soft circle around the cursor as it passes over them.

package/kb/moves/dark-band-contrast-section.md

@@ -0,0 +1,55 @@
+---
+id: dark-band-contrast-section
+name: Dark band contrast section
+kind: layout
+fits: [saas, developer, premium, bold, technical, ai, b2b, cinematic]
+avoid: [playful-kids, low-bandwidth]
+signature: false
+effort: s
+perf: "a background colour and white type; nothing to load"
+a11y: "text on the band passes 4.5:1; focus ring re-tuned for the dark ground; the band is a normal section in reading order"
+pairs_with: [one-colour-brand-world, self-playing-product-demo, typographic-numeral-hero, sticky-scroll-story]
+deps: none
+---
+
+## What it is
+
+In an otherwise light page, one full-width section drops into the brand's deepest shade (or near-black), with white type and the page's most important proof or product moment inside it. One band, placed where the story turns.
+
+## Why it works
+
+- A light page is a steady rhythm; one dark band is a key change. The eye registers "something important starts here".
+- It gives a product screenshot, a big number or a demo maximum contrast, the way a gallery lights one wall.
+- It breaks the "every section is the same white box" sameness without adding new components.
+
+## When to use / when not
+
+Use on long landing pages with a clear turning point: the product in action, the main proof, the pricing intro, a manifesto line. Pairs with dev tools and AI products whose UI is dark anyway.
+
+Not for: pages already dark (it has nothing to contrast with), short pages (a band in a three-section page feels heavy), or more than once per page (two dark bands make stripes).
+
+## Recipe
+
+1. **Colour.** The brand's deepest shade, not pure black: e.g. emerald brand → `#062A20`; neutral brands → `oklch(0.18 0.01 h)`. Text primary `#f2f6f3`, secondary at ~75% lightness.
+2. **Placement.** After the hero and the first proof, before the second half of the page. Full-bleed (or inset by 8–12px with a 20–24px radius if the page uses inset panels), padding 96–128px vertical at desktop, 64px on phones.
+3. **One thing inside.** A single message: the demo, one big number with its sentence, or a dark product screenshot. Not a grid of features.
+4. **Edges.** Hard edges (no gradient fade into white). If the next section starts with a picture, let it overlap the band's bottom edge by 48–80px for continuity.
+5. **Re-tune components on the band.** Buttons: the light variant or brand-on-dark; borders at 10–14% white; focus ring light (`--focus-ring: #fff`), set as a scoped variable on the section.
+6. **Tailwind.** `className="bg-[--brand-deep] text-white [--focus-ring:#fff]"`; use a `data-surface="dark"` attribute so children pick dark variants.
+7. **Fallbacks.** Static, no JS, no motion. If the content inside animates, its own move covers reduced motion.
+
+## Pitfalls
+
+- A dark band with low-contrast grey text: the drama becomes unreadable.
+- Gradient glows or blobs to "decorate" it: keep it solid.
+- Light-mode screenshots inside: a white rectangle in a dark band breaks the effect; use a dark product state or frame it deliberately.
+- Repeating it: the second band halves the impact of the first.
+
+## How to verify
+
+- `palate shoot`: exactly one dark band; contrast passes for all text inside; focus ring visible on the band (Tab through it).
+- Squint test at 1440: the band holds the page's single strongest contrast and its main proof.
+
+## Examples
+
+- palate's brand tokens define a deep emerald (`--brand-deep`) for this band, a shade of the one brand colour rather than black.

package/kb/moves/designed-dark-mode.md

@@ -0,0 +1,58 @@
+---
+id: designed-dark-mode
+name: A dark mode that is designed, not inverted
+kind: texture
+fits: [developer, technical, saas, productivity, premium, ai, minimal, cinematic]
+avoid: [low-bandwidth, kids]
+signature: false
+effort: m
+perf: "tokens swap via one attribute; images swap only where a dark variant exists (picture + media); no flash of the wrong theme"
+a11y: "both themes pass contrast; respects prefers-color-scheme by default; the toggle is a real button with a state; forced-colors untouched"
+pairs_with: [one-colour-brand-world, time-of-day-theming, dark-band-contrast-section, calm-motion-system]
+deps: none
+---
+
+## What it is
+
+A second theme drawn on purpose: surfaces that get lighter as they rise, accents re-tuned for a dark ground, borders and shadows rethought, images and illustrations given dark versions. It follows the system setting by default, with a toggle that remembers a choice.
+
+## Why it works
+
+- Inverting light mode gives grey mud, glowing saturated accents and invisible shadows; people notice even if they can't say why.
+- In the dark, elevation reads by *lightness*, not shadow, so a designed dark mode keeps hierarchy that an inverted one loses.
+- Developers and night readers live in dark mode; a good one is a sign the team uses its own product.
+
+## When to use / when not
+
+Use for developer tools, apps people use for hours, AI products, docs, and any product whose users set their OS to dark.
+
+Not for: a marketing page whose identity depends on paper, paintings or print textures that don't survive darkness (keep it light-only and declare `color-scheme: light`, as palate's site does). Skip it rather than ship a half-done one.
+
+## Recipe
+
+1. **Surfaces by elevation.** Base `oklch(0.16 0.01 h)` (never `#000`), raised `0.20`, overlay `0.24`, highest `0.28`; tint toward the brand hue with tiny chroma. Each step up is lighter.
+2. **Text.** Primary ≈ `oklch(0.95 0.005 h)` (not pure white, reduces halation), secondary ≈ `0.75`, tertiary ≈ `0.6`; check each against the surface it sits on.
+3. **Accents re-tuned.** Raise lightness and lower chroma of the brand for dark (e.g. emerald `#0B6E4F` → about `oklch(0.72 0.12 160)` for text/links); keep the darker one for filled buttons with white text if it still passes.
+4. **Borders replace shadows.** Shadows barely show on dark; use 1px borders at ~8–12% white plus a slightly lighter surface, and a top inner highlight (`inset 0 1px 0 rgb(255 255 255 / .06)`) for raised controls. Keep a large, soft, dark shadow only for overlays.
+5. **Images.** Product screenshots: ship dark versions with `<picture><source media="(prefers-color-scheme: dark)">` (and switch on the theme attribute for the toggle). Illustrations in SVG use `currentColor`/tokens. Photos: reduce brightness slightly (`filter: brightness(.9)`) only if they glare.
+6. **Tokens and switch.** Define both themes on `:root` and `:root[data-theme="dark"]`, with the dark set also under `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { … } }`. Set `color-scheme` per theme so form controls and scrollbars match.
+7. **No flash.** A tiny inline script in `<head>` reads the saved choice (`localStorage` in try/catch) and sets `data-theme` before first paint. Without JS, the media query does the job.
+8. **The toggle.** A button with `aria-pressed` or a three-way menu (System / Light / Dark). Theme change animates nothing but colour, 150ms, and nothing under reduced motion. Optionally use a view transition for the switch.
+
+## Pitfalls
+
+- Pure black backgrounds with pure white text: harsh, and OLED smearing on scroll.
+- Same saturated brand colour on dark: it vibrates. Re-tune it.
+- Shadows as the only separation: invisible in dark.
+- Forgetting the bits: favicon, selection colour, code highlighting, charts, focus ring, embedded iframes.
+- A theme flash on load (hydration sets the theme late).
+
+## How to verify
+
+- `palate shoot` with the colour scheme emulated dark and light: no element keeps light-only colours; contrast passes in both.
+- Reload with dark saved: no light frame before paint.
+- `palate states` in dark: empty, error and loading states were also themed.
+
+## Examples
+
+- palate's own site is deliberately light-only (`color-scheme: light`), because its paintings and paper are the identity; that is the honest alternative when a dark mode can't be designed properly.

package/kb/moves/duotone-photography.md

@@ -0,0 +1,55 @@
+---
+id: duotone-photography
+name: Duotone photography
+kind: imagery
+fits: [bold, editorial, music, events, nonprofit, media, cultural, energetic, community]
+avoid: [ecommerce, food, luxury, clinical, fashion]
+signature: false
+effort: s
+perf: "pre-processed images (best) or one CSS filter/blend per image; no runtime cost beyond the image"
+a11y: "real alt text; text never placed on the busiest part; contrast of overlaid text checked against the lightest tone"
+pairs_with: [halftone-dot-imagery, one-colour-brand-world, dark-band-contrast-section, riso-print-texture]
+deps: none
+---
+
+## What it is
+
+Every photo on the site is remapped to two brand colours: shadows in one, highlights in the other. People, places and events become a consistent set, recognisably this brand's, whatever camera they came from.
+
+## Why it works
+
+- It turns a pile of inconsistent photos (phones, events, volunteers) into a single visual system.
+- Strong brand colour shows up in imagery without adding decoration.
+- Reduced colour lowers visual noise so text over or next to images reads more easily.
+
+## When to use / when not
+
+Use for causes, events, festivals, community organisations, media, music, and campaigns: places with lots of uneven photography and a strong colour.
+
+Not where true colour is the product (food, fashion, ecommerce, beauty, hotels), not for medical imagery, and not mixed with full-colour photos of the same kind on one page.
+
+## Recipe
+
+1. **Pick the pair.** Shadow colour: a deep brand tone (L* 15–25). Highlight: a light tint (L* 85–95), often warm paper or a pale brand tint. Check text contrast on both.
+2. **Pre-process (preferred).** At build time (sharp or Pillow): greyscale → levels (clip 2% / 98%) → map luminance through a gradient from shadow to highlight. Export WebP/AVIF. Same treatment for every image of that role.
+3. **CSS alternative.** Wrap the image: container `background: highlight`; image `filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply;` and an overlay `::after` with `background: shadow; mix-blend-mode: lighten;`. Or an SVG `feColorMatrix` + `feComponentTransfer` filter referenced by `filter: url(#duo)`. Test in Safari.
+4. **Hover to colour (optional).** On a team grid, cross-fade to the original colour photo on hover/focus (opacity 240ms). Not on touch. Static under reduced motion (no fade, just stays duotone).
+5. **Text on duotone.** Place text on the highlight side of the image or on a solid band; never on mid-tones.
+6. No JS needed; images include `alt`, `width`, `height`, `loading="lazy"` below the fold.
+
+## Pitfalls
+
+- Two colours with similar lightness: the image goes muddy and flat.
+- Applying duotone to logos or product UI.
+- Different pairs on every section: the system becomes a rainbow.
+- CSS blend versions breaking in some browsers: pre-process for anything important.
+
+## How to verify
+
+- `palate shoot`: every photo of the same role uses the same two colours; faces readable at 390.
+- `palate details`: text over images passes contrast (4.5:1 body, 3:1 large).
+- File sizes comparable to or smaller than the originals.
+
+## Examples
+
+- No public example cited; a classic poster and campaign technique.

package/kb/moves/editorial-drop-cap.md

@@ -0,0 +1,58 @@
+---
+id: editorial-drop-cap
+name: Editorial drop cap and small caps opening
+kind: type
+fits: [editorial, publishing, heritage, crafted, media, cultural, calm, premium]
+avoid: [developer, data-dense-tool, daily-tool, playful-kids, gaming]
+signature: false
+effort: s
+perf: "pure CSS (initial-letter or a float); one display face at most, often already loaded"
+a11y: "the letter stays part of the word in the text; no image letters; decorative ornaments aria-hidden"
+pairs_with: [editorial-grid-pull-quotes, story-led-long-scroll, changelog-as-magazine, colophon]
+deps: none
+---
+
+## What it is
+
+The first paragraph of a long piece (a manifesto, a story, a changelog entry, an about page) opens like a printed magazine: a large initial letter sunk 3 lines deep, the rest of the first line in small caps, and a slightly larger lead paragraph. It tells the reader "this is meant to be read."
+
+## Why it works
+
+- Print conventions carry centuries of meaning: a drop cap says essay, not marketing copy, and sets a slower reading pace.
+- It gives a text-only section a focal point without adding an image.
+- Done precisely (aligned to the baseline and cap height) it is a quiet signal of craft that most generated pages never have.
+
+## When to use / when not
+
+Use at the start of long-form content: about pages, founder letters, case studies, changelogs written as stories, publications, cultural institutions.
+
+Not on short marketing blurbs, UI text, docs reference pages or app screens. Not more than once per article. Avoid with a first word that starts with a quote mark or a number unless you handle it.
+
+## Recipe
+
+1. **Modern CSS.** `p.lead::first-letter { initial-letter: 3; }` (Safari needs `-webkit-initial-letter`). Add a `margin-inline-end: 0.08em` and colour it in the brand ink. Use `@supports (initial-letter: 3)`; the fallback is a float.
+2. **Fallback float.** `float: left; font-size: calc(3 * 1.6em * 0.9); line-height: 0.8; margin: 0.06em 0.08em 0 0;` tuned so the top aligns with the cap height of line 1 and the bottom sits on the baseline of line 3. Check by eye at 200% zoom.
+3. **Small caps run-in.** Wrap the first 3–6 words in a span with `font-variant-caps: all-small-caps; letter-spacing: 0.04em;`. Use a font with real small caps (`font-feature-settings: "smcp"`) or skip it: synthesised small caps look thin.
+4. **Lead size.** The first paragraph at 1.15–1.25× body size, 60–68ch measure, line-height 1.55.
+5. **Typeface.** A serif with a strong capital (or the display face of the brand). The drop cap may use the display face while the body uses the text face.
+6. **Phone.** At narrow widths, drop to `initial-letter: 2` or remove it below ~360px if the column gets too narrow for three lines to wrap around.
+7. No JS, so no-JS and reduced motion are the same page.
+
+Tailwind: `first-letter:float-left first-letter:text-[4.6em] first-letter:leading-[0.8] first-letter:mr-2` for the fallback, or an arbitrary property `[&::first-letter]:[initial-letter:3]`.
+
+## Pitfalls
+
+- A drop cap that floats above the text block or doesn't reach the third baseline: it looks broken, not editorial.
+- Using it on every paragraph or every section: it's an opening, once.
+- Faux small caps from `text-transform: uppercase; font-size: 0.8em`: thin and spotty.
+- Image or SVG letters: break copy, search and screen readers.
+
+## How to verify
+
+- `palate shoot` at 1440 and 390, zoomed crop of the opening: the cap's top aligns with line 1's cap height and its foot with line 3's baseline.
+- `palate details`: text measure 60–68ch; small caps are real (font feature present).
+- Accessibility tree: the first word reads as one word.
+
+## Examples
+
+- No public example cited; this is a standard print-magazine convention brought to the web.

package/kb/moves/editorial-grid-pull-quotes.md

@@ -0,0 +1,55 @@
+---
+id: editorial-grid-pull-quotes
+name: Editorial grid with pull quotes
+kind: layout
+fits: [editorial, publishing, media, crafted, heritage, cultural, premium, calm, nonprofit]
+avoid: [data-dense-tool, gaming, playful-kids, daily-tool]
+signature: false
+effort: m
+perf: "pure layout and type; one web font family (two at most) with font-display: swap and size-adjusted fallbacks"
+a11y: "pull quotes are aside elements, aria-hidden when they duplicate body text; reading order follows the DOM; measure 60–72ch"
+pairs_with: [editorial-drop-cap, story-led-long-scroll, changelog-as-magazine, honest-testimonial-wall]
+deps: none
+---
+
+## What it is
+
+Long-form content laid out like a good magazine: a 12-column grid with a text column at a readable measure, images and captions breaking out to different widths, and large pull quotes that pull one sentence out of the text and set it big in the margin or across the columns.
+
+## Why it works
+
+- The grid plus varied breakouts gives rhythm: the eye rests on images and quotes, so long text doesn't feel like a wall.
+- Pull quotes are a skimmer's path: someone scrolling reads the quotes and decides to read the piece.
+- Editorial structure signals that the content was edited, which reads as care and authority.
+
+## When to use / when not
+
+Use for essays, case studies, manifestos, about pages, reports, customer stories, long changelogs.
+
+Not for: product UI, dashboards, short landing pages, gaming or kids' brands. A pull quote of a sentence that isn't worth repeating is worse than none.
+
+## Recipe
+
+1. **Grid.** `grid-template-columns: [full-start] minmax(16px,1fr) [wide-start] minmax(0,120px) [text-start] minmax(0,680px) [text-end] minmax(0,120px) [wide-end] minmax(16px,1fr) [full-end]`. Body in `text`, images in `wide` or `full`, asides in the margins at ≥1200px.
+2. **Body type.** 18–20px, line-height 1.6, measure 60–72ch, a serif or a sturdy text face; paragraph spacing = one line. `text-wrap: pretty` on paragraphs, `balance` on headings.
+3. **Pull quotes.** Every 4–6 paragraphs, at most. Pick a sentence that stands alone. Set 28–36px (desktop), tight leading (1.15–1.25), in the display face or italic; a thin rule above or a large hanging quotation mark, not both. Float into the right margin (`grid-column: text-end / wide-end` spanning, or `float: right; width: 40%; margin-right: -120px`) or span `wide` between paragraphs.
+4. **Semantics.** `<aside class="pull-quote" aria-hidden="true">` when it repeats body text (screen readers shouldn't hear it twice); if the quote is from someone else, use `<blockquote>` with `<cite>`.
+5. **Images and captions.** Captions in 13–14px sans, grey, with credits. Alternate widths (text, wide, full) so no two neighbours match.
+6. **Phones.** One column; pull quotes become full-width interludes at 24px; margins vanish.
+7. **No JS, no motion.** Optionally fade quotes in on scroll under `prefers-reduced-motion: no-preference`, visible by default.
+
+## Pitfalls
+
+- Pull quote every two paragraphs: the device stops working.
+- Quotes that are bland ("We're excited to share…").
+- Measure too wide (90ch+) because the grid is wide.
+- Different breakout widths with misaligned edges: everything must snap to the named lines.
+
+## How to verify
+
+- `palate shoot`: body measure ≤ 75ch at 1440; quotes don't overlap text at 1024–1280; phone layout single column.
+- Screen reader / accessibility tree: duplicate quotes are hidden; external quotes are blockquotes with cite.
+
+## Examples
+
+- A long-standing print convention; well-edited long-read sites use the same named-line grid. No specific site cited.