@stylecrib/cli 0.3.1 → 0.3.3

package/themes/toys-modern/tokens.ts

@@ -0,0 +1,200 @@
+import type { Direction } from "../schema";
+
+// toys-modern — Lovevery / Maisonette / KiwiCo developmental playful.
+// Friendly bright primaries (not pastel, not neon) — yolk-yellow, tomato-red,
+// grass-green, sky-blue. Rounded geometric sans, generous color blocking,
+// developmental-age driven. Decoration-first: pages carry shape-blocks,
+// dotted timelines, milestone confetti. Reads designed-for-kids without
+// patronizing the parent who is paying.
+export const toysModern: Direction = {
+  name: "toys-modern" as Direction["name"],
+  ethos:
+    "Lovevery developmental-age system · Maisonette curated-boutique playfulness · " +
+    "KiwiCo monthly-kit anticipation · Tegu magnetic-block primaries · " +
+    "Petit Collage flat-illustration color collage",
+  references: [
+    { brand: "Lovevery", trait: "developmental-age system + Montessori-restrained primaries" },
+    { brand: "Maisonette", trait: "curated-boutique playful, cream + sage + tomato" },
+    { brand: "KiwiCo", trait: "monthly-kit anticipation, age-band hero, friendly badges" },
+    { brand: "Tegu", trait: "magnetic-block primaries — saturated, never neon" },
+    { brand: "Petit Collage", trait: "flat-illustration color collage, paper-cut shapes" },
+  ],
+  feel:
+    "Bright friendly primaries on warm cream — yolk, tomato, grass, sky — color-blocked " +
+    "like Tegu blocks on a play mat. Generous shape-decoration: dotted developmental " +
+    "timelines, milestone confetti, paper-cut illustration accents. Rounded geometric sans " +
+    "for chrome, friendly serif italic for milestone names. Reads designed-for-kids without " +
+    "patronizing the parent reading it — Lovevery's trick.",
+
+  fonts: {
+    display: {
+      family: "Recoleta",
+      fallback: ["Fraunces", "Recoleta Alt", "Georgia", "serif"],
+      from: "Lovevery / Maisonette — warm rounded serif, optical sizes friendly at large sizes",
+      googleFont: "Fraunces",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Nunito",
+      fallback: ["Quicksand", "DM Sans", "Inter", "system-ui", "sans-serif"],
+      from: "KiwiCo / Lovevery — round humanist body, reads friendly at every size",
+      googleFont: "Nunito",
+      weights: [400, 600, 700],
+    },
+    mono: {
+      family: "Space Mono",
+      fallback: ["DM Mono", "ui-monospace", "Courier New", "monospace"],
+      from: "playful kit-numbers and age-band labels — geometric mono with character",
+      googleFont: "Space+Mono",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"ss01", "calt", "liga"',
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "44 60% 96%", from: "Lovevery warm cream — paper for the color blocks to sit on" },
+    foreground: { hsl: "228 35% 18%", from: "deep ink — never black; gives primaries room to vibrate" },
+    card: { hsl: "44 60% 99%", from: "lighter cream — card lifts slightly off the play-mat paper" },
+    popover: { hsl: "44 60% 99%", from: "same as card" },
+    primary: { hsl: "10 78% 56%", from: "Tegu tomato-red — principal action, the block-color that says GO" },
+    primaryForeground: { hsl: "44 60% 96%", from: "cream on tomato" },
+    secondary: { hsl: "44 50% 90%", from: "deeper cream panel — secondary surface" },
+    secondaryForeground: { hsl: "228 35% 22%", from: "ink on cream panel" },
+    muted: { hsl: "44 40% 92%", from: "quietest cream — helper bg, table-row" },
+    mutedForeground: { hsl: "228 14% 44%", from: "soft slate — captions, age-meta" },
+    accent: { hsl: "204 76% 88%", from: "sky-blue tint — hover and age-band-selected surface" },
+    accentForeground: { hsl: "204 60% 26%", from: "deep sky on tint" },
+    border: { hsl: "30 28% 84%", from: "warm kraft hairline — never cool gray" },
+    input: { hsl: "30 28% 84%", from: "same as border" },
+    ring: { hsl: "10 78% 56%", from: "primary tomato, focus only" },
+    destructive: { hsl: "354 75% 50%", from: "deeper red — recall/safety alert, distinct from tomato primary" },
+    destructiveForeground: { hsl: "44 60% 96%", from: "cream on alert" },
+    brand: {
+      tomato: { hsl: "10 78% 56%", from: "= primary; Tegu block-red, principal action" },
+      "tomato-soft": { hsl: "10 70% 92%", from: "tomato tint — selected age-band chip, gift-pick callout" },
+      yolk: { hsl: "44 92% 60%", from: "Tegu yolk-yellow — milestone star, kit-monthly callout" },
+      "yolk-soft": { hsl: "44 90% 90%", from: "yolk tint — kit-included chip, achievement bg" },
+      grass: { hsl: "138 50% 46%", from: "Tegu grass-green — developmental wellness mark, completed-stage" },
+      "grass-soft": { hsl: "138 38% 88%", from: "grass tint — milestone-met chip, vetted-by-experts pill" },
+      sky: { hsl: "204 76% 56%", from: "Tegu sky-blue — secondary friendly action, info accent" },
+      "sky-soft": { hsl: "204 76% 88%", from: "alias for accent — age-tab surface" },
+      cream: { hsl: "44 60% 96%", from: "alias for background — Lovevery play-mat paper" },
+      ink: { hsl: "228 35% 18%", from: "alias for foreground — deep slate ink" },
+      plum: { hsl: "294 38% 50%", from: "Petit Collage plum — paper-cut accent, decorative shape-block only" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96],   // decoration breathes
+    containerMax: "max-w-6xl",
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-28 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "1.5rem",                   // 24px — block-rounded, playful but not bubbly
+    pillsAllowed: true,               // pills core — age bands, milestone chips, kit-tags
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-block":
+        "0 1px 2px hsl(228 30% 30% / 0.05), 0 6px 18px hsl(228 30% 30% / 0.08)",
+      "shadow-block-lift":
+        "0 4px 0 0 hsl(228 35% 18% / 0.08), 0 12px 28px hsl(228 30% 30% / 0.10)",
+      "shadow-confetti":
+        "0 8px 0 0 hsl(44 92% 60% / 0.18), 0 16px 32px hsl(228 30% 30% / 0.08)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,
+      loop: 2400,
+      ambient: 30000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "entrance for age-band cards, kit-feature, gift-guide rows",
+      },
+      "milestone-pop": {
+        css:
+          "0% { transform: scale(0.7) rotate(-8deg); opacity: 0; }\n" +
+          "60% { transform: scale(1.08) rotate(4deg); opacity: 1; }\n" +
+          "100% { transform: scale(1) rotate(0deg); opacity: 1; }",
+        defaultDuration: 480,
+        iteration: "once",
+        purpose: "milestone-met confetti and achievement star — playful pop with rotation",
+      },
+      "shape-drift": {
+        css:
+          "0%, 100% { transform: translate(0, 0) rotate(0deg); }\n" +
+          "50% { transform: translate(8px, -6px) rotate(3deg); }",
+        defaultDuration: 6000,
+        iteration: "infinite",
+        purpose: "background paper-cut shapes drift — decorative only, never on functional UI",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.7; }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "next-kit-shipping countdown and live-stage indicator",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid tomato fill, cream text, rounded-2xl (block-rounded), shadow-block. " +
+      "Secondary = sky-blue solid fill, cream text (Tegu primaries siblings, not ghosts). " +
+      "Tertiary = ink text-link with tomato underline. Pills allowed for age-band tabs and chips. " +
+      "Hover: shadow-block-lift (4px-drop shadow) — buttons 'pop' like Tegu blocks. " +
+      "No ghost-only buttons as primary — this language commits to color.",
+    card:
+      "Rounded-3xl, cream-card on cream-paper, 1px kraft border, shadow-block. " +
+      "Age-band cards may use a 4px colored top-border (tomato / yolk / grass / sky / plum) keyed to the band. " +
+      "Internal padding p-6 lg:p-8. Decorative shape-block (a tomato circle, yolk triangle) may sit " +
+      "behind a card as a paper-cut accent — purely decorative, absolutely-positioned, never blocking content.",
+    input:
+      "Rounded-2xl, 2px kraft border (thicker than soft-modern — block-energy), cream-card fill. " +
+      "Label above in Nunito 700, age-pill chip beside it if relevant. " +
+      "Focus = 3px tomato ring at 35% opacity. Placeholder in muted slate, never italic.",
+    cta:
+      "Primary tomato solid is the principal action. " +
+      "Kit-subscribe and gift-guide CTAs may use yolk for variety (the second-tier action). " +
+      "Grass is reserved for milestone-met / completed-stage context. " +
+      "Plum is decoration-only — never a CTA color.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--yolk) / 0.45)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "3px solid hsl(var(--ring) / 0.4)",
+    scrollbarStyle: "auto",
+  },
+};

