@stylecrib/cli 0.3.1 → 0.3.3

package/themes/pharma-clinical/tokens.ts

@@ -0,0 +1,29 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "pharma-clinical",
+  family: "C",
+  base: "30",
+  palette: {
+    "bg": "#f7f3e8",
+    "surface": "#ffffff",
+    "ink": "#1a1a1a",
+    "accent": "#6b1a1a",
+    "cream": "#f0eadc",
+    "darkInk": "#0a0a0a",
+    "mute": "#6a6558"
+  },
+  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.\n"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. 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.\n2. 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.\n3. 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.\n4. Clinical data counters — each stat number rolls from 0 → target on first scroll into view via requestAnimationFrame, 2000ms ease-out.\n5. Patient portrait progressive reveal — the story-band portrait fades from blur(6px) + opacity 0.4 → blur(0) + opacity 1 over 900ms cubic-bezier.\n6. Timeline sequential reveal — milestone dots animate in with 120ms per-dot stagger + 500ms cubic-bezier when the timeline scrolls into view.\n7. Nav shrink on scroll — masthead height reduces from 88px → 56px after 200px of scroll, transitioning padding + wordmark font-size over 300ms cubic-bezier.\n8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier on IntersectionObserver at 25% threshold.\n9. 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).\n\nMotion 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.\n",
+  signature: "Warm cream canvas at #f7f3e8 — the register's non-negotiable base\n(deliberately warmer than editorial's gallery #fafafa, cooler than\ncabana-poster's #eedfca, and distinct from claude-cream #F4F1EA).\nCold near-black ink #1a1a1a with ONE burgundy accent #6b1a1a used\nONLY for clinical-phase chip fills + section-marker underlines +\nhover states + pull-quote marks. Sharp corners everywhere.\n\nComposition begins with a MASTHEAD — a Bodoni-family wordmark\n\"WATERSHED\" (ALL CAPS, letter-spacing 0.03em, ~24px) on the left,\na horizontal nav row center (For patients / For clinicians / Our\nscience / Our pipeline / Careers / Investors), a filled burgundy\nrectangular \"Contact\" button right-aligned. The masthead shrinks\nafter 200px of scroll.\n\nHero: a two-column split — LEFT column carries the big Bodoni\ndisplay headline (~64px, mixed case) + a Inter Tight body-copy\nlede paragraph + a burgundy \"Learn about our science →\" text\nlink with hover underline. RIGHT column carries a full-bleed\npatient / scientist portrait photograph (studio-quality, warm\ndirectional light) with a small caption strip beneath (\"Photograph:\nDr. Ren Havelock, Head of Clinical Research, Watershed\").\n\nBelow the hero: a NUMBERED PIPELINE STAGES section — a horizontal\nprogress bar with 5 phase markers (Discovery / Preclinical / Phase\n01 / Phase 02 / Phase 03), each marked by a small burgundy chip and\na molecule count. On scroll into view, the progress fill animates\nfrom 0 → active-phase% and phase chips fade in with 160ms stagger.\n\nA PATIENT STORY BAND follows — a full-width warm cream inverted\nband with a large patient portrait photograph on the left and a\npatient-quote pull with attribution on the right (\"For the first\ntime in eleven years, I slept through a Tuesday.\" — Amara, on\nstarting an investigational treatment). Italic Bodoni for the\npull quote at 32px.\n\nCLINICAL DATA CALLOUTS — a 3-column grid with counting numbers:\n247 (active trials), 12,483 (patients enrolled globally), 89%\n(retention through phase 3). Each number counts up from 0 on\nscroll into view. Below each number a body-copy explanation and\na small footnote citation.\n\nSCIENTIFIC ILLUSTRATION section — a paired layout with a bespoke\nMOLECULE SVG on one side (a stylized protein-fold visualization)\nand a scientific-explanation paragraph on the other. The molecule\nis drawn as line-art with subtle burgundy highlights, not as a 3D\nrender.\n\nMILESTONE TIMELINE — a vertical timeline (rule + dots) with 6\nhistorical entries (Founded 2003, First IPO, First approval, etc).\nDots animate in with 120ms per-dot stagger on scroll into view.\n\nCAREERS BAND — warm cream inverted background with a \"We're\nhiring across research + clinical + regulatory + commercial\"\nmonumental Bodoni headline + a 4-column open-role list + a\nphotograph of the actual laboratory space.\n\nFooter: a dark inverted band with the big Bodoni wordmark\nrepeated, colophon paragraph, 4-column utility grid (About,\nPatients, Investors, Legal), and small legal disclaimers.\n\nSix bespoke SVG marks (molecule protein-fold, capsule outline,\nmicroscope silhouette, patient-portrait framing bracket, phase-\nchip separator glyph, timeline milestone dot) are dropped as\nPUNCTUATION at specific compositional moments — never as a\nuniform icon row.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/pill-editorial/THEME.md

