@stylecrib/cli 0.3.1 → 0.3.3

package/themes/healthcare-bright/THEME.md

@@ -0,0 +1,95 @@
+# Design Direction — Healthcare-Bright
+
+## Ethos
+Hims warm peach · Hers rose blush · Ro sage cream · Forward clinical bright · Function Health friendly lab
+
+## Feel
+Modern direct-to-consumer healthcare. The page reads like a wellness brand that happens to dispense medicine — cream surfaces, peach primary, sage supporting accent, rounded geometric sans, photography that looks like a friend's bathroom shelf rather than a hospital corridor. Competent, friendly, intimate. The audience trusts you because the surface refuses to look like the DMV.
+
+## Reference brands
+- **Hims** → warm peach primary, intimate environmental product photography, Plus Jakarta-feel display.
+- **Hers** → rose blush partner accent, Manrope-style body, friendly clinical tone.
+- **Ro** → sage and cream pairing, softly elevated product cards, calm reassurance.
+- **Forward** → clinical white card on cream, bright primary accent, Plus Jakarta crisp display.
+- **Function Health** → cream surfaces with lab-result tables that read friendly rather than intimidating.
+
+## 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 **cream paper** (background) → **white** (card) → **deeper cream** (secondary/muted) → **sage-soft or peach-soft** (accent and tint pills). Depth comes from soft warm shadows and one-step surface lifts. The cream base is non-negotiable; a true-white page background reads hospital and destroys the brand.
+
+Brand tokens: `--peach`, `--peach-soft`, `--blush`, `--sage`, `--sage-soft`, `--cream`, `--ink`. Primary is **Hims warm peach** — the canonical DTC healthcare accent. The sage system carries calm-clinical moments (lab results, wellness content, condition education) and never competes with peach for primary-action duty.
+
+## Typography
+- **Display:** Plus Jakarta Sans (Forward/Hims feel). h1–h4, weights 500/600/700. Tracking `-0.02em` — friendly geometric sans wants a hair tighter at large sizes.
+- **Body:** Manrope (Hers feel). Body base **17px** with **line-height 1.65** — slightly larger than dashboard standard. Patient-facing copy must be readable for fifty-year-olds reading on a phone at arm's length.
+- **Mono:** JetBrains Mono. Used only for lab values, biomarkers, dosages, and tracking numbers. Tabular numerics enforced via `tnum`.
+
+H1 uses `clamp(2.25rem, 5.5vw, 4rem)`. Numbers always use tabular figures. Font features: `"ss01"`, `"ss02"`, `"tnum"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8` — comfortable marketing width, never edge-to-edge.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80 96. Medium density — DTC marketing breathes but doesn't sprawl like a luxury retreat.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. White is allowed for `--card` only — the page never sits on pure white. Pure black is forbidden — `--ink` (a deep teal-leaning slate) replaces it.
+
+The peach primary and sage accent are the only saturated colors on the page. Blush is reserved for women's-health contexts (Hers parallel). Coral destructive appears only for cancel-subscription, delete-record, and stop-medication — never decorative.
+
+## Radius
+`--radius: 1rem`. **Pillowy 16px rounding** — the signature of the modern DTC healthcare card. Pills are allowed and core (`pillsAllowed: true`) — dosage chips, condition tags, status badges, adherence streaks. The radius language softens the clinical content; sharp corners would undo the brand work.
+
+## Shadows
+**Soft warm shadows.** Utilities:
+- `.shadow-card` — base product card lift, warm shadow tinted slightly peach so it doesn't read cool/gray on cream
+- `.shadow-card-lg` — hover state on cards, modal lift
+- `.shadow-pill` — micro-elevation on status pills
+- `.shadow-inset-warm` — a 1px inner highlight for cards that need extra dimension
+
+No glows. No colored drop-shadows beyond the warm tint that keeps shadows from going cold on the cream surface.
+
+## Motion
+Four keyframes — `fade-rise` (standard content entrance, 600ms), `soft-pulse` (dose-due indicator, schedule-reminder dot — 2400ms infinite, gentle scale and opacity), `scale-in` (modal and popover, 240ms), `shimmer` (loading skeletons for lab-result and order-status panels).
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — wrapped in a media query in every motion utility. Critically: primary buttons do **not** scale on hover. Jumpiness reads alarming in healthcare; lifts come from shadow change and brightness only.
+
+## Component patterns
+- **Buttons:** Primary = solid peach fill with white text, rounded-2xl, shadow-card. Secondary = ghost (1px border, foreground text). Tertiary = text-link with primary color. Hover: shadow-card-lg + 4% brightness shift only, never scale. Destructive coral fill is reserved for cancel-subscription, delete-record, stop-medication — never decorative.
+- **Cards:** Rounded-2xl, white fill on cream background, 1px warm border, shadow-card. Internal padding `p-6 lg:p-8`. Title in Plus Jakarta 600; body in Manrope 400. Hover lifts to shadow-card-lg. Product cards add a sage-soft or peach-soft inner pill for category.
+- **Inputs:** Full rounded-xl box, 1px warm border, white background on cream pages. Label sits above in Plus Jakarta 500, slightly larger than field text — patient-friendly. Focus = 2px peach ring at 40% opacity. Helper text below in muted-foreground. Error state uses coral border + coral helper, never red bg fill.
+- **CTAs:** Solid peach primary is the default — DTC healthcare is conversion-driven. Hero CTAs may pair primary with a ghost secondary side-by-side. Never two solid CTAs adjacent.
+
+## Recommended rich media
+DTC healthcare lives or dies on photography. Lead media is **intimate environmental product photography** — the medication bottle on a bathroom shelf, the daily-vitamin pack in soft morning light, hands holding a glass of water by a kitchen window. Photography looks like a friend took it, not a pharmacy ad. Color-grade for warm highlights and gentle film softness — Fuji 400H or Portra 400.
+
+Portraits read **friend, not patient**: people who look like the audience, not stock-photo models, no white coats unless the practitioner segment requires it, slight smile, eye contact, natural makeup. Diversity is real (age, body, skin tone, gender) — DTC healthcare is broad-market and stock-model homogeneity reads dishonest.
+
+**AI tool recommendations:** **Midjourney / Flux** with prompts like *"intimate bathroom shelf product photography, soft morning light through window, Fuji 400H, depth of field"* for products; *"warm portrait of person in their forties, natural light kitchen, slight smile, real skin texture, Portra 400"* for people. Avoid the dramatic studio gradient backgrounds — that's pharma-clinical territory. **Ideogram** for category-illustration line drawings in a friendly editorial style (single-weight stroke, terracotta or sage accent).
+
+**Aspect ratios:** 4:5 portrait for product hero (mobile-first DTC), 3:2 landscape for environmental moments, 1:1 square for category-tile and quiz-result. Never 21:9 — too cinematic for this brand.
+
+**Video:** background-loop hero videos are acceptable but must be muted, ≤6 seconds, ≤2 MB. Use for the "this is what you'll get in the box" unboxing or the "this is the daily ritual" lifestyle shot. Never for a doctor monologue — testimonial video is talking-head territory and pairs better with a poster image + play button.
+
+**Performance:** hero image ≤180 KB AVIF at 1600w; product tile images ≤80 KB. LCP under 2s — DTC bounce rate is unforgiving.
+
+**Avoid:** stock photography of doctors in white coats pointing at clipboards, blue-tinted laboratory glassware shots, glowing-pill renders, anything that looks like a 2010 pharma ad, AI photos with the uncanny over-smooth skin, 3D rendered organs floating on gradients (that's pharma-clinical territory), lens flare, glitch-aesthetic effects.
+
+**Accessibility:** alt-text for product photography names the product and context: *"Daily-vitamin pack on a bathroom shelf next to a glass of water and a folded towel."* Patient testimonial photos describe the person, not just attribution: *"Maya, age 34, sits at her kitchen table with a cup of tea, looking at the camera."*
+
+## Component families
+None at install time. The hint sheet for category-tile, product-card, lab-result-table, and dose-tracker patterns lives in the design-system handoff once the first views ship; the Director appends them here as patterns stabilize.
+
+## Details
+- **Selection:** `hsl(var(--peach) / 0.25)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — peach at half-opacity. Visible but soft.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (a true-white page for a regulatory disclosure, a hex value for a partner-brand pixel-match), 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/healthcare-bright/tokens.ts

@@ -0,0 +1,184 @@
+import type { Direction } from "../schema";
+
+export const healthcareBright: Direction = {
+  name: "healthcare-bright",
+  ethos:
+    "Hims warm peach · Hers rose blush · Ro sage cream · Forward clinical bright · Function Health friendly lab",
+  references: [
+    { brand: "Hims", trait: "warm peach + intimate portrait photography" },
+    { brand: "Hers", trait: "rose blush + Manrope friendly clinical" },
+    { brand: "Ro", trait: "sage + cream + soft elevated cards" },
+    { brand: "Forward", trait: "clinical white + bright accent + Plus Jakarta" },
+    { brand: "Function Health", trait: "cream surface + friendly lab-result tables" },
+  ],
+  feel:
+    "Bright, soft, warmly clinical. Peach and cream surfaces, sage accents, " +
+    "rounded geometric sans, photography that looks like a friend's bathroom shelf " +
+    "rather than a hospital. Healthcare you'd actually use — competent, never severe.",
+
+  fonts: {
+    display: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Manrope", "Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Forward/Hims display sans — friendly geometric, slight humanist warmth",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Manrope",
+      fallback: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Hers body sans — rounded apertures, reads warm at small sizes",
+      googleFont: "Manrope",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Function Health lab values — tabular numerics for biomarkers and dosages",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",      // friendly sans display benefits from tight tracking
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "ss02", "tnum"',
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1.0625rem",        // 17px — slightly larger, reads patient-friendly
+    bodyLineHeight: "1.65",
+  },
+
+  colors: {
+    background: { hsl: "30 40% 97%", from: "Ro/Function cream — warm paper, never pure white" },
+    foreground: { hsl: "200 30% 16%", from: "Forward deep teal-ink — softer than black, still clinical" },
+    card: { hsl: "0 0% 100%", from: "true white card on cream — Hims product card lift" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "16 78% 64%", from: "Hims warm peach — the canonical DTC healthcare accent" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on peach" },
+    secondary: { hsl: "30 30% 94%", from: "deeper cream — Ro secondary surface" },
+    secondaryForeground: { hsl: "200 30% 20%", from: "deep teal on cream" },
+    muted: { hsl: "30 24% 93%", from: "Function Health muted lab-table row" },
+    mutedForeground: { hsl: "200 14% 44%", from: "muted teal-gray — captions and meta" },
+    accent: { hsl: "150 24% 90%", from: "Ro sage tint — hover surface and supporting pills" },
+    accentForeground: { hsl: "150 32% 22%", from: "deep sage on sage tint" },
+    border: { hsl: "30 22% 88%", from: "warm hairline — visible on cream, never harsh" },
+    input: { hsl: "30 22% 88%", from: "same as border" },
+    ring: { hsl: "16 78% 64%", from: "primary peach, used for focus" },
+    destructive: { hsl: "356 70% 56%", from: "warm coral-red — patient alert, not hospital red" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on coral" },
+    brand: {
+      peach: { hsl: "16 78% 64%", from: "Hims primary peach — DTC men's-health canonical" },
+      "peach-soft": { hsl: "16 80% 94%", from: "peach tinted bg — pill and badge surface" },
+      blush: { hsl: "352 70% 78%", from: "Hers rose blush — women's-health partner accent" },
+      sage: { hsl: "150 28% 58%", from: "Ro sage — calm clinical reassurance" },
+      "sage-soft": { hsl: "150 30% 92%", from: "sage tinted bg — wellness card tint" },
+      cream: { hsl: "30 40% 97%", from: "alias for background — Ro cream paper" },
+      ink: { hsl: "200 30% 16%", from: "alias for foreground — Forward teal-ink" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "1rem",                     // 16px — pillowy, friendly DTC product-card softness
+    pillsAllowed: true,               // pills are core — dosage chips, condition tags, status
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(16 30% 40% / 0.04), 0 8px 24px hsl(16 30% 40% / 0.08)",
+      "shadow-card-lg":
+        "0 2px 4px hsl(16 30% 40% / 0.04), 0 16px 40px hsl(16 30% 40% / 0.10)",
+      "shadow-pill":
+        "0 1px 2px hsl(16 30% 40% / 0.06)",
+      "shadow-inset-warm":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.7)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,
+      loop: 2400,
+      ambient: 20000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "standard content entrance — friendly rise, never dramatic",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { transform: scale(1); opacity: 1; }\n" +
+          "50% { transform: scale(1.04); opacity: 0.92; }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "schedule-reminder dot and dose-due indicator — gentle, reassuring",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.96); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 240,
+        iteration: "once",
+        purpose: "modal, popover, tooltip — confirms tap without alarm",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1600,
+        iteration: "infinite",
+        purpose: "lab-result loading skeleton — sweep across cream surface",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid peach fill with white text, rounded-2xl, shadow-card. " +
+      "Secondary = ghost (1px border, foreground text). Tertiary = text-link with primary color. " +
+      "Hover: shadow-card-lg and brightness shift only — no scale on primary (jumpiness reads alarming in healthcare). " +
+      "Destructive coral fill is reserved for cancel-subscription, delete-record, and stop-medication — never decorative.",
+    card:
+      "Rounded-2xl, white fill on cream background, 1px warm border, shadow-card. " +
+      "Internal padding p-6 lg:p-8. Title in Plus Jakarta 600; body in Manrope 400. " +
+      "Hover lifts to shadow-card-lg. Product cards add a sage-soft or peach-soft inner pill for category.",
+    input:
+      "Full rounded-xl box, 1px warm border, white background on cream pages. " +
+      "Label sits above in Plus Jakarta 500, slightly larger than field text — patient-friendly. " +
+      "Focus = 2px peach ring at 40% opacity. Helper text below in muted-foreground. " +
+      "Error state uses coral border + coral helper, never red bg fill.",
+    cta:
+      "Solid peach primary is the default — DTC healthcare conversion-driven. " +
+      "Hero CTAs may pair primary with a ghost secondary side-by-side. Never two solid CTAs adjacent.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--peach) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/home-decor/THEME.md

@@ -0,0 +1,94 @@
+# Design Direction — Home-Decor
+
+## Ethos
+Anthropologie soft floral · McGee & Co curated traditional · Schoolhouse heritage hardware · Rejuvenation craftsman warmth · Soho Home boho-club glamour
+
+## Feel
+Decoration-forward. Cream and plaster surfaces carry soft floral patterns; serif display sets every room name in italic; brass and olive accent the curated room gallery. The page reads like a Schoolhouse catalog spread or an Anthropologie lookbook — every surface earns its decoration, patterns are the background not the chrome, and rooms are styled rather than photographed. The audience is decorating a first house, refreshing for spring, or pulling together a holiday tablescape; the layout returns inspiration ("here's a styled room you can shop") rather than performing minimalism.
+
+## Reference brands
+- **Anthropologie** → soft floral pattern surfaces, serif display, curated room gallery, dreamy lookbook editorial.
+- **McGee & Co** → curated-traditional rooms, warm cream, brass accents, transitional-style staging, Studio McGee designer voice.
+- **Schoolhouse** → heritage hardware, Cooper Hewitt-style serif, Portland craftsman warmth, "made by hand" provenance.
+- **Rejuvenation** → American craftsman, aged brass, olive accent, restored-warehouse romance, lighting-as-jewelry.
+- **Soho Home** → boho-club aesthetic, plaster pink, olive green, members'-house gallery framing, Soho House interior moments.
+
+## 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 plaster** (background, pattern host) → **lighter plaster** (card, gallery-frame feel) → **deeper plaster** (secondary, pattern panels) → **stone-plaster** (muted). Depth comes from soft warm shadows and gallery-mat borders, never from cold neutral chrome.
+
+Brand tokens: `--plaster`, `--plaster-deep`, `--brass`, `--brass-deep`, `--olive`, `--olive-soft`, `--blush`, `--ink`. Primary is **Rejuvenation aged brass** — the canonical curated-home accent on CTAs and focus rings. Olive is the boho-club accent (plant tags, seasonal-lookbook chips). Blush is a rare soft floral pattern accent.
+
+## Typography
+- **Display:** Playfair Display (Anthropologie/McGee serif). h1–h4, weights 400/500/600/700. Italic variants are core — room names are always italic. Tracking `-0.01em`.
+- **Body:** Lora (Schoolhouse/Rejuvenation body serif), weights 400/500/600. Body base **17px** with **line-height 1.7**. Catalog body is serif here — sans reads modern-tech and breaks the curated language.
+- **Mono:** JetBrains Mono. Used for SKUs, dimensions, event timestamps — small-caps catalog metadata.
+
+H1 uses `clamp(2.5rem, 6.5vw, 5rem)`. Prices may use old-style figures (`"onum"` on) for catalog warmth. Font features: `"liga"`, `"dlig"`, `"kern"`, `"onum"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-10` — wide enough for 3-up styled room gallery with breathing room.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-20 lg:py-28`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80 96 128.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. Pure black and pure white are forbidden — `--ink` (warm walnut) and plaster variants do the work. Brass and olive are the two accent colors, used together (a styled room has brass lighting and olive plants); blush is the rare third pattern accent for floral moments.
+
+Pattern fills are part of the language — a soft floral SVG repeat at low opacity on the hero, pattern panels in `--plaster-deep` for editorial breaks. If the page reads color-bare, the decoration has gone missing.
+
+## Radius
+`--radius: 0.5rem` (8px). Soft gallery-frame, never pillowy. Pills allowed (`pillsAllowed: true`) for shop-the-room product chips, seasonal tags, event RSVP. Cards use rounded-lg. Buttons use rounded-md.
+
+## Shadows
+**Soft.** Three utilities:
+- `.shadow-gallery` — default gallery-card lift (1px ambient + 8px warm walnut-tint shadow)
+- `.shadow-gallery-lg` — hover state, deeper walnut tint
+- `.border-decorative` — inset brass hairline + 4px plaster mat (gallery-frame matting effect for hero room-tiles)
+
+Shadows carry a warm walnut tint, never cold neutral — that reads modern-tech and breaks the curated language.
+
+## Motion
+Three keyframes — `fade-rise` (gallery-card entrance, 800ms — slow lookbook pacing), `pattern-drift` (soft floral pattern on hero bg only, 26000ms infinite, single instance per page), `scale-in` (shop-the-room chip reveal on room-tile hover, 280ms).
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored. Motion is lookbook-paced, slower than the modern-catalog directions — the audience is browsing for inspiration, not scanning for a quick purchase.
+
+## Component patterns
+- **Buttons:** Solid-fill primary (brass bg, plaster text, rounded-md, shadow-gallery). Secondary is plaster card with brass border. Tertiary is text-link in brass-deep with serif italic. Pills carry shop-the-room product chips and event RSVP. Hover lifts shadow-gallery → shadow-gallery-lg.
+- **Cards:** Rounded-lg, plaster bg (not white — white reads modern, plaster reads curated), brass-tinted border, shadow-gallery. Internal padding `p-6 lg:p-8`. Title in Playfair italic; body in Lora 400. Hero room-tile cards may use the border-decorative inset utility (gallery-frame mat effect).
+- **Inputs:** Full rounded-md box, plaster border, plaster card bg. Focus = brass 2px ring at 40% opacity. Label above in small-caps Lora with letter-spacing 0.16em.
+- **CTAs:** Brass-fill primary button is the default. Secondary CTAs use plaster-card button or text-link in brass-deep italic. Shop-the-room is a pill row inside each gallery card, never a separate page navigation.
+
+## Recommended rich media
+Home-decor photography is **styled rooms in golden-hour light**. Every hero is a fully-styled vignette — a dining table with a half-set tablescape, a living room with a folded throw and an open book, a bedroom with morning sheets pulled back. Color-graded warm, slightly desaturated, never high-key flash. Schoolhouse-style provenance ("Lit by the Schoolhouse Princeton pendant, in aged brass") is woven into captions.
+
+**AI tool recommendations:** **Midjourney / Flux** for *"styled living room with brass pendant, olive velvet sofa, plaster walls, golden hour through linen curtains, Anthropologie editorial aesthetic, slight film grain"*; *"holiday tablescape, brass candlesticks, olive linen runner, dried wheat, McGee & Co styled, warm window light"*. Avoid Midjourney's default architectural-render output — explicitly prompt for "lived-in, half-styled, casual, golden hour, no studio flash."
+
+**Aspect ratios:** 4:5 portrait for room gallery cards, 3:2 landscape for hero lookbook spreads, 1:1 square for shop-the-room product chips.
+
+**Video:** lookbook-style 12-second slow-pan-across-a-styled-room loops are core, ≤4 MB, H.265, no audio. Designer-walkthrough video is encouraged on collection drops, with the designer in-frame.
+
+**Performance:** room gallery images ≤140 KB WebP at 1400w; hero ≤280 KB. LCP under 2.6s — lookbook audiences tolerate slightly slower loads for higher image quality.
+
+**Avoid:** showroom-cold mid-century photography (mid-century territory), beige-on-beige influencer minimalism, watermark stock, 3D render placeholders, gradient backgrounds with no pattern, glassmorphic anything, anything that looks like a 2018 white-walls Instagram aesthetic.
+
+**Accessibility:** alt-text describes the styled vignette: *"A dining room set for late-afternoon: olive linen runner across a walnut table, brass candlesticks lit, McGee & Co Sutton chairs in cream bouclé, an open cookbook left on the corner."*
+
+## Component families
+- **Styled room gallery card** — plaster bg, gallery-frame mat border, room photo, room name in Playfair italic, shop-the-room product chip row.
+- **Seasonal lookbook strip** — horizontal scroll of 5–6 mood-image tiles with chapter titles ("Autumn Tablescape · Chapter 03").
+- **In-store events list** — vertical list of dates, venue, host designer, RSVP pill.
+
+## Details
+- **Selection:** `hsl(var(--brass) / 0.22)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — brass, visible on plaster.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (a dark holiday-collection takeover where the plaster surface inverts to deep walnut), add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/home-decor/tokens.ts

@@ -0,0 +1,177 @@
+import type { Direction } from "../schema";
+
+// Note: "home-decor" is not yet in the Direction["name"] enum.
+// The schema is closed; until it is extended this file casts the name.
+// All other fields fully validate.
+
+export const homeDecor: Direction = {
+  name: "home-decor" as Direction["name"],
+  ethos:
+    "Anthropologie soft floral · McGee & Co curated traditional · Schoolhouse heritage hardware · Rejuvenation craftsman warmth · Soho Home boho-club glamour",
+  references: [
+    { brand: "Anthropologie", trait: "soft floral pattern surfaces + serif display + curated room gallery" },
+    { brand: "McGee & Co", trait: "curated-traditional rooms + warm cream + brass accents + transitional style" },
+    { brand: "Schoolhouse", trait: "heritage hardware + Cooper Hewitt serif + Portland craftsman warmth" },
+    { brand: "Rejuvenation", trait: "American craftsman + aged brass + olive + restored-warehouse romance" },
+    { brand: "Soho Home", trait: "boho-club + plaster pink + olive + members'-house gallery framing" },
+  ],
+  feel:
+    "Decoration-forward. Cream and plaster surfaces carry soft floral patterns; serif display sets " +
+    "every room name in italic; brass and olive accent the curated room gallery. The page reads like " +
+    "a Schoolhouse catalog spread or an Anthropologie lookbook — every surface earns its decoration, " +
+    "patterns are the bg not the chrome, and rooms are styled rather than photographed.",
+
+  fonts: {
+    display: {
+      family: "Playfair Display",
+      fallback: ["Cormorant Garamond", "Didot", "Georgia", "serif"],
+      from: "Anthropologie/McGee serif display — high-contrast, italic-first, room-name-in-script feel",
+      googleFont: "Playfair+Display",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Lora",
+      fallback: ["Crimson Pro", "Iowan Old Style", "Georgia", "serif"],
+      from: "Schoolhouse/Rejuvenation body serif — warm, readable, never sans for catalog body",
+      googleFont: "Lora",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "SKU + dimensions + event-time stamps — small-caps catalog metadata",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",         // high-contrast serif barely tightened
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"liga", "dlig", "kern", "onum"',  // old-style figures + ligatures
+    h1ScaleClamp: "clamp(2.5rem, 6.5vw, 5rem)",
+    bodyBaseSize: "1.0625rem",          // 17px — lookbook reading column
+    bodyLineHeight: "1.7",
+  },
+
+  colors: {
+    background: { hsl: "30 32% 94%", from: "Anthropologie warm plaster cream — soft floral pattern host surface" },
+    foreground: { hsl: "20 25% 18%", from: "Schoolhouse aged-walnut ink — deep warm brown, holds brass and olive" },
+    card: { hsl: "30 38% 97%", from: "lighter plaster — card lifts off the patterned bg, gallery-frame feel" },
+    popover: { hsl: "30 38% 97%", from: "same as card" },
+    primary: { hsl: "36 48% 46%", from: "Rejuvenation aged brass — the canonical curated-home accent" },
+    primaryForeground: { hsl: "30 38% 97%", from: "plaster on brass" },
+    secondary: { hsl: "30 26% 90%", from: "deeper plaster — secondary surface, pattern panels" },
+    secondaryForeground: { hsl: "20 25% 18%", from: "walnut-ink on deeper plaster" },
+    muted: { hsl: "30 20% 87%", from: "stone-plaster — muted floral pattern bg" },
+    mutedForeground: { hsl: "20 15% 40%", from: "warm gray — captions, designer credits, event times" },
+    accent: { hsl: "85 22% 42%", from: "Soho Home olive — second accent for plant-tag and seasonal chips" },
+    accentForeground: { hsl: "30 38% 97%", from: "plaster on olive" },
+    border: { hsl: "30 22% 82%", from: "warm plaster hairline — visible on bg, frames pattern panels" },
+    input: { hsl: "30 22% 82%", from: "same as border" },
+    ring: { hsl: "36 48% 46%", from: "brass primary, focus only" },
+    destructive: { hsl: "0 50% 42%", from: "muted oxblood — sold-out / unavailable, never alarm red" },
+    destructiveForeground: { hsl: "30 38% 97%", from: "plaster on oxblood" },
+    brand: {
+      plaster: { hsl: "30 32% 94%", from: "= background; Anthropologie warm plaster cream" },
+      "plaster-deep": { hsl: "30 26% 90%", from: "secondary plaster — one tone deeper for pattern panels" },
+      brass: { hsl: "36 48% 46%", from: "= primary; Rejuvenation aged brass — curated-home accent" },
+      "brass-deep": { hsl: "34 52% 32%", from: "Rejuvenation brass hover — gradient anchor, deeper patina" },
+      olive: { hsl: "85 22% 42%", from: "= accent; Soho Home olive — boho-club plant accent" },
+      "olive-soft": { hsl: "85 18% 80%", from: "olive tint — soft pattern fill for plant-tag chips" },
+      blush: { hsl: "12 45% 78%", from: "Soho Home plaster-pink — soft floral pattern accent, rare" },
+      ink: { hsl: "20 25% 18%", from: "= foreground; aged-walnut ink, semantic for headings and body" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],
+    containerMax: "max-w-6xl",         // wide enough for 3-up styled room gallery
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-20 lg:py-28",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",                     // 8px — soft gallery-frame, never pillowy
+    pillsAllowed: true,                 // pills for shop-the-room chips, seasonal tags, event RSVP
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-gallery":
+        "0 1px 2px hsl(20 25% 18% / 0.06), 0 8px 24px hsl(20 25% 18% / 0.10)",
+      "shadow-gallery-lg":
+        "0 2px 4px hsl(20 25% 18% / 0.08), 0 20px 48px hsl(20 25% 18% / 0.14)",
+      "border-decorative":
+        "inset 0 0 0 1px hsl(36 48% 46% / 0.3), inset 0 0 0 4px hsl(30 38% 97%)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 800,
+      loop: 2400,
+      ambient: 26000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 800,
+        iteration: "once",
+        purpose: "gallery-card entrance — slow lookbook pacing, never snappy",
+      },
+      "pattern-drift": {
+        css:
+          "from { background-position: 0 0; }\n" +
+          "to { background-position: 32px 32px; }",
+        defaultDuration: 26000,
+        iteration: "infinite",
+        purpose: "soft floral pattern drift on hero bg only — barely-perceptible, single instance per page",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.97); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 280,
+        iteration: "once",
+        purpose: "shop-the-room chip reveal on room-tile hover",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid-fill primary (brass bg, plaster text, rounded-md, shadow-gallery). " +
+      "Secondary is plaster card with brass border. Tertiary is text-link in brass-deep with serif italic. " +
+      "Pills carry shop-the-room product chips and event RSVP. Hover lifts shadow-gallery → shadow-gallery-lg.",
+    card:
+      "Rounded-lg, plaster bg (not white — white reads modern, plaster reads curated), brass-tinted border, " +
+      "shadow-gallery. Internal padding p-6 lg:p-8. Title in Playfair italic; body in Lora 400. " +
+      "Hero room-tile cards may use the border-decorative inset utility (gallery-frame mat effect).",
+    input:
+      "Full rounded-md box, plaster border, plaster card bg. Focus = brass 2px ring at 40% opacity. " +
+      "Label above in small-caps Lora with letter-spacing 0.16em.",
+    cta:
+      "Brass-fill primary button is the default. Secondary CTAs use plaster-card or text-link in brass-deep italic. " +
+      "Shop-the-room is a pill row inside each gallery card, never a separate page.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brass) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};