@stylecrib/cli 0.3.1 → 0.3.3

package/themes/pet-food/THEME.md

@@ -0,0 +1,78 @@
+# Design Direction — Pet-Food
+
+## Ethos
+The Farmer's Dog beige restraint · Open Farm pantry-label warmth · Ollie playful DTC chrome · Spot & Tango fresh-batch friendliness · Nom Nom homemade-recipe sincerity
+
+## Feel
+Pantry-label honesty meets dog-walk warmth. Beige and oat-cream surfaces, soft terracotta as the principal action, sage as the wellness mark, brown ink instead of black. Friendly humanist sans for chrome, gentle italic serif for ingredient names. The page feels like a folded recipe card from a small kitchen, not a vet portal or a scary feed-bag.
+
+## Reference brands
+- **The Farmer's Dog** → beige paper + brown ink + dog-portrait hero. The principal reference for surfaces and ink color.
+- **Open Farm** → pantry-label transparency. Sourcing is the design — every ingredient is named, weighted, and origin-tagged.
+- **Ollie** → playful DTC chrome. Pup-profile-first flow; the dog's name leads the page.
+- **Spot & Tango** → fresh-batch friendly type, weekly-delivery cadence.
+- **Nom Nom** → homemade-recipe sincerity, soft photography, vet-formulated but never clinical.
+
+## Tokens
+Surface stack is **oat-cream** (background) → **lighter oat** (card) → **deeper beige / sage tint** (secondary / muted / accent). Brand tokens: `--terracotta`, `--sage`, `--oat`, `--kraft`, `--ink`, `--pumpkin`. Primary is `--terracotta` — the principal action. `--sage` is the wellness/transparency mark (sourcing, vet-approval). `--pumpkin` is the limited-edition playful accent — birthday treats, holiday recipes — never default.
+
+## Typography
+- **Display:** Fraunces. Soft serif with optical sizes — reads pantry-label, not church-bulletin. Use weights 500–700 for headings; italic is reserved for ingredient names ("free-range chicken" set in italic mid-sentence).
+- **Body:** DM Sans. Friendly humanist sans, low x-height, warm on cream. 16px base, line-height 1.6.
+- **Mono:** DM Mono. Reserved for ingredient weights ("212g"), batch numbers, delivery dates — the kitchen-recipe instrument feel.
+
+H1 uses `clamp(2.25rem, 5.5vw, 4rem)`. Tracking `-0.015em` on display.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8` — pantry-shelf width, not magazine column.
+- **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 10 12 16 20 24 32 40 48 64 80.
+
+## Color
+No hex in components — tokens only. Pure white and pure black are forbidden; use `--oat` (background) and `--ink` (brown-22°). Saturated brand-blue, brand-purple, or signal-red are out of palette. Wellness-positive is sage; alert is `--destructive` (allergy/contraindication rust). No "trust blue" — this brand earns trust through ingredient transparency, not enterprise polish.
+
+## Radius
+`--radius: 1rem` (16px). Generous, friendlier than soft-modern. Pills are allowed for breed-tags, life-stage chips ("Puppy", "Senior 7+"), and ingredient filters. Square corners are forbidden — they read clinical.
+
+## Shadows
+**Soft.** `.shadow-pantry` for cards (1+6 pantry-shadow), `.shadow-pantry-lg` for hover lift. No glows, no neon edges — this is a kitchen, not a console.
+
+## Motion
+Three keyframes: `fade-rise` (500ms entrance), `tail-wag` (800ms playful rotation, hover-only on pup avatars and birthday chips — *never* on functional UI), `soft-pulse` (2200ms loop for next-delivery countdown). `prefers-reduced-motion` is honored.
+
+Easing `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Component patterns
+- **Buttons:** primary = terracotta solid + oat text, rounded-2xl, shadow-pantry. Secondary = oat fill + kraft border + brown-ink text. Tertiary = terracotta text-link. Never gradient — pantry labels are flat.
+- **Cards:** rounded-2xl, oat-card on oat-cream, 1px kraft border, shadow-pantry. Pup-profile cards get a 2px terracotta top-border when the plan is active.
+- **Inputs:** rounded-xl, 1px kraft border, oat-card fill. Pup-name and breed inputs may show a small dog-emoji glyph in the left padding. Focus = 2px terracotta ring at 40% opacity. Placeholder italic in soft-brown.
+- **Plan-builder flow:** step indicators are small terracotta dots connected by a dashed kraft line. The dog's name appears in Fraunces italic at the top of every step ("Marlow's plan, step 2 of 3").
+- **Ingredient cards:** kraft-bordered, ingredient name in Fraunces italic, weight in DM Mono, source line in DM Sans muted-foreground. Vet-approved badge in sage pill.
+
+## Recommended rich media
+Photography is the lead medium: dog portraits in natural window light, food in shallow ceramic bowls, raw ingredients on wood cutting boards. Color graded to warm honey shadow, never high-key studio. Aspect ratios 4:5 portrait for pups, 3:2 landscape for food. Never 16:9 cinematic (off-feel for DTC). Never 1:1 (too Instagram-stock). No illustrated dog-icon decoration. No 3D renders of kibble.
+
+**AI tool recommendations:** Midjourney with *"natural window light, golden retriever portrait, Kodak Portra 400 film, soft cream tones, slight grain, shallow depth of field"*. For food: *"raw chicken and sweet potato on wooden cutting board, overhead, soft natural light, cream linen background, no garnish, food photography"*. Avoid bright commercial pet-food stock.
+
+**Performance:** hero pup ≤140 KB AVIF at 1600w; ingredient inline ≤80 KB. LCP ≤2s.
+
+**Avoid:** stock photos of "happy family with golden retriever", cartoon dog mascots, paw-print decoration, kibble-bag-product-shot heroes (this site sells fresh, not bags), gradient backgrounds, glassmorphic anything, dark-mode toggle, "scientifically formulated" lab-coat shots — that is competitor territory, not ours.
+
+**Accessibility:** alt-text describes the dog by breed and posture — *"A senior beagle rests its chin on a hand in late afternoon kitchen light."* Not *"A dog."*
+
+## Component families
+None at install time. Plan-builder, ingredient-card, and pup-profile-row are the three canonical bespoke families; the Director will codify them as they're reused.
+
+## Details
+- **Selection:** `hsl(var(--terracotta) / 0.2)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.55)`.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/pet-food/tokens.ts

