baldart 5.0.1 → 5.2.0

package/framework/.claude/skills/ui-design/references/craft-standards.md

@@ -0,0 +1,259 @@
+# Craft Standards — always-on rules for every generated surface
+
+These are the non-negotiable craft rules the generator applies while producing
+mockups (Step C) and the evaluator verifies (Step D). They are **binding on
+every option**, in every direction, in both registers — aesthetic direction
+changes *what* you design, never *how well*.
+
+> **Numeric SSOT rule.** Type-scale ratios, contrast targets (WCAG + APCA),
+> spacing scales, and density tiers live in
+> [`framework/agents/design-system-protocol.md`](../../../../agents/design-system-protocol.md)
+> § "Reference Tables" — cite those values verbatim, never restate from memory.
+> This file adds the craft rules *not* covered there.
+>
+> Distilled in part from [impeccable](https://github.com/pbakaus/impeccable)
+> (Apache-2.0, © Paul Bakaus),
+> [taste-skill](https://github.com/Leonxlnx/taste-skill) (MIT, © Leonxlnx) and
+> [open-design](https://github.com/nexu-io/open-design) (Apache-2.0, nexu-io).
+>
+> **Precedence.** The project's own contract wins on conflict: design-system
+> tokens (`tokens-reference.md`) > `${paths.ui_guidelines}` + the skill overlay
+> > these craft standards. Craft rules cover everything the project does not
+> explicitly override.
+
+## Typography
+
+- **One scale.** Pick ONE ratio from the protocol § Type scale and derive every
+  size from it — 6–9 deliberate steps max. Extra hierarchy comes from weight,
+  color, and spacing, not new sizes.
+- **Line length**: body text 65–75ch (`max-w-[65ch]` or equivalent). Apply
+  `text-wrap: balance` on h1–h3, `text-wrap: pretty` on prose.
+- **Display ceiling**: hero/display headings cap at `clamp()` max ≤ 6rem
+  (~96px). Above that the page is shouting, not designing. Keep any `clamp()`
+  bounded: max ≤ ~2.5× min.
+- **Headline discipline**: H1 max 2 lines at desktop. A 4-line hero headline is
+  a font-size error, never a copy-length error — plan scale and copy together.
+- **Tracking — the single most-skipped rule in AI-generated design.** Body
+  (14–18px) `0` · small text (11–13px) `+0.01–0.02em` · UI labels `+0.02em` ·
+  **ALL-CAPS `+0.06–0.1em` (required — the 0.06em floor is the empirical
+  typographic lower bound)** · headings 32px+ `−0.01–0.02em` · display 48px+
+  `−0.02–0.03em`, never below `−0.04em`. ALL-CAPS without positive tracking
+  looks cramped; display without negative tracking looks loose — the two most
+  reliable slop tells. ALL-CAPS body text is banned; never `text-align:
+  justify`.
+- **Three-weight system**: Read (400/450) · Emphasize (510/550) · Announce
+  (590/600). Weight 700+ is rarely needed — reach for size/color/space first.
+- **Pairing**: pair on a contrast axis (serif + sans, geometric + humanist,
+  display + mono) or use one family in multiple weights. Never pair fonts that
+  are similar-but-not-identical.
+- **Emphasis**: italic or bold of the SAME family. Never inject a serif word
+  into a sans headline for "flair" — mixed-family emphasis reads amateur.
+- **Italic descender clearance**: italic display words containing `y g j p q`
+  need `leading-[1.1]` minimum plus bottom padding — `leading-none` clips them.
+- **Light-on-dark compensation**: on dark surfaces bump line-height by
+  0.05–0.1, add 0.01–0.02em letter-spacing, and optionally drop body weight one
+  notch (400 → 350). Light text visually thickens.
+
+## Color
+
+- **Contrast is zero-tolerance.** Every text/background pair meets the
+  protocol § Color contrast targets (body ≥ 4.5:1, large ≥ 3:1, UI ≥ 3:1 —
+  APCA as secondary gate). Placeholder text counts as content. Every `bg-*`
+  utility has an explicit paired `text-*`. Light-gray-for-elegance is the
+  single biggest reason AI designs read as hard to use.
+- **Gray-on-color is banned.** Gray text over a colored background looks
+  washed out — use a darker shade of the background's own hue, or a
+  transparency of the text color.
+- **Color proportions**: neutrals carry 70–90% of pixels · ONE accent at
+  5–10% · semantic colors 0–5% · pure-effect color < 1%. Never invent a second
+  accent. **Ration the accent to ≤ 2 visible uses per screen** (typical pair:
+  one chip/eyebrow + the primary CTA — links, hover states and focus rings
+  count). A fuller commitment is a deliberate direction choice (see
+  `design-brief.md` § Color commitment), never a drift. Once chosen, the
+  accent is consistent page-wide — a warm-grey page does not sprout a blue CTA
+  in section 7.
+- **Tinted neutrals.** Pure gray is dead: tint neutrals 0.005–0.015 chroma
+  toward the brand hue (OKLCH). Prefer OKLCH for any new palette work.
+- **Dark surfaces**: never pure `#000000` / `#ffffff` — off-black and
+  off-white keep depth. Dark mode is not inversion: build a 3-step surface
+  scale (≈15% / 20% / 25% lightness) and let depth come from surface
+  lightness, not shadow.
+- **Alpha is a design smell.** Heavy use of transparency usually means an
+  incomplete palette — name the actual surface colors.
+
+## Spacing, layout & hierarchy
+
+- **One spacing scale** from the protocol § Spacing scale (base-4 preferred
+  for product UI). Arbitrary off-scale values (`p-[13px]`) are token
+  violations.
+- **Rhythm**: 8–12px between tight siblings, 48–96px between sections.
+  Consistent gaps between similar elements — monotonous identical spacing
+  everywhere is its own tell.
+- **Hierarchy math**: a strong size jump is ≥ 3:1; below 2:1 the hierarchy is
+  weak. The best hierarchy combines 2–3 dimensions at once (size + weight +
+  color/space), never size alone.
+- **Layout mechanics**: Flexbox for 1D, Grid for 2D. Breakpoint-free grids via
+  `repeat(auto-fit, minmax(280px, 1fr))` where content allows. Semantic
+  z-index scale (dropdown → sticky → modal-backdrop → modal → toast →
+  tooltip), never `z-[999]`.
+- **Cards are the lazy answer.** Use a card only when a bounded, repeatable
+  unit is truly the best affordance. Nested cards are always wrong.
+- **Layout-family diversity**: a section layout family appears max twice per
+  page and never 3× consecutively (image+text zigzag caps at 2 in a row). A
+  landing page with 8 sections needs ≥ 4 distinct layout families.
+- **Bento cell count = content count.** A grid with an empty filler tile was
+  planned wrong — reshape the grid instead of pasting a blank cell. Give 2–3
+  cells real visual variation (image / gradient / pattern), not uniform
+  white-on-white.
+- **Viewport discipline**: `min-h-[100dvh]` never `h-screen` (iOS Safari).
+  Text never overflows or clips — the viewport is part of the design.
+  Dropdowns inside `overflow: hidden` containers get clipped: use
+  `<dialog>`, the popover API, `position: fixed`, or a portal.
+- **Touch targets**: honor the protocol § Density tiers (touch-primary ⇒
+  Comfortable tier, 44px). When a control must render smaller, expand the hit
+  area with a pseudo-element.
+
+## States — the 8-state taxonomy
+
+Every interactive component ships **default · hover · focus · active ·
+disabled · loading · error** — plus the surface-level **empty** state. Never
+design only the happy path:
+
+- Loading = skeletons that mirror real layout dimensions exactly (a
+  wrong-height skeleton *causes* layout shift), not spinners. Thresholds:
+  0–300ms no indicator at all · past ~15s show a "taking longer than
+  expected" fallback.
+- Empty states teach the interface (what goes here + the CTA that fills it).
+- Error states answer three questions: what happened · why (if knowable) ·
+  what the user can do — localized (`identity.language`), with the user's
+  input preserved. Never a bare "Invalid input".
+- Focus is visible and styled (≥ 3:1 contrast on the indicator), not the
+  browser default leaking through a restyled component.
+- Edge state: extreme volume, 200-char titles, RTL, partial network — a
+  populated-only mockup hides the layout's real failure modes.
+
+## Cognitive load (Laws of UX, operational numbers)
+
+- **Proximity**: variable vertical rhythm — 8–12px within a group, 32–48px
+  between groups. Uniform spacing reads as nothing being grouped.
+- **Hick's Law**: cap any single decision screen at 3–5 visible primary
+  options.
+- **Choice overload**: pricing 3–4 tiers with exactly one marked recommended ·
+  product grids 6–9 hero cards above the fold · settings ≤ 5 named groups ·
+  nav ≤ 5 top-level items.
+- **Tesler's Law**: complexity is conserved — the design decision is *where*
+  it lives (defaults, progressive disclosure), not whether to eliminate it.
+- Working memory holds ~4 chunks: never ask the user to carry more across a
+  flow.
+
+## Motion
+
+- **The 100/300/500 rule**: 100–150ms instant feedback (hover, press) ·
+  200–300ms state changes · 300–500ms layout moves · 500–800ms entrances
+  (brand surfaces only). Exits run ~75% of the paired entrance. Below ~80ms
+  motion isn't perceived — don't spend it. Mobile runs 20–30% shorter than
+  desktop.
+- **Curve vs spring**: a curve for opacity/color, a spring for
+  position/scale/rotation. Animate only when the user moves through space,
+  time, or state (navigation, container expansion, progress, gesture
+  follow-through) — never to teach, decorate, or signal "premium".
+- **Easing**: ease-out with exponential curves (quart/quint/expo family). No
+  bounce, no elastic, no `linear`/`ease-in-out` defaults — pick a deliberate
+  cubic-bezier.
+- **Motion must be motivated.** Valid reasons: hierarchy, storytelling,
+  feedback, state transition. "It looked cool" is not one — if you cannot
+  state the reason in one sentence, drop the animation.
+- **The uniform reflex is the tell, not motion itself.** One identical
+  entrance applied to every section reads as AI grammar; but shipping a page
+  with zero motion to avoid it is also wrong. One well-orchestrated entrance
+  with staggered reveals beats scattered micro-interactions.
+- **Reveal animations enhance already-visible content.** Never gate content
+  visibility on a class-triggered transition: transitions pause in hidden tabs
+  and headless renderers, and the section ships blank.
+- **Register budgets**: product surfaces 150–250ms, no orchestrated page-load
+  sequences; brand surfaces may spend one entrance sequence. Marquee ≤ 1 per
+  page.
+- **Mechanics**: animate `transform`/`opacity` only. Never
+  `window.addEventListener("scroll")` and never continuous input values
+  (mouse, scroll progress) in framework state — use the animation library's
+  motion values. `prefers-reduced-motion` support is not optional.
+
+## Forms (always-on, every project)
+
+- `<label>` associated via `htmlFor`/`id` (never wrap-only).
+- `autocomplete=` on every personal-data field (`email | tel | given-name |
+  family-name | street-address | postal-code | cc-number | one-time-code` …).
+- Validate **on blur**, re-validate on submit — never on every keystroke.
+- Errors actionable ("Email manca @ — esempio: nome@dominio.it"), with
+  `aria-invalid` + `aria-describedby`; `role="alert"` only when the error
+  appears dynamically.
+- `inputMode=` when it differs from `type` (SMS codes: `type="text"
+  inputMode="numeric"`).
+- Paste handling normalizes whitespace/format BEFORE validating.
+- Submit disabled only **after** a failed attempt, never pre-emptively.
+
+## Performance Gates (Core Web Vitals 2026) — canonical home
+
+Production-grade frontend ships within CWV budgets by design, not after
+Lighthouse complains. (This section moved here from the retired
+`frontend-design` generator — this is now the canonical reference, cited by
+`ui-expert`.)
+
+| Metric | Good | Poor | What it measures |
+|---|---|---|---|
+| **LCP** | ≤ 2.5s | > 4.0s | Largest Contentful Paint — usually hero image or H1 |
+| **INP** | ≤ 200ms | > 500ms | Interaction to Next Paint |
+| **CLS** | ≤ 0.1 | > 0.25 | Cumulative Layout Shift |
+| TTFB | ≤ 0.8s | > 1.8s | Subset of LCP (~40% of budget) |
+| FCP | ≤ 1.8s | > 3.0s | Diagnostic only |
+
+**LCP image — the only correct pattern:**
+
+```html
+<!-- in <head> — preload + fetchpriority for the hero -->
+<link rel="preload" as="image"
+      href="/hero.avif"
+      imagesrcset="/hero-800.avif 800w, /hero-1600.avif 1600w"
+      imagesizes="100vw"
+      fetchpriority="high">
+
+<!-- in body — picture with AVIF/WebP/fallback + explicit dimensions -->
+<picture>
+  <source srcset="/hero.avif" type="image/avif">
+  <source srcset="/hero.webp" type="image/webp">
+  <img src="/hero.jpg" alt="..."
+       fetchpriority="high"
+       width="1600" height="900">
+</picture>
+```
+
+**Never** `loading="lazy"` on the LCP image; **never** client-render it
+post-hydration.
+
+**INP**: break tasks > 50ms with `await scheduler.yield()` (fallback
+`setTimeout 0`) · debounce input handlers to one frame when they trigger
+expensive recomputes · move CPU-bound work to Web Workers · no `setInterval`
+polling (use stale-while-revalidate).
+
+**CLS — zero unexpected shift**: every `<img>`/`<iframe>`/`<video>` declares
+`width`+`height` or `aspect-ratio` · web fonts use `font-display: optional` OR
+`size-adjust` + metric overrides · skeletons mirror real dimensions · inserted
+UI (banners, notices) reserves space upfront via `min-height`.
+
+## Modern CSS (2025–2026)
+
+Default to platform features instead of JS shims:
+
+- **Container queries** (`@container` + `container-type: inline-size`) for any
+  component living in variable-width contexts; viewport `@media` only for
+  app-shell layout.
+- **`:has()`** to collapse state that exists only for styling — visual
+  reactions to DOM state, never business logic.
+- **View Transitions API** for SPA navigation and shared-element morphs (full
+  pattern: `motion-design` skill references).
+- **Subgrid** for cross-row content alignment inside cards.
+- **Logical properties** (`margin-inline-start`, `padding-block`) whenever RTL
+  or vertical writing modes are conceivable — free i18n.
+- **`color-mix()`** to derive hover/focus/disabled from semantic tokens
+  (`color-mix(in oklch, var(--color-action-primary) 90%, black)`).
+- **`@scope`** to scope styles to a subtree without specificity wars.

package/framework/.claude/skills/ui-design/references/design-brief.md

@@ -0,0 +1,92 @@
+# Design Brief — Step C.0: Design Read & Direction Lock
+
+Most AI-generated UIs fail not because of bad code, but because of skipped
+thinking. This step converts the inputs (discovery answers, user brief,
+context screenshots, `identity.*`) into a locked design intent BEFORE any
+HTML is generated. It costs one short block of reasoning and prevents the
+dominant failure mode: generating three layouts of the same unexamined
+default.
+
+> Distilled from [impeccable](https://github.com/pbakaus/impeccable)
+> (Apache-2.0, © Paul Bakaus) and
+> [taste-skill](https://github.com/Leonxlnx/taste-skill) (MIT, © Leonxlnx).
+
+## 1. Classify the register
+
+| Register | Definition | Consequences |
+|---|---|---|
+| **Brand** | Design IS the product's voice: landing, marketing, hero surfaces, campaign pages | Bolder type ratio (protocol § Type scale, ≥ 1.25) · one orchestrated entrance allowed · color commitment may exceed Restrained · restraint without intent reads as mediocre — go big or go home |
+| **Product** | Design SERVES the task: app screens, dashboards, forms, settings | Fixed rem scale, ratio 1.125–1.2 · Restrained color (accent = actions/selection/state only, never decoration) · motion 150–250ms, no page-load sequences · **the slop test flips: the bar is *earned familiarity*, not distinctiveness** — the tool should disappear into the task; strangeness without purpose is the failure mode |
+
+Mixed features (a landing + an app screen) classify per-screen.
+
+## 2. Determine the regime
+
+| Regime | When | What varies across the 3 options |
+|---|---|---|
+| **In-context** | `features.has_design_system: true`, OR the feature lands inside an existing app shell (context screenshots exist) | Layout, hierarchy, information architecture, interaction pattern, density — the project's visual language (tokens, type, palette) is FIXED. Context fidelity is king |
+| **Exploration** | Greenfield surface, new product, standalone page with no binding language | Aesthetic direction — each option takes a DIFFERENT named direction from `design-directions.md`, each with its own typography/palette/composition |
+
+Never explore aesthetics on an in-context run: proposing a new visual
+language for one screen of an existing product is drift, not creativity.
+
+## 3. Set the three dials
+
+`DESIGN_VARIANCE` (how far from convention) · `MOTION_INTENSITY` ·
+`VISUAL_DENSITY` — each 1–10. Canonical names; never invent aliases.
+
+| Signal | VARIANCE | MOTION | DENSITY |
+|---|---|---|---|
+| Brand register, launch/campaign | 7–9 | 6–8 | 3–4 |
+| Brand register, trust-first / public-sector / regulated | 3–4 | 2–3 | 4–5 |
+| Product register (default) | 3–5 | 2–4 | 5–7 |
+| Product register, data-heavy power tool | 2–4 | 1–3 | 7–9 |
+| Explicit "make it bold/memorable" from the user | +2 | +1 | — |
+
+Quiet constraints override every dial: accessibility-first briefs, kids
+audiences, public sector → drop VARIANCE and MOTION to the low band and say
+so in the Design Read. Dials gate downstream rules ("motion claimed, motion
+shown": if MOTION > 4 the page must actually move — otherwise lower the dial
+and ship clean static).
+
+## 4. Emit the Design Read (mandatory, one line + assignments)
+
+Before generating, output — to the user in interactive mode, to the state
+file always:
+
+```
+Design Read: <page kind> for <audience>, <register> register, <regime>
+regime, dials V<x>/M<y>/D<z>, leaning <design system | direction family>.
+Options: A = <direction/layout hypothesis> · B = … · C = …
+Color commitment: <Restrained | Committed | Full | Drenched> (reference: <named real-world anchor>)
+Dark/light: <choice> — <the one-sentence physical scene that forces it>
+Anti-references: <what this must NOT look like — e.g. "not SaaS-cream, not dark-glow">
+```
+
+Rules:
+
+- **Ambiguity → exactly ONE question.** If the read is genuinely ambiguous
+  ("Linear-clean or Awwwards-experimental?"), ask one crisp question with the
+  two poles — never a battery of questions, and never guess silently.
+  Assert-then-confirm beats menu-with-escape: "This reads as Restrained
+  product UI — confirm?" When invoked from `/prd`, the discovery answers
+  usually make the read unambiguous: do NOT re-ask what discovery already
+  answered. (Decision-gate mechanics per runtime:
+  `framework/agents/runtime-portability-protocol.md`.)
+- **Run the two-altitude slop test** on your own read (`anti-slop.md`): if
+  the direction you "naturally" landed on is the first- or second-order
+  reflex for this category, reject it and pick deliberately.
+- **Rotation check**: read the state file / previous designs in
+  `${paths.prd_dir}` for the last exploration run's direction and display
+  font — do not repeat them (`design-directions.md` § Rotation rule).
+- **Anti-references are part of the brief.** Ask for them in discovery if
+  absent; they are the cheapest signal the user can give.
+
+## 5. What C.0 hands to generation (C.1)
+
+- The Design Read block (above), persisted in the state file under
+  `## UI Design` → `design_read`.
+- Per-option: direction name (exploration) or layout/IA hypothesis
+  (in-context), color commitment, register, dials.
+- The reflex-reject outcomes: which defaults were considered and refused
+  (one line — this keeps the generator honest and the evaluator informed).

package/framework/.claude/skills/ui-design/references/design-directions.md

@@ -0,0 +1,188 @@
+# Design Directions — the aesthetic vocabulary for exploration
+
+The curated menu of named aesthetic directions, font pools, and palette
+strategies used at **Step C.0 (Direction Lock)** when the run is in
+**exploration regime** (no binding design system / new surface — see
+`design-brief.md` § Regime). In **in-context regime** this file is consulted
+only for craft vocabulary — the project's own visual language always wins.
+
+> Distilled from [taste-skill](https://github.com/Leonxlnx/taste-skill) (MIT,
+> © Leonxlnx), [impeccable](https://github.com/pbakaus/impeccable)
+> (Apache-2.0, © Paul Bakaus) and
+> [open-design](https://github.com/nexu-io/open-design) (Apache-2.0, nexu-io).
+
+## How to use this menu
+
+1. Classify register + read the brief (`design-brief.md`), THEN pick.
+2. In exploration regime, each of the 3 options takes a **different**
+   direction from this menu (or a deliberate hybrid, named in the rationale).
+3. **One system per project**: if the brief reads as a real design system
+   (Material, Fluent, Carbon, Polaris, Primer, GOV.UK/USWDS, Radix, shadcn),
+   honor that language — never recreate its CSS from imagination and never mix
+   two systems.
+4. **Rotation rule**: never reuse the same direction or the same display font
+   family across consecutive exploration runs in the same project — check the
+   state file for the previous run's direction.
+5. **Identity preservation wins**: reflex-reject lists below apply to
+   *greenfield defaults*, never to an existing brand's established choices.
+
+## The direction menu
+
+Each direction: when it fits · typography · palette · composition · motion ·
+what kills it.
+
+### 1. Editorial Luxury
+Warm paper canvas (`#FDFBF7` family — a *deliberate* opt-in, see the beige
+ban below), muted sage/espresso accents, one refined display serif from the
+rotation pool + humanist sans body, generous whitespace, film-grain noise at
+`opacity-[0.03]`. Fits: premium consumer, craft brands, magazines. Motion:
+slow reveals (400–500ms), no bounce. Killed by: brass/clay/oxblood accents
+(the banned battery), Fraunces/Instrument Serif, more than one decoration
+layer.
+
+### 2. Ethereal Glass (OLED)
+Near-black canvas (`#050505`), radial gradient mesh far behind content,
+vantablack cards with `backdrop-blur-2xl` and `white/10` hairlines,
+white-on-black type. Fits: dev-tools, AI products *when deliberately chosen*,
+premium hardware. Motion: slow parallax, glow-on-hover. Killed by: purple/blue
+"trust" gradients, colored box-shadow glows, gradient text.
+
+### 3. Soft Structuralism
+Silver-grey/white surfaces, bold grotesk display, diffused ambient shadows,
+concentric radii ("double-bezel": outer shell `ring-1 ring-black/5 p-1.5
+rounded-[2rem]`, inner core `rounded-[calc(2rem-0.375rem)]`). Fits: modern
+SaaS brand surfaces that must feel engineered. Motion: custom cubic-bezier
+(`cubic-bezier(0.32, 0.72, 0, 1)`), never linear/ease-in-out. Killed by:
+default shadows, mixed radius systems.
+
+### 4. Warm Minimal (Notion/Linear editorial)
+Warm monochrome: canvas `#FFFFFF`/`#F7F6F3`, borders `#EAEAEA`, ink
+`#111111`, secondary `#787774`; spot pastels only as paired text/bg chips
+(Pale Red `#FDEBEC`/`#9F2F2D`, Pale Blue `#E1F3FE`/`#1F6C9F`, Pale Green
+`#EDF3EC`/`#346538`, Pale Yellow `#FBF3DB`/`#956400`); black CTA, radius
+4–6px, no shadow. Fits: product register, docs, tools. Motion: 150–200ms
+state changes only. Killed by: decorative color, hero theatrics.
+
+### 5. Swiss Industrial Print
+Paper `#F4F4F0`/`#EAE8E3`, ink `#050505`, ONE accent (Aviation Red
+`#E61919`), macro-type `clamp(4rem, 10vw, 15rem)` uppercase with tight
+leading (0.85–0.95), mono micro-labels (+0.05–0.1em tracking), radius 0
+absolute, mathematical hairlines (`display: grid; gap: 1px` with contrasting
+backgrounds). Fits: portfolios, manifestos, industrial/logistics brands.
+Killed by: rounded corners, soft shadows, second accent.
+
+### 6. Tactical Telemetry (CRT)
+Dark `#0A0A0A`/`#121212`, phosphor text `#EAEAEA`, same single red, Terminal
+Green `#4AF626` reserved for exactly ONE element, mono type, ASCII framing
+(`[ SYSTEMS ]`), scanline via `repeating-linear-gradient`. Fits: dev/infra
+products, dashboards with attitude. Mutually exclusive with #5 — pick one.
+Killed by: glassmorphism, gradients, more than one green element.
+
+### 7. Terminal-Native Product
+Dense data UI on dark 3-step surface scale (≈15/20/25% lightness), tabular
+numerals, base-4 spacing, Compact density tier, restrained accent for state
+only. Fits: consoles, analytics, power-user tools (product register). Motion:
+120–200ms, zero entrances. Killed by: marketing theatrics, spacious hero
+sections.
+
+### 8. Cold Luxury
+Silver-grey + chrome + smoke; thin display type with wide optical margins,
+monochrome photography, hairline dividers. Fits: fashion, architecture,
+high-end services. Killed by: warm beige drift, script fonts.
+
+### 9. Earthy Rotation (Forest / Black & Tan / Terracotta + Slate / Olive + Brick + Paper / Cobalt + Cream)
+The rotation pool for premium-consumer briefs that must NOT collapse into
+beige+brass: deep green + bone + amber; or black + tan; or terracotta +
+slate; or olive + brick + paper; or cobalt + cream. Pick ONE family, carry it
+with conviction (Committed strategy, below). Killed by: mixing two families,
+gray-on-color text.
+
+### 10. Drenched Brand
+The surface IS the color: one saturated brand color carries 60%+ of pixels
+("Klim orange" energy), type in near-black or paper-white, zero secondary
+accent. Fits: bold brand surfaces, campaign pages, portfolios. Requires real
+contrast discipline (APCA check on every pair). Killed by: timidity — a
+drenched page with gray hedging reads broken.
+
+### 11. Kinetic Type / Display-Led
+Golden-ratio scale (protocol § Type scale), type AS the imagery, macro
+headlines, scroll-driven reveals (one orchestrated sequence). Fits: launches,
+events, editorial features (brand register, MOTION dial ≥ 7). Killed by:
+competing imagery, more than 2 type families.
+
+### 12. Playful Toy
+Saturated pops on light canvas, chunky rounded geometry (one radius system:
+all-soft 12–16px), springy micro-interactions (spring for position/scale),
+illustrated spot assets. Fits: consumer onboarding, education, kids (with
+a11y quiet-constraint override). Killed by: pastel wash without contrast,
+bounce easing everywhere.
+
+## Color commitment axis (choose per option, name it in the rationale)
+
+- **Restrained** — tinted neutrals + one accent ≤ 10% of pixels (product
+  register default).
+- **Committed** — one saturated color carries 30–60% of the surface.
+- **Full palette** — 3–4 named color roles, each with a job.
+- **Drenched** — the surface is the color (direction #10).
+
+Name a real-world reference before picking ("Stripe purple-on-white
+restraint", "Klim #ff4500 drench") — **unnamed ambition becomes beige**.
+
+## Dark vs light — the scene sentence
+
+Dark vs light is never a default. Before choosing, write one sentence of
+physical scene: *who* uses this, *where*, under *what ambient light*, in
+*what mood*. If the sentence doesn't force the answer, it is not concrete
+enough yet — sharpen it, then decide.
+
+## Reflex-reject lists (greenfield defaults only)
+
+### The LILA rule (color)
+The "AI purple / blue glow" aesthetic is refused as a default: no
+violet-indigo gradients, no cyan-on-dark glow, none of the default-Tailwind
+indigo accents (`anti-slop.md` § Absolute bans). Use neutral bases
+(zinc/slate/stone, tinted toward brand hue) with ONE high-contrast accent
+(emerald, electric blue, deep rose, burnt orange). Override: the brand
+genuinely IS purple → embrace it with intent.
+
+### The premium-consumer beige ban (color)
+For premium-consumer briefs (cookware, wellness, artisan, luxury, DTC home),
+the default is warm beige/cream + brass/clay/oxblood + espresso text — banned
+as a default, including the hex families `#f5f1ea #f7f5f1 #fbf8f1 #efeae0
+#ece6db #faf7f1 #e8dfcb` (bg), `#b08947 #b6553a #9a2436 #9c6e2a #bc7c3a
+#7d5621` (accent). Rotate through the Earthy Rotation (#9) or Cold Luxury
+(#8) instead. Warmth is carried by accent + typography + imagery, not by the
+body background. Related: the whole warm-neutral band (OKLCH L 0.84–0.97,
+C < 0.06, hue 40–100) reads as cream/sand/paper regardless of token name —
+token names like `--paper`, `--cream`, `--sand`, `--bone` are tells in
+themselves. Editorial Luxury (#1) may opt into warm paper *deliberately* —
+say so in the rationale and rotate next time.
+
+### Serif discipline (typography)
+Serif is very discouraged as a default. "It feels creative/premium/editorial"
+is NOT a reason — "creative brief = serif" is the single most-tested AI tell.
+**Banned as defaults: Fraunces and Instrument Serif.** If a serif is
+genuinely justified (rare), rotate from: PP Editorial New, GT Sectra, Tiempos
+Headline, Recoleta, Cormorant Garamond, EB Garamond, Canela, Domaine Display,
+Playfair Display (never twice in a row).
+
+### Font reflex-reject (typography)
+Before locking a font, run the 4-step selection: (1) three concrete brand
+words (not "modern/elegant" — "warm, mechanical, opinionated"); (2) list your
+3 reflex picks and reject them; (3) browse a real catalog thinking of the
+brand as a physical object ("a museum caption", "a 1970s terminal manual");
+(4) if the final pick equals the original reflex, start over. Reflex list to
+reject as defaults: Inter · Roboto · Arial · system-ui (product register may
+override: earned familiarity) · Space Grotesk · Space Mono · IBM Plex family
+· DM Sans/Serif · Outfit · Plus Jakarta Sans · Instrument Sans/Serif ·
+Fraunces · Newsreader · Lora · Crimson · Playfair · Cormorant · Syne.
+Sans pools to rotate: Geist, Satoshi, Cabinet Grotesk, General Sans, Inter
+Tight (as body under a distinctive display). Pairings that work: Geist +
+Geist Mono · Satoshi + JetBrains Mono · Cabinet Grotesk + Inter Tight.
+
+### Aesthetic-lane rejects (composition)
+Saturated whole-lane defaults to refuse at first reflex: the
+**editorial-typographic** lane (italic display serif + small mono labels +
+ruled three-column separators + monochrome restraint) and the
+**SaaS-dark-glow** lane (dark hero, mesh gradient, glass cards). Both may be
+*chosen* — after passing the second-order slop test (`anti-slop.md`).