package/themes/travel-luxury/THEME.md

@@ -0,0 +1,95 @@
+# Design Direction — Travel-Luxury
+
+## Ethos
+Aman cream paper · Belmond burgundy heritage · Six Senses barefoot restraint · Rosewood navy monogram · &Beyond cinematic property film
+
+## Feel
+A printed Aman portfolio mailer rendered to the web. Quiet cream-paper canvas, full-bleed property cinematography as the lead element, restrained navy/burgundy accent. Fraunces serif display at property-headline scale, Source Serif Pro body for the long-form concierge prose. The voice writes in first person plural — *"we keep four rooms"*, *"the manager will meet you in Kathmandu"*, *"we send a letter, not a confirmation email"* — Aman composure with &Beyond cinematic gravity underneath. Monogram-level restraint: the property is the design; the page is the paper.
+
+## Reference brands
+- **Aman** → cream-paper page, oversized property cinematography, monogram restraint. The dominant template — this direction owes Aman its surface stack and pacing.
+- **Belmond** → burgundy heritage accent, train-poster serif display. The single primary color.
+- **Six Senses** → warm sand canvas, barefoot-luxury restraint. The secondary surface tier.
+- **Rosewood Hotels** → deep-navy monogram, A Sense of Place voice. The foreground ink.
+- **&Beyond** → cinematic safari-property film, wide-bleed photography. The hero-media register.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **cream paper** (background) → **lifted cream room** (card/popover) → **warm sand** (secondary/muted/accent). Depth comes from hairline borders at `0.10` opacity, never from fill differentiation. Hero property photography gets `.property-lift`; concierge cards get `.concierge-card`. The page is **minimal**, not soft — Aman would never carry a colored drop shadow.
+
+Brand tokens: `--cream-paper` (Aman canvas, alias of background), `--cream-room` (lifted cream, property-card stock), `--ink-navy` (Rosewood monogram, foreground alias), `--burgundy-heritage` (Belmond, the one accent), `--burgundy-deep` (pressed state), `--sand-warm` (Six Senses warm-sand secondary), `--moss-deep` (&Beyond safari moss, used **only** on private-inquiry chrome). Primary is `0 48% 28%` — heritage burgundy, never a gilded gold.
+
+## Typography
+- **Display:** Fraunces at 300/400/500/600, italic-friendly. Property names, destination essay titles. Tracking `-0.022em` — large optical sizes settle tighter; the serif holds at headline scale.
+- **Body:** Source Serif Pro at 400/600, **17px** with **line-height 1.7**. Long-form property prose, concierge letters, the manager's note. Belmond/Aman printed-mailer register.
+- **Mono:** JetBrains Mono at 400. **Only small** — itinerary dates, GPS coordinates, Nº 4 property-number eyebrows, photographer credits. Never display, never body.
+
+Hierarchy is pair-driven: Fraunces italic display + Source Serif Pro body, with tracked-uppercase JetBrains Mono small caps (letter-spacing 0.24em) for eyebrows ('THE PROPERTY', 'THE JOURNEY', 'BY INVITATION'). H1 uses `clamp(2.75rem, 7vw, 6rem)` — printed-monograph scale, Aman portfolio register. Font features: `"liga", "dlig", "onum", "kern"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-12` — 1152px. The cinematic property shot needs the width; the concierge letter sits comfortably inside.
+- **Section padding tiers:**
+  - Hero: `pt-28 pb-20 lg:pt-44 lg:pb-32` — cinematic property-shot hero, deliberately oversized
+  - Default: `py-24 lg:py-36`
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160 192. The high end is intentional — Aman pacing, room to breathe between properties.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier on token. White and pure black are forbidden — `--cream-paper` (`36 28% 94%`) and `--ink-navy` (`220 32% 14%`) replace them.
+
+The palette is warmth and one heritage accent. Saturation never exceeds what would read on a printed Aman portfolio under warm gallery light. Property photography carries the color; the chrome stays cream-and-navy.
+
+## Radius
+`--radius: 0`. **Sharp corners only** — the printed-monograph register. Pills are disallowed (`pillsAllowed: false`); they read consumer-app, never concierge-letter. Softness comes from whitespace and serif italic, not corner rounding.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.property-lift` — diffuse drop for **property hero photography only**. Gallery-print register.
+- `.concierge-card` — hairline + faint drop for the concierge-note card. The warmest chrome the page is allowed.
+
+No glows, no neon, no colored drops. Buttons never carry shadow.
+
+## Motion
+Two keyframes only:
+- **`fade-rise`** — opacity + 24px translate, **1200ms**. The single entrance for property cards and concierge notes. The page settles; it does not perform.
+- **`property-drift`** — `scale(1.03) → scale(1.12)`, **32000ms**, infinite. Slow ken-burns on hero property photography — &Beyond camera-push, the rooftop at golden hour breathing.
+
+No marquee, no parallax. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `property-drift` is disabled entirely under reduced motion; `fade-rise` collapses to instantaneous final-state.
+
+## Component patterns
+- **Buttons:** the default CTA is a **serif italic text-link in burgundy**, always-visible thin underline — concierge register. The solid button is reserved for **one 'Arrange a Stay' or 'Request a Private Inquiry' hero CTA per page** — burgundy bg + cream-paper text, sharp corners, no shadow on the button itself. Tertiary actions ('View the Itinerary', 'Read the Letter from the Manager') are tracked-uppercase mono small caps in navy.
+- **Cards (property/journey):** hairline top + bottom only, **no full box**. Cream-room background, internal padding `p-10 lg:p-14`. Property name in **Fraunces italic display**, location in mono small caps eyebrow above (Nº 04 · KATHMANDU). Hero property photograph uses `.property-lift`; concierge-note card uses `.concierge-card`.
+- **Inputs:** private-inquiry form — border-bottom only (1px `--ink-soft`), cream-room background. Label above in tracked-uppercase mono small caps. Placeholder italic serif in mutedForeground. Focus is burgundy underline-thickening, 2px.
+- **CTAs:** default = serif italic text-link in burgundy, underline always visible. The single 'Arrange a Stay' is the one solid-fill exception. Private-inquiry actions use moss-deep tracked-uppercase mono small caps with mailto: behavior. **Never a chip, never a gradient, never a pill.**
+
+## Recommended rich media
+**Cinematic property photography first.** The rooftop suite at golden hour, the unmade linen at six, the empty plunge pool with the volcano behind it, the manager waiting at the airfield. &Beyond's photographic register: warm gradient skies, occupied or recently-occupied spaces, never the empty real-estate-listing energy.
+
+**AI tool recommendations.** **Midjourney / Flux** for hero property cinematography — *"Aman resort suite interior, late afternoon golden light through linen curtains, unmade bed, single subject, Annie Leibovitz lighting, 35mm, Kodak Portra 400, --ar 21:9"*. For destination essays, *"&Beyond Botswana camp at dusk, occupied chairs around fire, warm gradient sky, documentary 35mm"*. Avoid Midjourney's default hotel-marketing register — explicitly prompt for warm grade and occupied spaces.
+
+**Aspect ratios.** **21:9** for the cinematic property hero (Aman portfolio mailer register). **4:5 portrait** for room interiors and manager portraits. **3:2 landscape** for destination/journey photography. Never 1:1 social-square as the hero; the property is not an Instagram tile.
+
+**Captions are mandatory.** Property name, destination, photographer credit, time of day, monogram number — in JetBrains Mono small caps. *"Aman Tokyo · Otemachi, Chiyoda · Suite 3304 · Photograph by François Halard · 17:18 JST"* style attribution always.
+
+**Video.** Used for the property hero only — a single 30s slow `property-drift` over a still, **or** a muted 24s loop of the rooftop at dusk. Never autoplay with sound. Never a room-walkthrough. ≤12 MB AV1 or H.265.
+
+**Performance.** Hero property image ≤240 KB AVIF at 2200w. LCP under 2.8s — if it slips, the photograph is too large, not the framework. Aman can afford slightly heavier hero media; the photograph is the property.
+
+**Avoid.** OTA-aggregator energy. Empty-room real-estate-listing photography. Smiling-staff stock. Generic "boutique luxury" hotel-chain marketing language. Pop-up booking widgets. Lens flare. Anything that reads more **Marriott Bonvoy than Aman**.
+
+**Accessibility.** Long-form alt-text — describe the property, the light, the time of day as if for a blind reader. *"A linen-draped four-poster bed in a Kyoto suite, late afternoon light through a paper screen, an open volume of poems on the side table."* The bar is Aman-portfolio editorial.
+
+## Component families
+None at install time. As `*PropertyCard`, `*ConciergeNote`, `*PrivateInquiryStrip`, `*ItineraryRow` families emerge, the Director lists them here.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text — burgundy highlight on cream paper.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin and quiet — monogram precision.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/travel-luxury/tokens.ts

@@ -0,0 +1,162 @@
+import type { Direction } from "../schema";
+
+export const travelLuxury: Direction = {
+  name: "travel-luxury",
+  ethos: "Aman cream paper · Belmond burgundy heritage · Six Senses restraint · Rosewood navy monogram · &Beyond cinematic property film",
+  references: [
+    { brand: "Aman", trait: "cream-paper page, oversized property cinematography, monogram-level restraint" },
+    { brand: "Belmond", trait: "burgundy heritage accent, train-poster serif display" },
+    { brand: "Six Senses", trait: "warm sand canvas, barefoot-luxury restraint" },
+    { brand: "Rosewood Hotels", trait: "deep-navy monogram, A Sense of Place voice" },
+    { brand: "&Beyond", trait: "cinematic safari-property film, wide-bleed photography" },
+  ],
+  feel:
+    "Quiet cream-paper canvas with full-bleed property photography as the lead element. " +
+    "A single restrained navy/burgundy accent, deeply serif display, and concierge-letter prose pacing. " +
+    "Reads like a printed Aman portfolio mailer — the page is the paper, the property is the design.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["EB Garamond", "Playfair Display", "Times New Roman", "serif"],
+      from: "Aman portfolio serif — large optical sizes for property names, italic-friendly",
+      googleFont: "Fraunces",
+      weights: [300, 400, 500, 600],
+    },
+    body: {
+      family: "Source Serif Pro",
+      fallback: ["EB Garamond", "Georgia", "serif"],
+      from: "Belmond concierge-letter body — serif body for the long-form property prose",
+      googleFont: "Source+Serif+Pro",
+      weights: [400, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "monospace"],
+      from: "small captions only — itinerary dates, coordinates, Rosewood property numbers",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.022em",
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"liga", "dlig", "onum", "kern"',
+    h1ScaleClamp: "clamp(2.75rem, 7vw, 6rem)",
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.7",
+  },
+
+  colors: {
+    background: { hsl: "36 28% 94%", from: "Aman cream paper — the matte canvas, never pure white" },
+    foreground: { hsl: "220 32% 14%", from: "Rosewood deep-navy monogram ink" },
+    card: { hsl: "36 30% 97%", from: "lifted cream — one stop above paper, for property-card surfaces" },
+    popover: { hsl: "36 30% 97%", from: "same as card" },
+    primary: { hsl: "0 48% 28%", from: "Belmond burgundy — heritage train-livery, restrained" },
+    primaryForeground: { hsl: "36 28% 94%", from: "cream on burgundy" },
+    secondary: { hsl: "36 24% 90%", from: "Six Senses warm-sand tier — secondary surface" },
+    secondaryForeground: { hsl: "220 32% 14%", from: "navy ink on warm sand" },
+    muted: { hsl: "36 20% 88%", from: "muted sand — for inactive chrome" },
+    mutedForeground: { hsl: "220 18% 42%", from: "Rosewood navy-soft, secondary text and captions" },
+    accent: { hsl: "36 24% 86%", from: "hover surface — one tier deeper than secondary" },
+    accentForeground: { hsl: "220 32% 14%", from: "navy ink on accent" },
+    border: { hsl: "220 18% 78%", from: "Aman hairline — visible only on inspection, never assertive" },
+    input: { hsl: "220 18% 78%", from: "same as border — single hairline language" },
+    ring: { hsl: "0 48% 28%", from: "burgundy focus — primary, used for keyboard focus only" },
+    destructive: { hsl: "8 60% 38%", from: "deepened heritage red — never bright" },
+    destructiveForeground: { hsl: "36 28% 94%", from: "cream on deep red" },
+    brand: {
+      "cream-paper": { hsl: "36 28% 94%", from: "Aman canvas — alias of background" },
+      "cream-room": { hsl: "36 30% 97%", from: "lifted cream — property-card stock" },
+      "ink-navy": { hsl: "220 32% 14%", from: "Rosewood monogram navy — foreground alias" },
+      "burgundy-heritage": { hsl: "0 48% 28%", from: "Belmond train livery — the single accent" },
+      "burgundy-deep": { hsl: "0 52% 22%", from: "burgundy pressed-state, gradient anchor" },
+      "sand-warm": { hsl: "36 24% 90%", from: "Six Senses warm-sand — secondary tier" },
+      "moss-deep": { hsl: "150 18% 28%", from: "&Beyond safari moss — used sparingly on private-inquiry chrome" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-28 pb-20 lg:pt-44 lg:pb-32",
+      default: "py-24 lg:py-36",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "property-lift":
+        "0 24px 64px -32px hsl(220 32% 14% / 0.28)",
+      "concierge-card":
+        "0 1px 0 0 hsl(220 18% 78% / 1), 0 12px 32px -24px hsl(220 32% 14% / 0.16)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,
+      loop: 4000,
+      ambient: 32000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(24px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "slow entrance — property cards, concierge notes; the door is opened",
+      },
+      "property-drift": {
+        css:
+          "0% { transform: scale(1.03) translate(0, 0); }\n" +
+          "100% { transform: scale(1.12) translate(-1.5%, -1%); }",
+        defaultDuration: 32000,
+        iteration: "infinite",
+        purpose: "slow ken-burns drift on hero property photography — &Beyond camera-push",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Default CTA is a serif italic text-link in burgundy with always-visible thin underline — concierge register. " +
+      "The single hero action per page may be a solid burgundy rect, cream text, sharp corners. " +
+      "Never a pill, never a gradient. Tertiary actions are tracked-uppercase mono small caps in navy.",
+    card:
+      "Hairline top + bottom only, no full box. Cream-room background, internal padding p-10 lg:p-14. " +
+      "Property name in Fraunces italic display, location in mono small caps eyebrow above. " +
+      "Hero property photograph uses .property-lift drop; never .concierge-card on imagery.",
+    input:
+      "Border-bottom only (1px --border), cream-room background, no full box. " +
+      "Label above in tracked-uppercase mono small caps. Placeholder in mutedForeground italic serif. " +
+      "Focus is burgundy underline-thickening, 2px.",
+    cta:
+      "Default = serif italic text-link in burgundy, underline. " +
+      "Single 'Request a Private Inquiry' or 'Arrange a Stay' may be a solid burgundy rect. " +
+      "Never a chip, never a gradient. The page is the concierge letter; the CTA is the postscript.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/vacation-rental/THEME.md

@@ -0,0 +1,105 @@
+# Design Direction — Vacation-Rental
+
+## Ethos
+Airbnb soft pink Cereal-wordmark consumer warmth · Vrbo family-photography trust-blue · Plum Guide curated charcoal · Whimstay last-minute coral · Sonder modern-stay rounded chrome
+
+## Feel
+Friendly consumer marketplace — the page you would actually book a cabin on for next weekend. Soft Airbnb Rausch pink as the single primary, generous rounded corners, photography-led product cards in a dense 3- or 4-up grid, wishlist hearts in the upper-right of every image. Search density lives at the top (Where · When · Guests). Reads productive and warm at once: photo-first like Airbnb, with a hint of Plum Guide's curated voice in the captions and Whimstay's last-minute coral on percent-off badges.
+
+## Reference brands
+- **Airbnb** → Cereal wordmark, soft Rausch coral-pink, rounded photo-card grid, wishlist heart. The dominant template — this direction owes Airbnb its surface stack, primary color, and card pattern.
+- **Vrbo** → family-warm photography, deep-blue trust accent. Used only on Verified Host / Superhost chips.
+- **Plum Guide** → curated charcoal headers, hand-picked editorial captions. The voice in property descriptions.
+- **Whimstay** → last-minute coral signal, percent-off badge language. The deals-strip eyebrow color.
+- **Sonder** → modern-stay rounded chrome, hospitality dashboard pacing. The density of filter rows and the search-bar shape.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **pure white canvas** (background and card both white — photography reads truest on white) → **warm blush** (secondary/muted/accent). Depth comes from soft drop-shadows on cards, never from fill differentiation. Hue shift to warm-blush only on wishlist tiles and inactive filter chips. The page is **soft**, the chrome is rounded — this is consumer, not enterprise.
+
+Brand tokens: `--rausch-pink` (Airbnb canonical, primary alias), `--rausch-deep` (pressed/active state), `--blush-soft` (secondary surface), `--vrbo-blue` (trust chip color, never a CTA), `--wishlist-rose` (heart hover bg), `--whimstay-coral` (percent-off badges only), `--rating-gold` (★ glyphs only). Primary is `351 78% 56%` — the canonical Airbnb Rausch coral-pink.
+
+## Typography
+- **Display:** DM Sans at 400/500/700. Friendly geometric — Airbnb Cereal stand-in. Property titles, section headers, card titles. Tracking `-0.018em`.
+- **Body:** Inter at 400/500/600, **15px** with **line-height 1.55**. Dashboard-dense, photo-card-readable. Captions, addresses, review snippets.
+- **Mono:** JetBrains Mono at 400/500. **Only small** — guest counts (4 guests · 2 beds · 1 bath), night counts, price-per-night tabular numerics. Never display, never body.
+
+Hierarchy is photo-first: image leads, DM Sans 500 title underneath, Inter muted-foreground subtitle, mono price row. H1 uses `clamp(2rem, 4.5vw, 3.25rem)` — consumer-search hero, not editorial poster. Numbers always carry `font-variant-numeric: tabular-nums`. Font features: `"cv11", "ss01", "tnum"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-10` — wide enough for 4-up card grids and the search bar.
+- **Section padding tiers:**
+  - Hero: `pt-12 pb-8 lg:pt-16 lg:pb-12` — search-first hero, dashboard-tight, never magazine
+  - Default: `py-12 lg:py-16`
+  - Tight: `py-8 lg:py-10`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 32 40 48 64 80 96. Medium density — cards breathe, filter rows pack tight.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier on token.
+
+The palette is **white canvas + Rausch pink + warm blush + restrained semantic chips**. Vrbo blue appears **only** on Superhost / Verified Host chips. Whimstay coral appears **only** on percent-off / last-minute deal badges. Rating gold appears **only** on the ★ glyph. The primary action is always Rausch pink — using any other color as a primary breaks the consumer-marketplace trust.
+
+Pure black is forbidden — `--foreground` is `0 0% 14%` (Airbnb near-black, Cereal ink). Pure white is the canvas; cards are also pure white and lift via shadow.
+
+## Radius
+`--radius: 0.75rem` (12px). **Rounded consumer chrome.** Pills are allowed (`pillsAllowed: true`) and are the default for filter chips (Cabins · Beachfront · Trending), status chips (Superhost, Free cancellation, Self check-in), and the rounded-full search bar. Photo-card corners are 12px; the search bar is fully pill; chips are fully pill.
+
+## Shadows
+**Soft.** Three utilities — no glows, no color-tinted drops:
+
+- `.shadow-card` — default property-card elevation. Two-layer neutral drop, quiet at rest.
+- `.shadow-card-hover` — card lift on hover. Deeper drop with the same family.
+- `.shadow-sticky` — sticky search-bar and filter-row strip. Just enough to separate from scrolling content.
+
+Shadows are **neutral** — color-saturated drops read creator-social and break the consumer-trust language.
+
+## Motion
+Three keyframes — consumer-fast:
+
+- **`fade-up`** (400ms) — property-card grid entrance. translateY(8px) → 0.
+- **`heart-pop`** (360ms) — wishlist heart toggle. Scale 1 → 1.35 → 1. Airbnb-signature interaction.
+- **`shimmer`** (1600ms infinite) — photo-card skeleton on initial load. Gradient sweep across image plates.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `fade-up` collapses to opacity-only, `heart-pop` to a color-fill only, `shimmer` to a static 0.8 opacity.
+
+No ambient motion. This is a search-first consumer surface — nothing should drift while the user is filtering for dates.
+
+## Component patterns
+- **Buttons:** primary = solid Rausch-pink filled rect, `rounded-xl` (12px), weight 600 — 'Reserve', 'Continue', 'Show on Map'. Secondary = outlined ghost (foreground border, white bg). Tertiary = underline text-link in foreground; pink is reserved for actions, never for inline links. **One primary CTA per surface.**
+- **Cards (property):** `rounded-xl`, **no border**, white bg, `.shadow-card`. Photo is the lead (4:3 or 5:4, rounded-xl, top-right wishlist heart absolutely positioned). Title in DM Sans 500, subtitle (neighborhood · distance) in muted-foreground, ★ rating row in rating-gold + review count in muted, price row in tabular Inter with mono /night. Hover lifts to `.shadow-card-hover` and the heart fills with `.wishlist-rose`.
+- **Inputs:** the canonical search bar is **pill-shape rounded-full**, ~64px tall on desktop, with embedded column divides (Where · When · Guests). Filter inputs (compact h-10) are `rounded-md`, soft border, white bg. Focus uses ring (2px Rausch at 45%).
+- **CTAs:** filled Rausch-pink rect is the primary action language. Wishlist heart is the icon-CTA — outlined at rest, filled when active. Status chips (Superhost in vrbo-blue, Free cancellation in foreground-on-blush, -32% Tonight in whimstay-coral) are pills.
+
+## Recommended rich media
+**Real warm property photography, always.** Sun-through-window shots, unmade bed in morning light, deck with two coffee mugs, dog on the rug — the family-warm Vrbo register layered over Airbnb's photographic competence. **Show occupied or recently-occupied spaces, never the empty real-estate-listing energy.**
+
+**AI tool recommendations.** **Midjourney / Flux** for hero property photography — *"warm cozy cabin interior, morning light through window, unmade linen bed, single subject, Airbnb listing photography, 24mm, --ar 4:3"*. For exterior shots, *"beachfront vacation rental at golden hour, deck with two chairs, soft warm light, documentary 35mm"*. Avoid Midjourney's default empty-room listing register — explicitly prompt for occupied/just-occupied and warm grade.
+
+**Aspect ratios.** **4:3 landscape** for property hero cards (the dominant ratio — mixed ratios break the grid rhythm). **5:4 portrait** for detail-page hero galleries. **1:1 square** for wishlist tiles. Never 16:9 (off-feel for consumer rental).
+
+**Color in imagery.** Warm grade — golden hour, late afternoon, morning sun. **Never** cool/blue cast (reads sterile). Never harsh midday flash. Saturated brand-colored interiors are fine (a coral throw blanket on a white bed reads on-brand for the page).
+
+**Video.** Short 15s mute loops in hero galleries on detail pages only. Never autoplay video in the card grid (kills scan speed). ≤8 MB AV1 or H.265.
+
+**Captions.** Property title (DM Sans 500), neighborhood + distance from major landmark (muted Inter), ★ rating + review count, price / night. Plum Guide-style hand-picked editorial line for premium listings ("a sun-drenched two-bedroom four blocks from the beach, with the best outdoor shower we have ever tested").
+
+**Performance.** Card-grid photos ≤120 KB AVIF at 1200w; hero-gallery images ≤200 KB. LCP under 2.4s — if it slips, photo sizes are too heavy, not the framework. Consumer search needs sub-2s perceived load.
+
+**Avoid.** Empty-room real-estate-listing photography. Stock smiling-staff photos. AI-glossy interiors (uncanny). Pop-up booking-incentive modals (Airbnb stopped doing these for a reason). Lens flare. Anything that reads more **OTA-aggregator than Airbnb / Plum Guide.**
+
+**Accessibility.** Alt-text for property photos must convey the space — *"A wood-paneled living room with a leather sofa, a fireplace, and a window onto pine trees, photographed in late afternoon light."* Wishlist hearts must have `aria-pressed` state. Filter chips must use `aria-selected` not color alone — color-blind users need the state in the DOM.
+
+## Component families
+None at install time. As `*PropertyCard`, `*WishlistTile`, `*FilterChip`, `*SearchBar`, `*StatusChip` families emerge, the Director lists them here.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text — Rausch pink highlight.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — Rausch pink at 50%.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.