@stylecrib/cli 0.3.1 → 0.3.3

package/themes/automotive-luxury/tokens.ts

@@ -0,0 +1,175 @@
+import type { Direction } from "../schema";
+
+// Note: name is not in the schema enum at install time; the codegen pipeline
+// accepts new slugs by string and the type guard is updated on next schema sync.
+export const automotiveLuxury = {
+  name: "automotive-luxury",
+  ethos:
+    "Bentley matte-black configurator · Rolls-Royce monogram restraint · Aston Martin product cinematography · Bugatti hyper-luxury minimalism · Maybach champagne mark",
+  references: [
+    { brand: "Bentley", trait: "matte black canvas, full-bleed configurator stills, single champagne accent" },
+    { brand: "Rolls-Royce", trait: "monogram restraint, spirit-of-ecstasy negative space" },
+    { brand: "Aston Martin", trait: "cinematic product photography, James Bond reveal cadence" },
+    { brand: "Bugatti", trait: "hyper-luxury minimalism, the page IS the car" },
+    { brand: "Maybach", trait: "champagne-gold mark, two-tone deep colorways" },
+  ],
+  feel:
+    "Matte near-black canvas carrying full-bleed bespoke product cinematography. " +
+    "A single champagne/gold accent does the entire interaction job — no secondary brand color competes. " +
+    "Type is a restrained high-contrast serif for model names, with a quiet condensed sans for specs. " +
+    "The page is a private showroom, not a marketplace.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Garamond",
+      fallback: ["EB Garamond", "Didot", "Bodoni 72", "Georgia", "serif"],
+      from: "Bentley / Rolls-Royce model-plate serif — high-contrast Garalde with a stamped-nameplate feel",
+      googleFont: "Cormorant+Garamond",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Helvetica Neue", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Aston Martin clean sans — neutral body that lets the serif and product still lead",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for price-from, 0-60, top speed — instrument-cluster heritage",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",       // Cormorant wants near-zero — nameplate feel, just shy of zero
+    bodyTracking: "0.01em",
+    fontFeatureSettings: '"liga", "dlig", "tnum", "ss01"',
+    h1ScaleClamp: "clamp(3rem, 8vw, 6.5rem)",   // model-name-as-title scale — the headline IS the car
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "30 6% 6%", from: "Bentley matte black — warm-tinted near-black, never pure" },
+    foreground: { hsl: "38 30% 94%", from: "warm parchment — Rolls-Royce monogram ivory, never pure white" },
+    card: { hsl: "30 5% 9%", from: "elevated matte surface — one stop above canvas" },
+    popover: { hsl: "30 5% 11%", from: "popover surface — two stops up, still matte" },
+    primary: { hsl: "41 52% 58%", from: "Bentley champagne — the single luxury accent that does all the work" },
+    primaryForeground: { hsl: "30 6% 6%", from: "matte black on champagne" },
+    secondary: { hsl: "30 4% 14%", from: "leather-shadowed deeper tier — bespoke interior trim" },
+    secondaryForeground: { hsl: "38 30% 94%", from: "parchment on shadow leather" },
+    muted: { hsl: "30 4% 16%", from: "muted matte — quiet panel surface" },
+    mutedForeground: { hsl: "38 14% 64%", from: "warm secondary text — showroom signage" },
+    accent: { hsl: "30 4% 18%", from: "hover surface — brushed-aluminum highlight" },
+    accentForeground: { hsl: "38 30% 94%", from: "parchment on accent" },
+    border: { hsl: "30 4% 20%", from: "panel-gap hairline — Bentley body-line tolerance, visible only on inspection" },
+    input: { hsl: "30 4% 20%", from: "same as border — single hairline language" },
+    ring: { hsl: "41 52% 58%", from: "champagne — focus ring is the canonical luxury accent" },
+    destructive: { hsl: "8 62% 50%", from: "brake-light red — warning lamp, never decoration" },
+    destructiveForeground: { hsl: "38 30% 94%", from: "parchment on brake red" },
+    brand: {
+      champagne: { hsl: "41 52% 58%", from: "= primary; Bentley champagne, the canonical luxury accent" },
+      "champagne-deep": { hsl: "38 48% 44%", from: "Maybach deeper champagne — gradient anchor for sheen utility" },
+      ivory: { hsl: "38 30% 94%", from: "= foreground; Rolls-Royce monogram ivory" },
+      "matte-black": { hsl: "30 6% 6%", from: "= background; Bentley matte canvas" },
+      "shadow-leather": { hsl: "30 4% 14%", from: "= secondary; bespoke interior trim shadow" },
+      brass: { hsl: "38 42% 48%", from: "Aston Martin brass-trim accent — vent surrounds, gauge bezels" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],
+    containerMax: "max-w-7xl",         // full-bleed product cinematography demands width
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-28 pb-20 lg:pt-40 lg:pb-28",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                   // tight chamfer — engineered, not pillow
+    pillsAllowed: false,               // pills read app/marketplace; bespoke showroom uses rectangles
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-champagne":
+        "0 0 0 1px hsl(var(--brand-champagne) / 0.35), " +
+        "0 8px 24px hsl(var(--brand-champagne) / 0.16), " +
+        "0 40px 120px hsl(var(--brand-champagne) / 0.18)",
+      "hairline-bottom":
+        "inset 0 -1px 0 hsl(var(--border))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1100,                    // slow on purpose — showroom reveal cadence
+      loop: 2400,
+      ambient: 32000,                  // ken-burns on hero stills
+    },
+    keyframes: {
+      "ken-burns": {
+        css:
+          "0% { transform: scale(1.05) translate(0, 0); }\n" +
+          "100% { transform: scale(1.14) translate(-1.5%, -0.8%); }",
+        defaultDuration: 32000,
+        iteration: "infinite",
+        purpose: "hero product still drift — Aston Martin slow product-film camera push",
+      },
+      "rise-in": {
+        css:
+          "from { opacity: 0; transform: translateY(28px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1100,
+        iteration: "once",
+        purpose: "section reveal — model card and bespoke configurator entrance",
+      },
+      "sheen": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 2800,
+        iteration: "infinite",
+        purpose: "champagne text/border sheen — Bentley winged-B engraving light sweep",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",                      // showroom breathing; never marketplace density
+
+  patterns: {
+    button:
+      "Text-link CTAs by default — champagne color, hairline underline-on-hover. " +
+      "The SINGLE hero action per page is allowed solid champagne-on-black, sharp 0.25rem corners. " +
+      "Secondary actions are hairline-outlined ghost buttons in ivory. " +
+      "Never a pill, never a colored fill that competes with champagne.",
+    card:
+      "Sharp 0.25rem corners. Hairline border (--border) on a matte card surface. " +
+      "Internal padding p-8 lg:p-12. Model cards lead with full-width product cinematography (16:9 or 21:9), " +
+      "model name in Cormorant display, spec line in mono.",
+    input:
+      "Border-bottom only (1px --border) on matte canvas. No full box. " +
+      "Label sits above in mono-uppercase, tracking 0.18em. Focus shifts border to champagne.",
+    cta:
+      "Text-link with champagne color and a sheen-on-hover treatment for the body of the page. " +
+      "Solid champagne rectangle for the single hero CTA (Configure / Request Test Drive). " +
+      "Never a pill, never a gradient that isn't champagne→champagne-deep.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-champagne) / 0.28)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+} satisfies Partial<Direction> & { name: string };

package/themes/baby-modern/THEME.md

@@ -0,0 +1,79 @@
+# Design Direction — Baby-Modern
+
+## Ethos
+Frida Baby playful clinical · Lalo soft pastel · Babyletto modern nursery · Newton Baby breathable-mattress whitespace · 4moms tech-meets-rocker
+
+## Feel
+Soft pastel modern. Cream paper with blush-pink and sky-blue accents, friendly humanist sans for chrome, rounded silhouettes everywhere. Reads new-parent-friendly: large targets, generous whitespace, candid "parent-tested" tone instead of scary medical language. The page feels like the nursery itself — calm, warm, considered — not a baby-store fluorescent aisle.
+
+## Reference brands
+- **Frida Baby** → playful clinical pink + "parent-tested" candor. The principal reference for tone and the blush primary.
+- **Lalo** → soft pastel, modular-furniture warmth, cream-on-cream stacking.
+- **Babyletto** → modern nursery: rounded silhouettes, cream surfaces, gender-neutral palette.
+- **Newton Baby** → breathable-mattress whitespace, calm pacing.
+- **4moms** → tech-meets-rocker engineering candor — the brand earns trust by being honest about how the thing works.
+
+## Tokens
+Surface stack is **cream paper** (background) → **white** (card) → **deeper cream / sky tint** (secondary / muted / accent). Brand tokens: `--blush`, `--sky`, `--cream`, `--sun`, `--mint`, `--ink`. Primary is `--blush` — playful pink, the principal action. `--sky` is the calm/info accent. `--sun` and `--mint` are decorative chips — never button faces. `--ink` is deep navy-slate, never black (gentle on tired eyes is non-negotiable).
+
+## Typography
+- **Display:** Quicksand. Soft humanist sans with rounded terminals — reads gentle without infantilizing. Weights 500–700.
+- **Body:** Nunito. Round humanist body, friendly at every size. 16px base, line-height 1.65 (looser than soft-modern; tired-parent comfort).
+- **Mono:** DM Mono. Reserved for age-band labels ("0–6 mo"), sizing charts, registry item-codes — kept warm, never sterile.
+
+H1 uses `clamp(2rem, 5vw, 3.5rem)` — restrained, never jumbotron. Tracking `-0.01em` on display, `0.005em` on body (a hair of air).
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8` — nursery-shelf width.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-14 lg:pt-28 lg:pb-20`
+  - Default: `py-14 lg:py-22`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 32 40 48 64 80.
+
+## Color
+No hex in components — tokens only. Pure white is permitted only for card surfaces (nursery-clean tile). Pure black is forbidden — use `--ink`. Saturated reds are reserved for `--destructive` (recall-notice, allergy alert) — never confuse blush-pink with alert-red. No "trust blue" — the brand earns trust through parent-tested candor.
+
+## Radius
+`--radius: 1.25rem` (20px). The softest of the DTC set; nursery-rounded. Pills (rounded-full) are the *default* for buttons — sharp-corner rectangles read clinical here. Square corners forbidden on interactive surfaces.
+
+## Shadows
+**Soft.** `.shadow-nursery` for standard cards, `.shadow-nursery-lg` for hover lift, `.shadow-pillow` for the cushioned hero/registry surfaces (combines blur + subtle inset-highlight). No glows.
+
+## Motion
+Three keyframes: `fade-rise` (500ms entrance), `soft-bounce` (320ms gentle pop for stage-tab selection / registry add-confirm), `soft-pulse` (2400ms loop for sleep-mode and feeding-reminder indicators). `prefers-reduced-motion` honored.
+
+Easing `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Component patterns
+- **Buttons:** primary = blush solid + white text, **rounded-full pill default**, h-12 minimum (tired-parent tap targets). Secondary = white + warm border + navy text. Tertiary = blush text-link.
+- **Cards:** rounded-2xl/3xl, white on cream, 1px warm border, shadow-nursery. Stage-tab cards get a 3px blush bottom-border when selected.
+- **Inputs:** rounded-2xl, 1px warm border, white fill, h-12 minimum. Focus = 3px blush ring at 30% opacity (soft, not laser).
+- **Stage tabs:** segmented pill control with 4 age bands (Newborn / 0–6 mo / 6–12 mo / 1 yr+). Active tab = blush fill + white text + soft-bounce on click. Inactive = white + navy ink.
+- **Parent-tested badges:** small pill chips with a tiny family-emoji glyph, blush-soft background, blush text. Used to flag "9 of 10 parents recommend" or "tested by 240 NICU nurses".
+- **Registry card:** white tile, rounded-3xl, product image at top, name + age-band chip + price below, large "Add to registry" pill spanning the bottom.
+
+## Recommended rich media
+Photography is the lead medium: babies in natural window light, parents mid-action (no posed family-portrait stock), nursery interiors with soft daylight, product close-ups on cream linen. Color graded to warm-cream highlight, sky-blue shadow. Aspect ratios 4:5 portrait for babies, 1:1 square for product (registry-friendly). Never 16:9 cinematic. No illustrated baby-icon decoration. No 3D renders of cribs.
+
+**AI tool recommendations:** Midjourney with *"natural window light, baby sleeping in modern nursery, Kodak Portra 400, cream linen, soft pastels, slight grain, shallow depth of field"*. Product: *"baby thermometer on cream linen, overhead, soft natural light, no props"*. Avoid bright commercial baby-product stock and "happy multicultural family" stock.
+
+**Performance:** hero ≤140 KB AVIF at 1600w; product inline ≤80 KB. LCP ≤2s.
+
+**Avoid:** stork imagery, pacifier-icon decoration, lullaby-cursive script type, "world's #1 mom" giftwrap copy, dark-mode toggle (tired-parent dark-mode is system-level), glassmorphic anything, fluorescent baby-blue or hot-pink, lab-coat product hero shots, "scientifically proven" certificate badges — that is competitor territory, not ours.
+
+**Accessibility:** alt-text describes the baby's age and posture, not the product. *"A six-month-old yawns mid-stretch in a cream-linen swaddle"* — not *"Baby on bed."* Tap targets ≥44×44 px (we default to ≥48 for sleep-deprived accuracy).
+
+## Component families
+None at install time. Stage-tabs, parent-tested-badge, and registry-card are the three canonical bespoke families.
+
+## Details
+- **Selection:** `hsl(var(--blush) / 0.22)` background, ink foreground.
+- **Focus ring:** `3px solid hsl(var(--ring) / 0.35)` — soft, not laser.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/baby-modern/tokens.ts

@@ -0,0 +1,184 @@
+import type { Direction } from "../schema";
+
+// baby-modern — Frida Baby / Lalo / Babyletto soft modern DTC for new parents.
+// Pastel pink + sky-blue + cream, soft humanist sans, rounded everything,
+// parent-tested badges. The chrome reads sleep-deprived-friendly: large
+// targets, generous whitespace, no scary clinical language.
+export const babyModern: Direction = {
+  name: "baby-modern" as Direction["name"],
+  ethos:
+    "Frida Baby playful clinical · Lalo soft pastel · Babyletto modern nursery · " +
+    "Newton Baby breathable-mattress whitespace · 4moms tech-meets-rocker",
+  references: [
+    { brand: "Frida Baby", trait: "playful clinical pink + 'parent-tested' candor" },
+    { brand: "Lalo", trait: "soft pastel + modular-furniture warmth" },
+    { brand: "Babyletto", trait: "modern nursery, rounded silhouettes, cream surfaces" },
+    { brand: "Newton Baby", trait: "breathable-mattress whitespace, calm pacing" },
+    { brand: "4moms", trait: "tech-meets-rocker engineering candor" },
+  ],
+  feel:
+    "Soft pastel modern. Cream paper with blush-pink and sky-blue accents, friendly " +
+    "humanist sans for chrome, rounded silhouettes everywhere. Reads new-parent-friendly: " +
+    "large targets, generous whitespace, candid 'parent-tested' tone instead of scary " +
+    "medical language. The page feels like the nursery itself — calm, warm, considered, " +
+    "not a baby-store fluorescent aisle.",
+
+  fonts: {
+    display: {
+      family: "Quicksand",
+      fallback: ["Nunito", "Plus Jakarta Sans", "system-ui", "sans-serif"],
+      from: "Frida Baby / Lalo — soft humanist sans with rounded terminals, reads gentle without infantilizing",
+      googleFont: "Quicksand",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Nunito",
+      fallback: ["Plus Jakarta Sans", "Inter", "system-ui", "sans-serif"],
+      from: "Babyletto / Newton — round humanist body, friendly at every size, low x-height stress",
+      googleFont: "Nunito",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "DM Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "monospace"],
+      from: "age-band labels, sizing charts, registry item-codes — kept warm, never sterile",
+      googleFont: "DM+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"ss01", "calt"',
+    h1ScaleClamp: "clamp(2rem, 5vw, 3.5rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.65",
+  },
+
+  colors: {
+    background: { hsl: "32 40% 97%", from: "Lalo cream — warm paper, softer than spa-white" },
+    foreground: { hsl: "232 24% 22%", from: "deep navy-slate — never black; gentle on tired eyes" },
+    card: { hsl: "0 0% 100%", from: "true white card — lifts off the cream for nursery-clean tiles" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "342 68% 68%", from: "Frida Baby blush — playful pink, principal action" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on blush" },
+    secondary: { hsl: "32 30% 93%", from: "deeper cream — secondary panel, brown-paper-bag warmth" },
+    secondaryForeground: { hsl: "232 24% 26%", from: "navy ink on cream panel" },
+    muted: { hsl: "32 26% 95%", from: "quiet cream — table row, helper bg" },
+    mutedForeground: { hsl: "232 12% 48%", from: "soft slate — captions, meta, age helper text" },
+    accent: { hsl: "204 70% 92%", from: "sky-blue tint — hover and stage-tab surface" },
+    accentForeground: { hsl: "204 60% 30%", from: "deep sky on tint" },
+    border: { hsl: "32 22% 88%", from: "warm hairline — never cool gray, never harsh" },
+    input: { hsl: "32 22% 88%", from: "same as border" },
+    ring: { hsl: "342 68% 68%", from: "primary blush, focus only" },
+    destructive: { hsl: "0 70% 56%", from: "safe alert red — recall-notice clarity, not blush-pink confusion" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on alert" },
+    brand: {
+      blush: { hsl: "342 68% 68%", from: "= primary; Frida Baby playful pink, principal brand" },
+      "blush-soft": { hsl: "342 70% 94%", from: "blush tint — stage-active chip, parent-tested-badge bg" },
+      sky: { hsl: "204 70% 62%", from: "Babyletto / Lalo sky-blue — secondary friendly accent" },
+      "sky-soft": { hsl: "204 70% 92%", from: "alias for accent — info banner, calm-mode pill" },
+      cream: { hsl: "32 40% 97%", from: "alias for background — Lalo nursery paper" },
+      sun: { hsl: "44 92% 72%", from: "Newton soft sunshine — daytime/feeding chip, never primary" },
+      mint: { hsl: "160 40% 78%", from: "soft mint — gender-neutral wellness mark, sleep-mode chip" },
+      ink: { hsl: "232 24% 22%", from: "alias for foreground — deep navy-slate, gentle on tired eyes" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-14 lg:pt-28 lg:pb-20",
+      default: "py-14 lg:py-22",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1.25rem",                  // 20px — softest of the DTC set; nursery-rounded
+    pillsAllowed: true,               // pills are core — age-stage tabs, parent-tested badges, registry chips
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-nursery":
+        "0 1px 2px hsl(342 30% 50% / 0.04), 0 6px 16px hsl(342 30% 50% / 0.06)",
+      "shadow-nursery-lg":
+        "0 2px 6px hsl(342 30% 50% / 0.05), 0 18px 40px hsl(342 30% 50% / 0.10)",
+      "shadow-pillow":
+        "0 8px 24px hsl(32 40% 60% / 0.10), inset 0 1px 0 hsl(0 0% 100% / 0.6)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 500,
+      loop: 2400,
+      ambient: 24000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "entrance for stage tabs, registry cards, parent-tested badges",
+      },
+      "soft-bounce": {
+        css:
+          "0% { transform: scale(0.95); }\n" +
+          "60% { transform: scale(1.04); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 320,
+        iteration: "once",
+        purpose: "stage-tab selection and add-to-registry confirmation — gentle pop, not jumpy",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { opacity: 1; transform: scale(1); }\n" +
+          "50% { opacity: 0.85; transform: scale(1.02); }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "sleep-mode indicator and feeding-reminder dot — slow nursery breathing",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid blush fill, white text, rounded-full (pill default — nursery softness). " +
+      "Secondary = white fill with 1px warm border, navy-ink text. Tertiary = blush text-link. " +
+      "Hover: shadow-nursery-lg + soft-bounce. Buttons are large by default (h-12 minimum) — " +
+      "tired-parent-friendly tap targets. No sharp-corner rectangles — they read clinical here.",
+    card:
+      "Rounded-2xl/3xl, white on cream, 1px warm border, shadow-nursery. " +
+      "Internal padding p-6 lg:p-8. Title in Quicksand 600, body in Nunito. " +
+      "Stage-tab cards may use a 3px blush bottom-border when selected.",
+    input:
+      "Rounded-2xl, 1px warm border, white fill. Tall (h-12 minimum) for sleep-deprived tap accuracy. " +
+      "Label sits above in Nunito 500. Focus = 3px blush ring at 30% opacity (soft, not laser). " +
+      "Helper text below in muted-foreground, never below 13px.",
+    cta:
+      "Primary blush pill is the principal action. " +
+      "'Build my registry' and 'Shop by stage' lead the page — never side-by-side competing CTAs. " +
+      "Sky-blue ghost is reserved for calm/info context (sleep mode, parent guide). " +
+      "Sun (yellow) and mint accents are decorative chips only — never button faces.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--blush) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "3px solid hsl(var(--ring) / 0.35)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/banking-gravity/THEME.md

@@ -0,0 +1,171 @@
+# Design Direction — Banking-Gravity
+
+## Ethos
+Goldman Sachs gravitas · JPMorgan heritage · BlackRock institutional weight · Morgan Stanley sobriety · capital-markets restraint
+
+## Feel
+Capital-markets institutional. Deep navy backgrounds, restrained brand-mark accent (heritage gold or a single corporate blue), serif touches for gravitas — the WSJ/FT convention of serif display + sans body. The page reads "we have been trustworthy for 150 years" — never trendy, never cheerful, always informed. Print-document formality at screen scale.
+
+A banking-gravity surface that feels playful, soft, or marketing-loud is off-direction. The voice is fiduciary, restrained, informed.
+
+## Reference brands
+- **Goldman Sachs** (goldmansachs.com) → deep navy, serif headline touches, restrained corporate voice. The benchmark for "we manage capital, not vibes."
+- **JPMorgan Chase** (jpmorgan.com) → heritage blue, 150-year institutional weight. The bank that has been a bank longer than most countries have had constitutions.
+- **Morgan Stanley** (morganstanley.com) → slate + heritage serif mark, fiduciary sobriety.
+- **BlackRock** (blackrock.com) → institutional gravity at asset-manager scale. The largest pool of capital on earth, and the design knows it.
+- **Vanguard** (vanguard.com) → conservative blue, fiduciary-first tone. The light-mode reference for retail-banking variants.
+- **Bloomberg Wealth** → the data-meets-gravitas hybrid. Where this direction tilts toward kinetic-data, Bloomberg Wealth is the bridge.
+
+## Tokens
+HSL triples in `src/index.css`. The deep navy background (`220 35% 12%`) is structural — pure black flattens the gravitas; warm-black skews marketing. Institutional navy is the trust signal.
+
+Brand tokens, all semantic:
+- `navy-deep` — alias of `--background`. Goldman/JPMorgan brand-mark navy.
+- `navy-mid` — `--card` surface tier. Stacked panels.
+- `cream-paper` — alias of `--foreground`. Warm cream off-white; **never pure white**. Heritage paper.
+- `heritage-gold` — alias of `--primary`. Capital-markets accent; used sparingly for the single emphatic action.
+- `accent-blue` — secondary corporate-blue accent (`213 60% 40%`). The JPMorgan heritage-blue tier for hyperlinks, info chrome, secondary chart series.
+- `success-green` — restrained gain green (`140 45% 38%`). **Never bright.** Performance-positive only.
+- `danger-deep` — alias of `--destructive`. Restrained alarm red; never the candy-red of consumer trading apps.
+- `slate-rule` — alias of `--muted-foreground`. Dateline, rule-text, footnote color.
+
+Color rules:
+- **Pure white is forbidden.** `--foreground` is warm cream. Pure white reads tech-startup, not heritage bank.
+- **Gold is the emphasis tone, not the volume tone.** A surface may have one gold element. Two is loud. Three is a marketing site.
+- **Greens and reds are restrained.** Capital-markets performance numbers use `success-green` and `danger-deep`, not the candy-green/brake-red of kinetic-data. Same semantics, lower saturation — the page is reporting, not trading.
+- **Accent-blue is for hyperlinks and secondary information.** Not for primary actions — that is gold's job.
+
+## Brand-book customization
+Heritage banks ship with specific brand colors that this generic direction abstracts. **Override before launch:**
+
+- **Primary brand-mark color** — replace `--primary` and `--heritage-gold`. Examples: Goldman teal (`190 60% 35%`), JPMorgan heritage blue (`213 70% 30%`), Morgan Stanley red (`358 70% 45%`), BlackRock black-on-gold (`42 80% 50%`). The structural choices (deep navy bg, cream fg, hairline borders, 2px radius, serif display) carry the gravitas regardless of which brand-mark sits on top.
+- **Secondary accent** — replace `--accent-blue`. The direction ships with corporate blue, but for institutions whose primary IS blue (JPMorgan, Vanguard), promote a slate gray or a deeper heritage red instead.
+
+**Serif-heavy vs sans-heavy modes** — institutions split into two camps; pick one explicitly before authoring:
+
+- **Serif-heavy** (Morgan Stanley, legacy private banks like Brown Brothers Harriman, Bessemer, Pictet) — EB Garamond extends into mid-level headings (h3, h4) and even pull-quotes. Body remains Inter. The serif voice is dominant; the surface reads like a private-bank annual report.
+- **Sans-heavy** (post-2018 Goldman rebrand, BlackRock, modern JPMorgan corporate surfaces) — EB Garamond is reserved for h1 and the occasional editorial pull-quote only. Most headings are Inter 600. The serif is a single accent moment per page, not a recurring voice. This is the default for modern institutional surfaces.
+
+Document the mode in the project knowledge so the Director enforces it consistently.
+
+**Light mode for retail-banking variants** — the direction ships dark canonical (corporate/wealth-management feel). For retail-banking surfaces (Chase retail vs JPMorgan corporate, Wells Fargo retail vs Wells corporate institutional), invert to a light variant:
+
+- `--background`: `38 25% 96%` (cream-paper, very slightly warmer than fg-cream)
+- `--foreground`: `220 35% 12%` (navy-deep becomes the text color)
+- `--card`: `0 0% 100%` (pure white surface tier — the one place pure white is permitted, as a card lift on cream)
+- `--border`: `220 14% 86%` (hairline navy at 86% lightness)
+- `--primary`, `--accent-blue`, `--success-green`, `--danger-deep`: unchanged — the brand-mark family carries from dark to light.
+- `--muted-foreground`: `215 20% 38%` (deeper slate for sufficient contrast on cream).
+
+Retail variants keep the gravitas of the typographic and structural language but read welcoming rather than fortress-like. Use the light variant when the audience is mass-market retail; use the dark canonical for institutional, wealth-management, and capital-markets surfaces.
+
+## Typography
+- **Display:** EB Garamond (Tiempos/Caslon stand-in). Weights 400/500/600/**700**. Used for h1 always; h2-h4 depend on serif-heavy vs sans-heavy mode. Tracking `-0.01em` — serifs set tight, not crunched.
+- **Body:** Inter, **15px**, line-height 1.55. Weights 400/500/600. The heritage-but-modern sans that JPMorgan, Goldman, and BlackRock have all settled on post-2015.
+- **Mono:** JetBrains Mono (Berkeley Mono preferred when locally available). Every basis-point figure, every AUM number, every return percentage, every CUSIP, every timestamp. Weights 400/500/**700**.
+
+Font features: `"tnum", "zero", "lnum", "ss01"` — tabular lining figures and slashed zero are non-negotiable. Returns must align on the decimal across a holdings table; `0` must never be confused with `O` on a security identifier.
+
+H1 uses `clamp(2.25rem, 4.5vw, 3.75rem)` — restrained. Institutional banks do not shout. The headline labels the surface; the data and the prose do the work.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8` — wide enough for tables and three-column reports, narrow enough that long-form prose still has a reading rhythm.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-12 lg:pt-28 lg:pb-16` — formal but not oversized.
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12`
+- **Allowed scale:** 4 6 8 12 16 20 24 32 40 48 64 80 96. Medium-high density — financial information packs in.
+
+Density target: a typical institutional surface shows two-to-three data tiles, a primary chart, a holdings table with 10+ rows, and a sidebar of disclosures above the fold without feeling cramped. If a page renders fewer than that, it is under-packed for the direction.
+
+## Color
+No hex anywhere. Pure white is forbidden (`--foreground` is warm cream). Pure black is forbidden (`--background` is institutional navy). Gold is the emphasis tone — **one gold element per surface**. Greens and reds are restrained; performance numbers do not glow.
+
+## Radius
+`--radius: 0.125rem` (2px). **Formal print-document feel.** Pills are **disallowed** (`pillsAllowed: false`) — they read marketing-startup, not capital-markets. Status indicators use sharp rect badges with mono small-caps text instead.
+
+## Shadows
+Style is **minimal** — hairline borders are the dominant structural language. One utility ships:
+
+- `.shadow-page` — very subtle page-edge drop (`0 1px 2px 0 hsl(220 50% 4% / 0.4), 0 0 0 1px hsl(var(--border))`) for stacked surfaces. Print-stack feel; never a soft-modern lift.
+
+No glows, no inner highlights, no decorative drop shadows. Depth is borders and tonal navy tiers — not blur.
+
+## Motion
+Very limited. Capital-markets sites do not perform.
+
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Duration tiers:** reveal (200ms). No loop, no ambient.
+- **Keyframes:**
+  - `fade-rise-quiet` — opacity 0→1, 8px translateY. 200ms. The only entrance. Settles; does not announce itself.
+
+No marquees, no parallax, no ambient gradients, no number-tick flashes (that is kinetic-data territory; for the kinetic/sober hybrid see Bloomberg Wealth and explicitly invoke `kinetic-data` tokens for the live-data surfaces). `prefers-reduced-motion` is honored — fade-rise-quiet collapses to the final state with no transform.
+
+If a banking-gravity surface needs live ticker behavior, **compose with `kinetic-data`** — let the data table use kinetic motion within an otherwise still gravity-grade page. Do not introduce kinetics into the chrome itself.
+
+## Component patterns
+- **Buttons:** sparing. **Primary** = solid `heritage-gold` bg, `navy-deep` text, 2px radius, `h-10 px-5`, sentence-case sans or mono-uppercase eyebrow style. **Secondary** = ghost with 1px cream border, cream text. **Tertiary** = underlined gold text-link. Many institutional sites lean on text-links over buttons. Buttons never glow, never gradient, never pill.
+- **Cards:** sharp corners (`rounded-sm`, 2px), 1px hairline 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-foreground`. Body in Inter. Numbers in mono tabular. Optional `.shadow-page` on the outermost stacked surface only — never on every card.
+- **Inputs:** 1px border, `bg-background`, `rounded-sm`, `h-9 px-3`. Label above in mono small-caps `muted-foreground`. Focus ring 2px heritage-gold. Numeric inputs tabular, right-aligned. No floating labels, no rounded pills.
+- **CTAs:** 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"*, *"Request the prospectus"*. **Never** *"Get started free"*, *"Sign up now"*, or *"Try it today"* — retail-startup voice is off-direction.
+
+## Component families
+None at install time. Anticipated families as projects mature:
+- **DisclosureBlock** — small-print legal text in `slate-rule`, mono optional. Always present on financial pages.
+- **HoldingsTable** — dense tabular layout, mono numerics right-aligned, alternating row bg via `navy-mid` at 60% opacity.
+- **PerformanceTile** — label (mono small-caps), number (mono 700), delta (mono `success-green` / `danger-deep` with `+`/`−` sign — never colored arrow without sign).
+- **LeadershipCard** — formal portrait (3:4), name in EB Garamond, title in mono small-caps. Bloomberg-board-of-directors energy.
+
+The Director appends families here as they're established.
+
+## Recommended rich media
+Banking-gravity uses **editorial business photography** the way the WSJ front section does — sparingly, formally, and always in service of the institutional voice.
+
+**Permitted media:**
+- **Formal portraits** — leadership, partners, advisors. Studio lighting, restrained background, business attire. 3:4 portrait crop. Annie Leibovitz business-portrait style at one stop down — no theatrics.
+- **Glass-tower architecture** — Manhattan, Canary Wharf, Pudong, La Défense. Glass-and-steel office towers at golden hour. The "we are downtown" signal.
+- **Market-floor shots** — NYSE/LSE/HKEX trading floor, Bloomberg terminals in use, formal boardrooms mid-meeting. Reuters/Bloomberg editorial photography style.
+- **Data visualizations and charts** — candlestick, line, area, allocation pie, benchmark comparison. Mono axis labels, restrained color palette using `success-green` and `danger-deep`.
+- **Formal infographics** — only when illustrating fund structure, capital flow, or organizational hierarchy. Two-color (navy + gold), serif labels, hairline rules.
+
+**Forbidden media:**
+- Casual photography (lifestyle, smiling-people-on-laptops, coffee-cups, plants).
+- Illustrations except the formal infographics above. No spot illustrations, no isometric scenes, no decorative SVG ornament.
+- 3D renders, glassmorphic overlays, mesh gradients.
+- Animated GIFs, autoplay video.
+- Stock photography that telegraphs "stock photography" (the watermark and overused composition kind).
+
+**AI tool recommendations:**
+- **Midjourney** for editorial business photography. Prompts like *"Reuters financial photography, glass and steel office tower at golden hour, formal restrained tone, 35mm, slight haze, no people"* for architecture; *"editorial business portrait, formal studio lighting, dark navy backdrop, business attire, restrained expression, 85mm, Annie Leibovitz at one stop down"* for leadership.
+- **Flux** for tighter realism on portraiture when Midjourney's stylization is too painterly.
+- **D3 / Recharts / Lightweight Charts / Visx** for the actual charts — production libraries, not AI.
+- **Excalidraw** or **Figma** for the formal infographics; export as inline SVG with mono labels.
+
+Avoid Midjourney's default cinematic-orange-teal grading — explicitly prompt for neutral grade, restrained palette, formal editorial tone.
+
+**Aspect ratios:**
+- Portraits: **3:4** (formal annual-report standard).
+- Architecture: **16:9** landscape or **2:3** vertical for tower shots.
+- Charts: **16:9** for hero charts; **4:3** for embedded.
+- Never **1:1 square** (consumer-social aesthetic) and never **9:16 vertical** (social-video aesthetic).
+
+**Video:** generally avoided. If present, single hero with poster image, manual play, no autoplay. Earnings-call replays and leadership interviews are the only legitimate video genres. Captions burned-in, mono.
+
+**Performance:** hero image ≤180 KB AVIF at 1600w; portraits ≤90 KB at 800w; SVG infographics inline (≤4 KB each). LCP under 2s with hero image — capital-markets clients on Bloomberg terminals are on managed networks and expect crisp loads.
+
+**Accessibility:**
+- Long-form alt-text for all editorial photography — describe the person, the setting, the formal context. *"Photograph: a senior partner stands at a window overlooking the Manhattan skyline at dusk, wearing a charcoal suit, addressing two analysts off-frame"* is the bar.
+- All financial color coding (`success-green` / `danger-deep`) **always** has a non-color signal — `+`/`−` sign character or up/down arrow glyph. Colorblind users must read performance direction without color.
+- Mono numerics at 14px on `navy-deep` pass AA; verify any custom accent before shipping.
+- Disclosure text in `slate-rule` at 12px passes AA on `navy-deep` — verify when introducing alternate surface tiers.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.25)` background, foreground text — gold-tinted, restrained.
+- **Focus ring:** `2px solid hsl(var(--ring))` — visible heritage gold; institutional surfaces value clear focus over invisibility.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (e.g., a single brand-mark photo gets pure white background to match a Reuters supplied asset), record it here with the reason.
+
+## Revisions
+- Initial direction, authored at install time. Pairs with `editorial` (shared serif gravitas vocabulary) and `kinetic-data` (live-data surfaces compose into a banking-gravity chrome). The distinct slot: institutional capital-markets restraint where editorial is magazine-prose-first and kinetic-data is trading-desk-kinetic.