@@ -0,0 +1,125 @@
+# Pill Editorial
+
+> Modern cultural editorial register — black canvas broken by rounded pill tiles and a warm cream inverted band, monumental Million-family bold uppercase display type at 240px+, and a comprehensive 999px border-radius applied to every card / button / tile / image / form input / nav pill without exception.
+
+**Slug:** `pill-editorial` — **Surface:** web — **Density:** dense
+
+## Influence
+
+Modern culturally-specific creative studios (the register held by Black-owned and community-forward creative agencies at their most confident + editorial). Also modern-editorial rounded-chrome design systems (the Blackbird, Cash App at their most warm, Are.na when it leans playful). Distinct from other Family C bases through the FULLY ROUNDED chrome and the MONUMENTAL display type at editorial-poster scale.
+
+
+## Signature move
+
+Every card, button, tile, image, form input, and nav pill in the
+composition ships at 999px border-radius — the FULLY ROUNDED chrome
+is the register's distinguishing structural move. This is the first
+theme in the library with a non-zero border radius; every previous
+theme (10 of 10) uses 0px sharp corners. Monumental display type at
+240px (Million reference face; Fraunces 900 free fallback), all-caps,
+breaking the baseline grid — the display is the primary design
+element. A featured PORTRAIT PILL TILE at ~600x900px shows the
+studio's featured subject inside a rounded-pill mask (aspect ratio
+~2:3), with a horizontal LOADING text marquee scrolling across the
+bottom of the image. A big cartoon SVG illustration (a person on a
+bicycle with a bird companion, hand-drawn in cream on black)
+anchors the "PLAY AS PRACTICE" motto section. Below, a 5-card grid
+of recommendation pill tiles — each card is a fully-rounded pill
+with a portrait image at the top, a small colored accent chip, a
+title, and a byline. A newsletter capture with an amber pill button.
+A 3-book recommended-reading strip with each book cover in a rounded
+pill mask. The composition closes with a monumental "FOR YOU"
+headline and a 3-card audience-segment grid (For Artists / For
+Institutions / For Your Team) — each card a large rounded pill
+tile with a portrait image and a small accent-chip. Small
+mono-caps 10-12px 0.2em-tracked eyebrow labels are LEGITIMATELY
+USED here (rare exception to the universal slop-blocklist — see
+eyebrow_exception in typography). Brand character sits in the
+rounded chrome, the monumental display, and the editorial
+portraits — not in decoration, not in geometric ornament.
+
+## Palette
+
+- **bg:** `#000000`
+- **surface:** `#111111`
+- **ink:** `#FFFFFF`
+- **accent:** `#146C5A`
+
+## Typography
+
+- **Display:** Million (paid) or a bold display serif fallback — Fraunces at 900 weight, or Recoleta / DM Serif Display at bold weight — 800-900 weight, UPPERCASE always, letter-spacing normal or slightly positive. At scale — 240px monumental hero, 160px section headline, 60-80px subheads, 34px h3. Million is the reference face (a bold retro-display serif with chunky proportions); Fraunces at 900-weight bold-italic-off is the closest free approximation with similar chunky-display proportions and expressive character. Reference uses a slightly weird retro-serif face that carries character rather than restraint — the display is expressive, not disciplined.
+- **Body:** Inter Tight or a system sans — 400-500 weight, mixed case, 15-18px body copy, line-height 1.5. Small labels get 12px 500-weight sentence case.
+- **Mono:** none. Pill Editorial is a consumer editorial surface — mono has no role.
+- **Scale:** 1.5 (perfect fifth — deliberately wide contrast so the monumental display shouts and body settles calm)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Monumental hero headline reveal — the display type fades in from opacity 0 + slight scale(0.96) → 1 over 800ms cubic-bezier(0.19,1,0.22,1) on first paint. No letter-stagger (this is an editorial register, not a marketing register).
+2. LOADING marquee — the "LOADING" text on the featured portrait image scrolls horizontally at 40s per loop, continuously (pauses on hover). This IS a legitimate marquee per the reference — spec allows.
+3. Featured pill tiles hover — the rounded pill image tile scales(1.02) + rotates slightly (-1deg) on hover, 220ms cubic-bezier. Reads as "picking up a physical print off the wall."
+4. Card grid stagger — the 5-card recommendation grid fades in with 80ms stagger + 600ms cubic-bezier when scrolled into view.
+5. Newsletter form focus — pill input outline transitions from cream to amber on focus, 200ms.
+6. PLAY AS PRACTICE cartoon SVG — the illustrated character rocks 2deg back and forth on a 3s loop; pauses on hover for readability.
+7. FOR YOU audience-segment cards — hover scales the pill card 1.02 + lifts the internal image scale(1.05), 240ms cubic-bezier.
+8. prefers-reduced-motion: reduce — hero at final scale; LOADING marquee paused; card stagger + hover disabled; cartoon rocking paused. State changes still fire.
+
+Customer installs these as dependencies for the deeper motion tier:
+- Lenis — smooth inertial scroll (the tall page benefits from inertial cadence).
+- GSAP DrawSVG for the cartoon illustration reveals + monumental headline character animations.
+- Custom preloader with the monumental wordmark drawing letter-by-letter over the black canvas.
+
+Motion character: playful, cultural, tactile. Custom cubic-bezier(0.19,1,0.22,1) for reveals. The register lives between corporate editorial and playful cultural — motion should feel considered but not clinical.
+
+
+## Imagery
+
+Editorial PORTRAIT PHOTOGRAPHY of subjects — the reference uses
+images of Black artists, cultural figures, and creative practitioners
+photographed under directional light in colorful outfits against
+colored backdrops. FPO imagery here should read as culturally
+specific + editorially considered — colored backdrop rectangles
+with subject silhouettes, textural cutouts, and warm-forward
+lighting cues. Never generic stock. Every photo tile is masked to
+a 999px rounded-pill shape. Cartoon SVG illustrations (bespoke,
+hand-drawn feel — line art of figures, animals, and simple
+environmental cues) mixed with photography. NO gradient blobs, NO
+glassmorphism, NO stock-diverse-workplace photography (that's the
+slop tell). The register lives at the intersection of magazine
+editorial + community-forward creative studio.
+
+## Best for
+
+- Cultural intelligence studios and Black-owned creative agencies
+- Modern editorial magazines with a culturally-specific voice
+- Community-forward creative studios (art advisories, cultural consultancies)
+- Podcast + editorial platforms with a distinct subculture perspective
+- Independent art advisories serving cultural institutions + artists
+- Boutique studios doing brand work for museums, cultural venues, and heritage brands
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Non-999px border radius — this is the register's distinguishing structural move. Every card, button, tile, image, form input, nav pill MUST ship at 999px.
+- Serif or humanist display type at the hero scale — the display face MUST be a bold retro-display serif with chunky character (Million, Fraunces 900, Recoleta, DM Serif Display). Inter Display / Anton / DM Sans have the wrong register.
+- Multiple accent colors flooding the composition — cream + forest + amber is the studio's palette. Introducing pink / purple / any additional color as an accent collapses the register.
+- Neutral canvas (white / cream / gray) as the primary background — canvas IS black. Swapping to a light canvas collapses this into generic-editorial slop.
+- Corporate polish — no drop-shadow-md, no soft-glow, no gradient backdrop. Pill tiles are FLAT rounded rectangles with color fills only.
+- Sharp-cornered cards or buttons anywhere on the page — the 999px pill is universal in this theme.
+- Generic stock photography that reads as 'diverse workplace' — imagery MUST feel editorial + culturally specific. Portraits under directional light on colored backdrops, not lunch meetings around a laptop.
+- Uniform 3-column feature grids — the FOR YOU section is 3 cards but each card has a DIFFERENT color, DIFFERENT image, DIFFERENT audience label. It's not a template.
+- Emoji or decorative unicode marks — cartoon SVG illustrations and photography carry all the ornamentation
+- Auto-advancing hero sliders / cycling headline words — only the LOADING marquee is auto (per reference); everything else waits for user input
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757)
+- 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)
+- sharp-corner-anywhere (this theme's whole point is the fully-rounded pill chrome. A sharp-cornered card, button, or input anywhere on the page immediately breaks the register.)
+- cream-flood (cream is INVERTED-BAND-BACKGROUND + CARD-FILL color, not a canvas primary. Making cream the whole page background collapses the theme into a generic warm-editorial and the black-canvas identity dies.)
+- generic-diverse-workplace-photography (the imagery must be EDITORIAL PORTRAIT under directional light on colored backdrops. Stock photography of racially-diverse people in an office collapses the register into corporate-diversity slop.)
+- pill-plus-shadow (rounded pills with drop-shadow-md is the stock Medium / Substack aesthetic. Pills here must be FLAT color-fill rectangles with no shadow.)

package/themes/pill-editorial/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: pill-editorial
+export const pillEditorialTailwindExtend = {
+  colors: {
+    bg: "#000000",
+    surface: "#111111",
+    ink: "#FFFFFF",
+    accent: "#146C5A",
+  },
+  fontFamily: {
+    display: ["Million (paid) or a bold display serif fallback — Fraunces at 900 weight, or Recoleta / DM Serif Display at bold weight — 800-900 weight, UPPERCASE always, letter-spacing normal or slightly positive. At scale — 240px monumental hero, 160px section headline, 60-80px subheads, 34px h3. Million is the reference face (a bold retro-display serif with chunky proportions); Fraunces at 900-weight bold-italic-off is the closest free approximation with similar chunky-display proportions and expressive character. Reference uses a slightly weird retro-serif face that carries character rather than restraint — the display is expressive, not disciplined."],
+    body: ["Inter Tight or a system sans — 400-500 weight, mixed case, 15-18px body copy, line-height 1.5. Small labels get 12px 500-weight sentence case."],
+    mono: ["none. Pill Editorial is a consumer editorial surface — mono has no role."],
+  },
+};

package/themes/pill-editorial/theme.yml

@@ -0,0 +1,168 @@
+# Pill Editorial — Family C, Editorial & Print.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md. FIRST theme in the
+# library with a non-zero border radius. Every previous theme (10 of
+# 10) has been 0px sharp corners. Pill Editorial ships every card,
+# button, tile, image, form input, and nav pill at 999px radius —
+# the register is FULLY ROUNDED as its distinguishing feature.
+#
+# Family placement — Editorial & Print register, but distinct from
+# other Family C bases:
+#   - Base 26 Cut & Paste Zine — pure ransom-note chaos (marker-mag
+#     adjacent)
+#   - Base 27 Type Specimen — foundry showcase
+#   - Ember Poster (my new-base) — warm-dark editorial
+#   - Case Panel (my new-base) — agency portfolio
+#   - Marker Mag (my new-base) — student DIY
+#   - Atelier Radiance (my new-base) — luxury boutique
+# Pill Editorial fills the gap of MODERN CULTURAL EDITORIAL — a
+# distinctly Black-cultural-studio register with rounded pills as the
+# structural chrome and monumental display type as the identity.
+#
+# Authored from Matt's provided design brief (2026-07-04,
+# thefutureinblack.com reference — a real cultural intelligence studio).
+# Placeholder brand is a fictional cultural intelligence studio called
+# KIN — domain-agnostic mockup that could re-skin to any culturally-
+# specific creative studio, editorial magazine, art advisory, or
+# community-forward brand. The register expresses "modern editorial"
+# through the ROUNDED PILL chrome + MONUMENTAL display type +
+# EDITORIAL PHOTOGRAPHY that photographs subjects with cultural
+# specificity rather than generic-stock aesthetic.
+#
+# Eleventh theme via the v2 harness. Fourth Family C theme (after
+# ember-poster + case-panel + marker-mag). Sixth NEW BASE.
+#
+# Alternative slugs considered — culture-studio (too generic),
+# soft-editorial (imprecise), pill-cultural (backward word order),
+# radius-editorial (technical framing). Pill Editorial picked because
+# "pill" nails the 999px radius signature and "editorial" carries the
+# magazine/monumental-type register that anchors this base.
+
+name: Pill Editorial
+concept: Modern cultural editorial register — black canvas broken by rounded pill tiles and a warm cream inverted band, monumental Million-family bold uppercase display type at 240px+, and a comprehensive 999px border-radius applied to every card / button / tile / image / form input / nav pill without exception.
+influence: |
+  Modern culturally-specific creative studios (the register held by Black-owned and community-forward creative agencies at their most confident + editorial). Also modern-editorial rounded-chrome design systems (the Blackbird, Cash App at their most warm, Are.na when it leans playful). Distinct from other Family C bases through the FULLY ROUNDED chrome and the MONUMENTAL display type at editorial-poster scale.
+
+family: C
+base_number: 26
+base_note: |
+  New-base candidate in Family C, adjacent to Base 26 Cut & Paste Zine but from a fundamentally different aesthetic tradition. Base 26 is punk photocopy anarchy; Pill Editorial is refined modern editorial with rounded chrome. Both trade on their subculture register but through opposite structural moves — Cut & Paste through torn edges + mismatched fonts, Pill Editorial through fully-rounded pills + one confident monumental display. This is the FIRST theme with a non-zero border radius in the library — the 999px pill is the register's distinguishing structural move.
+
+render_url: http://localhost:5173/themes/pill-editorial
+
+surface: web
+
+typography:
+  display: Million (paid) or a bold display serif fallback — Fraunces at 900 weight, or Recoleta / DM Serif Display at bold weight — 800-900 weight, UPPERCASE always, letter-spacing normal or slightly positive. At scale — 240px monumental hero, 160px section headline, 60-80px subheads, 34px h3. Million is the reference face (a bold retro-display serif with chunky proportions); Fraunces at 900-weight bold-italic-off is the closest free approximation with similar chunky-display proportions and expressive character. Reference uses a slightly weird retro-serif face that carries character rather than restraint — the display is expressive, not disciplined.
+  body: Inter Tight or a system sans — 400-500 weight, mixed case, 15-18px body copy, line-height 1.5. Small labels get 12px 500-weight sentence case.
+  mono: none. Pill Editorial is a consumer editorial surface — mono has no role.
+  scale: 1.5 (perfect fifth — deliberately wide contrast so the monumental display shouts and body settles calm)
+  eyebrow_exception: |
+    The universal slop-blocklist bans mono-caps eyebrows as a general defensive rule. Pill Editorial LEGITIMATELY uses small uppercase 0.2em-tracked 10-12px labels as section eyebrows because the reference site (thefutureinblack.com) genuinely uses them in this exact register — they are part of the modern-editorial vocabulary this base descends from. Every use of a small caps label in this theme is deliberate and reference-anchored, not defensive slop. This is a THEME-SPECIFIC EXCEPTION that must be manually preserved during harness grading.
+
+palette:
+  bg: "#000000"           # canvas — dark hero + full-page dark register
+  surface: "#111111"      # slightly-lifted panel on the dark canvas
+  ink: "#FFFFFF"          # white — primary text on the dark canvas
+  accent: "#146C5A"       # primary accent (forest green) — pill CTAs + accent word inside headlines
+  cream: "#F2E6CA"        # warm parchment — inverted "For You" section band + editorial pill tiles
+  forest: "#146C5A"       # same as accent — kept as a semantic alias for downstream tokens
+  amber: "#E8A628"        # secondary accent — highlight underlines + small pill badges
+  darkInk: "#0A0A0A"      # ink for text on cream + forest pill tiles
+  mute: "#8A8078"         # secondary text (labels, captions)
+
+density: dense
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Monumental hero headline reveal — the display type fades in from opacity 0 + slight scale(0.96) → 1 over 800ms cubic-bezier(0.19,1,0.22,1) on first paint. No letter-stagger (this is an editorial register, not a marketing register).
+  2. LOADING marquee — the "LOADING" text on the featured portrait image scrolls horizontally at 40s per loop, continuously (pauses on hover). This IS a legitimate marquee per the reference — spec allows.
+  3. Featured pill tiles hover — the rounded pill image tile scales(1.02) + rotates slightly (-1deg) on hover, 220ms cubic-bezier. Reads as "picking up a physical print off the wall."
+  4. Card grid stagger — the 5-card recommendation grid fades in with 80ms stagger + 600ms cubic-bezier when scrolled into view.
+  5. Newsletter form focus — pill input outline transitions from cream to amber on focus, 200ms.
+  6. PLAY AS PRACTICE cartoon SVG — the illustrated character rocks 2deg back and forth on a 3s loop; pauses on hover for readability.
+  7. FOR YOU audience-segment cards — hover scales the pill card 1.02 + lifts the internal image scale(1.05), 240ms cubic-bezier.
+  8. prefers-reduced-motion: reduce — hero at final scale; LOADING marquee paused; card stagger + hover disabled; cartoon rocking paused. State changes still fire.
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll (the tall page benefits from inertial cadence).
+  - GSAP DrawSVG for the cartoon illustration reveals + monumental headline character animations.
+  - Custom preloader with the monumental wordmark drawing letter-by-letter over the black canvas.
+
+  Motion character: playful, cultural, tactile. Custom cubic-bezier(0.19,1,0.22,1) for reveals. The register lives between corporate editorial and playful cultural — motion should feel considered but not clinical.
+
+signature: |
+  Every card, button, tile, image, form input, and nav pill in the
+  composition ships at 999px border-radius — the FULLY ROUNDED chrome
+  is the register's distinguishing structural move. This is the first
+  theme in the library with a non-zero border radius; every previous
+  theme (10 of 10) uses 0px sharp corners. Monumental display type at
+  240px (Million reference face; Fraunces 900 free fallback), all-caps,
+  breaking the baseline grid — the display is the primary design
+  element. A featured PORTRAIT PILL TILE at ~600x900px shows the
+  studio's featured subject inside a rounded-pill mask (aspect ratio
+  ~2:3), with a horizontal LOADING text marquee scrolling across the
+  bottom of the image. A big cartoon SVG illustration (a person on a
+  bicycle with a bird companion, hand-drawn in cream on black)
+  anchors the "PLAY AS PRACTICE" motto section. Below, a 5-card grid
+  of recommendation pill tiles — each card is a fully-rounded pill
+  with a portrait image at the top, a small colored accent chip, a
+  title, and a byline. A newsletter capture with an amber pill button.
+  A 3-book recommended-reading strip with each book cover in a rounded
+  pill mask. The composition closes with a monumental "FOR YOU"
+  headline and a 3-card audience-segment grid (For Artists / For
+  Institutions / For Your Team) — each card a large rounded pill
+  tile with a portrait image and a small accent-chip. Small
+  mono-caps 10-12px 0.2em-tracked eyebrow labels are LEGITIMATELY
+  USED here (rare exception to the universal slop-blocklist — see
+  eyebrow_exception in typography). Brand character sits in the
+  rounded chrome, the monumental display, and the editorial
+  portraits — not in decoration, not in geometric ornament.
+
+imagery: |
+  Editorial PORTRAIT PHOTOGRAPHY of subjects — the reference uses
+  images of Black artists, cultural figures, and creative practitioners
+  photographed under directional light in colorful outfits against
+  colored backdrops. FPO imagery here should read as culturally
+  specific + editorially considered — colored backdrop rectangles
+  with subject silhouettes, textural cutouts, and warm-forward
+  lighting cues. Never generic stock. Every photo tile is masked to
+  a 999px rounded-pill shape. Cartoon SVG illustrations (bespoke,
+  hand-drawn feel — line art of figures, animals, and simple
+  environmental cues) mixed with photography. NO gradient blobs, NO
+  glassmorphism, NO stock-diverse-workplace photography (that's the
+  slop tell). The register lives at the intersection of magazine
+  editorial + community-forward creative studio.
+
+best_for:
+  - Cultural intelligence studios and Black-owned creative agencies
+  - Modern editorial magazines with a culturally-specific voice
+  - Community-forward creative studios (art advisories, cultural consultancies)
+  - Podcast + editorial platforms with a distinct subculture perspective
+  - Independent art advisories serving cultural institutions + artists
+  - Boutique studios doing brand work for museums, cultural venues, and heritage brands
+
+avoid:
+  - "Non-999px border radius — this is the register's distinguishing structural move. Every card, button, tile, image, form input, nav pill MUST ship at 999px."
+  - "Serif or humanist display type at the hero scale — the display face MUST be a bold retro-display serif with chunky character (Million, Fraunces 900, Recoleta, DM Serif Display). Inter Display / Anton / DM Sans have the wrong register."
+  - "Multiple accent colors flooding the composition — cream + forest + amber is the studio's palette. Introducing pink / purple / any additional color as an accent collapses the register."
+  - "Neutral canvas (white / cream / gray) as the primary background — canvas IS black. Swapping to a light canvas collapses this into generic-editorial slop."
+  - "Corporate polish — no drop-shadow-md, no soft-glow, no gradient backdrop. Pill tiles are FLAT rounded rectangles with color fills only."
+  - "Sharp-cornered cards or buttons anywhere on the page — the 999px pill is universal in this theme."
+  - "Generic stock photography that reads as 'diverse workplace' — imagery MUST feel editorial + culturally specific. Portraits under directional light on colored backdrops, not lunch meetings around a laptop."
+  - "Uniform 3-column feature grids — the FOR YOU section is 3 cards but each card has a DIFFERENT color, DIFFERENT image, DIFFERENT audience label. It's not a template."
+  - "Emoji or decorative unicode marks — cartoon SVG illustrations and photography carry all the ornamentation"
+  - "Auto-advancing hero sliders / cycling headline words — only the LOADING marquee is auto (per reference); everything else waits for user input"
+
+banned_defaults:
+  # Global blocklist from BESPOKE_THEME_SYSTEM.md
+  - "claude-cream (#F4F1EA + serif + #D97757)"
+  - "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)"
+  # Base-specific
+  - "sharp-corner-anywhere (this theme's whole point is the fully-rounded pill chrome. A sharp-cornered card, button, or input anywhere on the page immediately breaks the register.)"
+  - "cream-flood (cream is INVERTED-BAND-BACKGROUND + CARD-FILL color, not a canvas primary. Making cream the whole page background collapses the theme into a generic warm-editorial and the black-canvas identity dies.)"
+  - "generic-diverse-workplace-photography (the imagery must be EDITORIAL PORTRAIT under directional light on colored backdrops. Stock photography of racially-diverse people in an office collapses the register into corporate-diversity slop.)"
+  - "pill-plus-shadow (rounded pills with drop-shadow-md is the stock Medium / Substack aesthetic. Pills here must be FLAT color-fill rectangles with no shadow.)"