@@ -0,0 +1,185 @@
+import type { Direction } from "../schema";
+
+// pet-food — The Farmer's Dog / Open Farm / Ollie warm DTC. Beige paper,
+// friendly humanist sans, a single dog-walk-on-a-fall-morning palette:
+// oat cream, terracotta, sage, brown ink. The page reads like a pantry
+// label, not a vet chart. Photography is dog-portrait warm, never clinical.
+export const petFood: Direction = {
+  name: "pet-food" as Direction["name"],
+  ethos:
+    "The Farmer's Dog beige restraint · Open Farm pantry-label warmth · " +
+    "Ollie playful DTC chrome · Spot & Tango fresh-batch friendliness · " +
+    "Nom Nom homemade-recipe sincerity",
+  references: [
+    { brand: "The Farmer's Dog", trait: "beige paper + brown ink + dog-portrait hero" },
+    { brand: "Open Farm", trait: "pantry-label transparency, sourcing as design" },
+    { brand: "Ollie", trait: "playful DTC chrome, pup-profile-first flow" },
+    { brand: "Spot & Tango", trait: "fresh-batch friendly type, weekly-delivery cadence" },
+    { brand: "Nom Nom", trait: "homemade-recipe sincerity, soft photography" },
+  ],
+  feel:
+    "Pantry-label honesty meets dog-walk warmth. Beige and oat-cream surfaces, " +
+    "soft terracotta as the principal action, sage as the wellness mark, brown ink " +
+    "instead of black. Friendly humanist sans for chrome, gentle italic serif for " +
+    "ingredient names. The page feels like a folded recipe card from a small kitchen, " +
+    "not a vet portal or a scary feed-bag.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Recoleta", "Iowan Old Style", "Georgia", "serif"],
+      from: "Open Farm / Farmer's Dog — soft serif with optical sizes, reads pantry-label not church-bulletin",
+      googleFont: "Fraunces",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "DM Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Ollie / Spot & Tango — friendly humanist sans, low x-height, reads warm on cream",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "DM Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "monospace"],
+      from: "ingredient weights, batch numbers, delivery dates — kitchen-recipe instrument feel",
+      googleFont: "DM+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "calt", "liga"',
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "36 38% 95%", from: "Farmer's Dog oat-cream — warmer than soft-modern white, never pure" },
+    foreground: { hsl: "22 32% 18%", from: "deep brown ink — never black; Open Farm ingredient panel text" },
+    card: { hsl: "36 44% 98%", from: "lighter oat — card lifts a half-step off the pantry-paper background" },
+    popover: { hsl: "36 44% 98%", from: "same as card" },
+    primary: { hsl: "14 62% 52%", from: "Farmer's Dog terracotta — warm rust, principal action" },
+    primaryForeground: { hsl: "36 44% 98%", from: "oat-cream on terracotta" },
+    secondary: { hsl: "36 28% 90%", from: "deeper beige panel — secondary surface, like brown-bag kraft" },
+    secondaryForeground: { hsl: "22 32% 22%", from: "brown ink on beige" },
+    muted: { hsl: "36 24% 92%", from: "quiet beige — table-row, helper background" },
+    mutedForeground: { hsl: "22 18% 42%", from: "soft brown — captions, meta, ingredient sub-text" },
+    accent: { hsl: "150 28% 88%", from: "Open Farm pale sage — hover and wellness chip surface" },
+    accentForeground: { hsl: "150 38% 22%", from: "deep sage on tint" },
+    border: { hsl: "30 22% 84%", from: "warm hairline — kraft-paper edge, never cool gray" },
+    input: { hsl: "30 22% 84%", from: "same as border" },
+    ring: { hsl: "14 62% 52%", from: "primary terracotta, focus only" },
+    destructive: { hsl: "8 70% 48%", from: "deeper rust — allergy / contraindication, distinct from terracotta primary" },
+    destructiveForeground: { hsl: "36 44% 98%", from: "oat-cream on alert" },
+    brand: {
+      terracotta: { hsl: "14 62% 52%", from: "= primary; Farmer's Dog principal action color" },
+      "terracotta-soft": { hsl: "14 58% 92%", from: "terracotta tint — selected step, plan-included chip" },
+      sage: { hsl: "150 38% 38%", from: "Open Farm wellness sage — protein/source markers, vet-recommended" },
+      "sage-soft": { hsl: "150 28% 88%", from: "alias for accent — adherence-good and natural-source chip" },
+      oat: { hsl: "36 38% 95%", from: "alias for background — the pantry-paper itself" },
+      kraft: { hsl: "30 30% 78%", from: "Open Farm kraft accent — sourcing-panel border, brown-bag energy" },
+      ink: { hsl: "22 32% 18%", from: "alias for foreground — warm brown ink, never black" },
+      pumpkin: { hsl: "28 78% 58%", from: "Ollie playful accent — limited-time recipe and birthday-treat callout" },
+    },
+  },
+
+  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-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "1rem",                       // 16px — generous DTC roundness, friendlier than soft-modern
+    pillsAllowed: true,                 // pills core for breed-tags, ingredient chips, plan toggles
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-pantry":
+        "0 1px 2px hsl(22 30% 30% / 0.05), 0 6px 16px hsl(22 30% 30% / 0.06)",
+      "shadow-pantry-lg":
+        "0 2px 6px hsl(22 30% 30% / 0.05), 0 18px 40px hsl(22 30% 30% / 0.10)",
+      "shadow-pantry-inset":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.55)",
+    },
+  },
+
+  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: "entrance for ingredient panels, plan cards, testimonial rows",
+      },
+      "tail-wag": {
+        css:
+          "0%, 100% { transform: rotate(-3deg); }\n" +
+          "50% { transform: rotate(3deg); }",
+        defaultDuration: 800,
+        iteration: "once",
+        purpose: "playful hover on pup avatars and birthday-treat chips — never on functional UI",
+      },
+      "soft-pulse": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.7; }",
+        defaultDuration: 2200,
+        iteration: "infinite",
+        purpose: "next-delivery countdown and fresh-batch availability indicator",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid terracotta fill, oat-cream text, rounded-2xl, shadow-pantry. " +
+      "Secondary = oat-cream fill with 1px kraft border, brown-ink text. " +
+      "Tertiary = text-link in terracotta with underline-on-hover. " +
+      "Pills allowed for breed-tags, life-stage chips, and ingredient filters. " +
+      "Hover: shadow-pantry-lg + 2% darken. Never gradient fills — pantry labels are flat.",
+    card:
+      "Rounded-2xl, oat-card fill on oat-cream background, 1px kraft border, shadow-pantry. " +
+      "Internal padding p-6 lg:p-8. Title in Fraunces 600 (display serif), body in DM Sans. " +
+      "Pup-profile cards may use a 2px terracotta top-border to indicate the active plan.",
+    input:
+      "Rounded-xl, 1px kraft border, oat-card background. Label sits above in DM Sans 500. " +
+      "Focus = 2px terracotta ring at 40% opacity. Placeholder italic in soft-brown. " +
+      "Pup-name and breed-search inputs may show a small dog-emoji icon inside the left padding.",
+    cta:
+      "Primary terracotta solid is the principal action. " +
+      "'Build my plan' CTAs always lead — never side-by-side with a low-commitment secondary. " +
+      "Sage ghost is reserved for wellness/transparency context (ingredient sourcing, vet-approval). " +
+      "Pumpkin is the playful limited-time accent — birthday treats, holiday recipes, never default.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--terracotta) / 0.2)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.55)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/pharma-clinical/THEME.md

