@stylecrib/cli 0.3.1 → 0.3.3

package/themes/case-panel/THEME.md

@@ -0,0 +1,126 @@
+# Case Panel
+
+> Agency-portfolio register — the client work IS the design. White canvas with big bold sans headlines at tight negative tracking, and a bento-grid where each case study is a full-bleed brand-colored panel showing a fictional client's identity at scale. The studio's chrome (nav, headers, footer) deliberately stays neutral so the client brands can shout.
+
+**Slug:** `case-panel` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+High-end branding-and-UX agency portfolio sites — the Clay / Collins / Pentagram / Instrument / Base Design register where a client-work grid dominates the composition. Also international-style Swiss agency print work (the studio positions itself through the work, not through its own identity). Reference-adjacent — Wolff Olins, Sagmeister, COMMISSION.
+
+
+## Signature move
+
+Big bold sans-serif hero at 74px, letter-spacing crushed to -0.04em,
+set on pure white canvas. A small dark navy pill sits ABOVE the hero
+("Parable is a global branding and UX design agency" — the studio's
+positioning line, treated as a floating badge not a headline).
+The signature move sits BELOW the hero: a bento-style grid of 8-12
+case-study panels, each a full-bleed brand-colored rectangle
+representing a fictional client.
+Panels alternate: some are pure color-plus-brand-name (in the
+client's own imagined typeface, big and centered), others hold a
+small product screenshot with the brand name at the corner, others
+hold a lifestyle photograph. Panel sizes vary 2x1 / 1x1 / 3x2 to
+break the uniform-grid slop. On the right rail of the hero, a
+vertical stack of category filter chips (Branding / Digital
+Features / Websites / Development / Content / Generative AI). Below
+the case grid, a workflow strip with 4 numbered process steps in
+large bold type. Featured News section with 3 image-headed cards.
+Dark navy `#171921` FAQ band with white text — accordion rows,
+chevron rotates on expand. Cream/tan `#F3F4F6` footer band with
+wordmark + column navigation. Border-radius 0 everywhere — no
+rounded cards, buttons, inputs, media. Brand character sits in the
+case-panel grid (the client work IS the design) and the studio's
+restraint (nav, headers, chrome all step aside) — not in
+decoration, not in mono-caps eyebrows, not in stat-card triads.
+
+## Palette
+
+- **bg:** `#FFFFFF`
+- **surface:** `#F3F4F6`
+- **ink:** `#06070A`
+- **accent:** `#0000EE`
+
+## Typography
+
+- **Display:** UniversalSans (paid, from TypeMates equivalent) or Inter Display / General Sans as broader-market fallback — weight 700 (very bold, "740-headline" in the reference maps to Inter Display 800-900 in practice), letter-spacing -0.04em at hero scale (-2.96px at 74px). At scale — 74px hero-headline, 52px section-title, 40px subhead, 28-30px case-panel title inside each brand panel. UniversalSans is the reference face (its tight negative tracking + bold weight is the exact register); Inter Display is the safest free approximation with similar bold-sans proportions.
+- **Body:** UniversalSans-500 same family — 500 weight, 15-18px body copy, line-height 1.5. This theme's discipline is ONE type family across display + body (the studio's chrome speaks quietly so client brands dominate), but the body uses the LIGHTER weight to contrast with the hero's very-bold.
+- **Mono:** none. Case Panel is a consumer-portfolio surface — mono has no legitimate role here. Numbered indices (01, 02, 03) use the body face at bold weight, NOT a mono variant.
+- **Scale:** 1.414 (augmented fourth — deliberately wide contrast so bold display shouts and the light body captions settle)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero headline scroll-triggered reveal via IntersectionObserver — bottom-up + fade, 700ms cubic-bezier(0.19,1,0.22,1).
+2. Case-panel grid stagger reveal — each brand panel enters from opacity 0 + translateY(12px) with 80ms stagger, 600ms cubic-bezier per panel.
+3. Case-panel hover — subtle 1.01 scale + 200ms cubic-bezier transition. On hover the panel's brand-color darkens 8% so it reads as clickable without changing character.
+4. Nav client-rotator (small marquee-adjacent) — a rotating "trusted by" list of client brand names cycles vertically (roll every 2.5s per name, 400ms cubic-bezier easing). Small text only, no huge marquee — this is a subtle nav ornament, not a hero move.
+5. Filter-chip active state — the category chips on the right rail highlight one-at-a-time when clicked; grid re-renders filtered instantly (no cross-fade transition, no loading state — instant like a filter should be).
+6. FAQ accordion — each FAQ row expands 400ms cubic-bezier on click, chevron rotates 180deg. Only one open at a time (accordion, not multi-open).
+7. Featured-news card hover — subtle image scale(1.03) + 400ms cubic-bezier. Card frame stays flat; only the image inside moves.
+8. prefers-reduced-motion: reduce — all keyframe animations disabled, hero at final state, stagger disabled, hover transitions instant, client-rotator paused. State changes still fire (they're content, not decoration).
+
+Customer installs these as dependencies for the deeper motion tier:
+- Lenis — smooth inertial scroll (the section rhythm needs inertial scroll to feel considered at agency-tier polish).
+- GSAP ScrollTrigger — the hero reveal + case-panel stagger + featured-news scroll-reveal all benefit from orchestrated timelines.
+- Custom branded preloader with the studio wordmark drawing in from small to large over the white ground.
+
+Motion character: precise, considered, professional. Custom cubic-bezier(0.19,1,0.22,1) (ease-out-expo) for reveal easings. Nothing bouncy, nothing playful — the studio speaks with restraint so client work can shout.
+
+
+## Imagery
+
+Full-bleed brand-colored rectangles as the primary imagery — each
+case panel is a fictional client's brand identity rendered at scale.
+Some panels are pure color + client wordmark (imagined typeface, big
+and centered on the color field). Others show product screenshots
+(fictional app mockups, mobile UI cards) on the client's brand
+color. Others show photographic lifestyle shots (portraits, product
+photography, environmental). Featured News cards use small
+photograph-plus-headline layout. Workflow strip images are candid
+studio photography (people at desks, whiteboards, screens). NO
+gradient blobs, NO glassmorphism, NO stock illustrations, NO
+emoji — this is a design AGENCY, not a SaaS product. All FPO
+imagery uses colored rectangles with clearly-labeled placeholders
+("FPO / Client X — product hero") so the composition reads as a
+showcase-in-progress without shipping stock assets.
+
+## Best for
+
+- Design-agency portfolio sites (branding studios, digital agencies, creative shops)
+- Case-study showcases for freelance designers with 5-15 named clients
+- Studio-launch marketing pages where the client roster IS the pitch
+- Consultancy / advisory portfolios that trade on named clients + case studies
+- Photographer or director portfolio sites where the work grid is the composition
+- Design-focused SaaS marketing pages that want to feel like an agency-tier launch, not a product tour
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity
+- Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 0 radius, that's it
+- Serif or condensed display type — display face must be humanist bold sans (UniversalSans or Inter Display), never a serif, never Anton condensed
+- Mono type as a decorative label voice on consumer surfaces — mono has NO legitimate role here
+- Warm color palettes as the canvas — this register is COOL and NEUTRAL (white paper, near-black ink), never espresso/cream/amber flooding
+- Corporate polish on the studio chrome — no drop-shadow-md cards, no soft-glow panels, no gradient backgrounds. Chrome is FLAT so client brands can shout.
+- Uniform three-column feature grid for case studies — the case-panel grid MUST vary panel sizes (2x1 / 1x1 / 3x2) so it reads as considered composition, not template output
+- Center-aligned hero everything — hero is left-weighted, agency-badge floats above the display type, category filter chips align RIGHT
+- Multiple accent colors — browser-blue #0000EE is the ONE studio accent (CTAs, hover states, small inline glyphs only). The case-panel colors are CLIENT brands, not studio accents.
+- Auto-advancing hero sliders / cycling headline words — refused
+- Stat-card triads (100K CLIENTS / 4.9 STAR / 12 YEARS) — the case grid speaks for the studio's scale, no stat cards needed
+- Grain overlay on any surface — this register is CRISP paper, not textured
+- Studio-name mono-caps corner tag anywhere on the page — the studio's brand shows up ONCE as a nav wordmark and ONCE as a footer wordmark, that's it
+- Emoji or decorative unicode glyphs — inline marks are bespoke SVG shapes only
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757)
+- void+acid (near-black bg + single bright acid-green or vermilion accent)
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)
+- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- studio-brand-as-accent (the case-panel colors are CLIENT brands. The moment you use one of them as the studio's accent, the register collapses — studio chrome stays neutral, only browser-blue is the studio accent.)
+- case-panels-in-uniform-grid (the panel bento must break sizes 2x1 / 1x1 / 3x2. A uniform 3-col grid of same-size panels reads as a template-generic 'Our Work' page, not a considered showcase.)
+- agency-badge-in-hero-headline (the studio positioning line is a SMALL floating pill above the hero. Rendering it as the hero H1 collapses the composition into every-agency-website — 'we are a global design agency that transforms brands' as the headline.)

package/themes/case-panel/tailwind.snippet.ts

@@ -0,0 +1,15 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: case-panel
+export const casePanelTailwindExtend = {
+  colors: {
+    bg: "#FFFFFF",
+    surface: "#F3F4F6",
+    ink: "#06070A",
+    accent: "#0000EE",
+  },
+  fontFamily: {
+    display: ["UniversalSans (paid, from TypeMates equivalent) or Inter Display / General Sans as broader-market fallback — weight 700 (very bold, \"740-headline\" in the reference maps to Inter Display 800-900 in practice), letter-spacing -0.04em at hero scale (-2.96px at 74px). At scale — 74px hero-headline, 52px section-title, 40px subhead, 28-30px case-panel title inside each brand panel. UniversalSans is the reference face (its tight negative tracking + bold weight is the exact register); Inter Display is the safest free approximation with similar bold-sans proportions."],
+    body: ["UniversalSans-500 same family — 500 weight, 15-18px body copy, line-height 1.5. This theme's discipline is ONE type family across display + body (the studio's chrome speaks quietly so client brands dominate), but the body uses the LIGHTER weight to contrast with the hero's very-bold."],
+    mono: ["none. Case Panel is a consumer-portfolio surface — mono has no legitimate role here. Numbered indices (01, 02, 03) use the body face at bold weight, NOT a mono variant."],
+  },
+};

package/themes/case-panel/theme.yml

@@ -0,0 +1,153 @@
+# Case Panel — Family C, Editorial & Print.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md. Design-agency portfolio
+# register — the client work IS the design. White canvas, big bold sans
+# headlines at tight negative tracking, and a bento-grid of case studies
+# where each case study is a FULL-BLEED brand-colored panel showing a
+# fictional client's identity at scale. Distinct from Base 27 Type
+# Specimen (which shows off a typeface): here the SHOWCASE is the design,
+# and the studio's chrome deliberately steps aside so the client brands
+# can shout.
+#
+# Authored from Matt's provided design brief (2026-07-04, clay.global
+# reference). Placeholder demonstration studio is a fictional 12-year-old
+# branding + UX agency called "PARABLE" — domain-agnostic mockup that
+# could re-skin to any design studio, creative shop, or agency
+# portfolio. The register expresses "agency premium" through the CLIENT
+# WORK GRID rather than through decoration or the studio's own brand.
+#
+# Eighth theme via the v2 harness. Second Family C theme (after
+# ember-poster). Fourth NEW BASE (after ember-poster, overland-broadside,
+# arc-stack).
+#
+# Alternative slugs considered: agency-showcase, brand-index, atelier-
+# portfolio, case-stack, portfolio-grid. Case-panel picked because
+# "case" is the industry term for a case study and "panel" nails the
+# structural move — each case study is a full-bleed color panel, not a
+# framed thumbnail.
+
+name: Case Panel
+concept: Agency-portfolio register — the client work IS the design. White canvas with big bold sans headlines at tight negative tracking, and a bento-grid where each case study is a full-bleed brand-colored panel showing a fictional client's identity at scale. The studio's chrome (nav, headers, footer) deliberately stays neutral so the client brands can shout.
+influence: |
+  High-end branding-and-UX agency portfolio sites — the Clay / Collins / Pentagram / Instrument / Base Design register where a client-work grid dominates the composition. Also international-style Swiss agency print work (the studio positions itself through the work, not through its own identity). Reference-adjacent — Wolff Olins, Sagmeister, COMMISSION.
+
+family: C
+base_number: 27
+base_note: |
+  New-base candidate adjacent to Base 27 Type Specimen. Base 27 is "the typeface IS the design" (foundry showcase); Case Panel is "the CLIENT WORK is the design" (agency showcase). Both trade on the same discipline — the SHOWCASE dominates and the surrounding chrome steps aside — but the subject shifts from type specimens to brand panels. Both register as portfolio-first — content is the design, ornament is banned.
+
+render_url: http://localhost:5173/themes/case-panel
+
+surface: web
+
+typography:
+  display: UniversalSans (paid, from TypeMates equivalent) or Inter Display / General Sans as broader-market fallback — weight 700 (very bold, "740-headline" in the reference maps to Inter Display 800-900 in practice), letter-spacing -0.04em at hero scale (-2.96px at 74px). At scale — 74px hero-headline, 52px section-title, 40px subhead, 28-30px case-panel title inside each brand panel. UniversalSans is the reference face (its tight negative tracking + bold weight is the exact register); Inter Display is the safest free approximation with similar bold-sans proportions.
+  body: UniversalSans-500 same family — 500 weight, 15-18px body copy, line-height 1.5. This theme's discipline is ONE type family across display + body (the studio's chrome speaks quietly so client brands dominate), but the body uses the LIGHTER weight to contrast with the hero's very-bold.
+  mono: none. Case Panel is a consumer-portfolio surface — mono has no legitimate role here. Numbered indices (01, 02, 03) use the body face at bold weight, NOT a mono variant.
+  scale: 1.414 (augmented fourth — deliberately wide contrast so bold display shouts and the light body captions settle)
+
+palette:
+  bg: "#FFFFFF"
+  surface: "#F3F4F6"
+  ink: "#06070A"
+  accent: "#0000EE"        # browser-blue link accent, used sparingly on CTAs, hover states, small icons ONLY
+  mute: "#7F8694"          # gray-500 for secondary labels
+  invertedBg: "#171921"    # dark navy for FAQ + one-inverted-band + footer nav accent
+  invertedInk: "#FFFFFF"
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero headline scroll-triggered reveal via IntersectionObserver — bottom-up + fade, 700ms cubic-bezier(0.19,1,0.22,1).
+  2. Case-panel grid stagger reveal — each brand panel enters from opacity 0 + translateY(12px) with 80ms stagger, 600ms cubic-bezier per panel.
+  3. Case-panel hover — subtle 1.01 scale + 200ms cubic-bezier transition. On hover the panel's brand-color darkens 8% so it reads as clickable without changing character.
+  4. Nav client-rotator (small marquee-adjacent) — a rotating "trusted by" list of client brand names cycles vertically (roll every 2.5s per name, 400ms cubic-bezier easing). Small text only, no huge marquee — this is a subtle nav ornament, not a hero move.
+  5. Filter-chip active state — the category chips on the right rail highlight one-at-a-time when clicked; grid re-renders filtered instantly (no cross-fade transition, no loading state — instant like a filter should be).
+  6. FAQ accordion — each FAQ row expands 400ms cubic-bezier on click, chevron rotates 180deg. Only one open at a time (accordion, not multi-open).
+  7. Featured-news card hover — subtle image scale(1.03) + 400ms cubic-bezier. Card frame stays flat; only the image inside moves.
+  8. prefers-reduced-motion: reduce — all keyframe animations disabled, hero at final state, stagger disabled, hover transitions instant, client-rotator paused. State changes still fire (they're content, not decoration).
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll (the section rhythm needs inertial scroll to feel considered at agency-tier polish).
+  - GSAP ScrollTrigger — the hero reveal + case-panel stagger + featured-news scroll-reveal all benefit from orchestrated timelines.
+  - Custom branded preloader with the studio wordmark drawing in from small to large over the white ground.
+
+  Motion character: precise, considered, professional. Custom cubic-bezier(0.19,1,0.22,1) (ease-out-expo) for reveal easings. Nothing bouncy, nothing playful — the studio speaks with restraint so client work can shout.
+
+signature: |
+  Big bold sans-serif hero at 74px, letter-spacing crushed to -0.04em,
+  set on pure white canvas. A small dark navy pill sits ABOVE the hero
+  ("Parable is a global branding and UX design agency" — the studio's
+  positioning line, treated as a floating badge not a headline).
+  The signature move sits BELOW the hero: a bento-style grid of 8-12
+  case-study panels, each a full-bleed brand-colored rectangle
+  representing a fictional client.
+  Panels alternate: some are pure color-plus-brand-name (in the
+  client's own imagined typeface, big and centered), others hold a
+  small product screenshot with the brand name at the corner, others
+  hold a lifestyle photograph. Panel sizes vary 2x1 / 1x1 / 3x2 to
+  break the uniform-grid slop. On the right rail of the hero, a
+  vertical stack of category filter chips (Branding / Digital
+  Features / Websites / Development / Content / Generative AI). Below
+  the case grid, a workflow strip with 4 numbered process steps in
+  large bold type. Featured News section with 3 image-headed cards.
+  Dark navy `#171921` FAQ band with white text — accordion rows,
+  chevron rotates on expand. Cream/tan `#F3F4F6` footer band with
+  wordmark + column navigation. Border-radius 0 everywhere — no
+  rounded cards, buttons, inputs, media. Brand character sits in the
+  case-panel grid (the client work IS the design) and the studio's
+  restraint (nav, headers, chrome all step aside) — not in
+  decoration, not in mono-caps eyebrows, not in stat-card triads.
+
+imagery: |
+  Full-bleed brand-colored rectangles as the primary imagery — each
+  case panel is a fictional client's brand identity rendered at scale.
+  Some panels are pure color + client wordmark (imagined typeface, big
+  and centered on the color field). Others show product screenshots
+  (fictional app mockups, mobile UI cards) on the client's brand
+  color. Others show photographic lifestyle shots (portraits, product
+  photography, environmental). Featured News cards use small
+  photograph-plus-headline layout. Workflow strip images are candid
+  studio photography (people at desks, whiteboards, screens). NO
+  gradient blobs, NO glassmorphism, NO stock illustrations, NO
+  emoji — this is a design AGENCY, not a SaaS product. All FPO
+  imagery uses colored rectangles with clearly-labeled placeholders
+  ("FPO / Client X — product hero") so the composition reads as a
+  showcase-in-progress without shipping stock assets.
+
+best_for:
+  - Design-agency portfolio sites (branding studios, digital agencies, creative shops)
+  - Case-study showcases for freelance designers with 5-15 named clients
+  - Studio-launch marketing pages where the client roster IS the pitch
+  - Consultancy / advisory portfolios that trade on named clients + case studies
+  - Photographer or director portfolio sites where the work grid is the composition
+  - Design-focused SaaS marketing pages that want to feel like an agency-tier launch, not a product tour
+
+avoid:
+  - "Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity"
+  - "Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 0 radius, that's it"
+  - "Serif or condensed display type — display face must be humanist bold sans (UniversalSans or Inter Display), never a serif, never Anton condensed"
+  - "Mono type as a decorative label voice on consumer surfaces — mono has NO legitimate role here"
+  - "Warm color palettes as the canvas — this register is COOL and NEUTRAL (white paper, near-black ink), never espresso/cream/amber flooding"
+  - "Corporate polish on the studio chrome — no drop-shadow-md cards, no soft-glow panels, no gradient backgrounds. Chrome is FLAT so client brands can shout."
+  - "Uniform three-column feature grid for case studies — the case-panel grid MUST vary panel sizes (2x1 / 1x1 / 3x2) so it reads as considered composition, not template output"
+  - "Center-aligned hero everything — hero is left-weighted, agency-badge floats above the display type, category filter chips align RIGHT"
+  - "Multiple accent colors — browser-blue #0000EE is the ONE studio accent (CTAs, hover states, small inline glyphs only). The case-panel colors are CLIENT brands, not studio accents."
+  - "Auto-advancing hero sliders / cycling headline words — refused"
+  - "Stat-card triads (100K CLIENTS / 4.9 STAR / 12 YEARS) — the case grid speaks for the studio's scale, no stat cards needed"
+  - "Grain overlay on any surface — this register is CRISP paper, not textured"
+  - "Studio-name mono-caps corner tag anywhere on the page — the studio's brand shows up ONCE as a nav wordmark and ONCE as a footer wordmark, that's it"
+  - "Emoji or decorative unicode glyphs — inline marks are bespoke SVG shapes only"
+
+banned_defaults:
+  # Global blocklist from BESPOKE_THEME_SYSTEM.md
+  - "claude-cream (#F4F1EA + serif + #D97757)"
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent)"
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)"
+  - "tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)"
+  - "uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)"
+  # Base-specific
+  - "studio-brand-as-accent (the case-panel colors are CLIENT brands. The moment you use one of them as the studio's accent, the register collapses — studio chrome stays neutral, only browser-blue is the studio accent.)"
+  - "case-panels-in-uniform-grid (the panel bento must break sizes 2x1 / 1x1 / 3x2. A uniform 3-col grid of same-size panels reads as a template-generic 'Our Work' page, not a considered showcase.)"
+  - "agency-badge-in-hero-headline (the studio positioning line is a SMALL floating pill above the hero. Rendering it as the hero H1 collapses the composition into every-agency-website — 'we are a global design agency that transforms brands' as the headline.)"

