@stylecrib/cli 0.3.1 → 0.3.2

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.)"

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/audit.log.jsonl

@@ -0,0 +1 @@
+{"slug":"pill-editorial","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T07:42:34.447Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T07:42:34.455Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T07:43:17.213Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"Family C rubric.md missing at /Users/mattfrischer/Taste/site/design-system/golden-set/C/rubric.md — anchor-compare skipped."},"ran_at":"2026-07-04T07:43:17.214Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-04T07:42:34.447Z"}

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;