@stylecrib/cli 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylecrib/cli",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Design upgrade for vibe-coded React apps. Installs 19 Claude Code subagents (craft reviewers + brief-enforcer + exec auditors) + a chosen theme from a 118-theme library into your repo. Refuses AI-default patterns at commit time — see the SLOP-BLOCKLIST.",
   "type": "module",
   "bin": {
@@ -8,15 +8,21 @@
   },
   "files": [
     "dist",
+    "themes",
+    "agents",
     "README.md"
   ],
   "scripts": {
-    "prebuild": "node scripts/validate-agents.mjs",
+    "prebuild": "node scripts/validate-agents.mjs && node scripts/sync-assets.mjs",
     "build": "tsup",
     "dev": "tsup --watch",
     "start": "node dist/index.js",
     "typecheck": "tsc --noEmit",
-    "validate:agents": "node scripts/validate-agents.mjs"
+    "test": "node --test \"src/**/*.test.ts\"",
+    "prepack": "node scripts/sync-assets.mjs",
+    "validate:agents": "node scripts/validate-agents.mjs",
+    "sync:assets": "node scripts/sync-assets.mjs",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "design",
@@ -49,9 +55,11 @@
   "dependencies": {
     "@anthropic-ai/sdk": "^0.32.1",
     "@inquirer/prompts": "^7.2.0",
+    "@modelcontextprotocol/sdk": "^1.32.1",
     "commander": "^12.1.0",
     "picocolors": "^1.1.1",
-    "yaml": "^2.9.0"
+    "yaml": "^2.9.0",
+    "zod": "^4.6.7"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",

package/themes/README.md

@@ -0,0 +1,70 @@
+# Directions
+
+Twelve curated design directions for v1. Each is a complete, opinionated visual system — pick one as the seed for `stylecrib init`; the Director then bends it toward your specific references.
+
+## The twelve, grouped by genre
+
+### Reading-first
+Serif body, narrow column, generous vertical rhythm. The page is meant to be read.
+
+| Direction | Feel in one line |
+|---|---|
+| [editorial](editorial/) | NYT typography · Are.na restraint · Aesop pacing · Kinfolk whitespace |
+| [newsletter](newsletter/) | Substack reading · Bear minimalism · The Browser typography · Granta editorial |
+
+### Tool-first
+Productivity surfaces. Rounded chrome, dashboard density, soft polish.
+
+| Direction | Feel in one line |
+|---|---|
+| [soft-modern](soft-modern/) | Linear's geometric calm · Notion warmth · Stripe gradients · Vercel polish |
+| [dense-utility](dense-utility/) | Vercel dashboard density · Stripe internal · Linear keyboard-first · Bloomberg terminal |
+| [glassmorphic-modern](glassmorphic-modern/) | Apple Big Sur glass · iOS 14 widgets · Vision Pro depth · Spotify backdrop |
+
+### Atmosphere-first
+Photography or motion is the lead element. UI gets out of the way.
+
+| Direction | Feel in one line |
+|---|---|
+| [cinematic-dark](cinematic-dark/) | Tesla blackout · Cybertruck steel · Masters/Rolex luxury · Nike type |
+| [outdoor-adventure](outdoor-adventure/) | Patagonia earth · REI utility · Powder magazine speed · NPS signage |
+
+### Restraint-first
+Less than minimal — system defaults, grid discipline, no decoration.
+
+| Direction | Feel in one line |
+|---|---|
+| [brutalist](brutalist/) | System defaults · monospace prominence · Hacker News pedigree · IA Writer restraint |
+| [hyperminimal-mono](hyperminimal-mono/) | Müller-Brockmann grid · Vignelli reduction · Apple Notes restraint · Bauhaus origin |
+
+### Decoration-first
+Color, pattern, ornament earn their place. Composition is the design tool.
+
+| Direction | Feel in one line |
+|---|---|
+| [mid-century](mid-century/) | Eames warmth · Saul Bass geometric play · Knoll restraint · Aalto natural |
+| [maximalist](maximalist/) | Wes Anderson symmetry · Memphis pattern play · Esquire editorial borders · Paula Scher type |
+| [y2k-chrome](y2k-chrome/) | iMac G4 translucent · iPod gleam · MTV 2001 chrome · Bose Wave optimism |
+
+## What's in each direction folder
+
+- `tokens.ts` — machine-readable. Conforms to [`schema.ts`](schema.ts). The CLI consumes this to emit `tailwind.config.ts` and `src/index.css` in the user's repo.
+- `DIRECTION.md` — human-readable. The seed of the user's project `DIRECTION.md`, copied verbatim at install time. Director / Systems / QA / Media-Curator agents all read it as source of truth. Includes a `## Recommended rich media` section specifying what kind of imagery, video, 3D, audio, and animation fits this direction.
+
+## How to add a thirteenth direction
+
+1. Copy any existing folder under a new slug (e.g. `directions/cyberpunk/`).
+2. Author `tokens.ts` against [`schema.ts`](schema.ts). Every color token's `from:` field must name a brand·trait — untraceable tokens fail review. Add the new slug to the `name:` union in `schema.ts`.
+3. Author `DIRECTION.md` matching the section structure of the existing twelve, including the `## Recommended rich media` section.
+4. Add the new direction to the genre table above.
+5. Wire into the site: add a `DirectionMeta` entry in `site/src/lib/content.ts` (with import statements at the top).
+6. Wire into the CLI: add to the `DIRECTION_CHOICES` list and the `CanonicalDirection` type in `cli/src/wizard.ts`, and the `isValidDirection` check.
+7. Run the harness against a real project. Bar: "demonstrably better than vanilla Claude Code applied with the same direction prompt."
+
+## The schema is non-negotiable
+
+Every field in [`schema.ts`](schema.ts) exists because the Stage 3 / Stage 4 / Stage 5 prompts in [`STYLECRIB_CODIFIED.md`](../STYLECRIB_CODIFIED.md) need it. Don't add a direction that omits fields. Don't add fields to the schema without updating all twelve existing directions in the same change.
+
+## The wizard handles arbitrary direction too
+
+Users who want something none of these twelve cover can run `npx stylecrib init` with `base: custom` — the Director then synthesizes a direction from references alone (no canonical seed). The shape of the output is identical: a complete `DIRECTION.md`, brand-grounded tokens, the full schema. The canonical twelve exist to save tokens (the Director call is skipped for known directions) and to give browsers something to look at.

package/themes/acrylic-soft/THEME.md

@@ -0,0 +1,142 @@
+# Design Direction — Acrylic-Soft
+
+## Ethos
+Microsoft Fluent 2 depth · Windows 11 acrylic surfaces · Office 365 productivity · Surface marketing elegance · Segoe humanism
+
+## Feel
+Productivity-grade with depth. Acrylic-translucent surfaces layered over solid backgrounds (Windows 11 mica + acrylic), Segoe-style humanist sans, Microsoft blue as the trusted signal. Reads as "Office 365 marketing site" — accessible, capable, friendly-corporate. The opposite of Apple's depth (which is performative cinema); Fluent's depth is utilitarian — translucency communicates layering of work, not theatre.
+
+## Reference brands
+- **Microsoft Fluent 2 Design System** → Fluent 2 is Microsoft's design language. Tokens, depth tiers, motion curves all trace back here.
+- **Windows 11** → acrylic + mica surfaces as a structural material. Translucent chrome that picks up the desktop, but quieter than Apple's Big Sur.
+- **Office 365 / Microsoft 365 apps (Word, Excel, Teams)** → productivity-grade chrome. Ribbon, command bars, side panels — surfaces that hold work, not decorate it.
+- **Surface marketing pages** → enterprise-friendly polish without enterprise-friendly drabness. Big photography, generous whitespace, blue-trusted CTAs.
+- **Xbox UI** → Fluent's gaming variant. Same depth language scaled up for 10-foot UI. Same blue, same acrylic.
+
+## Tokens
+HSL triples in `src/index.css`. Brand tokens: `--mica`, `--acrylic`, `--accent-purple`, `--success-green`, `--warning-yellow`, `--error-red`. Primary is **Microsoft blue** (`206 100% 41%`) — the Office 365 / Outlook signature.
+
+Surface stack is **solid background** (`--background` light or `--background` dark) → **mica subtle surface** (`--mica` at full opacity OR `--background` with `mica-blur`) → **acrylic translucent layer** (`--acrylic` at ~60-80% opacity with `acrylic-blur`) → **card / popover** on top (solid `--card`). Depth comes from material tiers (background → mica → acrylic → solid card), not from gradient hue shifts.
+
+The brand tokens (`mica`, `acrylic`) are not decorative — they ARE the Fluent material language. `accent-purple` is the Edge/Copilot accent for marketing moments that need a non-blue secondary signal. `success-green`, `warning-yellow`, `error-red` are the Fluent status palette — used for state indicators only, never as primary CTA color.
+
+## Typography
+- **Display:** Inter, fallback Segoe UI Variable (Microsoft's canonical humanist sans). h1–h4, weights 400/600/700.
+- **Body:** Inter (same family — Microsoft convention is one face across sizes, with Segoe UI Variable as the system fallback). Base 16px, line-height 1.55.
+- **Mono:** Cascadia Code (Microsoft's canonical monospace, Windows Terminal default), fallback JetBrains Mono. Code blocks, terminal output, metrics.
+
+Headings track `-0.01em` — gentler than Apple's tighter `-0.022em` because Segoe's humanism wants breathing room. H1 uses `clamp(2.5rem, 6vw, 4.5rem)`. Inter stylistic sets `"cv11", "ss01"` to pull toward Segoe's open shapes.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8`.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-12 lg:pt-28 lg:pb-16`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80. Productivity-grade, not dashboard-dense — let panels breathe like an Office sidebar.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier (used for acrylic surfaces — that's the whole point). Pure white is allowed for `--background` and `--card`; pure black is never used — `--foreground` is `220 17% 11%` (Fluent text-primary).
+
+A **canonical dark mode** ships alongside light. Dark palette pivots: `--background: 240 12% 10%`, `--foreground: 0 0% 95%`, `--mica: 240 8% 14%`, `--acrylic: 240 8% 18%`, `--card: 240 10% 12%`, `--border: 240 6% 24%`. Primary Microsoft blue lightens slightly in dark mode (`206 100% 55%`) for AA contrast on the dark canvas. Selection via `prefers-color-scheme` by default; manual override toggles `[data-theme="dark"]` on `<html>`.
+
+## Radius
+`--radius: 0.5rem` (8px). **Generous but not playful — Windows 11's signature corner radius.** Pills are allowed for status chips, badges, and tags (`pillsAllowed: true`). Hard right angles are reserved for the command-bar / ribbon pattern only; everything else carries the Fluent 8px round.
+
+## Shadows
+Five utilities — Fluent's named depth tiers plus the two acrylic blur recipes:
+- `.shadow-2` — small drop, default card lift (Fluent depth-2)
+- `.shadow-8` — medium drop, hover state (Fluent depth-8)
+- `.shadow-16` — modal/flyout layer (Fluent depth-16)
+- `.acrylic-blur` — `backdrop-filter: blur(20px) saturate(150%)` — the translucent acrylic recipe
+- `.mica-blur` — `backdrop-filter: blur(60px) saturate(120%)` — the deeper, slower mica recipe for full-window surfaces
+
+Shadows use neutral-cool tone (220° hue) at 8-14% opacity. The acrylic/mica blur pair with `--acrylic` or `--mica` background tokens at partial opacity — they don't work without a base color underneath. Microsoft blue is **never** the shadow color (no `glow-blue` on standard surfaces — Fluent shadows are neutral).
+
+## Motion
+Three keyframes mapping to Fluent's three motion tiers:
+- `fluent-fade-in` (150ms, **fast**) — tooltips, chips, status badges. Pure opacity, no transform.
+- `fluent-slide-up` (250ms, **normal**) — cards, panels, default content entrance. Short translateY + fade.
+- `fluent-flyout` (400ms, **slow**) — dialogs, flyouts, teaching callouts. Slight scale (0.98 → 1) + translateY + fade.
+
+Easing: `cubic-bezier(0.33, 0, 0.67, 1)` — Fluent "smooth", symmetric, productivity-grade. Microsoft also defines `accelerate` (`cubic-bezier(0.9, 0.1, 1, 0.2)`, exits) and `decelerate` (`cubic-bezier(0.1, 0.9, 0.2, 1)`, entrances) — surface those as utilities when a specific motion needs directional emphasis. `prefers-reduced-motion` honored — all three keyframes fall back to opacity-only.
+
+## Brand-book customization
+
+Microsoft Fluent is a **family of sub-brands**, not a single brand. The direction ships with Office 365 blue as the default primary, but any project skinned for a specific Microsoft sub-brand should override `--primary`:
+
+- **Office 365 / Outlook (default):** `--primary: 206 100% 41%` (Microsoft blue — signature, trusted, productivity)
+- **Teams variant:** `--primary: 245 60% 55%` (Teams purple — collaboration, communication)
+- **Xbox variant:** `--primary: 120 100% 38%` (Xbox green — gaming, energy)
+- **Edge / Copilot variant:** use the shipped `--accent-purple` (`265 60% 55%`) as primary
+- **Surface marketing variant:** stick with default Microsoft blue; this is the canonical Surface palette
+
+When overriding, also update `--ring` and `--accent` to match. The mica/acrylic material tier does **not** change between sub-brands — material is structural Fluent, color is brand layer.
+
+**Acrylic and mica are structural Fluent** — don't override the material tokens themselves. If accessibility requires reduced effects, expose `--acrylic-blur` and `--mica-blur` as CSS variables that can be set to `blur(0)` under user preference. The acrylic surface remains; only the blur intensity is tunable. Some users (motion-sensitive, low-end GPU, high-contrast mode) will get the surface color without the blur — that's the intended fallback, not a degraded experience.
+
+**Dark mode is canonical Fluent**, not an afterthought. Windows 11 ships both. The direction's `src/index.css` includes both light and dark token sets; the user picks via `prefers-color-scheme` automatically, or a manual `[data-theme="dark"]` toggle. Marketing surfaces typically default to light (Office 365 web feel); product surfaces (dashboards, Teams-like apps) often default to following the OS. Never ship light-only — that's not Fluent.
+
+## Component patterns
+- **Buttons:** Primary = solid Microsoft blue (`bg-primary`, `text-primary-foreground`, `rounded-md` 8px, `shadow-2`). Secondary = ghost (border + foreground text, transparent bg). Subtle = acrylic-tinted (`bg-acrylic` at ~60% opacity + `acrylic-blur`). Hover lifts to `shadow-8`; active depresses to `shadow-2` with subtle 0.99 scale.
+- **Cards:** `rounded-lg` (8px), `bg-card` or `bg-mica`, hairline border, `shadow-2`. Padding `p-6 lg:p-8`. Title in Inter 600. Hover lifts to `shadow-8`. Modal-tier cards use `shadow-16` + `acrylic-blur` backdrop.
+- **Inputs:** full `rounded-md` (8px) box, border, `bg-background`. Focus = `2px solid var(--ring)` (full opacity — Microsoft is direct about focus) and border brightens to primary. Label above; helper below in `mutedForeground`. Error state swaps border + ring to `--error-red`.
+- **CTAs:** primary button is the default. Secondary CTAs use ghost or subtle (acrylic-tinted) variant. Text-link CTAs use primary color with underline on hover — Microsoft convention is more explicit than Apple's hover-only link reveal.
+
+## Component families
+None at install time. As `*Card`, `*CommandBar`, `*Flyout`, `*TeachingCallout` families emerge, the Director lists them here with their shared pattern. Fluent's named depth tiers (`shadow-2`/`8`/`16`) should map to component tiers (card → menu/popover → dialog) consistently.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.20)` background, foreground text — Microsoft blue at 20% opacity.
+- **Focus ring:** `2px solid hsl(var(--ring))` — full-opacity Microsoft blue. Fluent's focus is *visible*; accessibility is a feature, not a polish concern.
+- **Scrollbar:** `auto` — Microsoft uses the native scrollbar (Windows has its own visual language for scrollbars; don't fight it).
+
+## Recommended rich media
+
+### Cover and hero imagery
+Fluent's marketing imagery is built around **three categories**, often combined on the same page:
+
+1. **Product screenshots** — Surface devices on neutral backgrounds, Windows 11 desktops with acrylic layered, Office app composites (Word/Excel/Teams on a Surface display). These are the canonical hero subjects.
+2. **Enterprise photography** — people working. Real keyboards, real screens, real meetings. Not lifestyle hero shots (no laptop-on-the-beach). The grade is neutral-cool, daylight-balanced. Photography reads "Tuesday at 2 PM," not "weekend brand campaign."
+3. **Illustrated diagrams** — Microsoft's flat-illustration tradition. The geometric language of the Office app icons (Word blue, Excel green, PowerPoint orange) extended into spot illustrations: layered shapes, soft gradients within shapes, isometric or front-facing, no shadows that break the flat plane.
+
+### AI tool recommendations
+- **Midjourney / Flux** for enterprise photography composites. Prompt template: `"corporate photography, person working at Surface laptop, neutral cool daylight, soft window light, modern office, candid not posed, 4K"`. Avoid `cinematic`, `dramatic lighting`, `bokeh-heavy` — those read luxury-brand, wrong altitude for Fluent.
+- **Recraft / Figma's illustration libraries** for the flat-illustration spots. The Office icon language is well-documented; lean on geometric primitives + Microsoft blue/purple/green/orange as fills.
+- **Spline** for interactive Surface product renders. The Surface Pro / Studio / Hub product pages frequently use lightweight 3D — kept restrained, no theatrical spin.
+- **Real Microsoft assets** — the Microsoft brand center publishes Surface product photography under marketing-asset licenses for partner use; for any official-feeling deck, use the real assets where licensable.
+
+### Aspect ratios
+- **16:9** hero for product screenshots and enterprise photography — standard.
+- **3:2** for Surface product hero shots (matches Surface device proportions).
+- **1:1** for the Office app icon language and spot illustrations on tile grids.
+- **21:9 cinematic** — avoid. That's a luxury / film vocabulary; Fluent is productivity.
+
+### Color discipline
+The page surface stays neutral (background or mica). **Color comes from the imagery itself** — the Surface keyboard color, the Excel green of a screenshot, the Teams purple of an app composite. Don't tint photography to match the page; Fluent layers photography honestly on neutral chrome. The one consistent color signal is the primary CTA — Microsoft blue, button-shaped.
+
+### Video
+Product demos are core Fluent media — short screen-recordings of Office apps, Surface device unboxings, Teams meeting flows. Keep them under 12s for autoplay loops, longer for narrated explainers (with captions on by default — Microsoft accessibility convention). Compression: H.265, ≤8 MB for loop hero, ≤25 MB for explainer.
+
+### What to AVOID
+- **Maximalist gradient backdrops** — that's glassmorphic-modern territory (Apple-derivative). Fluent uses gradients only within illustration shapes, not as full-bleed page bg.
+- **Heavy bokeh, dramatic film grading, golden-hour photography** — luxury vocabulary, wrong altitude.
+- **Hand-drawn or sketch illustration** — that's the friendly-startup language (Notion, Plain). Fluent's illustration is geometric and machine-precise.
+- **Chrome / metallic 3D renders** — Y2K, different direction.
+- **Brutalist screenshots, raw terminal output as hero** — wrong altitude (Fluent is for users, not engineers).
+
+### Performance
+Acrylic backdrop-blur is GPU-accelerated on Windows/Edge and modern browsers but expensive on low-end Android. **Gate the blur behind `prefers-reduced-transparency`** AND offer a fallback to the solid `--mica` color. Test on a real device, not just desktop. Product video kept short and tightly compressed. LCP target under 1.8s on 4G.
+
+### Accessibility
+**This is Fluent's strongest principle — Microsoft ships accessibility as a feature.** Verify:
+1. **Acrylic surfaces** must hit WCAG AA contrast against the text laid on them. Acrylic at low opacity will fail — bump opacity to ≥80% wherever text sits on acrylic, OR place text on the solid `--card` inside the acrylic container.
+2. **Focus indicators** are 2px full-opacity Microsoft blue, never softened — this is non-negotiable. Don't apply `/0.5` to the focus ring "for aesthetics."
+3. **Reduced transparency** (`prefers-reduced-transparency`) disables the blur and falls back to solid `--mica` / `--acrylic` colors. Test this state.
+4. **High-contrast mode** (Windows) inverts to system colors — don't rely on Microsoft blue alone to communicate state; pair with iconography and text.
+
+## 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/acrylic-soft/tokens.ts

@@ -0,0 +1,180 @@
+import type { Direction } from "../schema";
+
+export const acrylicSoft: Direction = {
+  name: "acrylic-soft",
+  ethos:
+    "Microsoft Fluent 2 depth · Windows 11 acrylic surfaces · Office 365 productivity · Surface marketing elegance · Segoe humanism",
+  references: [
+    { brand: "Microsoft Fluent 2 Design System", trait: "Fluent 2 — Microsoft's design language" },
+    { brand: "Windows 11", trait: "acrylic + mica surfaces" },
+    { brand: "Office 365 / Microsoft 365", trait: "productivity apps (Word, Excel, Teams)" },
+    { brand: "Surface marketing", trait: "product page elegance, enterprise-friendly polish" },
+    { brand: "Xbox UI", trait: "Fluent's gaming variant — depth at scale" },
+  ],
+  feel:
+    "Productivity-grade with depth. Acrylic-translucent surfaces layered " +
+    "over solid backgrounds (Windows 11 mica + acrylic), Segoe-style " +
+    "humanist sans, Microsoft blue as the trusted signal. Reads as " +
+    "'Office 365 marketing site' — accessible, capable, friendly-corporate. " +
+    "The opposite of Apple's depth (which is performative cinema); Fluent's " +
+    "depth is utilitarian — translucency communicates layering of work, " +
+    "not theatre.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["Segoe UI Variable", "Segoe UI", "system-ui", "-apple-system", "sans-serif"],
+      from: "open-source Segoe UI Variable stand-in — humanist sans, Microsoft canonical",
+      googleFont: "Inter",
+      weights: [400, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Segoe UI Variable", "Segoe UI", "system-ui", "-apple-system", "sans-serif"],
+      from: "single-family Microsoft convention — Segoe across display and body",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "Cascadia Code",
+      fallback: ["JetBrains Mono", "Consolas", "ui-monospace", "SFMono-Regular", "monospace"],
+      from: "Microsoft's canonical monospace — Cascadia Code (Windows Terminal default)",
+      googleFont: "Cascadia+Code",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",       // gentler than Apple's -0.022 — Segoe humanism wants breathing room
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01"',  // Inter stylistic sets that pull toward Segoe's open shapes
+    h1ScaleClamp: "clamp(2.5rem, 6vw, 4.5rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "Fluent 2 light canvas — neutralBackground1" },
+    foreground: { hsl: "220 17% 11%", from: "Fluent 2 text-primary — neutralForeground1" },
+    card: { hsl: "0 0% 100%", from: "card surface — sits on top of mica" },
+    popover: { hsl: "0 0% 100%", from: "popover / flyout — solid white above acrylic" },
+    primary: { hsl: "206 100% 41%", from: "Microsoft blue — Office 365 brand, Outlook signature" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on Microsoft blue" },
+    secondary: { hsl: "220 8% 96%", from: "mica subtle surface — Windows 11 background tier" },
+    secondaryForeground: { hsl: "220 17% 11%", from: "text-primary on mica" },
+    muted: { hsl: "220 8% 96%", from: "shares mica tone — quiet surfaces" },
+    mutedForeground: { hsl: "220 9% 42%", from: "Fluent neutralForeground3 — secondary labels" },
+    accent: { hsl: "206 100% 95%", from: "Microsoft blue tinted hover wash" },
+    accentForeground: { hsl: "206 100% 28%", from: "deep Microsoft blue on tinted wash" },
+    border: { hsl: "220 10% 88%", from: "Fluent neutralStroke1 — visible hairline" },
+    input: { hsl: "220 10% 88%", from: "same as border — Fluent input stroke" },
+    ring: { hsl: "206 100% 41%", from: "Microsoft blue — focus only" },
+    destructive: { hsl: "358 75% 50%", from: "Fluent paletteRedForeground — error/destructive" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on Fluent red" },
+    brand: {
+      mica: { hsl: "220 8% 96%", from: "Fluent mica — subtle background surface, Windows 11" },
+      acrylic: { hsl: "220 8% 92%", from: "Fluent acrylic — translucent layer above mica" },
+      "accent-purple": { hsl: "265 60% 55%", from: "Microsoft Edge / Copilot purple" },
+      "success-green": { hsl: "140 65% 35%", from: "Fluent paletteGreenForeground — confirm/success" },
+      "warning-yellow": { hsl: "44 100% 50%", from: "Fluent paletteYellowBackground — warning" },
+      "error-red": { hsl: "358 75% 50%", from: "Fluent paletteRedForeground — error" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 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-16",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",                   // 8px — Fluent 2 corner radius, Windows 11 signature
+    pillsAllowed: true,               // chips, badges, status pills — Fluent allows them
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-2":
+        "0 1px 2px hsl(220 17% 11% / 0.10), 0 0 2px hsl(220 17% 11% / 0.08)",
+      "shadow-8":
+        "0 4px 8px hsl(220 17% 11% / 0.12), 0 0 2px hsl(220 17% 11% / 0.10)",
+      "shadow-16":
+        "0 8px 16px hsl(220 17% 11% / 0.14), 0 0 2px hsl(220 17% 11% / 0.10)",
+      "acrylic-blur":
+        "backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);",
+      "mica-blur":
+        "backdrop-filter: blur(60px) saturate(120%); -webkit-backdrop-filter: blur(60px) saturate(120%);",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.33, 0, 0.67, 1)",   // Fluent "smooth" — symmetric, productivity-grade
+    durations: {
+      reveal: 250,                    // Fluent "normal"
+      loop: 2000,
+      ambient: 18000,
+    },
+    keyframes: {
+      "fluent-fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 150,
+        iteration: "once",
+        purpose: "fast — tooltips, chips, status badges (Fluent fast tier)",
+      },
+      "fluent-slide-up": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 250,
+        iteration: "once",
+        purpose: "normal — cards, panels, default content entrance",
+      },
+      "fluent-flyout": {
+        css:
+          "from { opacity: 0; transform: translateY(12px) scale(0.98); }\n" +
+          "to { opacity: 1; transform: translateY(0) scale(1); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "slow — dialogs, flyouts, teaching callouts (Fluent slow tier)",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid Microsoft blue (bg-primary, text-primary-foreground, rounded-md/8px, shadow-2). " +
+      "Secondary = ghost (border, foreground text, transparent bg). " +
+      "Subtle = acrylic-tinted background (bg-acrylic at ~60% opacity + acrylic-blur). " +
+      "Hover lifts to shadow-8; active depresses to shadow-2 with subtle scale (0.99).",
+    card:
+      "Rounded-lg (8px), bg-card or bg-mica, hairline border, shadow-2. " +
+      "Internal padding p-6 lg:p-8. Title in Inter 600. " +
+      "Hover lifts to shadow-8. Modal-tier cards use shadow-16 + acrylic-blur backdrop.",
+    input:
+      "Full rounded-md (8px) box, border, bg-background. " +
+      "Focus = 2px Microsoft blue ring + border brightens to primary. " +
+      "Label above; helper below in mutedForeground. Error state swaps border + ring to error-red.",
+    cta:
+      "Primary button is the default. Secondary CTAs use ghost button or subtle (acrylic-tinted) variant. " +
+      "Text-link CTAs use primary color with underline on hover — Microsoft convention.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",
+  },
+};

package/themes/agency-creative/THEME.md

@@ -0,0 +1,91 @@
+# Design Direction — Agency-Creative
+
+## Ethos
+Ueno saturated gradients · Bruno Simon playful 3D · Locomotive smooth-scroll cinema · Active Theory custom motion · Resn unexpected interaction
+
+## Feel
+Loud, gradient-saturated, motion-forward — a portfolio that performs as you scroll. Custom cursor, marquee headlines at viewport scale, gradient skies bleeding across sections, and one-of-one 3D moments that earn their weight. Confident weirdness, not chaos: the rules are broken on purpose, with a designer's hand visible in every transition.
+
+## Reference brands
+- **Ueno** → saturated gradients, custom display type, experimental layout. The gradient sky is part of the brand.
+- **Bruno Simon (portfolio)** → playful 3D as the entire interface. The website *is* the case study.
+- **Locomotive** → smooth-scroll cinema, viewport-scale display typography.
+- **Active Theory** → heavy motion choreography, scroll-tied 3D scenes.
+- **Resn** → weird-cool unexpected interactions, custom cursors, "wait, did the page just do that?"
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. No numbered or generic tokens — every new color traces to a brand.
+
+Surface stack is **ink** (background, near-black with cool bias) → **card** (one stop up) → **popover** (two stops up). Depth comes from glows and gradients, not from soft fills. The gradient utility `gradient-skin` (pink → violet → cyan) is the brand-defining surface and earns its own token slot.
+
+Brand tokens: `--hot-pink`, `--electric-violet`, `--cyber-cyan`, `--acid-lime`, `--sunset-orange`, `--ink`, `--bone`. Primary is **hot-pink**, never the gradient itself — the gradient is reserved for hero surfaces and the canonical CTA fill.
+
+## Typography
+- **Display:** Fraunces (expressive serif with optical-size personality). h1–h2. Tracking `-0.04em` — crushed tight at viewport scale, agency-display feel.
+- **Body:** Plus Jakarta Sans (modern geometric sans with personality). Body base **17px** with **line-height 1.5** — punchy, case-study pace.
+- **Mono:** JetBrains Mono. Dev-console labels, scroll-percent overlays, timestamp captions — Resn/Active Theory debug-UI texture.
+
+H1 uses `clamp(4rem, 14vw, 12rem)` — viewport-scale, Ueno-large. Font features: `"ss01"`, `"ss02"`, `"ss03"`, `"liga"`, `"dlig"` — Fraunces ships alternates worth using.
+
+## Spacing
+- **Container:** `max-w-[1440px] px-6 lg:px-12` — wide, because full-bleed hero and 3D scenes need the canvas.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-40` (theatrical entry)
+  - Default: `py-24 lg:py-40`
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 24 32 48 64 96 128 160 240. The scale skips small steps on purpose — this is large-gesture design.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. Pure white and pure black are forbidden — `--bone` and `--ink` replace them. The `gradient-skin` utility (pink → violet → cyan, 135deg) is the canonical brand gradient and is the only diagonal allowed; vertical/horizontal variants are out of language.
+
+## Radius
+`--radius: 1rem`. **Generous rounding on cards, panels, and chips.** Pills are allowed (`pillsAllowed: true`) and are the canonical CTA shape. The roundness is playful, not corporate — paired with motion it reads alive, not enterprise.
+
+## Shadows
+**Glow.** Three utilities: `glow-pink`, `glow-cyan` (multi-stop colored glows for feature cards and hero CTAs), and `gradient-skin` (the brand gradient surface). No neutral drop shadows — depth is colored or it's not there.
+
+## Motion
+Six keyframes. This is a motion-first direction: motion is the brand.
+- **gradient-shift** (12s, infinite) — hero background never sits still.
+- **blob-morph** (14s, infinite) — floating gradient blobs behind hero, Resn organic motion.
+- **marquee** (18s, infinite) — Locomotive viewport-scale headline scroll.
+- **cursor-pulse** (1.4s, infinite) — custom cursor halo. The cursor is a UI element, not the OS arrow.
+- **scroll-reveal** (800ms, once) — case-study entrance, fires on intersection.
+- **tilt-hover** (500ms, once) — card 3D tilt on pointer-enter, Active Theory mouse parallax.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — every keyframe wrapped in a media query that snaps to the end state.
+
+## Component patterns
+- **Buttons:** two registers. (1) **Gradient-skin pill** — pink→violet→cyan fill, bone text, glow-pink on hover. The canonical hero CTA. (2) **Outline pill** — 1px border, foreground text, fills with hot-pink on hover. Buttons scale 1.03 and tilt-hover on pointer-enter. Never a flat ghost.
+- **Cards:** rounded 1rem, hairline border, `bg-card`. Feature cards layer `glow-pink` or `glow-cyan` and respond to pointer with `tilt-hover`. Case-study cards are full-bleed image with display-serif title overlay and a saturated duotone treatment on hover.
+- **Inputs:** rounded 1rem, `bg-card`, 1px border. Label above in mono uppercase, `tracking-[0.08em]`. Focus shifts border to `--hot-pink` and adds a `hot-pink/20` 4px outer ring. Pill-shaped for search and email capture.
+- **CTA links:** the gradient-skin pill is *the* hero CTA. Scroll-tied marquee headlines act as ambient secondary CTAs. Never a plain rectangle, and never more than one gradient-skin button per fold.
+
+## Recommended rich media
+This is an agency portfolio: **the work is the rich media**. Lead with one full-bleed hero case study — auto-playing muted product film, WebGL canvas, or a single high-contrast still treated with a pink/violet duotone. Subsequent sections cut to grid of case-study cards, each with hover video preview. Photography is **studio-lit product or process work**, color-graded with a magenta-to-cyan split-tone (push pinks in highlights, cyans in shadows). Illustration is **3D render** (Blender/Spline) with rim-lit glossy materials — chrome, jelly, holographic — never flat or hand-drawn.
+
+**AI tool recommendations:** **Midjourney** for "iridescent chrome 3D render, octane studio lighting, magenta cyan rim light" and "saturated risograph poster, Ueno-inspired" prompts. **Spline** for live 3D scenes embedded in hero. **Runway / Kling** for short looping product films and morph cuts. Avoid Midjourney's default "epic cinematic" preset — explicitly prompt for studio-product or risograph-poster framing.
+
+**Aspect ratios:** 16:9 hero (full-bleed cinema), 4:5 for case-study cards (Instagram-portrait reads as agency-curated), 1:1 for process snapshots. Avoid 3:2 (editorial territory).
+
+**Video:** essential. Hero auto-plays muted, loops seamlessly, ≤6 MB H.265 or AV1. Every case-study card carries a 2–4 second hover-preview loop. Provide a poster image so the first paint isn't blank.
+
+**Performance:** the budget is generous because the medium is the message — but hero video ≤6 MB and total above-fold ≤2.5 MB AVIF for stills. LCP under 2.5s; if the hero blows it, lazy-load the WebGL scene behind a poster.
+
+**Avoid:** stock photography of any kind, AI photos with uncanny hands or fake-bokeh, flat illustration (that's mid-century or maximalist territory), corporate dashboard screenshots, soft pastel gradients (soft-modern territory), dark-moody product shots without color (cinematic-dark territory).
+
+**Accessibility:** every hover-preview video carries a poster fallback and pauses under `prefers-reduced-motion`. Custom cursor is decorative-only — never the sole affordance for interactivity; the underlying element is still tab-navigable and keyboard-actionable. Color contrast on gradient-skin buttons is checked against the *lightest* gradient stop (cyan).
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--acid-lime) / 0.45)` background, ink text — selection is a brand surprise.
+- **Focus ring:** `2px solid hsl(var(--ring))`. Hot-pink, thick enough to read against gradient skies.
+- **Scrollbar:** none. The scroll metaphor is replaced by smooth-scroll choreography and scroll-percent overlays.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.