package/themes/case-panel/tokens.ts

@@ -0,0 +1,28 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "case-panel",
+  family: "C",
+  base: "27",
+  palette: {
+    "bg": "#FFFFFF",
+    "surface": "#F3F4F6",
+    "ink": "#06070A",
+    "accent": "#0000EE",
+    "mute": "#7F8694",
+    "invertedBg": "#171921",
+    "invertedInk": "#FFFFFF"
+  },
+  typography: {
+    "display": "UniversalSans (paid, from TypeMates equivalent) or Inter Display / General Sans as broader-market fallback — weight 700 (very bold, \"740-headline\" in the reference maps to Inter Display 800-900 in practice), letter-spacing -0.04em at hero scale (-2.96px at 74px). At scale — 74px hero-headline, 52px section-title, 40px subhead, 28-30px case-panel title inside each brand panel. UniversalSans is the reference face (its tight negative tracking + bold weight is the exact register); Inter Display is the safest free approximation with similar bold-sans proportions.",
+    "body": "UniversalSans-500 same family — 500 weight, 15-18px body copy, line-height 1.5. This theme's discipline is ONE type family across display + body (the studio's chrome speaks quietly so client brands dominate), but the body uses the LIGHTER weight to contrast with the hero's very-bold.",
+    "mono": "none. Case Panel is a consumer-portfolio surface — mono has no legitimate role here. Numbered indices (01, 02, 03) use the body face at bold weight, NOT a mono variant.",
+    "scale": "1.414 (augmented fourth — deliberately wide contrast so bold display shouts and the light body captions settle)"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero headline scroll-triggered reveal via IntersectionObserver — bottom-up + fade, 700ms cubic-bezier(0.19,1,0.22,1).\n2. Case-panel grid stagger reveal — each brand panel enters from opacity 0 + translateY(12px) with 80ms stagger, 600ms cubic-bezier per panel.\n3. Case-panel hover — subtle 1.01 scale + 200ms cubic-bezier transition. On hover the panel's brand-color darkens 8% so it reads as clickable without changing character.\n4. Nav client-rotator (small marquee-adjacent) — a rotating \"trusted by\" list of client brand names cycles vertically (roll every 2.5s per name, 400ms cubic-bezier easing). Small text only, no huge marquee — this is a subtle nav ornament, not a hero move.\n5. Filter-chip active state — the category chips on the right rail highlight one-at-a-time when clicked; grid re-renders filtered instantly (no cross-fade transition, no loading state — instant like a filter should be).\n6. FAQ accordion — each FAQ row expands 400ms cubic-bezier on click, chevron rotates 180deg. Only one open at a time (accordion, not multi-open).\n7. Featured-news card hover — subtle image scale(1.03) + 400ms cubic-bezier. Card frame stays flat; only the image inside moves.\n8. prefers-reduced-motion: reduce — all keyframe animations disabled, hero at final state, stagger disabled, hover transitions instant, client-rotator paused. State changes still fire (they're content, not decoration).\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll (the section rhythm needs inertial scroll to feel considered at agency-tier polish).\n- GSAP ScrollTrigger — the hero reveal + case-panel stagger + featured-news scroll-reveal all benefit from orchestrated timelines.\n- Custom branded preloader with the studio wordmark drawing in from small to large over the white ground.\n\nMotion character: precise, considered, professional. Custom cubic-bezier(0.19,1,0.22,1) (ease-out-expo) for reveal easings. Nothing bouncy, nothing playful — the studio speaks with restraint so client work can shout.\n",
+  signature: "Big bold sans-serif hero at 74px, letter-spacing crushed to -0.04em,\nset on pure white canvas. A small dark navy pill sits ABOVE the hero\n(\"Parable is a global branding and UX design agency\" — the studio's\npositioning line, treated as a floating badge not a headline).\nThe signature move sits BELOW the hero: a bento-style grid of 8-12\ncase-study panels, each a full-bleed brand-colored rectangle\nrepresenting a fictional client.\nPanels alternate: some are pure color-plus-brand-name (in the\nclient's own imagined typeface, big and centered), others hold a\nsmall product screenshot with the brand name at the corner, others\nhold a lifestyle photograph. Panel sizes vary 2x1 / 1x1 / 3x2 to\nbreak the uniform-grid slop. On the right rail of the hero, a\nvertical stack of category filter chips (Branding / Digital\nFeatures / Websites / Development / Content / Generative AI). Below\nthe case grid, a workflow strip with 4 numbered process steps in\nlarge bold type. Featured News section with 3 image-headed cards.\nDark navy `#171921` FAQ band with white text — accordion rows,\nchevron rotates on expand. Cream/tan `#F3F4F6` footer band with\nwordmark + column navigation. Border-radius 0 everywhere — no\nrounded cards, buttons, inputs, media. Brand character sits in the\ncase-panel grid (the client work IS the design) and the studio's\nrestraint (nav, headers, chrome all step aside) — not in\ndecoration, not in mono-caps eyebrows, not in stat-card triads.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/cinematic-dark/THEME.md