@@ -0,0 +1,164 @@
+# Pharma Clinical
+
+> Warm-professional pharmaceutical register — cream canvas at
+
+**Slug:** `pharma-clinical` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+Big-pharmaceutical corporate publishing (Genentech at its warmest and
+most patient-forward, Roche investor communications, Regeneron
+scientific brochures). Distinct from tech-bio surfaces through the
+WARM CREAM canvas + BODONI DISPLAY SERIF + BURGUNDY ACCENT trio —
+which reads as trust-and-tradition rather than startup-and-disruption.
+The register lives at the intersection of clinical-journal typography
+and boutique-agency editorial polish.
+
+
+## Signature move
+
+Warm cream canvas at #f7f3e8 — the register's non-negotiable base
+(deliberately warmer than editorial's gallery #fafafa, cooler than
+cabana-poster's #eedfca, and distinct from claude-cream #F4F1EA).
+Cold near-black ink #1a1a1a with ONE burgundy accent #6b1a1a used
+ONLY for clinical-phase chip fills + section-marker underlines +
+hover states + pull-quote marks. Sharp corners everywhere.
+
+Composition begins with a MASTHEAD — a Bodoni-family wordmark
+"WATERSHED" (ALL CAPS, letter-spacing 0.03em, ~24px) on the left,
+a horizontal nav row center (For patients / For clinicians / Our
+science / Our pipeline / Careers / Investors), a filled burgundy
+rectangular "Contact" button right-aligned. The masthead shrinks
+after 200px of scroll.
+
+Hero: a two-column split — LEFT column carries the big Bodoni
+display headline (~64px, mixed case) + a Inter Tight body-copy
+lede paragraph + a burgundy "Learn about our science →" text
+link with hover underline. RIGHT column carries a full-bleed
+patient / scientist portrait photograph (studio-quality, warm
+directional light) with a small caption strip beneath ("Photograph:
+Dr. Ren Havelock, Head of Clinical Research, Watershed").
+
+Below the hero: a NUMBERED PIPELINE STAGES section — a horizontal
+progress bar with 5 phase markers (Discovery / Preclinical / Phase
+01 / Phase 02 / Phase 03), each marked by a small burgundy chip and
+a molecule count. On scroll into view, the progress fill animates
+from 0 → active-phase% and phase chips fade in with 160ms stagger.
+
+A PATIENT STORY BAND follows — a full-width warm cream inverted
+band with a large patient portrait photograph on the left and a
+patient-quote pull with attribution on the right ("For the first
+time in eleven years, I slept through a Tuesday." — Amara, on
+starting an investigational treatment). Italic Bodoni for the
+pull quote at 32px.
+
+CLINICAL DATA CALLOUTS — a 3-column grid with counting numbers:
+247 (active trials), 12,483 (patients enrolled globally), 89%
+(retention through phase 3). Each number counts up from 0 on
+scroll into view. Below each number a body-copy explanation and
+a small footnote citation.
+
+SCIENTIFIC ILLUSTRATION section — a paired layout with a bespoke
+MOLECULE SVG on one side (a stylized protein-fold visualization)
+and a scientific-explanation paragraph on the other. The molecule
+is drawn as line-art with subtle burgundy highlights, not as a 3D
+render.
+
+MILESTONE TIMELINE — a vertical timeline (rule + dots) with 6
+historical entries (Founded 2003, First IPO, First approval, etc).
+Dots animate in with 120ms per-dot stagger on scroll into view.
+
+CAREERS BAND — warm cream inverted background with a "We're
+hiring across research + clinical + regulatory + commercial"
+monumental Bodoni headline + a 4-column open-role list + a
+photograph of the actual laboratory space.
+
+Footer: a dark inverted band with the big Bodoni wordmark
+repeated, colophon paragraph, 4-column utility grid (About,
+Patients, Investors, Legal), and small legal disclaimers.
+
+Six bespoke SVG marks (molecule protein-fold, capsule outline,
+microscope silhouette, patient-portrait framing bracket, phase-
+chip separator glyph, timeline milestone dot) are dropped as
+PUNCTUATION at specific compositional moments — never as a
+uniform icon row.
+
+## Palette
+
+- **bg:** `#f7f3e8`
+- **surface:** `#ffffff`
+- **ink:** `#1a1a1a`
+- **accent:** `#6b1a1a`
+
+## Typography
+
+- **Display:** A Bodoni-family display serif with strong stress contrast and elegant serifs — the reference uses Fenice / Bodoni Moda. Free fallback stack — "Bodoni Moda", "Playfair Display", "PT Serif Display", Georgia, serif. Weight 500-700, mixed case for section titles + patient-name callouts, ALL CAPS ONLY for the wordmark. Top of scale ~64px for hero headline, 40px for section headings, 28px for pull quotes. Never uppercase at body scale.
+- **Body:** A clean geometric sans for body copy — Inter Tight / Söhne / Aktiv Grotesk. Free fallback stack — "Inter Tight", Inter, "Space Grotesk", system-ui, sans-serif. Weight 400 for body copy, 500 for small labels, 600 for phase-indicator chips. 15-16px body copy, line-height 1.55.
+- **Mono:** none. Pharma Clinical is a consumer corporate publishing surface. Mono has no role.
+- **Scale:** 1.333 (perfect fourth — restrained, comfortable for long-form medical copy)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero display serif reveal — headline fades in from opacity 0 + translateY(24px) over 800ms cubic-bezier(0.23,1,0.32,1) on first paint. Body copy follows with 200ms delay.
+2. Hero photograph fade + scale — the patient/scientist portrait opens from opacity 0.5 + scale(1.02) to opacity 1 + scale(1) over 1200ms cubic-bezier.
+3. Numbered pipeline progress bar — as the pipeline section scrolls into view (IntersectionObserver at 40%), the progress fill animates from 0% → active-phase% over 1400ms cubic-bezier. Phase-indicator chips fade in with 160ms per-chip stagger.
+4. Clinical data counters — each stat number rolls from 0 → target on first scroll into view via requestAnimationFrame, 2000ms ease-out.
+5. Patient portrait progressive reveal — the story-band portrait fades from blur(6px) + opacity 0.4 → blur(0) + opacity 1 over 900ms cubic-bezier.
+6. Timeline sequential reveal — milestone dots animate in with 120ms per-dot stagger + 500ms cubic-bezier when the timeline scrolls into view.
+7. Nav shrink on scroll — masthead height reduces from 88px → 56px after 200px of scroll, transitioning padding + wordmark font-size over 300ms cubic-bezier.
+8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+9. prefers-reduced-motion: reduce — all reveals disabled; counters show final value; pipeline shows at active phase; nav still shrinks (state change); hover still works (interaction feedback).
+
+Motion character: quiet, precise, trust-first. Custom cubic-bezier(0.23,1,0.32,1) for all reveals. Never marketing-loud, never startup-flashy — reads as a considered pharma annual report, not a SaaS product tour.
+
+
+## Imagery
+
+EDITORIAL patient portrait + scientist portrait + laboratory
+photography under warm directional light — the reference uses
+quiet, dignified portraits of real patients and researchers, shot
+in interior clinical / laboratory settings with soft window light.
+FPO imagery here should read as considered documentary portraiture
+(posed subject, warm interior light, minimal styling). NO stock
+"diverse team in lab coats around a laptop" photography (that's the
+AI-tell for corporate-pharma slop). NO 3D-rendered molecule
+visualizations that read as game engine (bespoke SVG only). NO
+warm-radial-gradient fills as placeholder decoration.
+
+## Best for
+
+- Big-pharmaceutical and biopharmaceutical corporate sites
+- Clinical trial recruitment and patient-facing pharma sites
+- Medical research organizations and academic clinical research units
+- Healthcare technology companies with a clinical / regulatory register
+- Boutique specialty-med brands (fertility, precision oncology, rare disease)
+- Corporate reports and investor communications for life-sciences firms
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Dark canvas (near-black / true-black) as the primary background — Pharma Clinical's canvas is warm CREAM at #f7f3e8. A dark canvas inverts the trust-forward warm-professional register into a startup-biotech register (which is a different theme).
+- Sans-serif display type — the display face MUST be a Bodoni-family serif with strong stress contrast (Bodoni Moda / Playfair Display fallback). Sans display collapses this into a modern-biotech register.
+- Multi-color accent palette — the whole register's move is ONE burgundy accent doing everything (phase chips, hover states, underlines, pull-quote mark). Introducing amber / cyan / any second accent collapses the discipline into candy-corporate slop.
+- Rounded corners on cards, buttons, phase-chip pills, timeline dots, or photograph frames — 0px radius everywhere.
+- Stock diverse-team-in-lab-coat photography — imagery MUST feel like editorial documentary portraiture (quiet posed subjects under warm directional light). Stock team-around-laptop photography is the AI-tell for corporate pharma slop.
+- 3D-rendered molecule visualizations — molecule illustrations MUST be bespoke SVG line-art with subtle burgundy highlights. Game-engine 3D renders read as tech-biotech, not warm-clinical.
+- Mono-caps eyebrow labels outside the two legitimate use sites — CLINICAL-PHASE INDICATOR (PHASE 01) and SECTION MARKER (OUR SCIENCE) are the ONLY permitted mono-caps uses. Any additional 'SECTION · X' / 'CHAPTER · Y' / 'MIN READ' plate is slop-blocklist violation.
+- Cycling headline words / auto-advancing sliders / horizontal tickers — pharma register requires STATIC, RESTRAINED motion. Marketing-web motion collapses into startup slop.
+- Warm-radial gradient placeholder fills — every photograph FPO must read as documentary portraiture. Warm-radial gradients are the AI-tell for missing imagery.
+- Big saturated hero-marketing display type at 200px+ — the register requires RESTRAINED display scale so the content (data callouts, patient stories, pipeline) carries the drama, not the type.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is #f7f3e8, WARMER than claude-cream and distinct.
+- void+acid (near-black bg + single bright acid-green or vermilion accent)
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)
+- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- dark-biotech-inversion (canvas is warm cream. Swapping to dark canvas collapses into a modern-biotech register that reads as startup, not big-pharma.)
+- multi-accent-flood (ONE burgundy accent doing 100% of the punctuation. Introducing cyan / orange / any secondary accent collapses the discipline into candy-corporate.)
+- stock-lab-coat-photography (imagery must feel documentary and considered. Stock diverse-team-in-lab is the AI-tell for corporate-pharma slop.)
+- 3d-molecule-render (molecule visualization must be bespoke SVG line-art with burgundy highlights. 3D game-engine renders read as tech-startup, not warm-pharma.)
+- monumental-marketing-hero (hero display stays RESTRAINED at ~64px so the pipeline / patient stories / data callouts carry the composition. Big marketing hero type collapses the register into SaaS slop.)

package/themes/pharma-clinical/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: pharma-clinical
+export const pharmaClinicalTailwindExtend = {
+  colors: {
+    bg: "#f7f3e8",
+    surface: "#ffffff",
+    ink: "#1a1a1a",
+    accent: "#6b1a1a",
+  },
+  fontFamily: {
+    display: ["A Bodoni-family display serif with strong stress contrast and elegant serifs — the reference uses Fenice / Bodoni Moda. Free fallback stack — \"Bodoni Moda\", \"Playfair Display\", \"PT Serif Display\", Georgia, serif. Weight 500-700, mixed case for section titles + patient-name callouts, ALL CAPS ONLY for the wordmark. Top of scale ~64px for hero headline, 40px for section headings, 28px for pull quotes. Never uppercase at body scale."],
+    body: ["A clean geometric sans for body copy — Inter Tight / Söhne / Aktiv Grotesk. Free fallback stack — \"Inter Tight\", Inter, \"Space Grotesk\", system-ui, sans-serif. Weight 400 for body copy, 500 for small labels, 600 for phase-indicator chips. 15-16px body copy, line-height 1.55."],
+    mono: ["none. Pharma Clinical is a consumer corporate publishing surface. Mono has no role."],
+  },
+};

package/themes/pharma-clinical/theme.yml

@@ -0,0 +1,201 @@
+# Pharma Clinical — Family C, Editorial & Print (corporate-editorial subregion).
+#
+# Warm-professional pharmaceutical register. Cream canvas at #f7f3e8 with
+# cold near-black ink (#1a1a1a) and ONE burgundy accent (#6b1a1a) used
+# for phase-indicator chips, hover states, and pull-quote marks. Sharp
+# corners everywhere. Display type in a Bodoni-family serif (Bodoni
+# Moda / Playfair fallback); body copy in Inter Tight. Editorial-quality
+# patient photography, numbered pipeline stages, and scientific
+# illustrations of molecules do the visual work.
+#
+# Influence anchor (per Matt's pick): Genentech — big-pharma polish at
+# its most trust-forward. Placeholder brand: "WATERSHED" — a fictional
+# biopharmaceutical imprint. Original name, original copy, no
+# reproductions of any reference.
+#
+# Distinct from other Family C bases:
+#   - Ember Poster is warm-dark editorial serif with hand-drawn ornaments
+#   - Case Panel is agency portfolio bento
+#   - Marker Mag is punk zine chaos
+#   - Pill Editorial is 999px cultural editorial
+#   - Cabana Poster is vintage travel-poster warmth
+#   - Editorial (v2) is Aperture photography-first quarterly
+# Pharma Clinical fills the CORPORATE-EDITORIAL PHARMA slot — warm
+# publication register applied to trust-first pharma / biotech / clinical
+# / research-org communication.
+#
+# Sixteenth theme via the v2 harness. Seventh Family C theme. Upgrade
+# of the existing v1 archetype-fallback slug, not a new-base candidate.
+
+name: Pharma Clinical
+concept: Warm-professional pharmaceutical register — cream canvas at #f7f3e8 with cold near-black ink and ONE burgundy accent (#6b1a1a) used sparingly for phase-indicator chips and hover states. Bodoni-family display serif paired with Inter Tight body. Editorial patient photography, numbered pipeline stages (with animated progress on scroll into view), clinical data callouts (real-time counting), and scientific molecule illustrations. Reads like a Genentech annual report crossed with a New England Journal of Medicine feature — evidence-first, trust-forward, human-warm.
+influence: |
+  Big-pharmaceutical corporate publishing (Genentech at its warmest and
+  most patient-forward, Roche investor communications, Regeneron
+  scientific brochures). Distinct from tech-bio surfaces through the
+  WARM CREAM canvas + BODONI DISPLAY SERIF + BURGUNDY ACCENT trio —
+  which reads as trust-and-tradition rather than startup-and-disruption.
+  The register lives at the intersection of clinical-journal typography
+  and boutique-agency editorial polish.
+
+family: C
+base_number: 30
+base_note: |
+  Family C editorial subregion, CORPORATE-EDITORIAL PHARMA slot.
+  Distinct from other Family C bases through the WARM CREAM + DISPLAY
+  SERIF + BURGUNDY ACCENT trio and the DATA-FORWARD signature moves
+  (numbered pipeline, clinical counters, timeline). Editorial (v2) is
+  Aperture photography-first quarterly with vermilion accent; Pharma
+  Clinical inverts the pairing (serif display over sans body) and swaps
+  the accent hue to burgundy. Both share sharp corners and single-accent
+  discipline but read as different publication types. This is an
+  upgrade of the existing v1 pharma-clinical slug from
+  archetype-fallback to a full bespoke composition.
+
+render_url: http://localhost:5173/themes/pharma-clinical
+
+surface: web
+
+typography:
+  display: A Bodoni-family display serif with strong stress contrast and elegant serifs — the reference uses Fenice / Bodoni Moda. Free fallback stack — "Bodoni Moda", "Playfair Display", "PT Serif Display", Georgia, serif. Weight 500-700, mixed case for section titles + patient-name callouts, ALL CAPS ONLY for the wordmark. Top of scale ~64px for hero headline, 40px for section headings, 28px for pull quotes. Never uppercase at body scale.
+  body: A clean geometric sans for body copy — Inter Tight / Söhne / Aktiv Grotesk. Free fallback stack — "Inter Tight", Inter, "Space Grotesk", system-ui, sans-serif. Weight 400 for body copy, 500 for small labels, 600 for phase-indicator chips. 15-16px body copy, line-height 1.55.
+  mono: none. Pharma Clinical is a consumer corporate publishing surface. Mono has no role.
+  scale: 1.333 (perfect fourth — restrained, comfortable for long-form medical copy)
+  eyebrow_exception: |
+    Pharma Clinical LEGITIMATELY uses small uppercase 0.14em-tracked 10-11px labels for CLINICAL-PHASE INDICATORS (PHASE 01 / PHASE 02 / PHASE 03) and SECTION MARKERS (OUR SCIENCE / OUR PATIENTS / OUR PIPELINE). This is a THEME-SPECIFIC EXCEPTION — the reference publication style uses these EXACTLY in this register, as diegetic clinical publication markers rather than as decorative eyebrow slop. Every use is deliberate and reference-anchored.
+
+palette:
+  bg: "#f7f3e8"           # canvas — warm cream, warmer than gallery but cooler than cabana
+  surface: "#ffffff"      # pure white raised panel
+  ink: "#1a1a1a"          # cold near-black ink
+  accent: "#6b1a1a"       # deep burgundy — the ONE accent
+  cream: "#f0eadc"        # deeper cream for inverted band
+  darkInk: "#0a0a0a"      # pure black for masthead + inverted band
+  mute: "#6a6558"         # warm gray — captions + micro-labels
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero display serif reveal — headline fades in from opacity 0 + translateY(24px) over 800ms cubic-bezier(0.23,1,0.32,1) on first paint. Body copy follows with 200ms delay.
+  2. Hero photograph fade + scale — the patient/scientist portrait opens from opacity 0.5 + scale(1.02) to opacity 1 + scale(1) over 1200ms cubic-bezier.
+  3. Numbered pipeline progress bar — as the pipeline section scrolls into view (IntersectionObserver at 40%), the progress fill animates from 0% → active-phase% over 1400ms cubic-bezier. Phase-indicator chips fade in with 160ms per-chip stagger.
+  4. Clinical data counters — each stat number rolls from 0 → target on first scroll into view via requestAnimationFrame, 2000ms ease-out.
+  5. Patient portrait progressive reveal — the story-band portrait fades from blur(6px) + opacity 0.4 → blur(0) + opacity 1 over 900ms cubic-bezier.
+  6. Timeline sequential reveal — milestone dots animate in with 120ms per-dot stagger + 500ms cubic-bezier when the timeline scrolls into view.
+  7. Nav shrink on scroll — masthead height reduces from 88px → 56px after 200px of scroll, transitioning padding + wordmark font-size over 300ms cubic-bezier.
+  8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+  9. prefers-reduced-motion: reduce — all reveals disabled; counters show final value; pipeline shows at active phase; nav still shrinks (state change); hover still works (interaction feedback).
+
+  Motion character: quiet, precise, trust-first. Custom cubic-bezier(0.23,1,0.32,1) for all reveals. Never marketing-loud, never startup-flashy — reads as a considered pharma annual report, not a SaaS product tour.
+
+signature: |
+  Warm cream canvas at #f7f3e8 — the register's non-negotiable base
+  (deliberately warmer than editorial's gallery #fafafa, cooler than
+  cabana-poster's #eedfca, and distinct from claude-cream #F4F1EA).
+  Cold near-black ink #1a1a1a with ONE burgundy accent #6b1a1a used
+  ONLY for clinical-phase chip fills + section-marker underlines +
+  hover states + pull-quote marks. Sharp corners everywhere.
+
+  Composition begins with a MASTHEAD — a Bodoni-family wordmark
+  "WATERSHED" (ALL CAPS, letter-spacing 0.03em, ~24px) on the left,
+  a horizontal nav row center (For patients / For clinicians / Our
+  science / Our pipeline / Careers / Investors), a filled burgundy
+  rectangular "Contact" button right-aligned. The masthead shrinks
+  after 200px of scroll.
+
+  Hero: a two-column split — LEFT column carries the big Bodoni
+  display headline (~64px, mixed case) + a Inter Tight body-copy
+  lede paragraph + a burgundy "Learn about our science →" text
+  link with hover underline. RIGHT column carries a full-bleed
+  patient / scientist portrait photograph (studio-quality, warm
+  directional light) with a small caption strip beneath ("Photograph:
+  Dr. Ren Havelock, Head of Clinical Research, Watershed").
+
+  Below the hero: a NUMBERED PIPELINE STAGES section — a horizontal
+  progress bar with 5 phase markers (Discovery / Preclinical / Phase
+  01 / Phase 02 / Phase 03), each marked by a small burgundy chip and
+  a molecule count. On scroll into view, the progress fill animates
+  from 0 → active-phase% and phase chips fade in with 160ms stagger.
+
+  A PATIENT STORY BAND follows — a full-width warm cream inverted
+  band with a large patient portrait photograph on the left and a
+  patient-quote pull with attribution on the right ("For the first
+  time in eleven years, I slept through a Tuesday." — Amara, on
+  starting an investigational treatment). Italic Bodoni for the
+  pull quote at 32px.
+
+  CLINICAL DATA CALLOUTS — a 3-column grid with counting numbers:
+  247 (active trials), 12,483 (patients enrolled globally), 89%
+  (retention through phase 3). Each number counts up from 0 on
+  scroll into view. Below each number a body-copy explanation and
+  a small footnote citation.
+
+  SCIENTIFIC ILLUSTRATION section — a paired layout with a bespoke
+  MOLECULE SVG on one side (a stylized protein-fold visualization)
+  and a scientific-explanation paragraph on the other. The molecule
+  is drawn as line-art with subtle burgundy highlights, not as a 3D
+  render.
+
+  MILESTONE TIMELINE — a vertical timeline (rule + dots) with 6
+  historical entries (Founded 2003, First IPO, First approval, etc).
+  Dots animate in with 120ms per-dot stagger on scroll into view.
+
+  CAREERS BAND — warm cream inverted background with a "We're
+  hiring across research + clinical + regulatory + commercial"
+  monumental Bodoni headline + a 4-column open-role list + a
+  photograph of the actual laboratory space.
+
+  Footer: a dark inverted band with the big Bodoni wordmark
+  repeated, colophon paragraph, 4-column utility grid (About,
+  Patients, Investors, Legal), and small legal disclaimers.
+
+  Six bespoke SVG marks (molecule protein-fold, capsule outline,
+  microscope silhouette, patient-portrait framing bracket, phase-
+  chip separator glyph, timeline milestone dot) are dropped as
+  PUNCTUATION at specific compositional moments — never as a
+  uniform icon row.
+
+imagery: |
+  EDITORIAL patient portrait + scientist portrait + laboratory
+  photography under warm directional light — the reference uses
+  quiet, dignified portraits of real patients and researchers, shot
+  in interior clinical / laboratory settings with soft window light.
+  FPO imagery here should read as considered documentary portraiture
+  (posed subject, warm interior light, minimal styling). NO stock
+  "diverse team in lab coats around a laptop" photography (that's the
+  AI-tell for corporate-pharma slop). NO 3D-rendered molecule
+  visualizations that read as game engine (bespoke SVG only). NO
+  warm-radial-gradient fills as placeholder decoration.
+
+best_for:
+  - Big-pharmaceutical and biopharmaceutical corporate sites
+  - Clinical trial recruitment and patient-facing pharma sites
+  - Medical research organizations and academic clinical research units
+  - Healthcare technology companies with a clinical / regulatory register
+  - Boutique specialty-med brands (fertility, precision oncology, rare disease)
+  - Corporate reports and investor communications for life-sciences firms
+
+avoid:
+  - "Dark canvas (near-black / true-black) as the primary background — Pharma Clinical's canvas is warm CREAM at #f7f3e8. A dark canvas inverts the trust-forward warm-professional register into a startup-biotech register (which is a different theme)."
+  - "Sans-serif display type — the display face MUST be a Bodoni-family serif with strong stress contrast (Bodoni Moda / Playfair Display fallback). Sans display collapses this into a modern-biotech register."
+  - "Multi-color accent palette — the whole register's move is ONE burgundy accent doing everything (phase chips, hover states, underlines, pull-quote mark). Introducing amber / cyan / any second accent collapses the discipline into candy-corporate slop."
+  - "Rounded corners on cards, buttons, phase-chip pills, timeline dots, or photograph frames — 0px radius everywhere."
+  - "Stock diverse-team-in-lab-coat photography — imagery MUST feel like editorial documentary portraiture (quiet posed subjects under warm directional light). Stock team-around-laptop photography is the AI-tell for corporate pharma slop."
+  - "3D-rendered molecule visualizations — molecule illustrations MUST be bespoke SVG line-art with subtle burgundy highlights. Game-engine 3D renders read as tech-biotech, not warm-clinical."
+  - "Mono-caps eyebrow labels outside the two legitimate use sites — CLINICAL-PHASE INDICATOR (PHASE 01) and SECTION MARKER (OUR SCIENCE) are the ONLY permitted mono-caps uses. Any additional 'SECTION · X' / 'CHAPTER · Y' / 'MIN READ' plate is slop-blocklist violation."
+  - "Cycling headline words / auto-advancing sliders / horizontal tickers — pharma register requires STATIC, RESTRAINED motion. Marketing-web motion collapses into startup slop."
+  - "Warm-radial gradient placeholder fills — every photograph FPO must read as documentary portraiture. Warm-radial gradients are the AI-tell for missing imagery."
+  - "Big saturated hero-marketing display type at 200px+ — the register requires RESTRAINED display scale so the content (data callouts, patient stories, pipeline) carries the drama, not the type."
+
+banned_defaults:
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is #f7f3e8, WARMER than claude-cream and distinct."
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent)"
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)"
+  - "tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)"
+  - "uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)"
+  - "dark-biotech-inversion (canvas is warm cream. Swapping to dark canvas collapses into a modern-biotech register that reads as startup, not big-pharma.)"
+  - "multi-accent-flood (ONE burgundy accent doing 100% of the punctuation. Introducing cyan / orange / any secondary accent collapses the discipline into candy-corporate.)"
+  - "stock-lab-coat-photography (imagery must feel documentary and considered. Stock diverse-team-in-lab is the AI-tell for corporate-pharma slop.)"
+  - "3d-molecule-render (molecule visualization must be bespoke SVG line-art with burgundy highlights. 3D game-engine renders read as tech-startup, not warm-pharma.)"
+  - "monumental-marketing-hero (hero display stays RESTRAINED at ~64px so the pipeline / patient stories / data callouts carry the composition. Big marketing hero type collapses the register into SaaS slop.)"