@stylecrib/cli 0.3.1 → 0.3.3

package/themes/realestate-marketplace/tokens.ts

@@ -0,0 +1,183 @@
+import type { Direction } from "../schema";
+
+export const realestateMarketplace: Direction = {
+  name: "realestate-marketplace",
+  ethos:
+    "Zillow listing-card grid · Redfin signal red · Apartments.com warm orange · Trulia friendly map · Streeteasy dense tabular",
+  references: [
+    { brand: "Zillow", trait: "deep blue brand mark + warm white + listing-card grid" },
+    { brand: "Redfin", trait: "signal red CTA + soft cards + structured filters" },
+    { brand: "Apartments.com", trait: "warm orange accent + density + photo-card volume" },
+    { brand: "Trulia", trait: "sand surface + friendly map UI + neighborhood scoring" },
+    { brand: "Streeteasy", trait: "NYC dense tabular listings + restrained chrome" },
+  ],
+  feel:
+    "Built for browsing two hundred listings on a Saturday. Warm white canvas, friendly geometric sans, " +
+    "a single signal-color CTA, and dense photo-card grids that hold up next to a half-screen map. " +
+    "Map and list co-exist; filters are first-class. Reads as marketplace tool, not as catalog.",
+
+  fonts: {
+    display: {
+      family: "Manrope",
+      fallback: ["Inter", "system-ui", "-apple-system", "Segoe UI", "sans-serif"],
+      from: "Zillow-adjacent geometric sans — friendly, confident on listing card titles",
+      googleFont: "Manrope",
+      weights: [500, 600, 700, 800],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Redfin/Streeteasy clean sans — dense tabular comfort at small sizes",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for price/sqft/beds — listing-card spec line",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",         // Manrope tightens for confident card titles
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum"',  // tabular-nums on by default for the price-grid
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",   // restrained — the listings, not the H1, are the show
+    bodyBaseSize: "0.9375rem",                       // 15px — marketplace density
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "210 28% 99%", from: "Zillow warm white — faintly cool, marketplace canvas" },
+    foreground: { hsl: "215 32% 14%", from: "Zillow deep blue-ink — never pure black" },
+    card: { hsl: "0 0% 100%", from: "pure white listing card — lifts off the warm canvas" },
+    popover: { hsl: "0 0% 100%", from: "same as card — popover/menu surface" },
+    primary: { hsl: "215 78% 38%", from: "Zillow brand blue — primary action across filters and CTAs" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on Zillow blue" },
+    secondary: { hsl: "210 22% 95%", from: "Streeteasy cool gray panel — secondary surface for filter chrome" },
+    secondaryForeground: { hsl: "215 32% 18%", from: "blue-ink on cool gray" },
+    muted: { hsl: "210 20% 96%", from: "muted surface — table row stripes, secondary panels" },
+    mutedForeground: { hsl: "215 14% 42%", from: "marketplace meta — listing dateline, walkscore meta" },
+    accent: { hsl: "210 22% 92%", from: "hover surface — one tier under secondary, for table-row hover" },
+    accentForeground: { hsl: "215 32% 18%", from: "blue-ink on accent gray" },
+    border: { hsl: "210 16% 88%", from: "marketplace hairline — visible on white, supports the grid" },
+    input: { hsl: "210 16% 86%", from: "filter-input border, slightly stronger than the card border" },
+    ring: { hsl: "215 78% 38%", from: "= primary; focus ring is the brand blue" },
+    destructive: { hsl: "356 78% 48%", from: "Redfin signal red — Sold/Off-market badge tone" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on signal red" },
+    brand: {
+      "blue-zillow": { hsl: "215 78% 38%", from: "= primary; Zillow brand blue, the canonical action color" },
+      "blue-deep": { hsl: "215 82% 26%", from: "deeper blue — primary-hover, also map-pin selected state" },
+      "red-redfin": { hsl: "356 78% 48%", from: "Redfin signal red — Sold tag, urgent badges only" },
+      "orange-apt": { hsl: "22 92% 54%", from: "Apartments.com warm orange — New / Hot listing badge accent" },
+      "green-saved": { hsl: "152 56% 38%", from: "Trulia-adjacent saved/favorite confirmation green" },
+      "sand-warm": { hsl: "36 28% 96%", from: "Trulia warm sand — alt section background, neighborhood panels" },
+      "map-water": { hsl: "205 42% 86%", from: "map basemap water tone — calibrates the map UI" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 48, 64, 80],   // high density — many steps
+    containerMax: "max-w-screen-2xl",     // marketplace lives full-width for map+list split
+    containerPadding: "px-4 lg:px-6",     // tighter — content is the point, not the gutter
+    sectionPadding: {
+      hero: "pt-12 pb-10 lg:pt-16 lg:pb-12",
+      default: "py-10 lg:py-16",
+      tight: "py-6 lg:py-10",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",                       // 8px — softer than utility, sharper than soft-modern
+    pillsAllowed: true,                   // filter pills, status chips, badge pills — marketplace staple
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(215 32% 14% / 0.05), 0 2px 6px hsl(215 32% 14% / 0.04)",
+      "shadow-card-hover":
+        "0 2px 4px hsl(215 32% 14% / 0.06), 0 12px 24px hsl(215 32% 14% / 0.10)",
+      "shadow-mappin":
+        "0 2px 4px hsl(215 32% 14% / 0.18), 0 0 0 2px hsl(0 0% 100%)",
+      "shadow-filterbar":
+        "0 1px 0 hsl(var(--border)), 0 2px 8px hsl(215 32% 14% / 0.04)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 240,                        // fast — marketplace must feel responsive
+      loop: 1600,
+      ambient: 12000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 240,
+        iteration: "once",
+        purpose: "listing card / filter-result entrance — short, near-instant",
+      },
+      "card-lift": {
+        css:
+          "from { transform: translateY(0); box-shadow: 0 1px 2px hsl(215 32% 14% / 0.05); }\n" +
+          "to { transform: translateY(-2px); box-shadow: 0 12px 24px hsl(215 32% 14% / 0.10); }",
+        defaultDuration: 180,
+        iteration: "once",
+        purpose: "listing-card hover — confirms targetability on a dense grid",
+      },
+      "pin-drop": {
+        css:
+          "0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n" +
+          "60% { opacity: 1; transform: translateY(2px) scale(1.05); }\n" +
+          "100% { opacity: 1; transform: translateY(0) scale(1); }",
+        defaultDuration: 320,
+        iteration: "once",
+        purpose: "map pin reveal — feedback when a result lands on the map",
+      },
+      "skeleton-shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1600,
+        iteration: "infinite",
+        purpose: "loading state on listing cards while results stream in",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Solid-fill primary in --primary (Zillow blue), white text, 0.5rem radius, shadow-card. " +
+      "Secondary is white ghost with --border outline. Tertiary is text link in primary. " +
+      "Pills are allowed for filter chips and status badges (Sold/New/Open House) — pill shape is data, not chrome.",
+    card:
+      "Listing card: rounded-lg, bg-card, shadow-card, no border. Photo-first (4:3 landscape, full bleed at top). " +
+      "Below: price in display 700 weight, address in body, mono spec line (beds · baths · sqft). " +
+      "Hover applies card-lift. Internal padding p-4. " +
+      "Filter and panel cards use a hairline border and no shadow.",
+    input:
+      "Full rounded-lg box with 1px --input border, bg-card. Focus = 2px ring in primary at 40% opacity. " +
+      "Search input gets a leading icon. Label is small, sits above; helper text below in muted-foreground.",
+    cta:
+      "Solid-fill primary button is the canonical CTA. Save (heart) and Tour (calendar) buttons sit as filled-icon " +
+      "or icon+label variants. Sold / Off-market badges use destructive red — never as CTA, always as status.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/restaurant-modern/THEME.md

@@ -0,0 +1,109 @@
+# Design Direction — Restaurant-Modern
+
+## Ethos
+Eleven Madison Park plating-as-art · Atomix NYC dark Korean fine dining · Pujol traditional Mexican warmth · Single Thread farm-to-table cream · Frantzén nordic-luxury restraint
+
+## Feel
+A modern fine-dining restaurant site — the printed menu card translated to the web. Warm sand-cream linen canvas, deep cocoa ink, a single olive-bronze accent. Full-bleed plating photography reads as still life. EB Garamond display at oversized scale, generous breathing, JetBrains Mono for course numbers and producer credits. The page carries **reservation-required gravity** — the room exists, the chef exists, the menu changes weekly, and the booking is the conversation. Not a delivery app, not a Yelp listing.
+
+## Reference brands
+- **Eleven Madison Park** → cream + EB Garamond serif + plating-as-art photography. The dish is a sculpture; the page is the plinth.
+- **Atomix (NYC)** → dark + serif + Korean fine-dining moody intimacy. (We borrow the gravity and the typographic restraint; this direction defaults to cream canvas — see Exceptions for the dark variant.)
+- **Pujol** → warm sand + traditional serif + Mexican fine-dining warmth. Earth-tone register and unbleached menu-card stock.
+- **Single Thread** → cream + serif + farm-to-table imagery. Producer-credit rhythm; ingredients are named beside the dish.
+- **Frantzén** → deep cream + restrained nordic-luxury. The olive-bronze accent and the intimate-room composure trace here.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **warm sand-cream linen** (background) → **lifted ivory card** (card/popover) → **warm sand tiered deeper** (secondary/muted/accent). Depth comes from hairline rules at `foreground / 0.14`, never from fill differentiation. The single permitted shadow is `plating-shadow` — a diffuse drop reserved for plating photography, never UI chrome.
+
+Brand tokens: `--linen-cream` (Pujol warm sand-cream, alias of background), `--ivory-card` (Single Thread lifted ivory, menu-card stock), `--ink-cocoa` (Eleven Madison Park deep cocoa, foreground/reduction shadow), `--olive-bronze` (Frantzén nordic-luxury accent, primary), `--ember-warm` (Pujol kitchen-ember red-brown, used sparingly on tasting-menu badges and 'Reserve' eyebrows). Primary is `32 38% 28%` — a restrained olive-bronze, never a saturated brand mark.
+
+## Typography
+- **Display:** EB Garamond at 400/500/600, italic-friendly. Course names, dish names, chef's program. Tracking `-0.012em` — EB Garamond at restaurant-display scale wants slight negative tracking.
+- **Body:** Inter at 400/500, **17px**, line-height **1.7**. Menu-card prose, comfortable for a long read; the neutral sans support type that lets the serif and the food carry.
+- **Mono:** JetBrains Mono at 400. Used **only small** — course numbers (01/12 or Roman I, II, III), producer credits, allergen labels, year-and-vintage notes. Never display, never body.
+
+Hierarchy is pair-driven: EB Garamond display + Inter body, with tracked-uppercase Inter small caps (letter-spacing 0.12em) for eyebrows ('THE MENU', 'THE ROOM', 'RESERVE'). H1 uses `clamp(2.75rem, 7vw, 6rem)` — dining-room hero scale. Font features: `"liga", "dlig", "onum", "kern"` — discretionary ligatures earn their place in serif-italic dish names.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-12` — 1024px. Plating photography reads at this width without becoming a magazine spread.
+- **Section padding tiers:**
+  - Hero: `pt-28 pb-20 lg:pt-44 lg:pb-32` (dining-room hero scale)
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-14 lg:py-20`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. The high end (96/128/160) is intentional — restaurant pacing, the next course doesn't arrive immediately.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. White and pure black are forbidden — `--linen-cream` (`34 26% 92%`) and `--ink-cocoa` (`24 22% 14%`) replace them.
+
+The palette is restraint and earth:
+- **Linen-cream** — Pujol warm sand-cream linen, the page surface.
+- **Ivory-card** — Single Thread lifted ivory, menu-card and dish-card stock.
+- **Ink-cocoa** — Eleven Madison Park deep cocoa, the foreground and the reduction-shadow base color.
+- **Olive-bronze** — Frantzén restrained nordic accent, primary action.
+- **Ember-warm** — Pujol kitchen-ember red-brown, used **sparingly** on tasting-menu badges, 'Reserve' eyebrows, and the single ember-pulse marker.
+
+Saturation never exceeds what would read on an unbleached printed menu card under candlelight. The plating photography carries the color — the chrome stays neutral.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills are disallowed (`pillsAllowed: false`) — pills read consumer/delivery app, not restaurant. The printed menu card is the precedent: rectangles, hairlines, generous margins.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.menu-rule` — `0 1px 0 0 hsl(var(--foreground) / 0.14)`. The printed-menu divider between courses.
+- `.plating-shadow` — `0 24px 64px -28px hsl(var(--foreground) / 0.28)`. **Plating photography only**, never UI chrome. A diffuse drop that lifts the dish off the page, like a still-life print on linen.
+
+No glows. No floating cards. Buttons never carry shadow.
+
+## Motion
+Three keyframes:
+- **`course-rise`** — opacity + 20px translate, **1200ms**. The standard entrance for menu cards, dish photography, and chef's-program copy. The course is set down, not flung.
+- **`ember-pulse`** — opacity `0.85 → 1 → 0.85`, **4000ms**, infinite. A soft heartbeat on the single 'Reserve' ember-warm dot — the room is open. Never on more than one element per page.
+- **`plate-ken-burns`** — `scale(1.0) → scale(1.06)`, **32000ms**, infinite. Slow zoom on hero plating photography — restaurant-program presence, the still life almost imperceptibly breathing.
+
+No marquee, no parallax, no chip-bounce. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `ember-pulse` and `plate-ken-burns` are disabled entirely under reduced motion; `course-rise` collapses to instantaneous final-state.
+
+## Component patterns
+- **Buttons:** the default primary CTA is a **serif italic text-link in olive-bronze**, underline always visible — the heritage menu-card convention. The solid button is reserved for **one 'Reserve' hero CTA per page** — ink-cocoa bg + linen-cream text, sharp rectangle, no radius. Never a chip, never a gradient, never a shadow on a button. Reservation gravity comes from typography, not from button weight.
+- **Cards (course/dish):** hairline top + hairline bottom rule at `foreground / 0.14`, **ivory-card bg** (one tier above the linen page), no fill-differentiation depth. Course number in JetBrains Mono small-caps (I, II, III or 01/12), dish name in **EB Garamond italic display**, producer credits in a mono row beneath. Internal padding `p-8 lg:p-12`. Plating photography sits flush above the card with a single `.plating-shadow` drop.
+- **Inputs:** reservation form — border-bottom only (1px `--border`). No full box. Label above in tracked-uppercase Inter small caps (letter-spacing 0.12em). Placeholder in muted-foreground italic serif. Focus is olive-bronze ring, 1px.
+- **CTAs:** default CTA is serif italic text-link in olive-bronze with always-visible underline. The single 'Reserve' hero CTA is the one solid-fill exception — ink-cocoa bg, linen-cream text, optional `.ember-pulse` heartbeat marker beside it. Never repeated, never duplicated in the page footer.
+
+## Recommended rich media
+
+The page is led by **plating-as-art photography** — a single dish, shot from directly above or three-quarter, on a textured ceramic plate against a dark linen or stone-slab surface. Natural light, often window-side or candlelight, never softbox-flat. Eleven Madison Park / Single Thread / Frantzén still-life register.
+
+**AI tool recommendations.**
+- **Midjourney / Flux** — *"Eleven Madison Park plating photograph, single course on textured ceramic, dark linen surface, natural window light, Hasselblad medium-format, restrained warm color"*; for dining-room shots, *"intimate fine-dining room interior, candlelight, blurred figures in middle distance, Annie Leibovitz lighting, 35mm film"*; for ingredient close-ups, *"farm-to-table producer-credit still life, single ingredient on linen, raking afternoon light, Kodak Portra 400"*.
+- **Avoid Midjourney's default food register** — it tends toward Instagram glossy. Always prompt for film grain, natural light, and a single subject.
+- **Real photography beats AI** for restaurants more than almost any vertical. If a chef-photographer collaboration is possible, use it.
+
+**Aspect ratios.** **1:1 square** for individual plating shots (the dish is a sculpture, the frame is a plinth), **4:5 portrait** for dining-room and chef portraits, **16:9** for the singular room-establishing hero. Never 3:2 casual.
+
+**Color in imagery.** Warm-cool balance, restrained saturation. Plating colors live in their natural register — green herbs, brown stocks, white ceramics, dark linens — never saturated brand-mark color. Black-and-white kitchen-portraiture is welcome for chef bios.
+
+**Video.** Used sparingly — a single 30s kitchen-prep loop or a static long-take of a dish being plated. Never autoplay with sound. Never UI demo footage. Never delivery-app-style flythroughs. ≤8 MB AV1 or H.265.
+
+**Captions are mandatory.** Course number, dish name, key ingredients, producer credits, allergens — in JetBrains Mono small caps. *"I · Sunchoke · Black Truffle, Cured Egg Yolk · Coke Farm, Aromas, CA · contains: egg, dairy"* style attribution always.
+
+**Performance.** Hero plating image ≤180 KB AVIF at 1600w; dish-card photography ≤90 KB each. LCP under 2.5s — if it slips, the plating photograph is too large, not the framework.
+
+**Avoid.** Stock food photography (always reads wrong for fine dining). Yelp-energy interior shots. Delivery-app dish tiles. Branded plate decals. AI-glossy "perfect" food (uncanny). Lens flare. Gradient menus. Pop-up promotional banners. Anything that reads more **Grubhub than Le Bernardin**.
+
+**Accessibility.** Long-form alt-text — describe the dish, plate, surface, lighting as if for a blind reader. *"A single sunchoke roasted to a deep amber and dressed with shaved black truffle, set on a hand-thrown grey ceramic plate against a dark linen surface in late afternoon window light."* The bar is restaurant editorial.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they are established.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.20)` background, foreground text — olive-bronze highlight on linen cream.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin and quiet — restaurant precision, never decorative.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. **A dark Atomix-register variant** (cocoa-ink background, linen-cream foreground, same olive-bronze accent) is anticipated for restaurants whose room is intentionally moody — it lives as a future direction-mode, not as a within-direction toggle. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/restaurant-modern/tokens.ts

@@ -0,0 +1,172 @@
+import type { Direction } from "../schema";
+
+export const restaurantModern: Direction = {
+  name: "restaurant-modern",
+  ethos:
+    "Eleven Madison Park plating-as-art · Atomix NYC dark Korean fine dining · Pujol traditional Mexican warmth · Single Thread farm-to-table cream · Frantzén nordic-luxury restraint",
+  references: [
+    { brand: "Eleven Madison Park", trait: "cream + EB Garamond + plating-as-art photography" },
+    { brand: "Atomix (NYC)", trait: "dark + serif + Korean fine-dining moody intimacy" },
+    { brand: "Pujol", trait: "warm sand + traditional serif + Mexican fine-dining warmth" },
+    { brand: "Single Thread", trait: "cream + serif + farm-to-table imagery" },
+    { brand: "Frantzén", trait: "deep cream + restrained nordic-luxury, intimate room" },
+  ],
+  feel:
+    "Modern fine-dining restaurant site. Warm sand-cream canvas with deep cocoa ink " +
+    "and one olive-bronze accent. Full-bleed plating photography reads as still life. " +
+    "EB Garamond display at oversized scale, generous breathing, mono captions for " +
+    "course and producer credits. The page carries reservation-required gravity — " +
+    "the room exists, the chef exists, the booking is the conversation.",
+
+  fonts: {
+    display: {
+      family: "EB Garamond",
+      fallback: ["Cormorant Garamond", "Iowan Old Style", "Garamond", "Georgia", "serif"],
+      from: "EB Garamond — Eleven Madison Park / Single Thread restaurant-serif register; italic-friendly for course names",
+      googleFont: "EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Söhne", "Neue Haas Grotesk", "system-ui", "-apple-system", "sans-serif"],
+      from: "Inter — the neutral sans body; Pujol/Atomix support type, lets the serif and the food carry",
+      googleFont: "Inter:wght@400;500",
+      weights: [400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — course numbers (I, II, III also acceptable), producer credits, allergen labels, small only",
+      googleFont: "JetBrains+Mono:wght@400",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",       // EB Garamond at restaurant-display scale — slight negative tracking
+    bodyTracking: "0",                  // Inter body — neutral, lets the serif lead
+    fontFeatureSettings: '"liga", "dlig", "onum", "kern"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 6rem)",   // dining-room hero scale, Single Thread / EMP register
+    bodyBaseSize: "1.0625rem",         // 17px — menu-card prose, comfortable for a long read
+    bodyLineHeight: "1.7",             // generous, restaurant-program pacing
+  },
+
+  colors: {
+    background: { hsl: "34 26% 92%", from: "Pujol warm sand-cream — restaurant linen and unbleached menu card" },
+    foreground: { hsl: "24 22% 14%", from: "Eleven Madison Park deep cocoa ink — slate-stone reduction shadow" },
+    card: { hsl: "34 30% 96%", from: "Single Thread lifted ivory — one tier brighter than the linen page" },
+    popover: { hsl: "34 30% 96%", from: "same as card; depth from hairline only" },
+    primary: { hsl: "32 38% 28%", from: "Frantzén olive-bronze — restrained nordic-luxury accent, used for primary action and dish-card eyebrows" },
+    primaryForeground: { hsl: "34 26% 92%", from: "warm sand-cream on olive-bronze primary" },
+    secondary: { hsl: "34 22% 88%", from: "Pujol warm sand, one tier deeper — printed-menu second-tone" },
+    secondaryForeground: { hsl: "24 22% 14%", from: "cocoa ink on warm sand" },
+    muted: { hsl: "34 22% 88%", from: "same as secondary — differentiation by usage, not color" },
+    mutedForeground: { hsl: "24 14% 38%", from: "Atomix muted slate ink — course descriptions and small print" },
+    accent: { hsl: "34 24% 84%", from: "warm sand, deepest tier — hover surface only" },
+    accentForeground: { hsl: "24 22% 14%", from: "cocoa ink on warm sand accent" },
+    border: { hsl: "24 14% 76%", from: "restaurant menu hairline rule — printed-card divider weight, barely visible" },
+    input: { hsl: "24 14% 76%", from: "same as border — reservation form is hairlines, not boxes" },
+    ring: { hsl: "32 38% 28%", from: "primary olive-bronze — focus ring, the one accent moment" },
+    destructive: { hsl: "8 58% 38%", from: "wine-red alert — burgundy, dining-program register, never screaming red" },
+    destructiveForeground: { hsl: "34 26% 92%", from: "warm sand on wine-red" },
+    brand: {
+      "linen-cream": { hsl: "34 26% 92%", from: "Pujol warm sand-cream — alias of the background, the linen" },
+      "ivory-card": { hsl: "34 30% 96%", from: "Single Thread lifted ivory — menu-card and dish-card stock" },
+      "ink-cocoa": { hsl: "24 22% 14%", from: "Eleven Madison Park deep cocoa — foreground, reduction shadow" },
+      "olive-bronze": { hsl: "32 38% 28%", from: "Frantzén olive-bronze — primary accent" },
+      "ember-warm": { hsl: "18 48% 48%", from: "Pujol kitchen-ember red-brown — used sparingly on tasting-menu badges and 'Reserve' eyebrows" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],   // generous, dining-room pacing
+    containerMax: "max-w-5xl",          // 1024px — plating photography reads at this width without becoming a magazine spread
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-28 pb-20 lg:pt-44 lg:pb-32",
+      default: "py-20 lg:py-32",
+      tight: "py-14 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0",                          // printed-menu convention — sharp corners, no consumer softness
+    pillsAllowed: false,                // no chip pills; "Reserve" is a text-link, not a pill
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "menu-rule":
+        "0 1px 0 0 hsl(var(--foreground) / 0.14)",     // 1px printed-menu divider between courses
+      "plating-shadow":
+        "0 24px 64px -28px hsl(var(--foreground) / 0.28)",  // one diffuse drop, plating-photo elevation, never on UI chrome
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,                     // restaurant pacing — the course is served
+      loop: 4000,
+      ambient: 32000,
+    },
+    keyframes: {
+      "course-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose:
+          "the standard entrance — 1.2s reveal for menu cards, dish photography, and chef's-program copy. The course is set down, not flung.",
+      },
+      "ember-pulse": {
+        css:
+          "0%, 100% { opacity: 0.85; }\n" +
+          "50% { opacity: 1; }",
+        defaultDuration: 4000,
+        iteration: "infinite",
+        purpose:
+          "4s soft pulse on the single 'Reserve' eyebrow ember-warm dot — a heartbeat marker, the room is open. Never on more than one element per page.",
+      },
+      "plate-ken-burns": {
+        css:
+          "from { transform: scale(1.0); }\n" +
+          "to { transform: scale(1.06); }",
+        defaultDuration: 32000,
+        iteration: "infinite",
+        purpose:
+          "32s slow zoom on hero plating photography — restaurant-program presence, the still life almost imperceptibly breathing.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Primary CTA is a serif italic text-link in olive-bronze (--primary), underline always visible — heritage menu-card convention. " +
+      "The solid button is reserved for ONE 'Reserve' hero CTA per page — ink-cocoa bg + linen-cream text, sharp rectangle, no radius. " +
+      "Never a chip, never a gradient, never a shadow on a button. Reservation gravity comes from typography, not from button weight.",
+    card:
+      "Course/dish cards: hairline top + hairline bottom rule at foreground/14, ivory-card bg (one tier above page), no fill-differentiation depth. " +
+      "Course number in JetBrains Mono small-caps (I, II, III or 01/12), dish name in EB Garamond italic display, producer credits in mono row beneath. " +
+      "Internal padding p-8 lg:p-12. Plating photography sits flush above the card with a single plating-shadow drop.",
+    input:
+      "Reservation form: border-bottom only (1px --border). No full box. Label above in tracked-uppercase Inter small caps (letter-spacing 0.12em). " +
+      "Placeholder in muted-foreground italic serif. Focus is olive-bronze ring, 1px.",
+    cta:
+      "Default CTA is serif italic text-link in olive-bronze with always-visible underline. " +
+      "The single 'Reserve' hero CTA is the one solid-fill exception — ink-cocoa bg, linen-cream text, optional ember-pulse heartbeat marker beside it. Never repeated.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/runway-fashion/THEME.md

@@ -0,0 +1,99 @@
+# Design Direction — Runway-Fashion
+
+## Ethos
+Chanel high-contrast b/w · Vogue runway photography · Saint Laurent disciplined restraint · Comme des Garçons asymmetric type · Helmut Newton drama
+
+## Feel
+Binary pure-black-on-pure-white (or inverted). Oversized Didone serif at editorial scale — the hero is the type, set Vogue-cover large in italic Playfair. A single tiny couture-red accent is permitted, used once per page. Couture severity: this direction rejects color. The opposite of soft-modern.
+
+## Reference brands
+- **Chanel** → binary black-and-white. No color, no warmth. Oversized display serif laid over runway photography.
+- **Vogue** → issue typography. Italic Playfair at cover scale; fashion-plate restraint in the layout grid.
+- **Saint Laurent** → disciplined minimalism. ALL-CAPS sparse-tracked wordmark; geometric severity.
+- **Comme des Garçons** → Rei Kawakubo asymmetric layouts. Deliberate "wrong" type — the negative space is the composition.
+- **Helmut Newton** → high-drama runway photography. Deep shadows, Tri-X 35mm grain, single subject.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **pure white** (background, card, popover, secondary). There is no surface differentiation — depth comes from **whitespace and 1px black rules**, never from fill tiers, never from shadows.
+
+Brand tokens: `--couture-red` (Chanel lipstick — the SINGLE red accent, used **once per page maximum, never twice**), `--ivory` (barely-off-white for masthead layering), `--noir` (deep ink for layered black-on-black overlays on runway photography). Primary is `0 0% 0%` — black is the primary; the couture-red is reserved for one moment.
+
+## Typography
+- **Display:** Playfair Display (Bodoni Moda as fallback). Italic prominent. The Didone-style high-contrast serif is the design — set at Vogue-cover scale.
+- **Body:** Inter, **16px**, line-height **1.5**. Clean sans so the serif is the hero; body never competes.
+- **Mono:** JetBrains Mono. Tiny — issue numbers, "Vol 47 / Spring", credit lines. Never for body, never for headings.
+
+Hero h1 uses `clamp(4rem, 10vw, 9rem)` — Vogue-cover scale, italic Playfair. Tracking is `-0.02em` on headings (Didone at this scale needs the optical tighten), `0` on body. Font features: `"kern", "liga", "dlig", "tnum"` — discretionary ligatures unlock italic Playfair's swash forms.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-12` — Vogue cover proportions, 1152px.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-32` (cover-of-the-issue scale)
+  - Default: `py-24 lg:py-32`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** **4 8 12 16 24 32 48 64 96 128 160**. Couture-generous; low density wants more air.
+
+## Color
+No hex anywhere. **Pure black (`0 0% 0%`) and pure white (`0 0% 100%`) are the language** — the Chanel binary. The single `--couture-red` (`0 100% 45%`) is the Chanel lipstick and the only allowed third color. Use it **once per page**: one primary CTA, or one rule, or one inline mark. Never twice. Never as a card border, never as a heading color, never in imagery.
+
+`--muted` and `--accent` (`0 0% 98%`) are Vogue ivory — barely-off-white for masthead/credit layering. `--muted-foreground` (`0 0% 40%`) is the Helmut Newton mid-tone, used only for caption gray. There are no other grays.
+
+This direction **rejects** warmth (no paper-cream, no Kodak Portra), gradients, glassmorphism, decorative ornament. Austerity is the direction.
+
+## Radius
+`--radius: 0`. **Sharp couture corners only.** Pills are disallowed (`pillsAllowed: false`) — pills are anti-couture. Chanel and Saint Laurent never rounded a corner.
+
+## Shadows
+**None.** The shadow utilities object is intentionally empty. Drops are forbidden; composition does the work. Separation comes from oversized whitespace and 1px black rules.
+
+## Motion
+Runway-walk pacing — deliberate, never hurried.
+
+- `runway-step` — **600ms** opacity-only fade between hero slides. The model walks; the page does not.
+- `cover-flip` — **300ms** 8px translate for cover-of-the-issue reveals. Used sparingly, once per page maximum.
+
+No marquee, no parallax, no ambient loops (`loop: 0`, `ambient: 0`). Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored.
+
+## Component patterns
+- **Buttons:** two states, no middle ground.
+  - Primary text-link = ALL CAPS, sparse-tracked (`letter-spacing: 0.2em`), text-underline, black on white — the Saint Laurent wordmark move.
+  - Primary filled = oversized "SHOP" rectangle in pure black with white text, ALL CAPS, sparse-tracked.
+  - The `--couture-red` filled rectangle is reserved for **one primary action per page** — never repeated. No ghost mid-state, no hover lift, no rounded corners.
+- **Cards:** no card chrome. Editorial blocks sit directly on the page, separated by oversized whitespace. When grouping is required, a single 1px black rule above. No fill, no shadow, no rounded corners. Titles in italic Playfair at Vogue-cover scale; body in 16px Inter.
+- **Inputs:** 1px black border, sharp corners, white background. Label above in ALL CAPS sparse-tracked mono. Focus = 1px inset black ring, no glow. Placeholder italic Playfair, lowercase — the one place italic is permitted in chrome.
+- **CTAs:** the default CTA is the Saint Laurent ALL-CAPS sparse-tracked text-underline link. The couture-red filled rectangle is the **one** Chanel-lipstick moment per page. There is no second.
+
+## Recommended rich media
+
+**Cover.** Editorial fashion photography in the Helmut Newton high-drama tradition — model walking, single subject, deep shadows, Tri-X 35mm grain. Runway documentation (model in motion) or product detail shots on white seamless. Pure b/w grading **only**, or muted desaturated color if absolutely necessary. The hero is sometimes the type alone — italic Playfair at clamp(4rem, 10vw, 9rem) needs no image.
+
+**AI tool recommendations.**
+- **Midjourney** for runway/editorial photography — prompts like *"Vogue runway photography, Helmut Newton lighting, model walking, high contrast black and white, 35mm Tri-X film grain, deep shadows"*.
+- **Recraft** for fashion-plate illustration in the Erté tradition — single-line couture figures, black on white.
+- **Or use type alone** — italic Playfair at Vogue-cover scale carries the page without an image. This is often the right answer.
+
+**Aspect ratios.** 4:5 portrait (couture-magazine standard) — primary. 3:2 landscape — occasional, for runway documentation. Never 16:9 (cinematic, off-feel). Never 1:1 (Instagram aesthetic).
+
+**Color in imagery.** Black and white **only**, or heavily desaturated. The `--couture-red` appears in UI chrome — **never in imagery**.
+
+**What to avoid.** Warm color grading (that's mid-century territory). Gradients. Glassmorphism. Decorative ornament. AI-photorealistic gloss. 3D renders. Lens flare. Stock photography with smiling models. Color-saturated runway shots — desaturate or grade to pure b/w.
+
+**Honest constraint.** Austerity is the direction. If you are reaching for an image to fill space, the layout is the problem — set the type larger.
+
+**Accessibility.** Long-form alt-text — describe the photograph as if for a blind reader. Italic Playfair at hero scale needs `aria-level` correctness; do not let display-size override semantic hierarchy.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they are established. If a family ever calls for color beyond `--couture-red`, the rule is broken — escalate before adding.
+
+## Details
+- **Selection:** `hsl(var(--foreground))` background, `hsl(var(--background))` text — pure couture inversion.
+- **Focus ring:** `1px solid hsl(var(--ring))` (black). No offset, no glow.
+- **Scrollbar:** thin — a single black rule, the one chrome detail allowed.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.