@stylecrib/cli 0.3.1 → 0.3.3

package/themes/banking-gravity/tokens.ts

@@ -0,0 +1,169 @@
+import type { Direction } from "../schema";
+
+export const bankingGravity: Direction = {
+  name: "banking-gravity",
+  ethos:
+    "Goldman Sachs gravitas · JPMorgan heritage · BlackRock institutional weight · Morgan Stanley sobriety · capital-markets restraint",
+  references: [
+    { brand: "Goldman Sachs", trait: "deep navy, serif touches, restrained corporate voice" },
+    { brand: "JPMorgan Chase", trait: "heritage blue, 150-year institutional weight" },
+    { brand: "Morgan Stanley", trait: "slate sobriety, heritage serif mark" },
+    { brand: "BlackRock", trait: "institutional gravity, asset-manager restraint" },
+    { brand: "Vanguard", trait: "conservative blue, fiduciary tone" },
+    { brand: "Bloomberg Wealth", trait: "data-meets-gravitas hybrid" },
+  ],
+  feel:
+    "Capital-markets institutional. Deep navy backgrounds, restrained brand-mark accent (heritage gold), " +
+    "serif touches for gravitas — WSJ/FT layout convention of serif display + sans body. " +
+    "Reads 'we have been trustworthy for 150 years' — never trendy, never cheerful, always informed. " +
+    "Print-document formality at screen scale.",
+
+  fonts: {
+    display: {
+      family: "EB Garamond",
+      fallback: ["Tiempos Headline", "Caslon Pro", "Iowan Old Style", "Garamond", "Georgia", "serif"],
+      from: "Tiempos/Caslon gravitas — closest open serif. The headline-serif moment heritage banks use for trust.",
+      googleFont: "EB+Garamond",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "sans-serif"],
+      from: "Goldman/JPMorgan modern sans body — heritage-but-modern hybrid",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular financial numerics — basis points, returns, AUM figures",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",                                // serifs set tight, not crunched
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "zero", "lnum", "ss01"',     // tabular lining figures + slashed zero — finance non-negotiable
+    h1ScaleClamp: "clamp(2.25rem, 4.5vw, 3.75rem)",            // restrained — institutional, not marketing-loud
+    bodyBaseSize: "0.9375rem",                                 // 15px — readable but information-dense
+    bodyLineHeight: "1.55",                                    // medium-tight — financial body, not editorial prose
+  },
+
+  colors: {
+    // Surfaces — deep institutional navy, the Goldman/JPMorgan brand-mark family
+    background: { hsl: "220 35% 12%", from: "Goldman/JPMorgan brand-mark deep navy" },
+    foreground: { hsl: "38 25% 92%", from: "warm cream off-white — never pure white; heritage paper feel" },
+    card: { hsl: "218 30% 22%", from: "navy-mid surface tier — stacked panels on deep navy" },
+    popover: { hsl: "218 28% 18%", from: "dropdown/menu surface between bg and card" },
+
+    // Primary — heritage gold, the capital-markets accent
+    primary: { hsl: "38 65% 55%", from: "heritage gold — JPMorgan/Goldman secondary brand-mark accent" },
+    primaryForeground: { hsl: "220 35% 12%", from: "deep navy on gold — formal, never paper-on-gold" },
+
+    // Secondary surfaces — deeper navy tiers for stacking
+    secondary: { hsl: "219 28% 18%", from: "navy panel divider tier" },
+    secondaryForeground: { hsl: "38 25% 92%", from: "cream on navy panel" },
+    muted: { hsl: "219 25% 20%", from: "muted navy panel — secondary text container" },
+    mutedForeground: { hsl: "215 15% 68%", from: "cool slate — axis ticks, datelines, sub-headings" },
+    accent: { hsl: "218 28% 26%", from: "hover surface, one tier above secondary" },
+    accentForeground: { hsl: "38 25% 92%", from: "cream on hover" },
+
+    // Borders — hairline, the dominant structural language
+    border: { hsl: "218 22% 30%", from: "hairline navy — Morgan Stanley table rule, barely visible" },
+    input: { hsl: "218 22% 30%", from: "same as border — formal input chrome" },
+    ring: { hsl: "38 65% 55%", from: "heritage gold — focus only" },
+
+    // Destructive — restrained alarm, never bright
+    destructive: { hsl: "358 55% 38%", from: "deep restrained alarm — Morgan Stanley red mark family" },
+    destructiveForeground: { hsl: "38 25% 92%", from: "cream on deep red" },
+
+    brand: {
+      "navy-deep": { hsl: "220 35% 12%", from: "alias of bg — Goldman/JPMorgan brand-mark navy" },
+      "navy-mid": { hsl: "218 30% 22%", from: "surface tier — alias of card" },
+      "cream-paper": { hsl: "38 25% 92%", from: "alias of fg — heritage paper warm off-white" },
+      "accent-blue": { hsl: "213 60% 40%", from: "secondary corporate-blue accent — JPMorgan heritage blue tier" },
+      "success-green": { hsl: "140 45% 38%", from: "restrained gain green — never bright; performance positive" },
+      "danger-deep": { hsl: "358 55% 38%", from: "alias of destructive — restrained loss/alarm" },
+      "heritage-gold": { hsl: "38 65% 55%", from: "alias of primary — capital-markets gold accent" },
+      "slate-rule": { hsl: "215 15% 68%", from: "alias of muted-fg — dateline and rule-text color" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],   // medium-high density
+    containerMax: "max-w-6xl",                                   // wide enough for tables, narrow enough for prose
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-12 lg:pt-28 lg:pb-16",                     // formal but not oversized
+      default: "py-16 lg:py-24",
+      tight: "py-12",
+    },
+  },
+
+  radius: {
+    base: "0.125rem",         // 2px — formal print-document feel
+    pillsAllowed: false,      // no marketing pills — institutional surfaces don't use them
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "shadow-page":
+        "0 1px 2px 0 hsl(220 50% 4% / 0.4), 0 0 0 1px hsl(var(--border))",
+      // very subtle page-edge drop for stacked surfaces — print stack feel, not soft-modern lift
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,            // restrained — capital-markets sites don't perform
+      loop: 0,                // no loops
+      ambient: 0,             // no ambient motion
+    },
+    keyframes: {
+      "fade-rise-quiet": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose:
+          "the only entrance — small, quiet, 200ms. Capital-markets formality: settle, do not perform.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Sparing. Primary = solid heritage gold with navy text, 2px radius, mono-uppercase label or sentence-case sans. " +
+      "Secondary = ghost with cream border (1px) and cream text. " +
+      "Tertiary = underlined gold text-link — many institutional sites lean on text-links over buttons. " +
+      "Buttons never glow, never gradient, never pill. Labels are formal: 'View prospectus', 'Request access', 'Read the report'.",
+    card:
+      "Sharp corners (rounded-sm, 2px). Hairline 1px border in --border, bg-card (navy-mid). " +
+      "Internal padding p-6 lg:p-8. Title in EB Garamond display serif. Eyebrow label in mono small-caps muted-fg. " +
+      "Body in Inter. Numbers in mono tabular. Optional .shadow-page on the outermost stacked surface only.",
+    input:
+      "1px border, bg-background, rounded-sm, h-9 px-3. Label sits above in mono small-caps muted-fg. " +
+      "Focus ring 2px heritage-gold. Numeric inputs tabular, right-aligned. " +
+      "No floating labels, no rounded pills — formal print-form chrome.",
+    cta:
+      "Hero CTAs are sparing — at most one primary gold button per surface. Secondary actions are gold underlined text-links. " +
+      "Language is formal: 'View the 2025 annual report', 'Speak with an advisor', 'Open an account'. " +
+      "Never 'Get started free' or 'Sign up now' — capital-markets restraint forbids retail-startup cheer.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/beauty-clean/THEME.md

@@ -0,0 +1,92 @@
+# Design Direction — Beauty-Clean
+
+## Ethos
+Glossier pink-powder · Saie milky cream · Topicals editorial inclusivity · Ilia barely-there packaging · Tata Harper apothecary green-cream
+
+## Feel
+Friendly cosmetic. Soft powder-pink and milky-cream surfaces, a single warm pop on CTAs, ingredient transparency as design language. The page reads like a Glossier showroom — not clinical, never moody, never extra. The audience is shopping a 5-minute regimen; the layout returns confidence and clarity rather than performing luxury. Lowercase serif logotype feel for display, humanist sans for body, soft pillow rounding everywhere.
+
+## Reference brands
+- **Glossier** → millennial pink, bubble-pillow shadows, lowercase serif logotype, packaging-photo-on-white aesthetic.
+- **Saie** → milky cream surfaces, black serif headlines, sparing pink pop on price tags.
+- **Topicals** → editorial-magazine ingredient transparency, warm friendly inclusive tone, full-bleed product photography.
+- **Ilia Beauty** → barely-there packaging photography, neutral sand backgrounds, clinical-clarity product cards.
+- **Tata Harper** → apothecary serif, soft green-cream pairing, ingredient-list-as-design (INCI on the front of the bottle).
+
+## 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 **milky cream** (background) → **white** (card — pure white, packaging-shot feel) → **deeper cream** (secondary) → **warm beige** (muted). Depth comes from pillow shadows and pink tint, never from heavy borders.
+
+Brand tokens: `--pink`, `--pink-deep`, `--pink-tint`, `--cream`, `--cream-deep`, `--sage`, `--apricot`, `--ink`. Primary is **Glossier signature pink** — the canonical brand mark. Sage and apricot are second-accent pops used sparingly (ingredient callouts, ritual-step numerals).
+
+## Typography
+- **Display:** Fraunces (Glossier/Topicals editorial serif). h1–h4, weights 400/500/600. Lowercase headlines preferred — the brand voice is friendly, not titled. Tracking `-0.02em`.
+- **Body:** DM Sans (Saie/Ilia humanist sans), weights 400/500/700. Body base **16px** with **line-height 1.65** — warm, readable, modern. Tracking `0.005em`.
+- **Mono:** JetBrains Mono. Used only for ingredient INCI lists and shade-codes — clinical numerals, sparingly.
+
+H1 uses `clamp(2.25rem, 6vw, 4.5rem)`. Numbers use tabular figures for prices. Font features: `"ss01"`, `"ss02"`, `"liga"` — Fraunces lowercase-tail stylistic sets are core, not optional.
+
+## Spacing
+- **Container:** `max-w-6xl px-5 lg:px-8` — wide enough for a 3-column product grid but not splash-page wide.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-14 lg:pt-28 lg:pb-20`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80 96. Medium density — product grids breathe but never feel sparse.
+
+## 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-on-pink are forbidden — `--ink` (deep plum) and pink-tint variants do the work. Pink appears on primary CTAs, price tags, and one new-product badge. If three pink elements appear in the same viewport, the page has tipped from friendly to noisy.
+
+## Radius
+`--radius: 1rem` (16px). **The soft pillow** — Glossier's signature. Pills allowed (`pillsAllowed: true`) for shade names, ingredient tags, review stars. Cards use rounded-2xl. Buttons use rounded-2xl. Inputs use rounded-xl. The rounding language is consistent and committed — no sharp corners except on inline ingredient-data tables.
+
+## Shadows
+**Soft pillow.** Three utilities:
+- `.shadow-pillow` — default product-card lift (1px ambient + 8px pink-tinted soft shadow)
+- `.shadow-pillow-lg` — hover state, slightly deeper pink tint
+- `.shadow-cream-inset` — inner highlight on white cards for packaging-photo feel
+
+Shadows carry a faint pink tint — this is the brand. Neutral-gray shadows read app/SaaS and break the cosmetic language.
+
+## Motion
+Three keyframes — `fade-rise` (product card entrance, 500ms — quick, friendly), `scale-in` (shade-swatch swap and add-to-bag confirmation, 220ms), `bob` (single new-product badge, 2200ms infinite, gentle attention pull).
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored. Motion is friendly-responsive, not ceremonial — beauty shoppers are scanning quickly and motion should confirm rather than perform.
+
+## Component patterns
+- **Buttons:** Solid-fill primary (pink bg, plum-ink text, rounded-2xl, shadow-pillow). Secondary is white card with plum border. Tertiary is text-link in pink-deep with underline-on-hover. Hover lifts shadow-pillow → shadow-pillow-lg with `scale(1.01)`. No ghost-only buttons — beauty CTAs commit.
+- **Cards:** Rounded-2xl, white bg, soft cream border, shadow-pillow. Internal padding `p-5 lg:p-7`. Title in Fraunces 500; price + ingredients in DM Sans. Hover lifts to shadow-pillow-lg.
+- **Inputs:** Full rounded-xl box, cream border, white bg. Focus = pink 2px ring at 35% opacity. Label above in DM Sans 500, helper text below in muted-foreground.
+- **CTAs:** Pink-fill primary button is the default. Secondary CTAs use white-card button or text-link in pink-deep. Ingredient lists are always a chip row, never a comma-separated paragraph — INCI-as-chips is the brand's transparency move.
+
+## Recommended rich media
+Beauty-clean photography is **packaging on white, lifestyle on cream**. Hero product shots are bottle-on-white-seamless with soft top-down shadow — Glossier/Ilia/Saie e-commerce style. Lifestyle imagery is hand-on-skin or product-in-routine, color-graded to warm afternoon light, never high-key flash. Skin tones are diverse and rendered accurately — this is a Topicals-era brand, not a 2010s wash-of-white.
+
+**AI tool recommendations:** **Midjourney / Flux** for *"e-commerce beauty product photography, frosted glass bottle on cream paper backdrop, soft top-down lighting, slight cast shadow, packaging-shot aesthetic"*; *"hands applying serum, warm afternoon window light, brown skin, editorial beauty"*. Avoid Midjourney's default glossy-magazine output — explicitly prompt for "matte packaging" and "no studio flash."
+
+**Aspect ratios:** 4:5 portrait for product cards (Instagram-shoppable proportion), 3:4 portrait for lifestyle, 16:9 only for the homepage hero video.
+
+**Video:** product-routine loops are acceptable — 4-second loop of pump-and-apply, no audio, ≤3 MB. Hero video may be a 12-second routine montage with subtle UI overlay.
+
+**Performance:** product card images ≤80 KB WebP at 800w; hero ≤200 KB. LCP under 2.2s — beauty shoppers bounce fast.
+
+**Avoid:** moody dark beauty (luxury territory), heavy retouching that flattens skin texture, watermark stock, glowing 3D bottle renders, gradient backgrounds, glassmorphic anything, AI photos with uncanny smiles, lens flare, gold-foil overlays. Old-school glossy-magazine retouching is over.
+
+**Accessibility:** alt-text names the SKU and key ingredient: *"Glossier Balm Dotcom in Birthday — pink tinted lip balm with castor oil, on a cream paper backdrop."*
+
+## Component families
+- **Product card** — square white tile, product image top, name in Fraunces, key-ingredient pill, price.
+- **Ritual step card** — numbered apricot circle, step name in Fraunces, product callout chip.
+- **Review chip row** — star count + reviewer initial avatar + one-line quote.
+
+## Details
+- **Selection:** `hsl(var(--pink) / 0.28)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)`. Soft pink — visible without screaming.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (a black-on-white limited-edition collab page where the pink palette is intentionally absent), add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/beauty-clean/tokens.ts

@@ -0,0 +1,176 @@
+import type { Direction } from "../schema";
+
+// Note: "beauty-clean" 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 beautyClean: Direction = {
+  name: "beauty-clean" as Direction["name"],
+  ethos:
+    "Glossier pink-powder · Saie milky cream · Topicals editorial inclusivity · Ilia barely-there packaging · Tata Harper apothecary green-cream",
+  references: [
+    { brand: "Glossier", trait: "millennial pink + bubble-pillow + lowercase serif logo" },
+    { brand: "Saie", trait: "milky cream surface + black serif headlines + soft pink pop" },
+    { brand: "Topicals", trait: "editorial-magazine ingredient transparency + warm friendly tone" },
+    { brand: "Ilia Beauty", trait: "barely-there packaging photography + neutral sands + clinical clarity" },
+    { brand: "Tata Harper", trait: "apothecary serif + soft green-cream + ingredient-list-as-design" },
+  ],
+  feel:
+    "Friendly cosmetic. Soft powder-pink and milky-cream surfaces, a single warm pop on CTAs, " +
+    "ingredient transparency as design language. Lowercase serif logotype feel for display, " +
+    "humanist sans for body. Soft rounded chrome, pillow shadows, the page reads like a Glossier " +
+    "showroom — not clinical, never moody, never extra.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Cormorant Garamond", "Georgia", "Times New Roman", "serif"],
+      from: "Glossier/Topicals editorial serif — soft, slightly quirky, lowercase-friendly",
+      googleFont: "Fraunces",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "DM Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Saie/Ilia humanist sans — warm, rounded, modern beauty-brand body voice",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "monospace"],
+      from: "ingredient INCI lists and shade-codes — clinical numerals, used sparingly",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",         // soft serif sits tight at display sizes
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"ss01", "ss02", "liga"',  // Fraunces stylistic sets, lowercase-tail variants
+    h1ScaleClamp: "clamp(2.25rem, 6vw, 4.5rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.65",
+  },
+
+  colors: {
+    background: { hsl: "20 40% 97%", from: "Saie milky cream — barely-tinted warm paper, never pure white" },
+    foreground: { hsl: "340 20% 18%", from: "Glossier deep plum-ink — softer than black, holds pink palette" },
+    card: { hsl: "0 0% 100%", from: "pure white card — lifts off the milky background, packaging-photo feel" },
+    popover: { hsl: "0 0% 100%", from: "same as card — popovers wear the same white as packaging" },
+    primary: { hsl: "344 70% 68%", from: "Glossier signature pink — the canonical brand-pink, not magenta" },
+    primaryForeground: { hsl: "340 30% 18%", from: "plum-ink on pink — never white, pink is too light" },
+    secondary: { hsl: "20 35% 94%", from: "deeper milky cream — pill chips, ingredient-tag surface" },
+    secondaryForeground: { hsl: "340 20% 18%", from: "plum-ink on cream" },
+    muted: { hsl: "20 25% 92%", from: "warm beige — quiet panels and divider stripes" },
+    mutedForeground: { hsl: "340 12% 42%", from: "warm-plum gray — captions, ingredient names" },
+    accent: { hsl: "344 60% 92%", from: "pink-tint hover surface — pink at low saturation for chips" },
+    accentForeground: { hsl: "340 30% 18%", from: "plum-ink on pink-tint" },
+    border: { hsl: "20 25% 88%", from: "warm cream hairline — visible on milky bg, never harsh" },
+    input: { hsl: "20 25% 88%", from: "same as border" },
+    ring: { hsl: "344 70% 68%", from: "Glossier pink, focus ring only" },
+    destructive: { hsl: "0 65% 55%", from: "warm coral-red — sold-out badge, never alarm red" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on warm red" },
+    brand: {
+      pink: { hsl: "344 70% 68%", from: "= primary; Glossier signature pink — the canonical brand-mark" },
+      "pink-deep": { hsl: "340 55% 52%", from: "Glossier deeper pink — hover state, gradient anchor" },
+      "pink-tint": { hsl: "344 60% 92%", from: "blush tint — review-card surface, ingredient pills" },
+      cream: { hsl: "20 40% 97%", from: "= background; milky Saie cream paper" },
+      "cream-deep": { hsl: "20 35% 94%", from: "secondary cream — one tone deeper" },
+      sage: { hsl: "120 18% 62%", from: "Tata Harper apothecary green — ingredient-callout dot, used sparingly" },
+      apricot: { hsl: "22 80% 76%", from: "Topicals warm apricot — second pop accent for ritual-step numerals" },
+      ink: { hsl: "340 20% 18%", from: "= foreground; deep plum-ink, semantic for all heading copy" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],
+    containerMax: "max-w-6xl",         // wide enough for 3-column product grids
+    containerPadding: "px-5 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-14 lg:pt-28 lg:pb-20",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1rem",                       // 16px — the soft pillow, Glossier signature
+    pillsAllowed: true,                 // pills carry shade names, ingredient tags, review stars
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-pillow":
+        "0 1px 2px hsl(340 20% 18% / 0.04), 0 8px 24px hsl(344 70% 68% / 0.10)",
+      "shadow-pillow-lg":
+        "0 2px 4px hsl(340 20% 18% / 0.05), 0 18px 48px hsl(344 70% 68% / 0.14)",
+      "shadow-cream-inset":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.7)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,
+      loop: 2200,
+      ambient: 18000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(10px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "product card entrance — quick rise, friendly responsiveness",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.96); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 220,
+        iteration: "once",
+        purpose: "shade-swatch swap, add-to-bag confirmation — confirms tap",
+      },
+      "bob": {
+        css:
+          "0%, 100% { transform: translateY(0); }\n" +
+          "50% { transform: translateY(-4px); }",
+        defaultDuration: 2200,
+        iteration: "infinite",
+        purpose: "single new-product badge — gentle attention pull",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid-fill primary (pink bg, plum-ink text, rounded-2xl, shadow-pillow). " +
+      "Secondary is white card with plum border. Tertiary is text-link in pink-deep with underline-on-hover. " +
+      "Hover lifts shadow-pillow → shadow-pillow-lg with scale(1.01). No ghost-only buttons.",
+    card:
+      "Rounded-2xl, white bg, soft cream border, shadow-pillow. Internal padding p-5 lg:p-7. " +
+      "Title in Fraunces 500; price + ingredients in DM Sans. Hover lifts to shadow-pillow-lg.",
+    input:
+      "Full rounded-xl box, cream border, white bg. Focus = pink 2px ring at 35% opacity. " +
+      "Label above in DM Sans 500, helper text below in muted-foreground.",
+    cta:
+      "Pink-fill primary button is the default. Secondary CTAs use white-card button or text-link " +
+      "in pink-deep. Ingredient-list is always a chip row, never a paragraph.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--pink) / 0.28)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/beauty-luxury/THEME.md

@@ -0,0 +1,96 @@
+# Design Direction — Beauty-Luxury
+
+## Ethos
+La Mer cream-and-jade vault · Augustinus Bader clinical-restraint cream · Sisley apothecary serif · Guerlain Orchidée Impériale gilded glass · Vintner's Daughter botanical alchemy
+
+## Feel
+Restrained luxury cosmetic. Ivory and cream surfaces hold a single SKU like a museum vitrine — champagne gold appears only on hairlines and seals, never as a fill. Italic serif tells the ingredient story; small-caps mono carries the technical lineage. The page reads like a Guerlain boutique window at dusk: ceremonial, withholding, expensive in its silence. The audience is buying a $440 cream and expects the layout to behave like the bottle: weighty, considered, photographed once and well.
+
+## Reference brands
+- **La Mer** → deep ocean cream jar, jade green seal, serif logotype, single-product-per-page reverence.
+- **Augustinus Bader** → clinical white-on-cream, restrained navy, TFC8 minimalism, ingredient-as-science.
+- **Sisley Paris** → old-world apothecary serif, cream paper, gold-leaf detailing, French heritage voice.
+- **Guerlain Orchidée Impériale** → gilded glass jar, ivory, champagne gold, heritage seal, dusk lighting.
+- **Vintner's Daughter** → botanical alchemy, ivory paper, sage, single-product reverence, founder-story prose.
+
+## 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 **ivory** (background) → **ivory-deep** (card, half a tone up) → **stone-cream** (muted) → **jade-pale or ivory-deep** (accent tints). Depth comes from hairline rules and ceremonial whitespace, never from heavy fill differentiation. The card token is barely differentiated — vitrine, not panel.
+
+Brand tokens: `--ivory`, `--ivory-deep`, `--gold`, `--gold-deep`, `--jade`, `--jade-pale`, `--navy`, `--ink`. Primary is **Guerlain champagne gold** — used as hairline, seal, focus, and exactly one filled CTA per page. Jade is the single saturated counterpoint (La Mer seal); navy appears once, on the lot-number block (Augustinus Bader nod).
+
+## Typography
+- **Display:** Cormorant Garamond (Sisley/Guerlain apothecary serif). h1–h4, weights 300/400/500. Italic variants are core, not decoration — ingredient stories are told in italic. Tracking `-0.005em`.
+- **Body:** Cormorant (La Mer/Vintner's Daughter body serif). Body base **17px** with **line-height 1.75**. Luxury beauty rarely uses sans for body — the brand voice is heritage-prose, not product-marketing. Tracking `0.01em`.
+- **Mono:** JetBrains Mono. Used only for ingredient INCI lists, lot numbers, and technical lineage. Small-caps, tracked-out 0.28em — instrument-feel for laboratory specificity.
+
+H1 uses `clamp(2.25rem, 5.5vw, 4rem)`. Prices use old-style figures (`"onum"` feature on). Font features: `"liga"`, `"dlig"`, `"onum"`, `"kern"`.
+
+## Spacing
+- **Container:** `max-w-4xl px-6 lg:px-12` — narrow boutique vitrine column. This is not a splash page.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-32` (ceremonial)
+  - Default: `py-24 lg:py-40`
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 24 32 48 64 96 128 160 192. Sparse — luxury withholding.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. Pure white and pure black are forbidden — `--ivory` and `--ink` (deep warm earth) replace them.
+
+Gold is a hairline color, not a fill color. Exception: the single primary CTA per page may be gold-fill on ivory — once. Jade appears at most twice per page (one ingredient-callout dot, one seal hairline). If the page reads gold-heavy, the restraint has collapsed and the brand reads as costume jewelry instead of heritage.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** La Mer, Guerlain, Sisley do not round; rounding reads app/SaaS and undermines the heritage-cosmetic language. Pills are disallowed (`pillsAllowed: false`) — tags are hairline-bounded small-caps text, never rounded chips.
+
+## Shadows
+**Minimal.** Three utilities:
+- `.shadow-vitrine` — single product showcase lift (1px stone bottom + soft 24px earth-ink shadow); the museum-vitrine effect
+- `.shadow-gold-hairline` — inset 1px gold hairline at 45% opacity; the seal treatment for hero product cards
+- `.shadow-quiet` — single 1px stone-tinted bottom rule
+
+No drop shadows on standard content. No glows. No colored shadows beyond the gold hairline.
+
+## Motion
+Three keyframes — `fade-rise` (section entrance, **1400ms** — ceremonial pacing), `fade-in` (ingredient-story paragraph and product-shot, 1200ms, opacity only), `gold-sheen` (gold hairline-rule on seal/monogram only, 4800ms infinite, **never on text**, never on multiple elements).
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored. The page settles; it does not perform. Reveal at 1400ms is deliberate — luxury beauty shoppers expect ceremony, not snappy SaaS responsiveness.
+
+## Component patterns
+- **Buttons:** Text-link CTAs by default — earth-ink with hairline gold underline appearing on hover. Solid gold-fill is reserved for the single primary action per page (Reserve, Discover, Add to Vanity). No secondary solid buttons. No pills, no chips. Destructive uses muted-oxblood text-link.
+- **Cards:** No card chrome by default. When grouping is essential, hairline 1px gold-tinted border + ivory-deep bg + shadow-vitrine — a single vitrine per page. Internal padding `p-10 lg:p-16`. Title in Cormorant italic; body in Cormorant 400.
+- **Inputs:** Border-bottom only, 1px gold at 45% opacity. Ivory bg, no full box. Label sits above in small-caps mono with letter-spacing 0.28em. Focus = gold 1px underline, no glow. Placeholder italic, lowercase.
+- **CTAs:** Primary CTA is a text-link with hairline gold underline. The single hero action per page may use a gold-fill rectangle with ivory text — once, never twice. All other actions are text-links. Marketing flourish does not exist in this language.
+
+## Recommended rich media
+Beauty-luxury photography is **product-as-still-life at dusk**. The hero is a single glass jar photographed in chiaroscuro late-afternoon light — warm key from camera-left, deep shadow on the right side of the bottle. Backgrounds are ivory paper or marble; never seamless studio white (that reads e-commerce, not vault). Color-graded to Kodak Portra 400 warmth with a slight champagne highlight.
+
+Hands are rare and editorial when used — a single hand cradling the jar, never face-forward product-demo. The audience is buying *the object*, not watching an influencer apply it.
+
+**AI tool recommendations:** **Midjourney / Flux** for *"luxury cosmetic still life, gilded glass jar on ivory paper, late afternoon window light, deep chiaroscuro shadow, Kodak Portra 400, slight grain, editorial heritage"*; *"single ingredient botanical photograph, dried orchid on cream paper, museum specimen lighting, 100mm macro"*. Avoid Midjourney's default beauty output — explicitly prompt for "no studio flash, no high-key, no e-commerce."
+
+**Aspect ratios:** 4:5 portrait (vitrine proportion) or 1:1 square for botanical-ingredient stills. Never 16:9 (cinematic, wrong feel).
+
+**Video:** generally avoided. A 6-second ambient loop of light moving across a jar surface is acceptable for the hero only, ≤2 MB, H.265, no audio.
+
+**Performance:** hero ≤200 KB AVIF at 1800w (heritage photography is worth the budget). Inline figures ≤80 KB. LCP under 2.5s.
+
+**Avoid:** seamless studio white (e-commerce territory), heavy flash retouching, watermark stock, glowing 3D bottle renders, gradient backgrounds, glassmorphic anything, gold-foil-overlay-on-photo, AI photos with uncanny smiles, pink (that's beauty-clean territory).
+
+**Accessibility:** alt-text is ceremonial: *"A crystal jar of Orchidée Impériale cream sits on an ivory marble shelf, late afternoon light catching the gilded brass collar."*
+
+## Component families
+- **Hero product vitrine** — single SKU, large vertical product shot, ingredient-list as small-caps mono column, gold-hairline frame.
+- **Ingredient story** — single italic-serif paragraph, centered, max-width 32rem, gold small-caps overline.
+- **Flagship boutique list** — city in italic-serif, address in body serif, hours in small-caps mono, hairline-rule separation.
+
+## Details
+- **Selection:** `hsl(var(--gold) / 0.22)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin, quiet champagne gold. Never a 2px glow ring.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (a navy-heavy clinical sub-brand page where Augustinus Bader's TFC8 minimalism dominates), add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.