@stylecrib/cli 0.3.1 → 0.3.3

package/themes/solar-residential/tokens.ts

@@ -0,0 +1,176 @@
+import type { Direction } from "../schema";
+
+// solar-residential — Sunrun / Tesla Solar / SunPower clean-white residential
+// installer language. White canvas, single signal-green accent, savings-driven
+// numerics. Reads like a friendly neighborhood quote, not a utility bill.
+
+export const solarResidential: Direction = {
+  name: "solar-residential" as Direction["name"],
+  ethos:
+    "Sunrun homeowner-friendly chrome · Tesla Solar minimal white · SunPower trust-blue restraint · " +
+    "Sunnova warm signal-green · ADT Solar suburban-safe rounding",
+  references: [
+    { brand: "Sunrun", trait: "homeowner-friendly orange-on-white CTA stack" },
+    { brand: "Tesla Solar", trait: "near-zero-chrome white canvas, single-accent moment" },
+    { brand: "SunPower", trait: "restrained trust-blue type, savings-calculator gravity" },
+    { brand: "Sunnova", trait: "warm signal-green for go/install/active states" },
+    { brand: "ADT Solar", trait: "rounded suburban-safe card chrome, friendly numerics" },
+  ],
+  feel:
+    "Clean white residential-installer page. One signal-green accent does all the savings/CTA work. " +
+    "Numbers are big and tabular — kWh, dollar-per-month, panel count. Rounded corners read suburban-safe " +
+    "(not enterprise-sharp). The page is a confident quote, not a sales pitch.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Tesla Solar / Sunrun display — Inter heavy, no flourishes",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "SunPower body — neutral 15px, readable for older homeowners",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "monospace"],
+      from: "savings numerics — kWh, $/month, panel count tabular",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 3.75rem)",
+    bodyBaseSize: "0.9375rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "Tesla Solar pure white — no warmth, no tint" },
+    foreground: { hsl: "215 30% 14%", from: "deep slate — SunPower trust-ink, not pure black" },
+    card: { hsl: "210 25% 98%", from: "near-white card — lifts a degree above background" },
+    popover: { hsl: "0 0% 100%", from: "same as background" },
+    primary: { hsl: "142 65% 38%", from: "Sunnova signal green — install/active/savings color" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on signal green" },
+    secondary: { hsl: "210 22% 96%", from: "cool gray surface — secondary panel" },
+    secondaryForeground: { hsl: "215 30% 14%", from: "ink on cool gray" },
+    muted: { hsl: "210 20% 95%", from: "muted gray — divider blocks, disabled" },
+    mutedForeground: { hsl: "215 14% 44%", from: "slate gray — captions, kWh units, address meta" },
+    accent: { hsl: "142 55% 94%", from: "pale green hover surface — savings-row highlight" },
+    accentForeground: { hsl: "142 70% 22%", from: "deep green ink on pale green" },
+    border: { hsl: "210 16% 88%", from: "soft cool-gray hairline" },
+    input: { hsl: "210 16% 88%", from: "same as border" },
+    ring: { hsl: "142 65% 38%", from: "primary signal green — focus rings on inputs" },
+    destructive: { hsl: "8 72% 50%", from: "alert red — distinct from any solar accent, used for outage/fault" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on alert red" },
+    brand: {
+      "signal-green": { hsl: "142 65% 38%", from: "= primary; Sunnova install/active state" },
+      "signal-green-deep": { hsl: "142 70% 28%", from: "hover state for green, gradient anchor" },
+      "signal-green-soft": { hsl: "142 55% 94%", from: "pale green badge bg, savings-row highlight" },
+      "trust-blue": { hsl: "212 60% 38%", from: "SunPower trust-blue — secondary accent for warranty/badges" },
+      "sun-amber": { hsl: "38 92% 56%", from: "literal sun warmth — used sparingly on sunshine-icon, never CTA" },
+      "panel-slate": { hsl: "215 25% 22%", from: "panel-render slate — 3D card render anchor color" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-12 lg:pt-28 lg:pb-20",
+      default: "py-14 lg:py-20",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.625rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-quote":
+        "0 1px 2px hsl(215 30% 14% / 0.04), 0 6px 18px hsl(215 30% 14% / 0.06)",
+      "shadow-card":
+        "0 1px 2px hsl(215 30% 14% / 0.04), 0 2px 6px hsl(215 30% 14% / 0.04)",
+      "shadow-panel-glow":
+        "0 0 0 1px hsl(142 65% 38% / 0.18), 0 12px 40px hsl(142 65% 38% / 0.16)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 400,
+      loop: 2400,
+      ambient: 18000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(10px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "savings card and quote-block entrance — confident, not theatrical",
+      },
+      "counter-up": {
+        css:
+          "from { opacity: 0; transform: translateY(6px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "estimated-savings dollar number rolls in once the zip is entered",
+      },
+      "sun-rays": {
+        css:
+          "0% { transform: rotate(0deg); opacity: 0.6; }\n" +
+          "100% { transform: rotate(360deg); opacity: 0.6; }",
+        defaultDuration: 18000,
+        iteration: "infinite",
+        purpose: "ambient sun-ray rotation behind the panel-render hero — slow, decorative",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid signal-green primary (rounded-lg, shadow-card) for the single quote/install commit. " +
+      "Secondary is ghost (border + foreground). Tertiary is text-link green. " +
+      "Hover deepens fill to signal-green-deep; no scale jump — residential trust language is steady.",
+    card:
+      "Rounded-lg, 1px --border, bg-card, shadow-card. Padding p-5 lg:p-6. " +
+      "Savings-calculator card uses shadow-panel-glow as the hero exception. " +
+      "Title display sans, dollar/kWh numbers in mono with tabular-nums.",
+    input:
+      "Full rounded-lg box, 1px --input border, bg-card. Zip-code input is mono 18px, center-aligned. " +
+      "Focus = 2px signal-green ring at 45% opacity. Label above in sans-medium 13px.",
+    cta:
+      "Primary signal-green button for 'Get my quote' / 'Schedule install'. " +
+      "Process timeline steps use signal-green-soft pills with signal-green-deep text. " +
+      "Customer-story rows use a small trust-blue underline on the homeowner name only.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.45)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/sports-league/THEME.md

@@ -0,0 +1,180 @@
+# Sports League
+
+> NBA / league-official-anchored premium sports register — deep navy canvas at
+
+**Slug:** `sports-league` — **Surface:** web — **Density:** dense
+
+## Influence
+
+Modern professional-league brand systems at their most cinematic
+(league-official hero tiles at their most portrait-and-stat forward,
+premium sports broadcast graphics at their most graphic and pared-back,
+broadcast score-bug chrome at its most reduced). Distinct from esports
+and college-sports surfaces through the PLAYER STAT CARD ANCHOR +
+ARENA CHROME + LEAGUE-OFFICIAL RESTRAINT trio.
+
+
+## Signature move
+
+Deep navy canvas at #0a0e1e — the register's non-negotiable base
+(league-official cinematic ground, deeper than pure black, warmer
+than cool blue). Saturated arena-red brand accent #e6202b used ONLY
+for live indicators, score bugs, primary CTAs, and championship
+moments. Per-palette team spotlight color rotates through the 10
+palette variants (Meridian red / Arcadia navy / Summit purple /
+Capital forest / Marquee gold / Lane orange / Clutch teal / Opener
+crimson / Final indigo / Capstone silver). Sharp 2px corners
+everywhere.
+
+MASTHEAD — a cream 'MERIDIAN' wordmark in Archivo Black uppercase
+at 22px on the left with a stylized ball-mark, a horizontal nav
+(Games / Standings / Teams / Schedule / Season Pass) center, a
+filled arena-red 'Watch live' button right-aligned. Shrinks after
+200px scroll.
+
+LIVE TICKER STRIP — a full-bleed horizontal ticker below the nav
+showing 6 games with team abbreviations, live/final scores, and
+game clocks. Ticker cycles every 4 seconds. Live indicator pulses.
+('MER 108 · ARC 102 · Q4 2:41 LIVE' + 'SUM 94 · CAP 87 · FINAL' +
+ 'MAR 71 · LAN 68 · Q3 8:12 LIVE' etc.)
+
+CINEMATIC PLAYER STAT CARD — the SIGNATURE MOVE. Full-bleed panel
+with:
+  • BACKGROUND: team-color flood (Meridian arena red) with subtle
+    arena-lights texture (bespoke SVG radial spotlights, sharp
+    geometric — no gradient blooms).
+  • LEFT: bespoke SVG player silhouette in cream on navy — a
+    dramatic shooting-form portrait, not a stock photo, not an
+    emoji, not a radial-gradient blob. Illustrated in a graphic
+    broadcast-poster style with sharp angular geometry.
+  • RIGHT: massive stat number '48' in Archivo Black at 160px
+    counting up from 0, with 'PTS' label below in tracked mono.
+    Secondary stats '12 REB · 9 AST · 4 STL · 2 BLK' in a row
+    below in mono.
+  • BOTTOM RIBBON: player name 'K. MOSELY' + jersey number '#7'
+    + team 'MERIDIAN HOME' + game 'vs. Arcadia · Feb 24'.
+
+STANDINGS TABLE — full-width dark table with 12 rows (all 12
+fictional Meridian League teams). Columns: RANK / TEAM / W-L / PCT
+/ GB / STRK / LAST 10. Top 4 rows have subtle arena-red left border
+(playoff spots). Bottom row has a small trending-down indicator.
+Rows stagger reveal at 40ms per row.
+
+ROSTER GRID — 12 player tiles in a dense 4-column grid, each with:
+  • Bespoke SVG jersey-number tile in team color
+  • Player name in Archivo Black uppercase
+  • Position + height in mono ('SF · 6'8"')
+  • Season stats mini bar: PTS · REB · AST
+  • Small status pill (Active / Day-to-day / Out)
+
+SCHEDULE STRIP — horizontally-scrolling row of 10 upcoming game
+cards, each with:
+  • Date + tip-off time in mono
+  • Home team abbreviation + logo mark (bespoke SVG)
+  • '@' or 'vs' in tracked mono
+  • Away team abbreviation + logo mark
+  • Arena venue + broadcast channel
+
+FEATURED GAME RECAP — a full-width recap card with:
+  • Final score in Archivo Black 120px ('MER 108 · ARC 102')
+  • Game-flow line chart drawing via stroke-dashoffset (home vs.
+    away score progression over 4 quarters)
+  • Box-score mini-table (top 5 scorers per team, PTS/REB/AST)
+  • Championship-gold winner ribbon strip
+
+SEASON PASS TIERS — 3-tier grid with:
+  • REGULAR SEASON PASS: all 82 regular-season games
+  • PLAYOFF PASS: adds playoffs (arena-red RECOMMENDED chip)
+  • CHAMPIONSHIP PASS: adds finals + all-access (championship-gold
+    chip + total-savings counter)
+
+FOOTER — dark inverted band with 'MERIDIAN LEAGUE' wordmark at ~160px,
+a 5-column utility grid, and a small broadcast-partner logo strip
+(fictional 'MERIDIAN NETWORK · MRD SPORTS · WEST WIRE').
+
+Six bespoke SVG marks (league-shield, ball-mark, jersey-number-tile,
+clock-bug, court-diagram-mini, arena-lights) drop as PUNCTUATION at
+specific compositional moments, never as a uniform icon row.
+
+## Palette
+
+- **bg:** `#0a0e1e`
+- **surface:** `#111632`
+- **ink:** `#f5f2ec`
+- **accent:** `#e6202b`
+
+## Typography
+
+- **Display:** A bold condensed display sans at very heavy weight — Archivo Black / Neue Machina / Helvetica Now Condensed Extra Bold. Free fallback stack — "Archivo Black", "Barlow Condensed", "Helvetica Neue", "Impact", system-ui, sans-serif. Weight 800-900, uppercase for hero + score bugs, mixed case for section titles. Very tight letter-spacing (-0.03em) at hero scale. Top of scale ~160px cinematic hero stat number, 88px section titles, 32px card titles.
+- **Body:** A clean neutral sans for body copy and player names — Inter / IBM Plex Sans. Free fallback stack — "Inter", "IBM Plex Sans", system-ui, sans-serif. Weight 400 for body, 500 for player names, 600 for team names. 14-15px body copy, line-height 1.55.
+- **Mono:** JetBrains Mono / IBM Plex Mono for stats, jersey numbers, box scores, and game clock. Weight 400-600, 11-14px. LEGITIMATE here because sports statistics genuinely require monospaced tabular figures.
+- **Scale:** 1.333 (perfect fourth stretched — dramatic hero-to-body jump)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero player-portrait fades in with 1000ms cubic-bezier(0.19,1,0.22,1), then the big stat number counts up 0 → target (e.g., 0 → 48) over 1600ms via requestAnimationFrame ease-out.
+2. Live scoreboard ticker — 6 games cycle through the ticker every 4 seconds, each with team abbreviations + live/final score + game clock. The 'LIVE' indicator pulses in arena red at 1.4s intervals.
+3. Standings table row reveal — 12 rows fade in with 40ms per-row stagger on IntersectionObserver visibility at 30% threshold.
+4. Roster grid stagger — 12 player tiles fade in with 60ms per-tile stagger on scroll into view.
+5. Schedule strip horizontal scroll — 10 upcoming games slide in from right with 80ms per-card stagger on scroll.
+6. Featured recap chart draws — a game-flow line chart draws via stroke-dashoffset over 1400ms cubic-bezier on visibility at 40%.
+7. Season-pass tier count-up — total-savings number counts up 0 → $340 on scroll.
+8. Section reveals — each below-fold section fades in over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+9. Nav shrink on scroll after 200px; ticker sticks to top edge after 400px scroll.
+10. prefers-reduced-motion: reduce — scoreboard ticker still cycles but without pulse; counter jumps to final; charts show at full stroke; state changes still fire.
+
+Motion character: cinematic, broadcast-graphic, high-gloss. Custom cubic-bezier(0.19,1,0.22,1) for reveals + cubic-bezier(0.65, 0, 0.35, 1) for scoreboard transitions. Reads as a broadcast graphics package, not a marketing page.
+
+
+## Imagery
+
+BESPOKE SVG illustrations — the reference uses cinematic player
+portraits, team-color hero floods, jersey-number tiles, and court
+diagrams. FPO imagery here should read as considered broadcast-
+graphics (bespoke SVG player silhouettes with sharp angular
+geometry, team-color flood grounds, subtle arena-lights radial
+spotlights). NO stock 'cheering crowd in stadium' photography.
+NO player mockups that could read as real-world attribution.
+NO 3D-rendered basketball/football renders. NO radial-gradient
+placeholder fills as fake photography.
+
+## Best for
+
+- Professional-league broadcast and streaming surfaces
+- Sports-league official brand sites and season-pass storefronts
+- Sports media surfaces (recap, box-score, standings)
+- Fantasy-league and sports-analytics platforms leaning cinematic
+- Sports-betting platforms leaning premium and league-official
+- Sports-team single-brand promo sites
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Light canvas — Sports League's canvas is DEEP NAVY #0a0e1e. Light canvas inverts the league-broadcast register into a fantasy-sports light-tool register (different theme).
+- Pure black canvas — #0a0e1e is deliberately WARMER and BLUER than pure black, matching league-official brand systems. Pure black kills the specific atmospheric depth.
+- Serif display — the register requires BOLD CONDENSED DISPLAY SANS. Serif display collapses into editorial territory.
+- Multi-color palette — the register uses NAVY + CREAM + ARENA RED single accent + per-palette team spotlight. Introducing multi-color as decoration collapses the discipline into candy slop.
+- Fully-rounded pill corners — cards use 2px sharp corners. 999px pills anywhere on this register kill the league-official reading.
+- Stock crowd photography — imagery MUST feel like considered SVG broadcast graphics (player silhouettes, team-color floods, jersey tiles). Stock cheering-crowd photography is the AI-tell for corporate-sports slop.
+- Player names or team names lifted from real leagues — placeholder MERIDIAN LEAGUE + fictional teams (MER / ARC / SUM / CAP / MAR / LAN / CLU / OPE / FIN / CAP-2) + fictional players. Naming real-world players / teams / leagues creates trademark and right-of-publicity exposure.
+- 3D-rendered ball / court renders — visuals must be flat SVG broadcast graphics. 3D renders read as e-sports esports launch.
+- Emoji sports icons ⛹️ 🏀 🏆 — bespoke SVG only. Emoji is the biggest AI-tell for corporate sports slop.
+- Marketing-loud copy ('the most epic season of all time', 'unleash your fandom', 'game-changing action') — the register requires broadcast-official voice. Marketing-loud copy collapses into startup slop.
+- Cycling headline words or auto-advancing carousel — the LIVE motion is the SCOREBOARD TICKER + STAT-NUMBER COUNT-UP only. Auto-advancing headline sliders collapse into marketing slop.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is deep navy #0a0e1e, and register requires bold condensed sans.
+- void+acid
+- broadsheet-on-noneditorial
+- tech-bro purple gradient
+- uniform-everything
+- light-canvas-inversion (canvas is deep navy. Light canvas inverts into fantasy-tool register.)
+- serif-display-anywhere (register requires bold condensed display sans. Serif display collapses into editorial territory.)
+- multi-color-outside-team-spotlight (palette is navy + cream + arena red + per-palette team spotlight. Multi-color as decoration collapses into candy slop.)
+- pill-card-corners (cards use 2px sharp corners, NOT 999px pills. 999px pills kill the league-official reading.)
+- stock-crowd-photography (imagery must be bespoke SVG broadcast graphics. Stock crowd photography is the AI-tell.)
+- real-player-names (placeholder MERIDIAN LEAGUE + fictional teams and players. Real player names create right-of-publicity exposure.)
+- emoji-sports-icons (bespoke SVG only. Emoji is the biggest AI-tell for corporate sports slop.)

package/themes/sports-league/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: sports-league
+export const sportsLeagueTailwindExtend = {
+  colors: {
+    bg: "#0a0e1e",
+    surface: "#111632",
+    ink: "#f5f2ec",
+    accent: "#e6202b",
+  },
+  fontFamily: {
+    display: ["A bold condensed display sans at very heavy weight — Archivo Black / Neue Machina / Helvetica Now Condensed Extra Bold. Free fallback stack — \"Archivo Black\", \"Barlow Condensed\", \"Helvetica Neue\", \"Impact\", system-ui, sans-serif. Weight 800-900, uppercase for hero + score bugs, mixed case for section titles. Very tight letter-spacing (-0.03em) at hero scale. Top of scale ~160px cinematic hero stat number, 88px section titles, 32px card titles."],
+    body: ["A clean neutral sans for body copy and player names — Inter / IBM Plex Sans. Free fallback stack — \"Inter\", \"IBM Plex Sans\", system-ui, sans-serif. Weight 400 for body, 500 for player names, 600 for team names. 14-15px body copy, line-height 1.55."],
+    mono: ["JetBrains Mono / IBM Plex Mono for stats, jersey numbers, box scores, and game clock. Weight 400-600, 11-14px. LEGITIMATE here because sports statistics genuinely require monospaced tabular figures."],
+  },
+};

package/themes/sports-league/theme.yml

@@ -0,0 +1,213 @@
+# Sports League — Family E, Cinematic Dark (league-broadcast subregion).
+#
+# NBA / league-official-anchored premium sports register. Deep navy canvas
+# (#0a0e1e) + high-gloss cream typography + saturated ARENA RED single accent
+# (#e6202b) + optional per-palette team spotlight color. Bold condensed
+# display sans + geometric mono for stats. Sharp 2px corners.
+#
+# Influence anchor: modern league-official brand systems at their most
+# cinematic — the black/team-color hero tiles, the huge portrait + big
+# stat overlay, the scoreboard-strip chrome. Placeholder league:
+# "MERIDIAN LEAGUE" — a fictional pro league. Original name, original
+# copy, no team names or player names lifted from any real league.
+#
+# Distinct from other Family E bases:
+#   - Vault Reel is cinema-poster reels for film festivals
+#   - Cinematic Dark is film-poster editorial dark
+#   - Performance Engineered is hypercar molten-amber
+#   - Signal Dark is dev-dashboard terminal green
+# Sports League fills the LEAGUE-BROADCAST slot — the CINEMATIC PLAYER
+# STAT CARD is the composition's signature move.
+#
+# Twenty-second theme via the v2 harness. Fifth Family E theme.
+# Upgrade of the existing v1 archetype-fallback slug.
+
+name: Sports League
+concept: NBA / league-official-anchored premium sports register — deep navy canvas at #0a0e1e with high-gloss cream typography, saturated arena-red single accent, and a rotating per-palette team spotlight color. Bold condensed display sans (Archivo Black / Neue Machina / Helvetica Now Condensed) at monumental sizes. Full-bleed CINEMATIC PLAYER STAT CARD as the signature move — a bespoke SVG player silhouette on a team-color-flood ground with a massive overlaid stat number (48 PTS / 12 REB / 9 AST). Live scoreboard ticker updating every 4 seconds. Standings table, roster grid with bespoke jersey-number tiles, schedule strip, featured game recap with box score, and season-pass tiers.
+influence: |
+  Modern professional-league brand systems at their most cinematic
+  (league-official hero tiles at their most portrait-and-stat forward,
+  premium sports broadcast graphics at their most graphic and pared-back,
+  broadcast score-bug chrome at its most reduced). Distinct from esports
+  and college-sports surfaces through the PLAYER STAT CARD ANCHOR +
+  ARENA CHROME + LEAGUE-OFFICIAL RESTRAINT trio.
+
+family: E
+base_number: 38
+base_note: |
+  Family E Cinematic Dark, LEAGUE-BROADCAST slot. Distinct from other
+  Family E bases through the CINEMATIC PLAYER STAT CARD signature move
+  (full-bleed portrait + big stat number is the hero — not a film
+  still, not a hypercar close-up) + LIVE SCOREBOARD TICKER + STANDINGS
+  TABLE. Vault Reel is film-festival reels; Cinematic Dark is film-
+  poster editorial; Performance Engineered is hypercar molten-amber.
+  Sports League fills the league-broadcast slot. Upgrade of the
+  existing v1 sports-league slug from archetype-fallback.
+
+render_url: http://localhost:5173/themes/sports-league
+
+surface: web
+
+typography:
+  display: A bold condensed display sans at very heavy weight — Archivo Black / Neue Machina / Helvetica Now Condensed Extra Bold. Free fallback stack — "Archivo Black", "Barlow Condensed", "Helvetica Neue", "Impact", system-ui, sans-serif. Weight 800-900, uppercase for hero + score bugs, mixed case for section titles. Very tight letter-spacing (-0.03em) at hero scale. Top of scale ~160px cinematic hero stat number, 88px section titles, 32px card titles.
+  body: A clean neutral sans for body copy and player names — Inter / IBM Plex Sans. Free fallback stack — "Inter", "IBM Plex Sans", system-ui, sans-serif. Weight 400 for body, 500 for player names, 600 for team names. 14-15px body copy, line-height 1.55.
+  mono: JetBrains Mono / IBM Plex Mono for stats, jersey numbers, box scores, and game clock. Weight 400-600, 11-14px. LEGITIMATE here because sports statistics genuinely require monospaced tabular figures.
+  scale: 1.333 (perfect fourth stretched — dramatic hero-to-body jump)
+  eyebrow_exception: |
+    Sports League LEGITIMATELY uses small-caps 0.14em-tracked 10-11px labels for LIVE GAME STATUS ('LIVE · Q4 · 2:41'), SCORE BUGS ('FINAL · OT'), STANDINGS COLUMN HEADERS ('W-L / PCT / GB / STRK'), and BOX-SCORE LABELS ('PTS / REB / AST / STL / BLK'). This is a THEME-SPECIFIC EXCEPTION — league-broadcast chrome uses these EXACTLY in this register as diegetic broadcast chrome, not decorative eyebrow slop.
+
+palette:
+  bg: "#0a0e1e"           # deep navy canvas — league-official base
+  surface: "#111632"      # raised card surface — navy step
+  ink: "#f5f2ec"          # high-gloss cream typography
+  accent: "#e6202b"       # arena red single accent — CTAs, score bugs, live indicators
+  cream: "#f5f2ec"        # alias for ink
+  darkInk: "#050813"      # deepest navy for full-bleed floods
+  mute: "#8a90a8"         # dimmed for captions + column headers
+  spotlight: "#d5aa50"    # championship-gold accent for banner + title strip
+  teamHome: "#c8102e"     # per-palette default team-home color (Meridian home)
+  teamAway: "#00538c"     # per-palette default team-away color (Arcadia visitors)
+
+density: dense
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero player-portrait fades in with 1000ms cubic-bezier(0.19,1,0.22,1), then the big stat number counts up 0 → target (e.g., 0 → 48) over 1600ms via requestAnimationFrame ease-out.
+  2. Live scoreboard ticker — 6 games cycle through the ticker every 4 seconds, each with team abbreviations + live/final score + game clock. The 'LIVE' indicator pulses in arena red at 1.4s intervals.
+  3. Standings table row reveal — 12 rows fade in with 40ms per-row stagger on IntersectionObserver visibility at 30% threshold.
+  4. Roster grid stagger — 12 player tiles fade in with 60ms per-tile stagger on scroll into view.
+  5. Schedule strip horizontal scroll — 10 upcoming games slide in from right with 80ms per-card stagger on scroll.
+  6. Featured recap chart draws — a game-flow line chart draws via stroke-dashoffset over 1400ms cubic-bezier on visibility at 40%.
+  7. Season-pass tier count-up — total-savings number counts up 0 → $340 on scroll.
+  8. Section reveals — each below-fold section fades in over 700ms cubic-bezier on IntersectionObserver at 25% threshold.
+  9. Nav shrink on scroll after 200px; ticker sticks to top edge after 400px scroll.
+  10. prefers-reduced-motion: reduce — scoreboard ticker still cycles but without pulse; counter jumps to final; charts show at full stroke; state changes still fire.
+
+  Motion character: cinematic, broadcast-graphic, high-gloss. Custom cubic-bezier(0.19,1,0.22,1) for reveals + cubic-bezier(0.65, 0, 0.35, 1) for scoreboard transitions. Reads as a broadcast graphics package, not a marketing page.
+
+signature: |
+  Deep navy canvas at #0a0e1e — the register's non-negotiable base
+  (league-official cinematic ground, deeper than pure black, warmer
+  than cool blue). Saturated arena-red brand accent #e6202b used ONLY
+  for live indicators, score bugs, primary CTAs, and championship
+  moments. Per-palette team spotlight color rotates through the 10
+  palette variants (Meridian red / Arcadia navy / Summit purple /
+  Capital forest / Marquee gold / Lane orange / Clutch teal / Opener
+  crimson / Final indigo / Capstone silver). Sharp 2px corners
+  everywhere.
+
+  MASTHEAD — a cream 'MERIDIAN' wordmark in Archivo Black uppercase
+  at 22px on the left with a stylized ball-mark, a horizontal nav
+  (Games / Standings / Teams / Schedule / Season Pass) center, a
+  filled arena-red 'Watch live' button right-aligned. Shrinks after
+  200px scroll.
+
+  LIVE TICKER STRIP — a full-bleed horizontal ticker below the nav
+  showing 6 games with team abbreviations, live/final scores, and
+  game clocks. Ticker cycles every 4 seconds. Live indicator pulses.
+  ('MER 108 · ARC 102 · Q4 2:41 LIVE' + 'SUM 94 · CAP 87 · FINAL' +
+   'MAR 71 · LAN 68 · Q3 8:12 LIVE' etc.)
+
+  CINEMATIC PLAYER STAT CARD — the SIGNATURE MOVE. Full-bleed panel
+  with:
+    • BACKGROUND: team-color flood (Meridian arena red) with subtle
+      arena-lights texture (bespoke SVG radial spotlights, sharp
+      geometric — no gradient blooms).
+    • LEFT: bespoke SVG player silhouette in cream on navy — a
+      dramatic shooting-form portrait, not a stock photo, not an
+      emoji, not a radial-gradient blob. Illustrated in a graphic
+      broadcast-poster style with sharp angular geometry.
+    • RIGHT: massive stat number '48' in Archivo Black at 160px
+      counting up from 0, with 'PTS' label below in tracked mono.
+      Secondary stats '12 REB · 9 AST · 4 STL · 2 BLK' in a row
+      below in mono.
+    • BOTTOM RIBBON: player name 'K. MOSELY' + jersey number '#7'
+      + team 'MERIDIAN HOME' + game 'vs. Arcadia · Feb 24'.
+
+  STANDINGS TABLE — full-width dark table with 12 rows (all 12
+  fictional Meridian League teams). Columns: RANK / TEAM / W-L / PCT
+  / GB / STRK / LAST 10. Top 4 rows have subtle arena-red left border
+  (playoff spots). Bottom row has a small trending-down indicator.
+  Rows stagger reveal at 40ms per row.
+
+  ROSTER GRID — 12 player tiles in a dense 4-column grid, each with:
+    • Bespoke SVG jersey-number tile in team color
+    • Player name in Archivo Black uppercase
+    • Position + height in mono ('SF · 6'8"')
+    • Season stats mini bar: PTS · REB · AST
+    • Small status pill (Active / Day-to-day / Out)
+
+  SCHEDULE STRIP — horizontally-scrolling row of 10 upcoming game
+  cards, each with:
+    • Date + tip-off time in mono
+    • Home team abbreviation + logo mark (bespoke SVG)
+    • '@' or 'vs' in tracked mono
+    • Away team abbreviation + logo mark
+    • Arena venue + broadcast channel
+
+  FEATURED GAME RECAP — a full-width recap card with:
+    • Final score in Archivo Black 120px ('MER 108 · ARC 102')
+    • Game-flow line chart drawing via stroke-dashoffset (home vs.
+      away score progression over 4 quarters)
+    • Box-score mini-table (top 5 scorers per team, PTS/REB/AST)
+    • Championship-gold winner ribbon strip
+
+  SEASON PASS TIERS — 3-tier grid with:
+    • REGULAR SEASON PASS: all 82 regular-season games
+    • PLAYOFF PASS: adds playoffs (arena-red RECOMMENDED chip)
+    • CHAMPIONSHIP PASS: adds finals + all-access (championship-gold
+      chip + total-savings counter)
+
+  FOOTER — dark inverted band with 'MERIDIAN LEAGUE' wordmark at ~160px,
+  a 5-column utility grid, and a small broadcast-partner logo strip
+  (fictional 'MERIDIAN NETWORK · MRD SPORTS · WEST WIRE').
+
+  Six bespoke SVG marks (league-shield, ball-mark, jersey-number-tile,
+  clock-bug, court-diagram-mini, arena-lights) drop as PUNCTUATION at
+  specific compositional moments, never as a uniform icon row.
+
+imagery: |
+  BESPOKE SVG illustrations — the reference uses cinematic player
+  portraits, team-color hero floods, jersey-number tiles, and court
+  diagrams. FPO imagery here should read as considered broadcast-
+  graphics (bespoke SVG player silhouettes with sharp angular
+  geometry, team-color flood grounds, subtle arena-lights radial
+  spotlights). NO stock 'cheering crowd in stadium' photography.
+  NO player mockups that could read as real-world attribution.
+  NO 3D-rendered basketball/football renders. NO radial-gradient
+  placeholder fills as fake photography.
+
+best_for:
+  - Professional-league broadcast and streaming surfaces
+  - Sports-league official brand sites and season-pass storefronts
+  - Sports media surfaces (recap, box-score, standings)
+  - Fantasy-league and sports-analytics platforms leaning cinematic
+  - Sports-betting platforms leaning premium and league-official
+  - Sports-team single-brand promo sites
+
+avoid:
+  - "Light canvas — Sports League's canvas is DEEP NAVY #0a0e1e. Light canvas inverts the league-broadcast register into a fantasy-sports light-tool register (different theme)."
+  - "Pure black canvas — #0a0e1e is deliberately WARMER and BLUER than pure black, matching league-official brand systems. Pure black kills the specific atmospheric depth."
+  - "Serif display — the register requires BOLD CONDENSED DISPLAY SANS. Serif display collapses into editorial territory."
+  - "Multi-color palette — the register uses NAVY + CREAM + ARENA RED single accent + per-palette team spotlight. Introducing multi-color as decoration collapses the discipline into candy slop."
+  - "Fully-rounded pill corners — cards use 2px sharp corners. 999px pills anywhere on this register kill the league-official reading."
+  - "Stock crowd photography — imagery MUST feel like considered SVG broadcast graphics (player silhouettes, team-color floods, jersey tiles). Stock cheering-crowd photography is the AI-tell for corporate-sports slop."
+  - "Player names or team names lifted from real leagues — placeholder MERIDIAN LEAGUE + fictional teams (MER / ARC / SUM / CAP / MAR / LAN / CLU / OPE / FIN / CAP-2) + fictional players. Naming real-world players / teams / leagues creates trademark and right-of-publicity exposure."
+  - "3D-rendered ball / court renders — visuals must be flat SVG broadcast graphics. 3D renders read as e-sports esports launch."
+  - "Emoji sports icons ⛹️ 🏀 🏆 — bespoke SVG only. Emoji is the biggest AI-tell for corporate sports slop."
+  - "Marketing-loud copy ('the most epic season of all time', 'unleash your fandom', 'game-changing action') — the register requires broadcast-official voice. Marketing-loud copy collapses into startup slop."
+  - "Cycling headline words or auto-advancing carousel — the LIVE motion is the SCOREBOARD TICKER + STAT-NUMBER COUNT-UP only. Auto-advancing headline sliders collapse into marketing slop."
+
+banned_defaults:
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is deep navy #0a0e1e, and register requires bold condensed sans."
+  - "void+acid"
+  - "broadsheet-on-noneditorial"
+  - "tech-bro purple gradient"
+  - "uniform-everything"
+  - "light-canvas-inversion (canvas is deep navy. Light canvas inverts into fantasy-tool register.)"
+  - "serif-display-anywhere (register requires bold condensed display sans. Serif display collapses into editorial territory.)"
+  - "multi-color-outside-team-spotlight (palette is navy + cream + arena red + per-palette team spotlight. Multi-color as decoration collapses into candy slop.)"
+  - "pill-card-corners (cards use 2px sharp corners, NOT 999px pills. 999px pills kill the league-official reading.)"
+  - "stock-crowd-photography (imagery must be bespoke SVG broadcast graphics. Stock crowd photography is the AI-tell.)"
+  - "real-player-names (placeholder MERIDIAN LEAGUE + fictional teams and players. Real player names create right-of-publicity exposure.)"
+  - "emoji-sports-icons (bespoke SVG only. Emoji is the biggest AI-tell for corporate sports slop.)"

package/themes/sports-league/tokens.ts

@@ -0,0 +1,32 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "sports-league",
+  family: "E",
+  base: "38",
+  palette: {
+    "bg": "#0a0e1e",
+    "surface": "#111632",
+    "ink": "#f5f2ec",
+    "accent": "#e6202b",
+    "cream": "#f5f2ec",
+    "darkInk": "#050813",
+    "mute": "#8a90a8",
+    "spotlight": "#d5aa50",
+    "teamHome": "#c8102e",
+    "teamAway": "#00538c"
+  },
+  typography: {
+    "display": "A bold condensed display sans at very heavy weight — Archivo Black / Neue Machina / Helvetica Now Condensed Extra Bold. Free fallback stack — \"Archivo Black\", \"Barlow Condensed\", \"Helvetica Neue\", \"Impact\", system-ui, sans-serif. Weight 800-900, uppercase for hero + score bugs, mixed case for section titles. Very tight letter-spacing (-0.03em) at hero scale. Top of scale ~160px cinematic hero stat number, 88px section titles, 32px card titles.",
+    "body": "A clean neutral sans for body copy and player names — Inter / IBM Plex Sans. Free fallback stack — \"Inter\", \"IBM Plex Sans\", system-ui, sans-serif. Weight 400 for body, 500 for player names, 600 for team names. 14-15px body copy, line-height 1.55.",
+    "mono": "JetBrains Mono / IBM Plex Mono for stats, jersey numbers, box scores, and game clock. Weight 400-600, 11-14px. LEGITIMATE here because sports statistics genuinely require monospaced tabular figures.",
+    "scale": "1.333 (perfect fourth stretched — dramatic hero-to-body jump)",
+    "eyebrow_exception": "Sports League LEGITIMATELY uses small-caps 0.14em-tracked 10-11px labels for LIVE GAME STATUS ('LIVE · Q4 · 2:41'), SCORE BUGS ('FINAL · OT'), STANDINGS COLUMN HEADERS ('W-L / PCT / GB / STRK'), and BOX-SCORE LABELS ('PTS / REB / AST / STL / BLK'). This is a THEME-SPECIFIC EXCEPTION — league-broadcast chrome uses these EXACTLY in this register as diegetic broadcast chrome, not decorative eyebrow slop.\n"
+  },
+  surface: "web",
+  density: "dense",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero player-portrait fades in with 1000ms cubic-bezier(0.19,1,0.22,1), then the big stat number counts up 0 → target (e.g., 0 → 48) over 1600ms via requestAnimationFrame ease-out.\n2. Live scoreboard ticker — 6 games cycle through the ticker every 4 seconds, each with team abbreviations + live/final score + game clock. The 'LIVE' indicator pulses in arena red at 1.4s intervals.\n3. Standings table row reveal — 12 rows fade in with 40ms per-row stagger on IntersectionObserver visibility at 30% threshold.\n4. Roster grid stagger — 12 player tiles fade in with 60ms per-tile stagger on scroll into view.\n5. Schedule strip horizontal scroll — 10 upcoming games slide in from right with 80ms per-card stagger on scroll.\n6. Featured recap chart draws — a game-flow line chart draws via stroke-dashoffset over 1400ms cubic-bezier on visibility at 40%.\n7. Season-pass tier count-up — total-savings number counts up 0 → $340 on scroll.\n8. Section reveals — each below-fold section fades in over 700ms cubic-bezier on IntersectionObserver at 25% threshold.\n9. Nav shrink on scroll after 200px; ticker sticks to top edge after 400px scroll.\n10. prefers-reduced-motion: reduce — scoreboard ticker still cycles but without pulse; counter jumps to final; charts show at full stroke; state changes still fire.\n\nMotion character: cinematic, broadcast-graphic, high-gloss. Custom cubic-bezier(0.19,1,0.22,1) for reveals + cubic-bezier(0.65, 0, 0.35, 1) for scoreboard transitions. Reads as a broadcast graphics package, not a marketing page.\n",
+  signature: "Deep navy canvas at #0a0e1e — the register's non-negotiable base\n(league-official cinematic ground, deeper than pure black, warmer\nthan cool blue). Saturated arena-red brand accent #e6202b used ONLY\nfor live indicators, score bugs, primary CTAs, and championship\nmoments. Per-palette team spotlight color rotates through the 10\npalette variants (Meridian red / Arcadia navy / Summit purple /\nCapital forest / Marquee gold / Lane orange / Clutch teal / Opener\ncrimson / Final indigo / Capstone silver). Sharp 2px corners\neverywhere.\n\nMASTHEAD — a cream 'MERIDIAN' wordmark in Archivo Black uppercase\nat 22px on the left with a stylized ball-mark, a horizontal nav\n(Games / Standings / Teams / Schedule / Season Pass) center, a\nfilled arena-red 'Watch live' button right-aligned. Shrinks after\n200px scroll.\n\nLIVE TICKER STRIP — a full-bleed horizontal ticker below the nav\nshowing 6 games with team abbreviations, live/final scores, and\ngame clocks. Ticker cycles every 4 seconds. Live indicator pulses.\n('MER 108 · ARC 102 · Q4 2:41 LIVE' + 'SUM 94 · CAP 87 · FINAL' +\n 'MAR 71 · LAN 68 · Q3 8:12 LIVE' etc.)\n\nCINEMATIC PLAYER STAT CARD — the SIGNATURE MOVE. Full-bleed panel\nwith:\n  • BACKGROUND: team-color flood (Meridian arena red) with subtle\n    arena-lights texture (bespoke SVG radial spotlights, sharp\n    geometric — no gradient blooms).\n  • LEFT: bespoke SVG player silhouette in cream on navy — a\n    dramatic shooting-form portrait, not a stock photo, not an\n    emoji, not a radial-gradient blob. Illustrated in a graphic\n    broadcast-poster style with sharp angular geometry.\n  • RIGHT: massive stat number '48' in Archivo Black at 160px\n    counting up from 0, with 'PTS' label below in tracked mono.\n    Secondary stats '12 REB · 9 AST · 4 STL · 2 BLK' in a row\n    below in mono.\n  • BOTTOM RIBBON: player name 'K. MOSELY' + jersey number '#7'\n    + team 'MERIDIAN HOME' + game 'vs. Arcadia · Feb 24'.\n\nSTANDINGS TABLE — full-width dark table with 12 rows (all 12\nfictional Meridian League teams). Columns: RANK / TEAM / W-L / PCT\n/ GB / STRK / LAST 10. Top 4 rows have subtle arena-red left border\n(playoff spots). Bottom row has a small trending-down indicator.\nRows stagger reveal at 40ms per row.\n\nROSTER GRID — 12 player tiles in a dense 4-column grid, each with:\n  • Bespoke SVG jersey-number tile in team color\n  • Player name in Archivo Black uppercase\n  • Position + height in mono ('SF · 6'8\"')\n  • Season stats mini bar: PTS · REB · AST\n  • Small status pill (Active / Day-to-day / Out)\n\nSCHEDULE STRIP — horizontally-scrolling row of 10 upcoming game\ncards, each with:\n  • Date + tip-off time in mono\n  • Home team abbreviation + logo mark (bespoke SVG)\n  • '@' or 'vs' in tracked mono\n  • Away team abbreviation + logo mark\n  • Arena venue + broadcast channel\n\nFEATURED GAME RECAP — a full-width recap card with:\n  • Final score in Archivo Black 120px ('MER 108 · ARC 102')\n  • Game-flow line chart drawing via stroke-dashoffset (home vs.\n    away score progression over 4 quarters)\n  • Box-score mini-table (top 5 scorers per team, PTS/REB/AST)\n  • Championship-gold winner ribbon strip\n\nSEASON PASS TIERS — 3-tier grid with:\n  • REGULAR SEASON PASS: all 82 regular-season games\n  • PLAYOFF PASS: adds playoffs (arena-red RECOMMENDED chip)\n  • CHAMPIONSHIP PASS: adds finals + all-access (championship-gold\n    chip + total-savings counter)\n\nFOOTER — dark inverted band with 'MERIDIAN LEAGUE' wordmark at ~160px,\na 5-column utility grid, and a small broadcast-partner logo strip\n(fictional 'MERIDIAN NETWORK · MRD SPORTS · WEST WIRE').\n\nSix bespoke SVG marks (league-shield, ball-mark, jersey-number-tile,\nclock-bug, court-diagram-mini, arena-lights) drop as PUNCTUATION at\nspecific compositional moments, never as a uniform icon row.\n",
+} as const;
+
+export type Tokens = typeof tokens;