package/themes/pill-editorial/tokens.ts

@@ -0,0 +1,31 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "pill-editorial",
+  family: "C",
+  base: "26",
+  palette: {
+    "bg": "#000000",
+    "surface": "#111111",
+    "ink": "#FFFFFF",
+    "accent": "#146C5A",
+    "cream": "#F2E6CA",
+    "forest": "#146C5A",
+    "amber": "#E8A628",
+    "darkInk": "#0A0A0A",
+    "mute": "#8A8078"
+  },
+  typography: {
+    "display": "Million (paid) or a bold display serif fallback — Fraunces at 900 weight, or Recoleta / DM Serif Display at bold weight — 800-900 weight, UPPERCASE always, letter-spacing normal or slightly positive. At scale — 240px monumental hero, 160px section headline, 60-80px subheads, 34px h3. Million is the reference face (a bold retro-display serif with chunky proportions); Fraunces at 900-weight bold-italic-off is the closest free approximation with similar chunky-display proportions and expressive character. Reference uses a slightly weird retro-serif face that carries character rather than restraint — the display is expressive, not disciplined.",
+    "body": "Inter Tight or a system sans — 400-500 weight, mixed case, 15-18px body copy, line-height 1.5. Small labels get 12px 500-weight sentence case.",
+    "mono": "none. Pill Editorial is a consumer editorial surface — mono has no role.",
+    "scale": "1.5 (perfect fifth — deliberately wide contrast so the monumental display shouts and body settles calm)",
+    "eyebrow_exception": "The universal slop-blocklist bans mono-caps eyebrows as a general defensive rule. Pill Editorial LEGITIMATELY uses small uppercase 0.2em-tracked 10-12px labels as section eyebrows because the reference site (thefutureinblack.com) genuinely uses them in this exact register — they are part of the modern-editorial vocabulary this base descends from. Every use of a small caps label in this theme is deliberate and reference-anchored, not defensive slop. This is a THEME-SPECIFIC EXCEPTION that must be manually preserved during harness grading.\n"
+  },
+  surface: "web",
+  density: "dense",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Monumental hero headline reveal — the display type fades in from opacity 0 + slight scale(0.96) → 1 over 800ms cubic-bezier(0.19,1,0.22,1) on first paint. No letter-stagger (this is an editorial register, not a marketing register).\n2. LOADING marquee — the \"LOADING\" text on the featured portrait image scrolls horizontally at 40s per loop, continuously (pauses on hover). This IS a legitimate marquee per the reference — spec allows.\n3. Featured pill tiles hover — the rounded pill image tile scales(1.02) + rotates slightly (-1deg) on hover, 220ms cubic-bezier. Reads as \"picking up a physical print off the wall.\"\n4. Card grid stagger — the 5-card recommendation grid fades in with 80ms stagger + 600ms cubic-bezier when scrolled into view.\n5. Newsletter form focus — pill input outline transitions from cream to amber on focus, 200ms.\n6. PLAY AS PRACTICE cartoon SVG — the illustrated character rocks 2deg back and forth on a 3s loop; pauses on hover for readability.\n7. FOR YOU audience-segment cards — hover scales the pill card 1.02 + lifts the internal image scale(1.05), 240ms cubic-bezier.\n8. prefers-reduced-motion: reduce — hero at final scale; LOADING marquee paused; card stagger + hover disabled; cartoon rocking paused. State changes still fire.\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll (the tall page benefits from inertial cadence).\n- GSAP DrawSVG for the cartoon illustration reveals + monumental headline character animations.\n- Custom preloader with the monumental wordmark drawing letter-by-letter over the black canvas.\n\nMotion character: playful, cultural, tactile. Custom cubic-bezier(0.19,1,0.22,1) for reveals. The register lives between corporate editorial and playful cultural — motion should feel considered but not clinical.\n",
+  signature: "Every card, button, tile, image, form input, and nav pill in the\ncomposition ships at 999px border-radius — the FULLY ROUNDED chrome\nis the register's distinguishing structural move. This is the first\ntheme in the library with a non-zero border radius; every previous\ntheme (10 of 10) uses 0px sharp corners. Monumental display type at\n240px (Million reference face; Fraunces 900 free fallback), all-caps,\nbreaking the baseline grid — the display is the primary design\nelement. A featured PORTRAIT PILL TILE at ~600x900px shows the\nstudio's featured subject inside a rounded-pill mask (aspect ratio\n~2:3), with a horizontal LOADING text marquee scrolling across the\nbottom of the image. A big cartoon SVG illustration (a person on a\nbicycle with a bird companion, hand-drawn in cream on black)\nanchors the \"PLAY AS PRACTICE\" motto section. Below, a 5-card grid\nof recommendation pill tiles — each card is a fully-rounded pill\nwith a portrait image at the top, a small colored accent chip, a\ntitle, and a byline. A newsletter capture with an amber pill button.\nA 3-book recommended-reading strip with each book cover in a rounded\npill mask. The composition closes with a monumental \"FOR YOU\"\nheadline and a 3-card audience-segment grid (For Artists / For\nInstitutions / For Your Team) — each card a large rounded pill\ntile with a portrait image and a small accent-chip. Small\nmono-caps 10-12px 0.2em-tracked eyebrow labels are LEGITIMATELY\nUSED here (rare exception to the universal slop-blocklist — see\neyebrow_exception in typography). Brand character sits in the\nrounded chrome, the monumental display, and the editorial\nportraits — not in decoration, not in geometric ornament.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/podcast-warm/THEME.md