@@ -0,0 +1,97 @@
+# Design Direction — Cinematic-Dark
+
+## Ethos
+Tesla blackout · Cybertruck steel · Masters/Rolex luxury · Nike type · Mercedes engineered minimalism
+
+## Feel
+Near-black backgrounds with restrained brand-green and Rolex-gold accents. Condensed display type, cinematic film-grain texture, slow ambient motion. Reads like a Tesla launch site or a premium product film, not like an app.
+
+## Reference brands
+- **Tesla** → blackout marketing site. The void is the canvas; product is the only light source.
+- **Cybertruck** → raw stainless steel. Surface honesty, visible panel gaps, no decoration.
+- **Masters Tournament** → restrained heritage green. The single saturated color, used sparingly.
+- **Rolex** → champagne gold accents. Focus rings, sheens, gradient text — the luxury detail.
+- **Nike** → condensed all-caps display type. Broadcast-poster headlines, athletic confidence.
+- **Mercedes-Benz** → engineered minimalism. Hairline borders as panel gaps, nothing arbitrary.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin — untraceable tokens fail review. Brand tokens: `--gold` (Rolex 41 champagne), `--gold-deep` (Rolex engraved-bezel anchor for gradients), `--tech-blue` (Tesla HUD), `--steel` (Cybertruck stainless), `--ink` (the blackout itself).
+
+Surface stack steps in 3-4% lightness from `bg → card → popover → secondary → muted → accent`, holding a constant `220` blue-biased hue. Depth comes from **hairline borders and glow utilities**, not from fill contrast.
+
+Pure black is forbidden; `--background` is `220 18% 4%` (near-black with a slight blue bias — Tesla blackout, not OLED-off). Pure white is forbidden; `--foreground` is `40 30% 96%` (warm film-print off-white).
+
+## Typography
+- **Display:** Anton (Nike condensed headline feel). Single weight 400 — Anton ships as one cut. All-caps friendly, positive tracking required.
+- **Body:** Manrope (Tesla/Mercedes engineered geometric sans). Weights 400/500/600/700.
+- **Mono:** JetBrains Mono. Reserved for tabular numerics — stats, specs, lap-times, prices. Instrument cluster heritage.
+
+Heading tracking is **`0.04em`** — positive, because condensed display in dark mode needs the air. Body tracking is `0.01em`. Font features: `"ss01", "ss02", "tnum", "cv11"`. H1 uses `clamp(3rem, 9vw, 7.5rem)` — cinematic title-card scale. Display headings should default to `text-transform: uppercase`.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — wide. Hero video and 21:9 cinematic stills demand the screen.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-36 lg:pb-24` — generous, the title card breathes
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. Medium density — engineered, not crammed, not airy.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token. The green (`--primary`) and the gold (`--gold`) are **never used together at full saturation on the same surface** — they fight. Convention: gold for accents, focus, and luxury detail; green for status, brand mark, and rare CTA dots only.
+
+## Radius
+`--radius: 0.4rem`. **Tight, engineered chamfer — not soft, not knife-edge.** Pills are disallowed (`pillsAllowed: false`) — pills read SaaS dashboard; cinematic UI uses rectangles with precise corners.
+
+## Shadows
+**Glow style.** Two utilities, both for media-rich surfaces:
+- `.glow-gold` — `0 0 0 1px gold/0.35, 0 8px 24px gold/0.18, 0 40px 120px gold/0.22`. Multi-layer big-blur ambient halo plus a 1px gold hairline ring. Use on hero product cards, framed video tiles, gallery features.
+- `.glow-cyan` — same construction with `--tech-blue`. Use on tech/spec cards, HUD-style data callouts, anything that should feel instrumented.
+
+Conventional drop shadows are forbidden. The glow IS the elevation language.
+
+## Motion
+Six keyframes. Durations cluster at **0.9s (reveal), 2-3s (loops), 24-36s (ambient)**:
+- `rise-in` (900ms once) — opacity + 32px translate. Section entrance, title cards, product reveals.
+- `marquee` (36000ms infinite) — `translateX(0 → -50%)`. Logo/spec strip, broadcast lower-third pace.
+- `ken-burns` (24000ms infinite) — scale 1.05 → 1.18 with subtle translate. Hero still drift, cinematic camera push.
+- `bob` (3000ms infinite) — 6px vertical sway. Scroll-hint and floating product call-outs.
+- `pulse-glow` (2400ms infinite) — expanding gold box-shadow ring. Heartbeat for the single hero CTA, **one per page max**.
+- `sheen` (2200ms infinite) — background-position sweep. Gradient-gold text and border light-sweep, Rolex caseback feel.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — every keyframe is wrapped in the media query and ambient loops drop to a static frame.
+
+## Component patterns
+- **Buttons:** text-link CTAs by default (foreground color, underline on hover). Tertiary CTAs use the **gradient-gold utility** (`--gold` → `--gold-deep`) on the text itself. The **single hero action per page** is allowed solid — and the canonical TGA implementation is an **App Store badge image**, not a custom fill button. **Never a green-fill button** — brand-mark green is too saturated for button faces and reads cheap.
+- **Cards:** sharp `rounded-[0.4rem]` corners, hairline `--border`, `bg-card` one stop above blackout. Padding `p-6 lg:p-10`. Optional `.glow-gold` or `.glow-cyan` for hero or feature cards holding rich media.
+- **Inputs:** thin all-around border (1px `--border`) plus emphasized bottom border, `bg-card`, `rounded-[0.4rem]`. Label above in condensed display, `tracking-[0.08em] uppercase`. Focus ring is **gold, 1px** — not green.
+- **CTAs:** text-link with gradient-gold for tertiary; App Store badge image for the single hero action. Never a green rectangle. `pulse-glow` ring permitted on the one hero CTA only.
+
+## Recommended rich media
+Cover: 4K background video loops (drone shots of mountains/architecture, slow machinery, sport footage), 21:9 cinematic still photography with film-grain overlay, color grading toward **teal-and-amber** (Hollywood blockbuster palette), gold-tinted product shots.
+
+**AI tool recommendations:**
+- **Sora / Runway / Pika** — hero video loops at 21:9. Prompt with shot language: "drone push-in," "anamorphic lens flare-free," "slow-motion machinery."
+- **Midjourney / Flux** — stills. Include in every prompt: `cinematic film grain, anamorphic lens, teal and amber color grade, 21:9`.
+- **Topaz Video AI** — upscaling and frame-interpolation for stock or AI-generated footage that needs to hit 4K.
+
+**Aspect ratios:** hero videos **21:9 or 16:9**, never vertical except for phone-mockup product shots. Galleries: 21:9 stills mixed with 4:5 portraits — the deck is wide.
+
+**Performance:** hero videos **≤6 MB**, encoded **AV1 or H.265**, `autoplay muted loop playsinline`. Mobile fallback to the still poster — never ship a video to small screens.
+
+**Avoid:** bright/saturated stock photography (kills the blackout), vertical 9:16 video (TikTok aesthetic, not cinematic), lens-flare overlays (Y2K aesthetic, not cinematic), drop-shadow product cutouts on bg (use glow instead).
+
+**Accessibility:** every video has a still **poster** attribute; every still has descriptive alt-text naming the cinematic feel ("aerial drone shot of fog rolling over mountain ridge at dawn"). Captions on any video with dialogue or scored narration.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Likely first families: `HeroVideoCard`, `SpecGrid` (mono numerics + gold dividers), `MarqueeStrip`, `GoldGradientText`.
+
+## Details
+- **Selection:** `hsl(var(--gold) / 0.3)` background, foreground text. Gold, not green — selection is a luxury accent, not a status.
+- **Focus ring:** `1px solid hsl(var(--gold))`. Thin, warm — engineered, not loud.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/cinematic-dark/tokens.ts

@@ -0,0 +1,195 @@
+import type { Direction } from "../schema";
+
+export const cinematicDark: Direction = {
+  name: "cinematic-dark",
+  ethos: "Tesla blackout · Cybertruck steel · Masters/Rolex luxury · Nike type",
+  references: [
+    { brand: "Tesla", trait: "blackout marketing site" },
+    { brand: "Cybertruck", trait: "raw stainless steel surface" },
+    { brand: "Masters Tournament", trait: "restrained heritage green" },
+    { brand: "Rolex", trait: "champagne gold accents" },
+    { brand: "Nike", trait: "condensed all-caps display type" },
+    { brand: "Mercedes-Benz", trait: "engineered minimalism" },
+  ],
+  feel:
+    "Near-black backgrounds with restrained brand-green and Rolex-gold accents. " +
+    "Condensed display type, cinematic film-grain texture, slow ambient motion. " +
+    "Reads like a Tesla launch site or a premium product film, not like an app.",
+
+  fonts: {
+    display: {
+      family: "Anton",
+      fallback: ["Oswald", "Impact", "Haettenschweiler", "Arial Narrow Bold", "sans-serif"],
+      from: "Nike condensed headline feel — all-caps friendly, broadcast-poster weight",
+      googleFont: "Anton",
+      weights: [400],
+    },
+    body: {
+      family: "Manrope",
+      fallback: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "geometric modern sans — Tesla/Mercedes engineered-feel body copy",
+      googleFont: "Manrope",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "tabular numerics for stats, specs, lap-times — instrument cluster heritage",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.04em",          // condensed display reads better with positive tracking — broadcast feel
+    bodyTracking: "0.01em",
+    fontFeatureSettings: '"ss01", "ss02", "tnum", "cv11"',
+    h1ScaleClamp: "clamp(3rem, 9vw, 7.5rem)",   // oversized — cinematic title-card scale
+    bodyBaseSize: "1rem",                        // 16px — comfortable on dark surfaces
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "220 18% 4%", from: "Tesla blackout — near-black with a slight blue bias" },
+    foreground: { hsl: "40 30% 96%", from: "warm off-white — film-print white, never pure" },
+    card: { hsl: "220 16% 7%", from: "elevated surface, one stop up from blackout" },
+    popover: { hsl: "220 14% 9%", from: "popover/menu surface, two stops up" },
+    primary: { hsl: "150 64% 42%", from: "Masters green, restrained — heritage tournament mark" },
+    primaryForeground: { hsl: "220 18% 4%", from: "blackout on Masters green" },
+    secondary: { hsl: "220 12% 12%", from: "Cybertruck shadowed-steel, deeper tier" },
+    secondaryForeground: { hsl: "40 30% 96%", from: "warm white on dark steel" },
+    muted: { hsl: "220 10% 14%", from: "muted surface — same family as secondary, fractionally lighter" },
+    mutedForeground: { hsl: "40 12% 68%", from: "warm-tinted secondary text — film-still gray" },
+    accent: { hsl: "220 10% 16%", from: "hover surface, Cybertruck brushed-steel highlight" },
+    accentForeground: { hsl: "40 30% 96%", from: "warm white on accent steel" },
+    border: { hsl: "220 10% 18%", from: "Mercedes hairline panel-gap — engineered, visible only on inspection" },
+    input: { hsl: "220 10% 18%", from: "same as border — single hairline language" },
+    ring: { hsl: "41 62% 58%", from: "Rolex gold — focus ring is the luxury accent, never green" },
+    destructive: { hsl: "8 78% 52%", from: "Tesla brake-light red — warning lamp, not decoration" },
+    destructiveForeground: { hsl: "40 30% 96%", from: "warm white on brake-light red" },
+    brand: {
+      gold: { hsl: "41 62% 58%", from: "Rolex 41 — champagne dial, the canonical luxury accent" },
+      "gold-deep": { hsl: "38 55% 46%", from: "Rolex deeper gold — engraved bezel, gradient anchor" },
+      "tech-blue": { hsl: "205 100% 60%", from: "Tesla HUD blue — instrument cluster, autopilot lane lines" },
+      steel: { hsl: "220 9% 66%", from: "Cybertruck raw stainless — exoskeleton surface tone" },
+      ink: { hsl: "220 18% 4%", from: "the blackout — semantic background, also the void behind hero video" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],   // medium density — room for cinematic breathing
+    containerMax: "max-w-7xl",         // wide — hero video and 21:9 stills need it
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.4rem",                   // tight, not soft — engineered chamfer, not pillow
+    pillsAllowed: false,              // pills read app/dashboard; cinematic UI uses rectangles
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-gold":
+        "0 0 0 1px hsl(var(--gold) / 0.35), " +
+        "0 8px 24px hsl(var(--gold) / 0.18), " +
+        "0 40px 120px hsl(var(--gold) / 0.22)",
+      "glow-cyan":
+        "0 0 0 1px hsl(var(--tech-blue) / 0.4), " +
+        "0 8px 24px hsl(var(--tech-blue) / 0.22), " +
+        "0 40px 120px hsl(var(--tech-blue) / 0.28)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 900,                    // rise-in, sheen — the entrance gesture
+      loop: 2400,                     // bob, pulse-glow — short ambient loops
+      ambient: 30000,                 // ken-burns, marquee — slow scene motion
+    },
+    keyframes: {
+      "marquee": {
+        css:
+          "from { transform: translateX(0); }\n" +
+          "to { transform: translateX(-50%); }",
+        defaultDuration: 36000,
+        iteration: "infinite",
+        purpose: "horizontal logo/spec strip — broadcast lower-third, very slow",
+      },
+      "ken-burns": {
+        css:
+          "0% { transform: scale(1.05) translate(0, 0); }\n" +
+          "100% { transform: scale(1.18) translate(-2%, -1%); }",
+        defaultDuration: 24000,
+        iteration: "infinite",
+        purpose: "hero still-image drift — cinematic camera push, 21:9 photography",
+      },
+      "rise-in": {
+        css:
+          "from { opacity: 0; transform: translateY(32px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 900,
+        iteration: "once",
+        purpose: "section entrance — title cards and product reveals",
+      },
+      "bob": {
+        css:
+          "0%, 100% { transform: translateY(0); }\n" +
+          "50% { transform: translateY(-6px); }",
+        defaultDuration: 3000,
+        iteration: "infinite",
+        purpose: "scroll-hint indicator and floating product call-outs",
+      },
+      "pulse-glow": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--gold) / 0.5); }\n" +
+          "50% { box-shadow: 0 0 0 12px hsl(var(--gold) / 0); }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "single primary CTA highlight — heartbeat ring, never on more than one element per page",
+      },
+      "sheen": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 2200,
+        iteration: "infinite",
+        purpose: "gradient-gold text/border sheen — Rolex caseback light sweep",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Text-link CTAs by default (foreground color, underline-on-hover). " +
+      "Tertiary CTAs may use the gradient-gold utility (gold → gold-deep) on the text itself. " +
+      "The SINGLE hero action per page is allowed solid — and the canonical TGA implementation is an App Store badge image, not a fill button. " +
+      "Never a green-fill button: brand-mark green is too saturated for button faces and reads cheap.",
+    card:
+      "Sharp 0.4rem corners, hairline border (--border), bg-card one stop above blackout. " +
+      "Padding p-6 lg:p-10. Optional glow-gold or glow-cyan utility for hero/feature cards holding rich media.",
+    input:
+      "Bottom border + thin all-around border (1px --border), bg-card, 0.4rem radius. " +
+      "Label sits above in condensed display, tracking 0.08em uppercase. Focus ring is gold, 1px.",
+    cta:
+      "Text-link with gradient-gold utility for tertiary, App Store badge image for the single hero action. " +
+      "Never a green rectangle. Pulse-glow ring is allowed on the one hero CTA only.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--gold) / 0.3)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--gold))",
+    scrollbarStyle: "thin",
+  },
+};