@stylecrib/cli 0.3.1 → 0.3.2

package/themes/realestate-luxury/tokens.ts

@@ -0,0 +1,169 @@
+import type { Direction } from "../schema";
+
+export const realestateLuxury: Direction = {
+  name: "realestate-luxury",
+  ethos:
+    "Sotheby's cream listing-book · Compass deep navy · Modern House serif · The Agency cinematic listings · 1stDibs editorial luxury",
+  references: [
+    { brand: "Sotheby's Realty", trait: "cream paper + Cormorant serif + listing-as-portrait photography" },
+    { brand: "Compass", trait: "deep navy mark + clean sans + structured global search" },
+    { brand: "Modern House (London)", trait: "cream + serif + architectural full-bleed photography" },
+    { brand: "The Agency", trait: "deep cream + restrained nav + cinematic listing reels" },
+    { brand: "1stDibs Estate", trait: "warm cream + editorial serif + curated provenance copy" },
+  ],
+  feel:
+    "Eight-figure listing book in browser form. Deep cream backgrounds carry full-bleed property cinematography, " +
+    "high-contrast serif headlines name the address, and a single deep navy or burgundy accent does all the " +
+    "interaction work. Reads as bound real estate catalog, not as marketplace search.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Garamond",
+      fallback: ["Cormorant", "EB Garamond", "Garamond", "Didot", "Georgia", "serif"],
+      from: "Sotheby's listing-book serif — high-contrast Garalde with a 1stDibs catalog feel",
+      googleFont: "Cormorant+Garamond",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "sans-serif"],
+      from: "Compass clean sans — neutral body that lets the serif and photography lead",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for price, lot size, sqft — instrument-feel for the spec table",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",         // Cormorant tightens slightly — display Garalde wants near-zero, just shy
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "dlig", "tnum", "ss01"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 6rem)",   // address-as-title scale — the headline IS the listing
+    bodyBaseSize: "1.0625rem",                    // 17px — catalog comfort
+    bodyLineHeight: "1.65",
+  },
+
+  colors: {
+    background: { hsl: "38 32% 94%", from: "Sotheby's deep cream — the listing-book paper, never white" },
+    foreground: { hsl: "215 38% 14%", from: "Compass deep navy-ink — heading + body, never pure black" },
+    card: { hsl: "38 28% 97%", from: "lifted cream — listing card surface, one tone above paper" },
+    popover: { hsl: "38 28% 97%", from: "same family as card — depth via hairline, not fill" },
+    primary: { hsl: "215 48% 22%", from: "Compass deep navy — the canonical action color across the listing book" },
+    primaryForeground: { hsl: "38 32% 94%", from: "cream on deep navy" },
+    secondary: { hsl: "38 22% 88%", from: "deeper cream tier — secondary panels and quiet surfaces" },
+    secondaryForeground: { hsl: "215 38% 14%", from: "navy-ink on deeper cream" },
+    muted: { hsl: "38 18% 86%", from: "muted cream — listing meta strips, dateline backgrounds" },
+    mutedForeground: { hsl: "215 18% 36%", from: "Modern House soft navy — secondary copy on cream" },
+    accent: { hsl: "38 24% 90%", from: "hover cream — one tier under secondary" },
+    accentForeground: { hsl: "215 38% 14%", from: "navy-ink on accent cream" },
+    border: { hsl: "38 18% 78%", from: "warm hairline — visible on cream but never assertive" },
+    input: { hsl: "38 18% 78%", from: "same as border — single hairline language" },
+    ring: { hsl: "350 48% 32%", from: "deep burgundy — the luxury second-accent, used for focus only" },
+    destructive: { hsl: "8 62% 42%", from: "deep terracotta — alert tone that respects the cream palette" },
+    destructiveForeground: { hsl: "38 32% 94%", from: "cream on terracotta" },
+    brand: {
+      cream: { hsl: "38 32% 94%", from: "= background; the listing-book paper itself" },
+      "cream-deep": { hsl: "38 22% 88%", from: "= secondary; the deeper cream for panel surfaces" },
+      navy: { hsl: "215 48% 22%", from: "= primary; Compass deep navy" },
+      "navy-ink": { hsl: "215 38% 14%", from: "= foreground; the deepest navy, used as ink" },
+      burgundy: { hsl: "350 48% 32%", from: "Modern House / Sotheby's deep burgundy — second luxury accent" },
+      brass: { hsl: "38 42% 52%", from: "antique brass — fitting-hardware accent, rule lines on spec tables" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128],
+    containerMax: "max-w-7xl",          // full-bleed listing photography needs the width
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-24 pb-20 lg:pt-32 lg:pb-28",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp — catalog-page corners, never rounded
+    pillsAllowed: false,                // pills read marketplace, not listing book
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "inset 0 -1px 0 hsl(var(--border))",
+      "shadow-listing":
+        "0 1px 2px hsl(215 38% 14% / 0.04), 0 8px 24px hsl(215 38% 14% / 0.06)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1000,                     // slow on purpose — catalog pacing
+      loop: 2400,
+      ambient: 32000,                   // ken-burns on hero stills
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1000,
+        iteration: "once",
+        purpose: "section entrance — listing reveal, deliberately unhurried",
+      },
+      "ken-burns": {
+        css:
+          "0% { transform: scale(1.04) translate(0, 0); }\n" +
+          "100% { transform: scale(1.12) translate(-1.5%, -1%); }",
+        defaultDuration: 32000,
+        iteration: "infinite",
+        purpose: "hero listing photography drift — architectural camera push",
+      },
+      "underline-sweep": {
+        css:
+          "from { transform: scaleX(0); transform-origin: left; }\n" +
+          "to { transform: scaleX(1); transform-origin: left; }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "text-link hover — underline wipes in left-to-right",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",                       // catalog breathing; never marketplace density
+
+  patterns: {
+    button:
+      "Text-link CTAs by default — navy color, underline-sweep on hover. " +
+      "Solid-fill is reserved for the single hero action per page (navy bg, cream text, sharp corners). " +
+      "Secondary actions are hairline-outlined ghost buttons in navy. No pill shapes. " +
+      "Burgundy is focus-ring only, never a button face.",
+    card:
+      "Sharp corners. Hairline border (--border) on a card-cream surface. Internal padding p-8 lg:p-12. " +
+      "Listing cards lead with full-width photography (4:5 portrait or 3:2 landscape), " +
+      "address in Cormorant display, spec line in mono. Hover lifts to shadow-listing.",
+    input:
+      "Border-bottom only (1px --border) on cream. No full box. " +
+      "Label above in mono-uppercase tracking 0.12em. Focus shifts border to burgundy.",
+    cta:
+      "Text-link with underline-sweep for the catalog. Solid navy rectangle for the single hero CTA (Request Viewing). " +
+      "Never a pill, never a gradient, never a glow.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-burgundy) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/realestate-marketplace/THEME.md

@@ -0,0 +1,106 @@
+# Design Direction — Realestate-Marketplace
+
+## Ethos
+Zillow listing-card grid · Redfin signal red · Apartments.com warm orange · Trulia friendly map · Streeteasy dense tabular
+
+## Feel
+Built for browsing two hundred listings on a Saturday. A warm-white canvas carries a friendly geometric sans, dense photo-card grids, and a single signal-color CTA. The map and the list co-exist; filters are first-class chrome, not an afterthought. Reads as a marketplace tool, not as a catalog or a brochure.
+
+## Reference brands
+- **Zillow** → deep blue brand mark + warm white + listing-card grid. Blue carries everything: search, save, primary CTAs, focus ring.
+- **Redfin** → signal red + soft cards + structured filter chrome. Red is a status color (Sold, Off-market, urgent badges) — never a primary CTA.
+- **Apartments.com** → warm orange accent + density + photo-card volume. Orange is the New / Hot listing badge; one accent color among several signals.
+- **Trulia** → sand surface + friendly map UI + neighborhood scoring. The map is a first-class surface, not a modal.
+- **Streeteasy** → NYC-specific dense tabular listings. Density is a feature; tabular numerics are non-negotiable on price columns.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **warm white** (background) → **pure white** (card/popover) → **cool gray** (secondary/muted/accent). Depth comes from soft card shadows and hairline borders. The filter bar uses `shadow-filterbar` — a single hairline + soft drop, the signature marketplace chrome.
+
+Brand tokens: `--blue-zillow`, `--blue-deep`, `--red-redfin`, `--orange-apt`, `--green-saved`, `--sand-warm`, `--map-water`. Primary is `--blue-zillow`. Status colors (red, orange, green) are reserved for status chips and badges — never primary CTAs.
+
+## Typography
+- **Display:** Manrope (Zillow-adjacent geometric sans). h1–h4 and listing-card titles. Tracking `-0.02em` — confident, slightly tight.
+- **Body:** Inter (Redfin/Streeteasy clean sans). Body base **15px** with **line-height 1.5** — marketplace density.
+- **Mono:** JetBrains Mono. Price, sqft, bed/bath count, lot size, MLS, last-updated date. Tabular numerics always on.
+
+H1 uses `clamp(2rem, 4.5vw, 3.25rem)` — restrained on purpose. The H1 is rarely the show on a marketplace page; the listings are. Font features: `"cv11"`, `"ss01"`, `"tnum"` — tabular numerics enabled site-wide so prices align in the result grid without per-component overrides.
+
+## Spacing
+- **Container:** `max-w-screen-2xl px-4 lg:px-6` — marketplace lives full-width for the map/list split. Gutters are tighter than catalog directions because content is the point.
+- **Section padding tiers:**
+  - Hero: `pt-12 pb-10 lg:pt-16 lg:pb-12` (modest — the search bar is the hero, not a marketing slab)
+  - Default: `py-10 lg:py-16`
+  - Tight: `py-6 lg:py-10`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 28 32 40 48 64 80. High-density scale with many small steps — marketplace UI needs the granularity.
+
+## Color
+No hex in component files. All color via tokens. Opacity via `/N` modifier. The marketplace palette intentionally carries multiple signal colors — red, orange, green, blue — but each has a strict role:
+
+- **Blue** = primary action, focus, brand. The catch-all.
+- **Red** = status only (Sold, Off-market, Removed, urgent alerts). Never a CTA.
+- **Orange** = badge accent (New, Hot, Open House). Never body chrome.
+- **Green** = confirmation only (Saved, Favorited, Verified). Never a CTA.
+
+Pure white is allowed (it's the card surface — marketplace cards must lift off the canvas). Pure black is forbidden — `--foreground` is a deep blue-ink.
+
+## Radius
+`--radius: 0.5rem` (8px). Softer than utility/dense, sharper than soft-modern. Pills are allowed (`pillsAllowed: true`) — filter chips, status badges, and category pills are part of the language. Pill shape encodes data (it's a filter / badge / chip), not chrome.
+
+## Shadows
+**Soft.** Four utilities:
+- `.shadow-card` — base listing-card lift: `0 1px 2px hsl(var(--navy-ink) / 0.05), 0 2px 6px hsl(var(--navy-ink) / 0.04)`.
+- `.shadow-card-hover` — listing-card hover lift.
+- `.shadow-mappin` — `0 2px 4px hsl(var(--navy-ink) / 0.18), 0 0 0 2px hsl(0 0% 100%)`, the white halo + drop shadow that defines a map pin.
+- `.shadow-filterbar` — `0 1px 0 hsl(var(--border)), 0 2px 8px hsl(var(--navy-ink) / 0.04)`, the sticky filter bar separation.
+
+No glows. No colored shadows.
+
+## Motion
+Four keyframes:
+- `fade-rise` — 240ms, the standard listing/result entrance. Marketplace must feel responsive; 1000ms is unacceptable here.
+- `card-lift` — 180ms hover lift on listing cards. Confirms targetability on a dense grid.
+- `pin-drop` — 320ms map-pin reveal with a slight overshoot. Feedback when a result lands on the map.
+- `skeleton-shimmer` — 1600ms infinite gradient sweep on loading skeletons. Listings stream in; the skeleton tells the user to keep scrolling.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored. **No ambient ken-burns — this is a tool, not a film.**
+
+## Component patterns
+- **Buttons:** 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 semantics, not chrome.
+- **Cards:** Listing card: rounded-lg, bg-card (pure white), `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 (`3 bd · 2 ba · 1,840 sqft`). Hover applies `card-lift`. Filter and panel cards use a hairline border with no shadow.
+- **Inputs:** Full rounded-lg box with 1px `--input` border, bg-card. Focus = 2px ring in primary at 40% opacity. Search input gets a leading magnifier icon. Label sits small above; helper text below in muted-foreground.
+- **CTA links:** 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 a CTA, always as a status pill**.
+
+## Recommended rich media
+Realestate-Marketplace is photography-volume-driven, not photography-prestige-driven. Listings carry 8–24 photos each, optimized for grid thumbnails and a full-screen lightbox. The first photo is the canonical hero — usually a 4:3 exterior or wide living-room shot. **Photography quality matches the listing's price tier** — a $300k starter home with iPhone photos sits comfortably in this direction; a $3M home pushes toward Realestate-Luxury territory.
+
+Map screenshots and floor plans are first-class media. Floor plans render best at 4:3 landscape with the listing's price overlaid as a chip in the top-right. Map pin tiles use `--map-water` as the basemap water; pins use primary blue with the white halo from `shadow-mappin`.
+
+Neighborhood images sit in a separate tier — `--sand-warm` panels with a 16:9 photo, a walk-score block, and three nearby category icons (coffee, transit, schools).
+
+**AI tool recommendations:** Marketplace listing photography is rarely AI-generated — real photos win on trust. For **neighborhood imagery and category illustrations**, **Midjourney v6+** with prompts like *"editorial neighborhood photography, warm afternoon light, residential street, no people, 35mm, natural color"* works for filler. For floor plans and icons, **Recraft** with *"isometric floor plan, line drawing, restrained color, no shadows"* and a small icon set in **Lucide** (already a common marketplace standard).
+
+**Aspect ratios:** 4:3 landscape for listing photography (the marketplace standard, tessellates cleanly in a grid); 16:9 for neighborhood hero photography; 1:1 for thumbnails and avatars. **Avoid 21:9 cinematic** — that reads luxury catalog, off-feel here.
+
+**Video:** Listing tour videos sit behind a play-button poster image in the photo gallery. Autoplay is forbidden — the user is scanning 200 results. ≤4 MB per tour video, H.265 or AV1, 30s typical length.
+
+**Performance:** listing thumbnail ≤30 KB AVIF at 800w; lightbox image ≤120 KB AVIF at 2000w. Critical: the grid must lazy-load below the fold. LCP under 1.8s with the search bar + first row of cards rendered.
+
+**Avoid:** twilight cinematic real-estate hero stills (luxury territory), serif typography on listing cards (luxury territory), parallax map effects (gimmicky and bad on mobile), animated price-drop badges (cheap), AI-generated listing photos (illegal in many jurisdictions and a trust failure regardless).
+
+**Accessibility:** alt-text on listing photos must include property type + photo subject — *"Two-story craftsman home, front exterior with attached garage"* not *"Image: 123 Oak St"*. Map pins must have a text alternative (price + address); the map is not a substitute for a list.
+
+## Component families
+None at install time. Likely first families: listing-card (grid + lightbox), filter-pill, map-pin, neighborhood-tile, save-button.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` background, foreground text — the standard blue selection.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — visible, web-app-standard, accessibility-first.
+- **Scrollbar:** thin.
+
+## 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.

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.