@@ -0,0 +1,103 @@
+# Design Direction — Podcast-Warm
+
+## Ethos
+Overcast warm orange · Pocket Casts deep red · Castro deep teal-green · Goodpods community warmth · Snipd purple clip-cards
+
+## Feel
+Warm off-white canvas, generously rounded chrome, oversized artwork tiles in a subscribed-shows grid. Friendly secondary palette of teal-green and clip-card purple. The independent-listener counterpoint to Spotify's cold corporate dark — this surface feels like a curated shelf of shows, not a streaming dashboard. The page is a library, not a player.
+
+## Reference brands
+- **Overcast** → warm orange accent with friendly system sans and soft cards. The independent-listener default.
+- **Pocket Casts** → deep red action color with smooth animations and warm surfaces. Considered library-management UX.
+- **Castro** → deep teal-green chrome with a friendly, library-shelf feel. Inbox-style queue.
+- **Goodpods** → community-warm Plus Jakarta Sans, recommendation-led layout. Social discovery.
+- **Snipd** → purple clip-cards and friendly AI-generated chapter chrome. Clip-as-share-unit.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **warm-cream** (background, HSL `32 30% 96%` — library-shelf cream) → **white card** (`0 0% 100%`) → **deeper cream** (secondary/muted). Depth comes from soft warm shadows on cards lifted above the cream canvas — the cards feel like physical tiles on a shelf.
+
+Brand tokens: `--overcast-orange` (primary, the canonical play color), `--castro-teal` (accent, friendly secondary), `--pocketcasts-red` (subscribed/badge accent), `--snipd-purple` (clip-card chrome), `--goodpods-pink` (recommendation highlight), `--warm-cream`, `--shelf-brown`. Primary is `--overcast-orange` — used for all play affordances and the hero subscribe CTA.
+
+## Typography
+- **Display:** Plus Jakarta Sans (Goodpods display). Friendly geometric humanist, soft terminals — podcast-app warm. Tracking `-0.015em`.
+- **Body:** Inter (Overcast/Pocket Casts system-feel sans). Neutral, screen-comfortable for episode descriptions. Body base **16px** with **line-height 1.6**.
+- **Mono:** JetBrains Mono. Episode runtimes, chapter timestamps, playback speed — tabular numerics.
+
+H1 uses `clamp(2.25rem, 6vw, 4.5rem)` — friendly hero scale, not cinematic-large. Font features: `"ss01"`, `"cv11"`, `"tnum"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-5 lg:px-8` — wide enough for a four-column subscribed-shows grid but not as wide as music-streaming.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-14 lg:pt-32 lg:pb-20`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128. No arbitrary spacing.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token. Pure white is reserved for `--card` only — the warm-cream canvas is the default page surface. Pure black is forbidden — `--shelf-brown` (warm brown-ink) replaces it.
+
+**Overcast orange is the canonical play color.** Castro-teal is the friendly secondary used for "Subscribed" toggles, category chips, and hover accents — it is the only place teal-green appears. Pocket-casts-red is reserved for "Subscribed" badges and library-management accents — never a CTA color. Snipd-purple sits on clip-cards and AI-summary chrome only. Goodpods-pink is for recommendation-card highlights only.
+
+## Radius
+`--radius: 1rem`. **Generously rounded — the warm-chrome signal.** Pills are core (`pillsAllowed: true`): category chips, subscribe toggles, playback-speed selectors, search input all use `rounded-full`. Icon buttons use `1rem`. Cards use `1rem`. The rounding is the warm signal.
+
+## Shadows
+**Soft style.** Three utilities:
+- `.tile-soft` — show-artwork tile lift; warm soft drop in `--shelf-brown` at low opacity, never colored
+- `.tile-lift` — hover state; the tile rises with a deeper soft shadow
+- `.subscribe-glow` — hero subscribe button warm glow in overcast-orange, single instance per page
+
+Shadows are always warm (cast from `--shelf-brown` brown-ink), never neutral gray. This is the "tile on a wooden shelf" lighting model.
+
+## Motion
+Five keyframes, all friendly:
+- `tile-rise` (500ms once) — show-tile entrance, staggered across grid, gentle rise
+- `subscribe-pop` (400ms once) — subscribe-button click feedback, friendly pop, never on play/pause
+- `play-bar-bounce` (1800ms infinite) — now-playing mini-bar gentle bounce, present but unobtrusive
+- `chapter-progress` (1200ms once) — chapter-marker fill animation on episode-page chapter list
+- `tile-shimmer` (2400ms infinite) — featured-show artwork shimmer overlay, used only on the hero featured tile
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — every motion utility wrapped in a media query.
+
+## Component patterns
+- **Buttons:** primary play action is a SOLID `rounded-full` overcast-orange button with white play glyph. Subscribe toggle is a pill: outlined Castro-teal when "Subscribe", filled when "Subscribed". Secondary controls (queue, share, download) are ghost icon buttons with 1rem radius. Tertiary text-link CTAs use `--shelf-brown` foreground with underline-on-hover.
+- **Cards:** show-tile is the canonical card — square artwork at 1:1, generously rounded (1rem), with title and host below, lifted by `.tile-soft` shadow that grows to `.tile-lift` on hover. Episode cards use `bg-card` (white) on cream background, `p-5 lg:p-6`, with chapter-list inside when expanded. **No card uses cream fill** — cards always sit above the canvas in white.
+- **Inputs:** pill-shape (`rounded-full`) input with `bg-card`, 1px `--border`, leading icon. Focus ring is 2px overcast-orange. Filter chips are `rounded-full` pills in `bg-secondary` with shelf-brown foreground; selected state shifts to castro-teal fill with white text.
+- **CTA links:** hero subscribe / listen CTA is a solid overcast-orange pill with white label, wrapped in `subscribe-glow`. App Store / Play Store badges for cross-platform CTAs. Tertiary links are foreground with underline-on-hover — **never colored text-only**.
+
+## Recommended rich media
+Podcast-warm leans on **square show artwork** as the hero asset — the same way a podcast-app library shelf does. Cover art at 1:1 aspect with generous rounding sits everywhere from a 48×48 row thumbnail to a full hero feature tile.
+
+Lead media is **square show artwork at 1:1 aspect, minimum 1400×1400 source** (the iTunes/Apple Podcasts spec) displayed at any size. Behind a hero featured show, a subtle blurred-and-warmed copy of the artwork can sit as backdrop — but lighter and softer than the music-streaming equivalent. Host photography is appropriate as a secondary asset on show-detail pages; use **4:5 portrait** with warm color grading.
+
+**AI tool recommendations:** for placeholder show artwork, **Midjourney** with prompts like *"square podcast cover art, [topic] aesthetic, friendly geometric illustration, warm palette, rounded shapes"* — explicitly avoid microphone or headphone clichés. **Flux** for friendly editorial illustrations of hosts or topics. **Recraft** for spot illustrations in show-notes and chapter summaries.
+
+**Aspect ratios:** 1:1 square for show artwork (canonical, matches all podcast directories). 4:5 portrait for host photography. 16:9 for video-podcast trailers only. Never 21:9 (cinematic, wrong feel).
+
+**Video:** video podcasts are user-initiated only, never autoplay. Embedded player uses the same warm chrome with overcast-orange play button. Trailers and clips (Snipd-style) get the purple clip-card treatment with `--snipd-purple` accent.
+
+**Chapter art:** when episodes have per-chapter artwork, show it at 1:1 with the same `tile-soft` shadow language. Chapter progress bars use `chapter-progress` keyframe with `--overcast-orange` fill.
+
+**Clip cards:** Snipd-style highlighted-quote cards use `--snipd-purple` border-left rule, white card body, mono timestamp, and shelf-brown quote text. Treat them as a distinct card variant — never mix with regular episode chrome.
+
+**Performance:** show artwork thumbnails ≤30 KB AVIF at 600w; hero tiles ≤120 KB at 1400w. Blurhash placeholders during load — `tile-rise` covers the transition. LCP under 2s with hero featured tile.
+
+**Avoid:** generic microphone/headphone stock photography (every podcast app uses this — it's the laziest possible visual), dark moody host photography (cinematic territory), gradient backgrounds (soft-modern territory), glassmorphic player chrome, AI-generated hosts with uncanny faces, lens flare, decorative SVG ornament beyond the warm rounded chrome.
+
+**Accessibility:** show artwork always has alt-text in *"[Show name] cover art"* format. Subscribed-state toggle has `aria-pressed` reflecting state. Chapter list is a proper `<ol>` with timestamps as `<time>` elements. Play-bar bounce animation has `aria-hidden="true"`.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Expected first families: `ShowTile`, `EpisodeCard`, `SubscribeButton`, `ChapterList`, `ClipCard`.
+
+## Details
+- **Selection:** `hsl(var(--overcast-orange) / 0.28)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--overcast-orange))`. Matches primary play action.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.