@stylecrib/cli 0.3.1 → 0.3.3

package/themes/vacation-rental/tokens.ts

@@ -0,0 +1,174 @@
+import type { Direction } from "../schema";
+
+export const vacationRental: Direction = {
+  name: "vacation-rental",
+  ethos: "Airbnb soft pink consumer marketing · Vrbo family-warm · Plum Guide curated charcoal · Whimstay last-minute coral · Sonder modern-stay rounded chrome",
+  references: [
+    { brand: "Airbnb", trait: "Cereal wordmark, soft coral-pink hover state, rounded photo-card grid" },
+    { brand: "Vrbo", trait: "family-warm photography, deep-blue trust accent" },
+    { brand: "Plum Guide", trait: "curated charcoal headers, hand-picked editorial captions" },
+    { brand: "Whimstay", trait: "last-minute coral signal, percent-off badge language" },
+    { brand: "Sonder", trait: "modern-stay rounded chrome, hospitality dashboard pacing" },
+  ],
+  feel:
+    "Friendly consumer marketplace. Soft pink primary, generous rounded corners, warm photography-led product cards. " +
+    "Search density up front — filter row, photo grid, wishlist hearts. Reads productive and warm at once: " +
+    "the page you would actually book a cabin on for next weekend, not a luxury portfolio.",
+
+  fonts: {
+    display: {
+      family: "DM Sans",
+      fallback: ["Plus Jakarta Sans", "Inter", "system-ui", "sans-serif"],
+      from: "Airbnb Cereal stand-in — friendly geometric, photo-card-friendly weight",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Vrbo/Sonder body sans — neutral, dense, dashboard-readable at small sizes",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "monospace"],
+      from: "small only — guest counts, night counts, price-per-night tabular numerics",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.018em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum"',
+    h1ScaleClamp: "clamp(2rem, 4.5vw, 3.25rem)",
+    bodyBaseSize: "0.9375rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "Airbnb pure white — photography reads truest on white" },
+    foreground: { hsl: "0 0% 14%", from: "Airbnb near-black — Cereal ink, never pure black" },
+    card: { hsl: "0 0% 100%", from: "same as background — cards lift via shadow, not fill" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "351 78% 56%", from: "Airbnb Rausch — the canonical soft coral-pink" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on Rausch pink" },
+    secondary: { hsl: "20 30% 96%", from: "soft warm-blush surface — wishlist tile bg" },
+    secondaryForeground: { hsl: "0 0% 14%", from: "near-black on warm blush" },
+    muted: { hsl: "20 18% 95%", from: "muted blush — chips and filter inactive states" },
+    mutedForeground: { hsl: "0 0% 44%", from: "neutral gray — meta, ratings count, address" },
+    accent: { hsl: "351 86% 96%", from: "primary-tinted blush — hover fill for soft cards" },
+    accentForeground: { hsl: "351 62% 36%", from: "deepened coral on blush bg" },
+    border: { hsl: "0 0% 88%", from: "soft border — photo-card hairline" },
+    input: { hsl: "0 0% 86%", from: "input border — slightly deeper than card border" },
+    ring: { hsl: "351 78% 56%", from: "Rausch focus ring" },
+    destructive: { hsl: "354 80% 52%", from: "warm error red — sibling of primary, not enterprise red" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on warm red" },
+    brand: {
+      "rausch-pink": { hsl: "351 78% 56%", from: "Airbnb Rausch — the canonical accent" },
+      "rausch-deep": { hsl: "351 72% 44%", from: "pressed coral, button:active" },
+      "blush-soft": { hsl: "20 30% 96%", from: "warm-blush secondary surface" },
+      "vrbo-blue": { hsl: "215 70% 38%", from: "Vrbo trust-blue — used only on Verified Host / Superhost chips" },
+      "wishlist-rose": { hsl: "351 86% 96%", from: "wishlist-tile fill, heart hover bg" },
+      "whimstay-coral": { hsl: "12 88% 60%", from: "last-minute deal coral — never primary, only percent-off badges" },
+      "rating-gold": { hsl: "42 78% 50%", from: "Airbnb star rating — used only on ★ glyphs" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-10",
+    sectionPadding: {
+      hero: "pt-12 pb-8 lg:pt-16 lg:pb-12",
+      default: "py-12 lg:py-16",
+      tight: "py-8 lg:py-10",
+    },
+  },
+
+  radius: {
+    base: "0.75rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(0 0% 0% / 0.04), 0 4px 16px hsl(0 0% 0% / 0.06)",
+      "shadow-card-hover":
+        "0 2px 6px hsl(0 0% 0% / 0.06), 0 16px 36px hsl(0 0% 0% / 0.10)",
+      "shadow-sticky":
+        "0 1px 0 0 hsl(0 0% 0% / 0.06), 0 12px 24px hsl(0 0% 0% / 0.06)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 400,
+      loop: 1600,
+      ambient: 12000,
+    },
+    keyframes: {
+      "fade-up": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "card-grid entrance — short, consumer-fast",
+      },
+      "heart-pop": {
+        css:
+          "0% { transform: scale(1); }\n" +
+          "40% { transform: scale(1.35); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 360,
+        iteration: "once",
+        purpose: "wishlist heart toggle — Airbnb-signature interaction",
+      },
+      "shimmer": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 1600,
+        iteration: "infinite",
+        purpose: "photo-card skeleton on initial load",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid Rausch-pink fill, rounded-xl (12px), weight 600. " +
+      "Secondary = outlined ghost (foreground border, white bg). " +
+      "Tertiary = underline text-link in foreground (never pink links inline — pink is reserved for actions). " +
+      "Filter chips are pills; status chips (Superhost, Free cancellation) are pills with subtle bg.",
+    card:
+      "Property card = rounded-xl, no border, white bg, .shadow-card. " +
+      "Photo is the lead (4:3 or 5:4 image, rounded-xl, top-corner heart). " +
+      "Title in DM Sans 500, subtitle in muted-foreground, ★ rating row, price row with /night. " +
+      "Hover lifts to .shadow-card-hover and the heart fills.",
+    input:
+      "Pill-shape rounded-full search bar with embedded filter columns (Where · When · Guests). " +
+      "Compact inputs (h-10) rounded-md, soft border, white bg. " +
+      "Focus uses ring (2px Rausch at 45%).",
+    cta:
+      "Filled Rausch-pink rect is the primary action — 'Reserve', 'Continue', 'Show on Map'. " +
+      "Wishlist heart is the icon-CTA. Never a gradient button — coral solid is the language.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/vault-reel/THEME.md

@@ -0,0 +1,134 @@
+# Vault Reel
+
+> Cinema-archive director-portfolio register — extreme dark canvas at
+
+**Slug:** `vault-reel` — **Surface:** web — **Density:** dense
+
+## Influence
+
+Commercial-director and cinematographer portfolios (the register held by working directors between production seasons — extreme minimalism, one confident video reel front-and-center, everything else stripped to a broadcast console). Also archival cinema microsites (Criterion Channel at its darkest, Metrograph program guides), and the diegetic-UI language of film-industry tools (Frame.io comment bars, Avid timeline scrubbers). Distinct from other Family E bases through the extreme-dark canvas + broadcast-console chrome + the deliberate empty-scroll abyss that separates the hero from the vault teaser.
+
+
+## Signature move
+
+Extreme dark canvas at #0a0a0a — the register's non-negotiable base.
+Every card, button, control, video tile, input, and nav link ships at
+0px border radius — sharp edges are the second non-negotiable move.
+A single widescreen VIDEO REEL tile dominates the hero at ~1200x675px
+(16:9), positioned dead-center of a 3-column composition. Left column
+holds two diegetic broadcast widgets (CART / SORT BY labels stacked
+in a tight utility grid). Right column holds the reel index — a small
+"REEL 2026" title in the display face, a two-line description in
+Times italic, and a numeric pagination readout (01 / 15) in the
+display face. The reel tile itself renders a matte-black video
+surface with two small red heart-shape SVG markers as annotation
+cues in the top corners, a "SUBSCRIBE NOW" pill button (the ONE
+pill in the theme, deliberately misfit as a broadcast affordance)
+at bottom-left, and a scrubber timeline strip at the bottom with a
+red pulse marker at ~63% position. Below the reel: a static-noise
+divider band (subtle SVG grain pattern) separates hero from vault
+teaser. The VAULT TEASER is a small centered "THE VAULT →" label
+after a deliberate extreme scroll gap (5-6x viewport of black
+abyss). The VAULT INDEX itself is a 4-column grid of matte-black
+film-strip thumbnails, each showing a project title in the display
+face + a two-line credit line in Times italic + the film-strip
+sprocket-hole SVG decoration on the left and right edges. A
+FILMOGRAPHY MARQUEE scrolls horizontally across the bottom third —
+the projects loop across the viewport in the display face at 20s
+per loop. A DIEGETIC TIMESTAMP CLOCK renders at the very bottom of
+the page in the display face — HH:MM:SS updating in real time,
+positioned centered, reading as broadcast-console UI. Footer
+strip shows a © THE FRIEND wordmark on the left, INSTAGRAM / IMDB
+utility labels centered, and the THE FRIEND display wordmark
+right-aligned. Small mono-caps 11px 0.18em-tracked eyebrow labels
+are LEGITIMATELY USED throughout as diegetic widget labels
+(this theme's rare exception to the universal slop-blocklist —
+see eyebrow_exception in typography). Brand character sits in the
+extreme black canvas, the tight geometric display, the burning-red
+accent, and the broadcast-console chrome — not in decoration,
+not in warmth, not in polish.
+
+## Palette
+
+- **bg:** `#0a0a0a`
+- **surface:** `#141414`
+- **ink:** `#d4ceb8`
+- **accent:** `#8a1106`
+- **secondary:** `#b01608`
+
+## Typography
+
+- **Display:** BNDimeDisplay (reference proprietary face — tight geometric bold uppercase sans with a slightly-condensed proportion). Free fallback stack — Space Grotesk 700, Barlow Condensed 700, system-ui, sans-serif. Weight 400-700, ALWAYS UPPERCASE, letter-spacing -0.68px (tight negative tracking — this is the register's typographic fingerprint). Scale — 34px is the measured top-of-scale in the reference, deliberately restrained rather than monumental. This is a small-display theme, not a monumental-display theme — the drama lives in the composition and the black abyss, not in headline size.
+- **Body:** Times (system serif — deliberately anti-modern, cinematic old-media). Fallback — "Times New Roman", Georgia, serif. Weight 400, mixed case, 14-16px body copy, line-height 1.5. Times is the anti-tech signal — every SaaS site uses Inter; this uses Times, which reads as film-industry / cinema-archive rather than tech-product.
+- **Mono:** none. Vault Reel is a consumer director-portfolio surface. Mono has no role here (the timestamp clock uses the display face, not a mono).
+- **Scale:** 1.25 (perfect fourth — deliberately compressed scale so the composition reads as dense broadcast-console rather than marketing-hero)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Video-reel scrubber timeline pulses — the red progress mark on the reel scrubber breathes 0.85 → 1 opacity on a 2s ease-in-out loop, signaling active-playback status without actually playing video.
+2. Timestamp clock — the diegetic HH:MM:SS clock at the bottom of the composition updates every second in real time (setInterval 1000). Reads as broadcast-console UI. Not a marketing motion — a state readout.
+3. Nav active-word — the currently-selected top nav word (HOME / REEL / ABOUT / CONTACT) is red; hovering another word transitions its color to red over 200ms.
+4. Scroll-triggered reel reveal — the vault-teaser text at the bottom of the scroll gap fades in from opacity 0 to 1 over 600ms when the IntersectionObserver fires at 40% visibility. No slide-up, no scale — pure opacity.
+5. Vault thumbnail hover — each vault-grid thumbnail dims its non-hovered siblings to opacity 0.4 over 240ms while the hovered thumbnail stays full opacity + shows a red micro-underline beneath the title.
+6. Static-noise band — the mid-page divider band shows a 3-frame CSS animation that steps through three subtle grain-noise SVG patterns at 250ms per frame (grain-1 / grain-2 / grain-3 / grain-1 loop), reading as film-grain flicker.
+7. prefers-reduced-motion: reduce — timestamp still ticks (this is a state readout, not decoration); scrubber breathe paused; static-noise band frozen on a single frame; vault-thumbnail dim disabled. State changes still fire.
+
+Customer installs these as dependencies for the deeper motion tier:
+- Lenis — smooth inertial scroll (the extreme 8000px+ page benefits from inertial cadence).
+- Custom scroll-triggered chapter markers as the user scrolls past each vault section.
+- A real HLS.js video player wired into the featured reel tile (currently an FPO SVG that mimics the video-player chrome).
+
+Motion character: broadcast-console, diegetic, functional. Custom cubic-bezier(0.19,1,0.22,1) for opacity reveals. The register lives in production-tool authenticity — motion should feel like a Frame.io comment cue, not a marketing headline animation.
+
+
+## Imagery
+
+Photographic + video-still imagery of directorial subjects — the
+reference uses stills from actual commercial + music-video reels
+shot under directional light. FPO imagery here should read as
+matte cinematic still-frames — colored surface panels with subtle
+gradient masks that suggest a video-player rendering, not literal
+photography. Every video/reel tile masks to a SHARP-CORNERED
+rectangle at exactly 16:9. NO gradient blobs, NO glassmorphism,
+NO stock cinema-cliche photography (the "clapperboard + film reel
+spinning" tell). NO warm-glow FPO fills (the warm-radial gradient
+tell). Film-strip sprocket-hole SVG ornaments on vault-index tile
+edges are permitted per the CHROME INVENTORY.
+
+## Best for
+
+- Commercial-director and music-video-director portfolios
+- Cinematographer + director-of-photography sites
+- Production-house imprints and small studio landing pages
+- Editorial reels for creative agencies with a cinema-adjacent register
+- Film-festival and program-guide microsites (Metrograph-style)
+- Photographer portfolios with a cinematic register (not editorial-magazine)
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Non-0px border radius — sharp edges are the register's second non-negotiable move. Rounded corners on cards, video tiles, buttons, or inputs immediately break the register.
+- Light canvas (white / cream / gray) as the primary background — canvas IS extreme black. Swapping to a light canvas collapses this into generic-photographer-portfolio slop.
+- Multiple accent colors flooding the composition — RED is the only accent, used sparingly for interactive emphasis. Introducing amber / cream / any additional color as an accent collapses the register.
+- Monumental display type at 200px+ — this theme's display scale is deliberately RESTRAINED (top at 34px). The drama lives in the composition and the black abyss, not in headline size.
+- Rounded pill buttons in the SUBSCRIBE NOW spot — the reference uses a SHARP-CORNERED chip. The one 'pill' is deliberately misfit as a broadcast affordance, but its actual radius is 0px.
+- Corporate polish — no drop-shadow-md, no soft-glow, no gradient backdrop. Video tiles are FLAT matte-black rectangles with color fills only.
+- Warm-glow FPO gradients — the register is COLD and matte. Warm radials collapse it into editorial-luxury slop.
+- Uniform 3- or 4-column feature-card grids in the vault index — the vault tiles alternate size, orientation, and layout. Not a template.
+- Emoji or decorative unicode marks — bespoke SVG (film-strip sprockets, heart markers, static-noise patterns) carry all the ornamentation.
+- Marketing headline animations — the reveals here are DIEGETIC (timestamp ticking, scrubber pulsing, static flicker). Slide-up + fade-in stagger animations collapse the register into marketing slop.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757)
+- void+acid (near-black bg + single bright acid-green or vermilion accent — this theme's accent is deep BURNING RED, not acid)
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns — Vault Reel is 0px radius but composition is broadcast-console, not broadsheet)
+- 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)
+- rounded-corner-anywhere (this theme's whole point is the sharp-cornered broadcast-console chrome. A rounded card, button, or input anywhere on the page immediately breaks the register.)
+- cream-canvas-flood (cream is INK + INVERTED-BAND color, not a canvas primary. Making cream the whole page background collapses the theme into generic-photographer-portfolio.)
+- warm-radial-gradient-fpo (the FPO video/reel tiles must be MATTE BLACK with subtle gradient masks that suggest a video-player rendering, not warm-glow decoration.)
+- monumental-display-slop (headlines above ~40px collapse this into a monumental-editorial base — the register requires RESTRAINED display scale so the composition and the abyss carry the drama.)
+- clapperboard-cinema-cliche (imagery that reads as 'film reel spinning' or 'clapperboard' is stock cinema-cliche. FPO here must read as matte cinematic still-frames from directorial work, not from a stock cinema-decoration library.)

package/themes/vault-reel/tailwind.snippet.ts

@@ -0,0 +1,16 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: vault-reel
+export const vaultReelTailwindExtend = {
+  colors: {
+    bg: "#0a0a0a",
+    surface: "#141414",
+    ink: "#d4ceb8",
+    accent: "#8a1106",
+    secondary: "#b01608",
+  },
+  fontFamily: {
+    display: ["BNDimeDisplay (reference proprietary face — tight geometric bold uppercase sans with a slightly-condensed proportion). Free fallback stack — Space Grotesk 700, Barlow Condensed 700, system-ui, sans-serif. Weight 400-700, ALWAYS UPPERCASE, letter-spacing -0.68px (tight negative tracking — this is the register's typographic fingerprint). Scale — 34px is the measured top-of-scale in the reference, deliberately restrained rather than monumental. This is a small-display theme, not a monumental-display theme — the drama lives in the composition and the black abyss, not in headline size."],
+    body: ["Times (system serif — deliberately anti-modern, cinematic old-media). Fallback — \"Times New Roman\", Georgia, serif. Weight 400, mixed case, 14-16px body copy, line-height 1.5. Times is the anti-tech signal — every SaaS site uses Inter; this uses Times, which reads as film-industry / cinema-archive rather than tech-product."],
+    mono: ["none. Vault Reel is a consumer director-portfolio surface. Mono has no role here (the timestamp clock uses the display face, not a mono)."],
+  },
+};

package/themes/vault-reel/theme.yml

@@ -0,0 +1,167 @@
+# Vault Reel — Family E, Luxury & Brand-Tier.
+#
+# Cinema-archive director-portfolio register. Extreme dark canvas
+# (#0a0a0a) with a single widescreen reel dominating the hero, warm
+# cream ink, and a burning-red accent used ONLY for interactive
+# emphasis. Sharp edges everywhere — 0px border radius across every
+# card, control, tile, input, wordmark, and nav link. Body copy in
+# Times, display in a tight geometric bold sans (BNDimeDisplay
+# reference; Space Grotesk 700 + Barlow Condensed as free fallbacks).
+#
+# Authored from Matt's provided design brief (2026-07-04,
+# drewkirsch.com reference — a working commercial-director portfolio).
+# Placeholder brand: a fictional director's imprint called "THE FRIEND"
+# — original name, original copy, no reproductions of the source
+# director's identity or the source site's copy. The register expresses
+# "auteur portfolio" through the extreme black canvas + video-reel
+# hero + timestamp clock + diegetic UI widgets (CART, SORT BY,
+# THE VAULT) that read as broadcast-console chrome rather than
+# marketing chrome.
+#
+# Twelfth theme via the v2 harness. First Family E cinema/director
+# base. Seventh NEW BASE.
+#
+# Alternative slugs considered — cinema-reel (too generic), directors-cut
+# (cliché + attribution-adjacent), midnight-reel (evocative but drops
+# the archive metaphor), auteur-black (attribution-adjacent, banned),
+# reel-house (imprecise), strip-cut (film-strip too literal). Vault Reel
+# picked because "vault" captures the archive-of-past-work register
+# that anchors the composition, and "reel" carries the video-hero
+# signature. Both words are common-noun and aesthetic — no
+# right-of-publicity or trademark exposure.
+
+name: Vault Reel
+concept: Cinema-archive director-portfolio register — extreme dark canvas at #0a0a0a with a single widescreen reel dominating the hero and burning-red accent used sparingly for interactive emphasis. Sharp edges everywhere (0px radius). Diegetic broadcast-console widgets — CART, SORT BY, real-time timestamp — that read as production chrome instead of marketing chrome. Body copy in Times, display in a tight geometric bold uppercase sans with letter-spacing -0.68px.
+influence: |
+  Commercial-director and cinematographer portfolios (the register held by working directors between production seasons — extreme minimalism, one confident video reel front-and-center, everything else stripped to a broadcast console). Also archival cinema microsites (Criterion Channel at its darkest, Metrograph program guides), and the diegetic-UI language of film-industry tools (Frame.io comment bars, Avid timeline scrubbers). Distinct from other Family E bases through the extreme-dark canvas + broadcast-console chrome + the deliberate empty-scroll abyss that separates the hero from the vault teaser.
+
+family: E
+base_number: 44
+base_note: |
+  New-base candidate in Family E, Luxury & Brand-Tier, cinema/portfolio subregion. Distinct from other Family E bases through the DIEGETIC BROADCAST-CONSOLE chrome — utility widgets that read as production tools rather than marketing components — and the deliberate long-scroll dark abyss between the hero reel and the vault teaser. Existing Family E bases lean editorial-luxury (Atelier Radiance) or monumental-broadside (Overland Broadside). Vault Reel occupies the CINEMA-ARCHIVE slot the family has been missing.
+
+render_url: http://localhost:5173/themes/vault-reel
+
+surface: web
+
+typography:
+  display: BNDimeDisplay (reference proprietary face — tight geometric bold uppercase sans with a slightly-condensed proportion). Free fallback stack — Space Grotesk 700, Barlow Condensed 700, system-ui, sans-serif. Weight 400-700, ALWAYS UPPERCASE, letter-spacing -0.68px (tight negative tracking — this is the register's typographic fingerprint). Scale — 34px is the measured top-of-scale in the reference, deliberately restrained rather than monumental. This is a small-display theme, not a monumental-display theme — the drama lives in the composition and the black abyss, not in headline size.
+  body: Times (system serif — deliberately anti-modern, cinematic old-media). Fallback — "Times New Roman", Georgia, serif. Weight 400, mixed case, 14-16px body copy, line-height 1.5. Times is the anti-tech signal — every SaaS site uses Inter; this uses Times, which reads as film-industry / cinema-archive rather than tech-product.
+  mono: none. Vault Reel is a consumer director-portfolio surface. Mono has no role here (the timestamp clock uses the display face, not a mono).
+  scale: 1.25 (perfect fourth — deliberately compressed scale so the composition reads as dense broadcast-console rather than marketing-hero)
+  eyebrow_exception: |
+    The universal slop-blocklist bans mono-caps eyebrows as a general defensive rule. Vault Reel LEGITIMATELY uses small uppercase 0.18em-tracked 11px labels as diegetic UI widget labels (CART, SORT BY, THE VAULT, INSTAGRAM, IMDB) because the reference site uses them EXACTLY in this register — they read as broadcast-console labels, not marketing eyebrows. This is a THEME-SPECIFIC EXCEPTION that must be manually preserved during harness grading.
+
+palette:
+  bg: "#0a0a0a"           # canvas — deep near-black, the measured base
+  surface: "#141414"      # slightly-lifted panel for video reel background
+  ink: "#d4ceb8"          # warm cream — primary text on the dark canvas
+  accent: "#8a1106"       # deep-red — burning-red accent for hover/active nav word
+  secondary: "#b01608"    # brighter-red — hover-brighten state
+  cream: "#d4ceb8"        # alias for the ink cream — kept for downstream tokens
+  darkInk: "#0a0a0a"      # near-black — ink for text on cream inverted bands
+  mute: "#6b6864"         # dimmed cream — secondary text, timestamp seconds
+
+density: dense
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Video-reel scrubber timeline pulses — the red progress mark on the reel scrubber breathes 0.85 → 1 opacity on a 2s ease-in-out loop, signaling active-playback status without actually playing video.
+  2. Timestamp clock — the diegetic HH:MM:SS clock at the bottom of the composition updates every second in real time (setInterval 1000). Reads as broadcast-console UI. Not a marketing motion — a state readout.
+  3. Nav active-word — the currently-selected top nav word (HOME / REEL / ABOUT / CONTACT) is red; hovering another word transitions its color to red over 200ms.
+  4. Scroll-triggered reel reveal — the vault-teaser text at the bottom of the scroll gap fades in from opacity 0 to 1 over 600ms when the IntersectionObserver fires at 40% visibility. No slide-up, no scale — pure opacity.
+  5. Vault thumbnail hover — each vault-grid thumbnail dims its non-hovered siblings to opacity 0.4 over 240ms while the hovered thumbnail stays full opacity + shows a red micro-underline beneath the title.
+  6. Static-noise band — the mid-page divider band shows a 3-frame CSS animation that steps through three subtle grain-noise SVG patterns at 250ms per frame (grain-1 / grain-2 / grain-3 / grain-1 loop), reading as film-grain flicker.
+  7. prefers-reduced-motion: reduce — timestamp still ticks (this is a state readout, not decoration); scrubber breathe paused; static-noise band frozen on a single frame; vault-thumbnail dim disabled. State changes still fire.
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll (the extreme 8000px+ page benefits from inertial cadence).
+  - Custom scroll-triggered chapter markers as the user scrolls past each vault section.
+  - A real HLS.js video player wired into the featured reel tile (currently an FPO SVG that mimics the video-player chrome).
+
+  Motion character: broadcast-console, diegetic, functional. Custom cubic-bezier(0.19,1,0.22,1) for opacity reveals. The register lives in production-tool authenticity — motion should feel like a Frame.io comment cue, not a marketing headline animation.
+
+signature: |
+  Extreme dark canvas at #0a0a0a — the register's non-negotiable base.
+  Every card, button, control, video tile, input, and nav link ships at
+  0px border radius — sharp edges are the second non-negotiable move.
+  A single widescreen VIDEO REEL tile dominates the hero at ~1200x675px
+  (16:9), positioned dead-center of a 3-column composition. Left column
+  holds two diegetic broadcast widgets (CART / SORT BY labels stacked
+  in a tight utility grid). Right column holds the reel index — a small
+  "REEL 2026" title in the display face, a two-line description in
+  Times italic, and a numeric pagination readout (01 / 15) in the
+  display face. The reel tile itself renders a matte-black video
+  surface with two small red heart-shape SVG markers as annotation
+  cues in the top corners, a "SUBSCRIBE NOW" pill button (the ONE
+  pill in the theme, deliberately misfit as a broadcast affordance)
+  at bottom-left, and a scrubber timeline strip at the bottom with a
+  red pulse marker at ~63% position. Below the reel: a static-noise
+  divider band (subtle SVG grain pattern) separates hero from vault
+  teaser. The VAULT TEASER is a small centered "THE VAULT →" label
+  after a deliberate extreme scroll gap (5-6x viewport of black
+  abyss). The VAULT INDEX itself is a 4-column grid of matte-black
+  film-strip thumbnails, each showing a project title in the display
+  face + a two-line credit line in Times italic + the film-strip
+  sprocket-hole SVG decoration on the left and right edges. A
+  FILMOGRAPHY MARQUEE scrolls horizontally across the bottom third —
+  the projects loop across the viewport in the display face at 20s
+  per loop. A DIEGETIC TIMESTAMP CLOCK renders at the very bottom of
+  the page in the display face — HH:MM:SS updating in real time,
+  positioned centered, reading as broadcast-console UI. Footer
+  strip shows a © THE FRIEND wordmark on the left, INSTAGRAM / IMDB
+  utility labels centered, and the THE FRIEND display wordmark
+  right-aligned. Small mono-caps 11px 0.18em-tracked eyebrow labels
+  are LEGITIMATELY USED throughout as diegetic widget labels
+  (this theme's rare exception to the universal slop-blocklist —
+  see eyebrow_exception in typography). Brand character sits in the
+  extreme black canvas, the tight geometric display, the burning-red
+  accent, and the broadcast-console chrome — not in decoration,
+  not in warmth, not in polish.
+
+imagery: |
+  Photographic + video-still imagery of directorial subjects — the
+  reference uses stills from actual commercial + music-video reels
+  shot under directional light. FPO imagery here should read as
+  matte cinematic still-frames — colored surface panels with subtle
+  gradient masks that suggest a video-player rendering, not literal
+  photography. Every video/reel tile masks to a SHARP-CORNERED
+  rectangle at exactly 16:9. NO gradient blobs, NO glassmorphism,
+  NO stock cinema-cliche photography (the "clapperboard + film reel
+  spinning" tell). NO warm-glow FPO fills (the warm-radial gradient
+  tell). Film-strip sprocket-hole SVG ornaments on vault-index tile
+  edges are permitted per the CHROME INVENTORY.
+
+best_for:
+  - Commercial-director and music-video-director portfolios
+  - Cinematographer + director-of-photography sites
+  - Production-house imprints and small studio landing pages
+  - Editorial reels for creative agencies with a cinema-adjacent register
+  - Film-festival and program-guide microsites (Metrograph-style)
+  - Photographer portfolios with a cinematic register (not editorial-magazine)
+
+avoid:
+  - "Non-0px border radius — sharp edges are the register's second non-negotiable move. Rounded corners on cards, video tiles, buttons, or inputs immediately break the register."
+  - "Light canvas (white / cream / gray) as the primary background — canvas IS extreme black. Swapping to a light canvas collapses this into generic-photographer-portfolio slop."
+  - "Multiple accent colors flooding the composition — RED is the only accent, used sparingly for interactive emphasis. Introducing amber / cream / any additional color as an accent collapses the register."
+  - "Monumental display type at 200px+ — this theme's display scale is deliberately RESTRAINED (top at 34px). The drama lives in the composition and the black abyss, not in headline size."
+  - "Rounded pill buttons in the SUBSCRIBE NOW spot — the reference uses a SHARP-CORNERED chip. The one 'pill' is deliberately misfit as a broadcast affordance, but its actual radius is 0px."
+  - "Corporate polish — no drop-shadow-md, no soft-glow, no gradient backdrop. Video tiles are FLAT matte-black rectangles with color fills only."
+  - "Warm-glow FPO gradients — the register is COLD and matte. Warm radials collapse it into editorial-luxury slop."
+  - "Uniform 3- or 4-column feature-card grids in the vault index — the vault tiles alternate size, orientation, and layout. Not a template."
+  - "Emoji or decorative unicode marks — bespoke SVG (film-strip sprockets, heart markers, static-noise patterns) carry all the ornamentation."
+  - "Marketing headline animations — the reveals here are DIEGETIC (timestamp ticking, scrubber pulsing, static flicker). Slide-up + fade-in stagger animations collapse the register into marketing slop."
+
+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 — this theme's accent is deep BURNING RED, not acid)"
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns — Vault Reel is 0px radius but composition is broadcast-console, not broadsheet)"
+  - "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
+  - "rounded-corner-anywhere (this theme's whole point is the sharp-cornered broadcast-console chrome. A rounded card, button, or input anywhere on the page immediately breaks the register.)"
+  - "cream-canvas-flood (cream is INK + INVERTED-BAND color, not a canvas primary. Making cream the whole page background collapses the theme into generic-photographer-portfolio.)"
+  - "warm-radial-gradient-fpo (the FPO video/reel tiles must be MATTE BLACK with subtle gradient masks that suggest a video-player rendering, not warm-glow decoration.)"
+  - "monumental-display-slop (headlines above ~40px collapse this into a monumental-editorial base — the register requires RESTRAINED display scale so the composition and the abyss carry the drama.)"
+  - "clapperboard-cinema-cliche (imagery that reads as 'film reel spinning' or 'clapperboard' is stock cinema-cliche. FPO here must read as matte cinematic still-frames from directorial work, not from a stock cinema-decoration library.)"

package/themes/vault-reel/tokens.ts

@@ -0,0 +1,30 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "vault-reel",
+  family: "E",
+  base: "44",
+  palette: {
+    "bg": "#0a0a0a",
+    "surface": "#141414",
+    "ink": "#d4ceb8",
+    "accent": "#8a1106",
+    "secondary": "#b01608",
+    "cream": "#d4ceb8",
+    "darkInk": "#0a0a0a",
+    "mute": "#6b6864"
+  },
+  typography: {
+    "display": "BNDimeDisplay (reference proprietary face — tight geometric bold uppercase sans with a slightly-condensed proportion). Free fallback stack — Space Grotesk 700, Barlow Condensed 700, system-ui, sans-serif. Weight 400-700, ALWAYS UPPERCASE, letter-spacing -0.68px (tight negative tracking — this is the register's typographic fingerprint). Scale — 34px is the measured top-of-scale in the reference, deliberately restrained rather than monumental. This is a small-display theme, not a monumental-display theme — the drama lives in the composition and the black abyss, not in headline size.",
+    "body": "Times (system serif — deliberately anti-modern, cinematic old-media). Fallback — \"Times New Roman\", Georgia, serif. Weight 400, mixed case, 14-16px body copy, line-height 1.5. Times is the anti-tech signal — every SaaS site uses Inter; this uses Times, which reads as film-industry / cinema-archive rather than tech-product.",
+    "mono": "none. Vault Reel is a consumer director-portfolio surface. Mono has no role here (the timestamp clock uses the display face, not a mono).",
+    "scale": "1.25 (perfect fourth — deliberately compressed scale so the composition reads as dense broadcast-console rather than marketing-hero)",
+    "eyebrow_exception": "The universal slop-blocklist bans mono-caps eyebrows as a general defensive rule. Vault Reel LEGITIMATELY uses small uppercase 0.18em-tracked 11px labels as diegetic UI widget labels (CART, SORT BY, THE VAULT, INSTAGRAM, IMDB) because the reference site uses them EXACTLY in this register — they read as broadcast-console labels, not marketing eyebrows. 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. Video-reel scrubber timeline pulses — the red progress mark on the reel scrubber breathes 0.85 → 1 opacity on a 2s ease-in-out loop, signaling active-playback status without actually playing video.\n2. Timestamp clock — the diegetic HH:MM:SS clock at the bottom of the composition updates every second in real time (setInterval 1000). Reads as broadcast-console UI. Not a marketing motion — a state readout.\n3. Nav active-word — the currently-selected top nav word (HOME / REEL / ABOUT / CONTACT) is red; hovering another word transitions its color to red over 200ms.\n4. Scroll-triggered reel reveal — the vault-teaser text at the bottom of the scroll gap fades in from opacity 0 to 1 over 600ms when the IntersectionObserver fires at 40% visibility. No slide-up, no scale — pure opacity.\n5. Vault thumbnail hover — each vault-grid thumbnail dims its non-hovered siblings to opacity 0.4 over 240ms while the hovered thumbnail stays full opacity + shows a red micro-underline beneath the title.\n6. Static-noise band — the mid-page divider band shows a 3-frame CSS animation that steps through three subtle grain-noise SVG patterns at 250ms per frame (grain-1 / grain-2 / grain-3 / grain-1 loop), reading as film-grain flicker.\n7. prefers-reduced-motion: reduce — timestamp still ticks (this is a state readout, not decoration); scrubber breathe paused; static-noise band frozen on a single frame; vault-thumbnail dim disabled. State changes still fire.\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll (the extreme 8000px+ page benefits from inertial cadence).\n- Custom scroll-triggered chapter markers as the user scrolls past each vault section.\n- A real HLS.js video player wired into the featured reel tile (currently an FPO SVG that mimics the video-player chrome).\n\nMotion character: broadcast-console, diegetic, functional. Custom cubic-bezier(0.19,1,0.22,1) for opacity reveals. The register lives in production-tool authenticity — motion should feel like a Frame.io comment cue, not a marketing headline animation.\n",
+  signature: "Extreme dark canvas at #0a0a0a — the register's non-negotiable base.\nEvery card, button, control, video tile, input, and nav link ships at\n0px border radius — sharp edges are the second non-negotiable move.\nA single widescreen VIDEO REEL tile dominates the hero at ~1200x675px\n(16:9), positioned dead-center of a 3-column composition. Left column\nholds two diegetic broadcast widgets (CART / SORT BY labels stacked\nin a tight utility grid). Right column holds the reel index — a small\n\"REEL 2026\" title in the display face, a two-line description in\nTimes italic, and a numeric pagination readout (01 / 15) in the\ndisplay face. The reel tile itself renders a matte-black video\nsurface with two small red heart-shape SVG markers as annotation\ncues in the top corners, a \"SUBSCRIBE NOW\" pill button (the ONE\npill in the theme, deliberately misfit as a broadcast affordance)\nat bottom-left, and a scrubber timeline strip at the bottom with a\nred pulse marker at ~63% position. Below the reel: a static-noise\ndivider band (subtle SVG grain pattern) separates hero from vault\nteaser. The VAULT TEASER is a small centered \"THE VAULT →\" label\nafter a deliberate extreme scroll gap (5-6x viewport of black\nabyss). The VAULT INDEX itself is a 4-column grid of matte-black\nfilm-strip thumbnails, each showing a project title in the display\nface + a two-line credit line in Times italic + the film-strip\nsprocket-hole SVG decoration on the left and right edges. A\nFILMOGRAPHY MARQUEE scrolls horizontally across the bottom third —\nthe projects loop across the viewport in the display face at 20s\nper loop. A DIEGETIC TIMESTAMP CLOCK renders at the very bottom of\nthe page in the display face — HH:MM:SS updating in real time,\npositioned centered, reading as broadcast-console UI. Footer\nstrip shows a © THE FRIEND wordmark on the left, INSTAGRAM / IMDB\nutility labels centered, and the THE FRIEND display wordmark\nright-aligned. Small mono-caps 11px 0.18em-tracked eyebrow labels\nare LEGITIMATELY USED throughout as diegetic widget labels\n(this theme's rare exception to the universal slop-blocklist —\nsee eyebrow_exception in typography). Brand character sits in the\nextreme black canvas, the tight geometric display, the burning-red\naccent, and the broadcast-console chrome — not in decoration,\nnot in warmth, not in polish.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/vet-modern/THEME.md

@@ -0,0 +1,79 @@
+# Design Direction — Vet-Modern
+
+## Ethos
+Bond Vet sage-and-cream walk-in · Modern Animal hotel-lobby clinical · Small Door Veterinary membership-friendly chrome · Heart + Paw spa-meets-clinic warmth · GoodVets neighborhood-clinic candor
+
+## Feel
+Walk-in-friendly clinical. Cream-tinted surfaces with one principled sage-green accent — never two competing colors. Friendly Inter, dense-but-soft booking chrome, tabular numerics for times and prices. The page is a tool: locations grid resolves to hours, services list resolves to a price range, booking widget resolves to a Tuesday-2:30 slot in two taps. Clinical competence without the EHR coldness.
+
+## Reference brands
+- **Bond Vet** → soft sage on cream + walk-in-friendly booking chrome. The principal reference for surfaces and the single-accent rule.
+- **Modern Animal** → hotel-lobby clinical, generous whitespace, membership-first IA.
+- **Small Door Veterinary** → membership-friendly chrome, app-led scheduling, tabular pricing.
+- **Heart + Paw** → spa-meets-clinic warmth, pet-portrait photography over hospital stock.
+- **GoodVets** → neighborhood-clinic candor, locations-first information architecture.
+
+## Tokens
+Surface stack is **warm cream** (background) → **white** (card) → **deeper cream / sage tint** (secondary / muted / accent). Brand tokens: `--sage`, `--sage-deep`, `--cream`, `--kraft`, `--sun`, `--ink`. Primary is `--sage` — the single brand color (no competing brand-blue, no brand-purple). `--sage-deep` is hover/active. `--sun` is reserved for walk-in-available / clinic-open-now indicators — **chip only**, never a button face.
+
+## Typography
+- **Display:** Inter 500–700. Tool-first competence; no serif theater on a clinical booking site.
+- **Body:** Inter 400–600. Same family. **15px** base (denser than marketing), line-height 1.55.
+- **Mono:** JetBrains Mono. Reserved for appointment times ("2:30 PM"), prices ("$185"), clinic hours ("8a–8p"), MRN/patient IDs. Tabular numerics everywhere — `font-variant-numeric: tabular-nums`.
+
+H1 uses `clamp(1.875rem, 4vw, 3rem)` — restrained, never magazine-large. Tracking `-0.015em` on headings, `0` on body.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-6` — tool-wide; booking grids run edge-to-edge.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-10 lg:pt-20 lg:pb-14`
+  - Default: `py-12 lg:py-18`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** 2 4 6 8 10 12 14 16 20 24 32 40 48 64 80 — dashboard micro-steps included (no editorial restriction).
+
+## Color
+No hex in components — tokens only. Pure white is permitted only for card surfaces. Pure black is forbidden — use `--ink` (deep evergreen). **One accent rule:** sage is the single brand color. No brand-blue, brand-purple, brand-orange. Sun (amber) appears only as a chip background for walk-in-available state — never a button, never a heading color. Alert-red is `--destructive` only (cancel appointment, urgent care).
+
+## Radius
+`--radius: 0.625rem` (10px). Softer than dense-utility, less pillowy than DTC. Pills core for appointment-status, service-type, availability chips. Square corners forbidden on interactive surfaces; allowed on info banners and table containers.
+
+## Shadows
+**Soft.** `.shadow-clinic` for standard cards, `.shadow-clinic-lg` for hover, `.shadow-booking` for the booking widget (the primary tool on the page — deserves emphasis). No glows.
+
+## Motion
+Four keyframes: `fade-rise` (380ms entrance — dashboard-quick), `scale-in` (180ms modal/slot-picker), `soft-pulse` (1800ms loop for open-now indicators), `shimmer` (1400ms loading skeleton). **No ambient motion** — this is a tool, not marketing. `prefers-reduced-motion` honored.
+
+Easing `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Component patterns
+- **Buttons:** primary = sage solid + white text, rounded-md (10px), shadow-clinic. Secondary = white + warm border + ink text. Tertiary = sage text-link. Destructive = warm-red ghost → upgrades to solid only on confirm step. Hover darkens to sage-deep; **no scale animation** (jumpiness reads error-prone in clinical chrome).
+- **Cards:** rounded-md, white on cream, 1px warm border, shadow-clinic. Internal padding p-5 lg:p-6.
+- **Location-card variant:** 4px **sage** top-border when **open-now**, 4px kraft top-border when **closed-today**. City + neighborhood in display 600, hours in mono tabular, "Book here" in sage text-link.
+- **Service-row variant:** kraft hairline divider between rows, service name in display, price-range in mono right-aligned ("$95–$240"), friendly one-line description below, "Learn more" sage text-link.
+- **Booking-widget:** the largest surface on the page. shadow-booking, pet-picker at top (segmented pill: Dog / Cat / Other), reason-for-visit chips, date strip with mono dates, time-slot grid (available = white + border, selected = sage solid, unavailable = muted-fg strikethrough). Sage "Confirm Tuesday 2:30" CTA spans the bottom.
+- **Inputs:** rounded-md, 1px warm border, white fill, h-9. Pet-name and reason-for-visit may show a small paw glyph in left padding. Focus = 2px sage ring at 40% opacity.
+
+## Recommended rich media
+Photography is the lead medium: real pets in exam rooms (not stock-photo dogs on white seamless), staff portraits in scrubs with natural light, clinic interiors with warm wood + sage-painted walls. Color graded to warm-cream highlight. Aspect ratios 3:2 landscape for environmental shots, 1:1 square for staff portraits, 4:5 portrait for pet-with-vet hero. Never 16:9 cinematic. No hospital-stock "vet examining puppy on metal table".
+
+**AI tool recommendations:** Midjourney with *"warm exam room, natural window light, sage green walls, wood floor, golden retriever on padded table, vet in scrubs, Kodak Portra 400, slight grain"*. Avoid bright clinical hospital stock and any "happy vet team in lab coats" shot — that is corporate-hospital territory.
+
+**Performance:** hero ≤140 KB AVIF; location photo ≤90 KB; staff portrait ≤60 KB. LCP ≤2s (it's a booking site — must be fast).
+
+**Avoid:** scary medical equipment shots, blood/needle imagery, "before & after surgery" photos (move to private/auth surface, never marketing), cartoon paw-print decoration, "vet voted #1" badges (we earn trust through transparent hours/pricing/locations, not laurels), dark-mode toggle (clinical tools stay light), glassmorphic anything, gradient backgrounds.
+
+**Accessibility:** alt-text describes the staff and pet, not the clinic. *"Dr. Saito, a veterinarian in dark scrubs, listens to a tabby cat's heart with a stethoscope."* Tap targets ≥44×44 for slot-picker grid. All prices and times must use `font-variant-numeric: tabular-nums` for proper alignment.
+
+## Component families
+None at install time. Location-card, service-row, and booking-widget are the three canonical bespoke families — codified by the Director as they get reused.
+
+## Details
+- **Selection:** `hsl(var(--sage) / 0.22)` background, ink foreground.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — visible, restrained.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.