@stylecrib/cli 0.3.1 → 0.3.3

package/themes/agency-creative/tokens.ts

@@ -0,0 +1,202 @@
+import type { Direction } from "../schema";
+
+export const agencyCreative: Direction = {
+  name: "agency-creative",
+  ethos:
+    "Ueno saturated gradients · Bruno Simon playful 3D · Locomotive smooth-scroll cinema · Active Theory custom motion · Resn unexpected interaction",
+  references: [
+    { brand: "Ueno", trait: "saturated gradients, custom display type, experimental layout" },
+    { brand: "Bruno Simon (portfolio)", trait: "3D-car driving experience, playful WebGL surface" },
+    { brand: "Locomotive", trait: "smooth-scroll cinema, bold display typography" },
+    { brand: "Active Theory", trait: "heavy motion choreography, custom 3D scenes" },
+    { brand: "Resn", trait: "weird-cool unexpected interactions, custom cursor" },
+  ],
+  feel:
+    "Loud, gradient-saturated, motion-forward — a portfolio that performs as you scroll. " +
+    "Custom cursor, marquee headlines at viewport scale, gradient skies that bleed 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.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Recoleta", "Tiempos Headline", "Cooper", "Georgia", "serif"],
+      from: "Ueno-flavored expressive serif — quirky optical sizes, the agency display voice",
+      googleFont: "Fraunces",
+      weights: [400, 700, 900],
+    },
+    body: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "modern geometric sans with personality — Locomotive case-study body type",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [400, 500, 600, 800],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Resn/Active Theory dev-console mono — debug labels, scroll-percent overlays, timestamps",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.04em",            // tight, almost crushed — display serif at scale wants compression
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "ss02", "ss03", "liga", "dlig"',
+    h1ScaleClamp: "clamp(4rem, 14vw, 12rem)",   // viewport-scale headlines, Ueno-large
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "240 18% 6%", from: "Active Theory near-black — deep cool ink, canvas for gradients" },
+    foreground: { hsl: "48 100% 96%", from: "warm bone — Ueno cream-on-dark headline color" },
+    card: { hsl: "240 16% 10%", from: "elevated panel one stop above ink" },
+    popover: { hsl: "240 14% 12%", from: "menu/cursor-overlay surface" },
+    primary: { hsl: "320 100% 62%", from: "= brand.hot-pink — Resn signal pink, the principal action" },
+    primaryForeground: { hsl: "240 18% 6%", from: "ink on hot-pink" },
+    secondary: { hsl: "280 90% 60%", from: "= brand.electric-violet — Ueno gradient counterpoint" },
+    secondaryForeground: { hsl: "48 100% 96%", from: "bone on violet" },
+    muted: { hsl: "240 12% 16%", from: "muted panel — quiet ground for dense case-study captions" },
+    mutedForeground: { hsl: "240 10% 70%", from: "cool gray secondary text — dev-console label tone" },
+    accent: { hsl: "180 95% 55%", from: "= brand.cyber-cyan — Bruno Simon UI-overlay accent" },
+    accentForeground: { hsl: "240 18% 6%", from: "ink on cyan" },
+    border: { hsl: "240 12% 20%", from: "thin neutral border — barely visible, lets gradients carry edges" },
+    input: { hsl: "240 12% 20%", from: "same as border — uniform hairline language" },
+    ring: { hsl: "320 100% 62%", from: "hot-pink — focus is the brand-signal color" },
+    destructive: { hsl: "8 90% 58%", from: "alarm red — distinct from pink primary so warnings don't blur" },
+    destructiveForeground: { hsl: "48 100% 96%", from: "bone on alarm red" },
+    brand: {
+      "hot-pink": { hsl: "320 100% 62%", from: "= primary; Resn signal pink — the gradient anchor" },
+      "electric-violet": { hsl: "280 90% 60%", from: "= secondary; Ueno violet — gradient mid-stop" },
+      "cyber-cyan": { hsl: "180 95% 55%", from: "= accent; Bruno Simon HUD cyan — interactive highlight" },
+      "acid-lime": { hsl: "75 95% 60%", from: "Active Theory lime — unexpected punch, scroll-progress fill" },
+      "sunset-orange": { hsl: "20 100% 60%", from: "Locomotive sunset orange — gradient warm stop" },
+      ink: { hsl: "240 18% 6%", from: "= background; the deep ink canvas, also a semantic token" },
+      bone: { hsl: "48 100% 96%", from: "= foreground; warm bone — never pure white" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160, 240],   // generous — viewport-scale compositions
+    containerMax: "max-w-[1440px]",       // wide — full-bleed hero and 3D scenes need the room
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-40",
+      default: "py-24 lg:py-40",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "1rem",                         // generous rounding on cards and chips — playful, friendly
+    pillsAllowed: true,                   // pill CTAs are part of the language — gradient-filled
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-pink":
+        "0 0 0 1px hsl(var(--hot-pink) / 0.4), " +
+        "0 12px 32px hsl(var(--hot-pink) / 0.28), " +
+        "0 60px 160px hsl(var(--hot-pink) / 0.32)",
+      "glow-cyan":
+        "0 0 0 1px hsl(var(--cyber-cyan) / 0.4), " +
+        "0 12px 32px hsl(var(--cyber-cyan) / 0.28), " +
+        "0 60px 160px hsl(var(--cyber-cyan) / 0.32)",
+      "gradient-skin":
+        "linear-gradient(135deg, hsl(var(--hot-pink)) 0%, hsl(var(--electric-violet)) 50%, hsl(var(--cyber-cyan)) 100%)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 700,                        // page transitions and hover swaps — fast enough to feel responsive
+      loop: 4000,                         // ambient gradient/blob loops
+      ambient: 24000,                     // long scroll-tied scenes and rotating 3D
+    },
+    keyframes: {
+      "gradient-shift": {
+        css:
+          "0% { background-position: 0% 50%; }\n" +
+          "50% { background-position: 100% 50%; }\n" +
+          "100% { background-position: 0% 50%; }",
+        defaultDuration: 12000,
+        iteration: "infinite",
+        purpose: "background gradient drift on hero — Ueno sky, never static",
+      },
+      "blob-morph": {
+        css:
+          "0%, 100% { border-radius: 42% 58% 70% 30% / 45% 30% 70% 55%; transform: translate(0,0) rotate(0deg); }\n" +
+          "33% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; transform: translate(8%,-4%) rotate(20deg); }\n" +
+          "66% { border-radius: 30% 70% 35% 65% / 60% 40% 60% 40%; transform: translate(-6%,6%) rotate(-15deg); }",
+        defaultDuration: 14000,
+        iteration: "infinite",
+        purpose: "floating gradient blobs behind hero — Resn-style organic background motion",
+      },
+      "marquee": {
+        css:
+          "from { transform: translateX(0); }\n" +
+          "to { transform: translateX(-50%); }",
+        defaultDuration: 18000,
+        iteration: "infinite",
+        purpose: "Locomotive headline marquee — viewport-scale display type scrolling sideways",
+      },
+      "cursor-pulse": {
+        css:
+          "0%, 100% { transform: scale(1); opacity: 0.9; }\n" +
+          "50% { transform: scale(1.6); opacity: 0.4; }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "custom-cursor halo — the cursor is a UI element, not the OS arrow",
+      },
+      "scroll-reveal": {
+        css:
+          "from { opacity: 0; transform: translateY(80px) scale(0.98); }\n" +
+          "to { opacity: 1; transform: translateY(0) scale(1); }",
+        defaultDuration: 800,
+        iteration: "once",
+        purpose: "case-study entrance — fires as a section enters the viewport",
+      },
+      "tilt-hover": {
+        css:
+          "0% { transform: perspective(800px) rotateX(0) rotateY(0); }\n" +
+          "100% { transform: perspective(800px) rotateX(-6deg) rotateY(8deg); }",
+        defaultDuration: 500,
+        iteration: "once",
+        purpose: "card 3D tilt on hover — Active Theory mouse-tracked parallax",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Two registers. (1) Pill CTA filled with gradient-skin utility (pink → violet → cyan), bone text, glow-pink on hover. " +
+      "(2) Outline pill, 1px border, foreground text, fills with hot-pink on hover. " +
+      "Buttons animate scale(1.03) and tilt-hover on pointer-enter. Never a flat ghost button — every CTA carries either gradient or motion.",
+    card:
+      "Rounded 1rem corners, bg-card, hairline border. Feature cards get glow-pink or glow-cyan and tilt-hover on pointer. " +
+      "Internal padding p-8 lg:p-12. Case-study cards are full-bleed image with display-serif title overlay, " +
+      "saturated duotone treatment (pink/violet) on hover.",
+    input:
+      "Rounded 1rem, bg-card, 1px border. Label sits above in mono uppercase, tracking 0.08em. " +
+      "Focus shifts border to hot-pink and adds 4px hot-pink/20 outer ring. Pill-shaped for search and email-capture.",
+    cta:
+      "Gradient-skin pill is the canonical hero CTA. Scroll-tied marquee headlines double as ambient CTAs. " +
+      "Never a plain rect — and never more than one gradient-skin button per fold.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--acid-lime) / 0.45)",
+    selectionFg: "hsl(var(--ink))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "none",
+  },
+};

package/themes/agency-portfolio/THEME.md

@@ -0,0 +1,109 @@
+# Design Direction — Agency-Portfolio
+
+## Ethos
+Pentagram severity · Collins editorial cream · Mucca Fraunces restraint · JKR brand-mark sharpness · Order cinematic case studies
+
+## Feel
+Top-tier brand-agency portfolio energy. Severe restraint, oversized headline type, full-bleed case-study photography, near-mono palette with one cream warmth. The page says *we don't need to advertise our talent* — the work is the argument. Reads like Pentagram.com or the Collins case-study index, not like a startup landing page.
+
+## Reference brands
+- **Pentagram** → severe black-and-white, oversized type, brand-mark-first composition. The grid is invisible; the typography is the structure.
+- **Collins** → deep cream canvas, serif display, structured grid. Warmth without softness.
+- **Mucca Design** → cream paper, Fraunces, editorial restraint. Magazine pacing for case studies.
+- **Jones Knowles Ritchie** → sharp black, Plus Jakarta body, brand-mark-first hero. The logo wall replaces the headline.
+- **Order (NYC)** → restraint paired with cinematic case studies. Restraint applies to chrome, never to imagery.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin — untraceable tokens fail review.
+
+Surface stack is **deep cream** (background) → **lighter cream** (card) → **deeper cream** (secondary/muted/accent). Three cream stops, full stop. Depth comes from **1px ink hairlines and full-bleed photography**, never from fill differentiation.
+
+Brand tokens: `--ink` (Pentagram near-black `0 0% 7%`), `--cream` (Collins paper, `=background`), `--cream-deep` (Mucca shadow, `=secondary`), `--vermilion` (Pentagram editorial red, `=ring`), `--caption-gray` (project-metadata gray, `=mutedForeground`).
+
+Primary is **ink itself** — JKR brand-mark-first stance. There is no decorative accent color for hierarchy; the studio name is the only mark that gets a fill. Vermilion is reserved for **focus, destructive, and exactly one accent moment per page** (a pull-quote underline, a single chart label, a project-status dot — never a button face).
+
+Pure white and pure black are forbidden — `--cream` and `--ink` replace them.
+
+## Typography
+- **Display:** Fraunces (Mucca / Collins move — high-contrast serif with optical sizing). Weights 400/500/700/900. Use the `opsz` axis at the headline tier; default `9` for body-adjacent labels. h1–h4.
+- **Body:** Plus Jakarta Sans (JKR / Pentagram default-sans). Weights 400/500/600/700. **17px**, line-height **1.55** — magazine-comfortable without preciousness.
+- **Mono:** JetBrains Mono. Case-study metadata only — project number, year, role, client, medium. Mono is the studio's marginalia voice; it is not for code blocks here.
+
+H1 uses `clamp(3.5rem, 11vw, 9rem)` — oversized, the headline IS the case-study cover. Tracking `-0.025em` on display (Fraunces needs the squeeze for Pentagram-tight headlines). Body tracking `0`. Font features: `"ss01", "ss02", "calt", "liga"` for Fraunces stylistic sets and Plus Jakarta alternates.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-12` — wide. Case-study photography demands full-bleed neighbors; a 3xl container reads blog, not studio.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-24 lg:pt-48 lg:pb-32` — the title block breathes; Pentagram pages don't rush.
+  - Default: `py-24 lg:py-40`
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 20 24 32 48 64 96 128 192. Wide gulf between small detail (caption-to-headline gap) and section breath (case-study to case-study).
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens.
+
+Three cream stops + ink + vermilion is the entire system. If a new color is proposed, the answer is *the photograph above it is the color* — case-study imagery brings the palette into the page. The shell stays mono.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** `pillsAllowed: false` — pills read SaaS dashboard. This is editorial language. Tags, status, dates: all sharp rectangles or plain text.
+
+## Shadows
+**Minimal.** Two utilities, both 1px ink hairlines:
+- `.hairline-bottom` — inset 0 -1px 0 0 `--border`. Column divider, case-study tile foot.
+- `.hairline-top` — inset 0 1px 0 0 `--border`. Section opener rule, paired with date metadata.
+
+No drop shadows. No glows. No box-shadows. The hairline IS the depth language.
+
+## Motion
+Two keyframes:
+- `fade-rise` (1200ms once) — opacity + 24px translate. Section entrance for case-study title cards and image reveals. **Deliberately slow** — the page settles, it does not perform.
+- `ken-burns-slow` (28000ms infinite) — scale 1.03 → 1.12 with a tiny translate. Hero case-study photography drift. Restrained camera push, never Hollywood.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored — both keyframes drop to a static frame inside the media query. No marquees, no parallax, no scroll-triggered choreography. The restraint applies to motion as it applies to color.
+
+## Component patterns
+- **Buttons:** text-link primaries with the `hairline-bottom` utility — underline-on-hover in ink. The **single hero action per case study** may render solid: full ink-fill rectangle, cream text, sharp corners. Never vermilion on a button face — vermilion is the focus and accent reserve.
+- **Cards:** hairline top + bottom borders, no fill differentiation from page. Case-study tile padding `p-8 lg:p-12`. Title in Fraunces display at near-h2 scale; metadata row in mono `--caption-gray` formatted *YEAR · ROLE · CLIENT*. The photograph below the title is the only decoration — no shadow, no radius, no fill.
+- **Inputs:** border-bottom only (1px `--ink`), bg-transparent. Label sits above in **mono uppercase tracking-[0.12em]**. Placeholder italic in `--caption-gray`. Focus shifts the border to the vermilion ring — the only warm touch on the form.
+- **CTAs:** text-link primaries with hairline underline; one solid ink-fill rectangle permitted per case study as the hero action. CTA copy in **display serif, not body sans** — the CTA carries the same voice as the headline above it.
+
+## Recommended rich media
+The work is the website. Case-study photography is the primary asset — and the standard is high.
+
+**Cover imagery.** Full-bleed 21:9 or 4:5 photography of brand-identity work: packaging on a seamless backdrop, signage in situ, editorial spreads on a kitchen table, product close-ups under raking light. The image always touches the screen edges; padding around case-study photography reads timid.
+
+**Color grading.** Color is preserved from the original work — agency portfolios do not impose a uniform grade across case studies. Each project keeps its native palette; the shell's cream-and-ink restraint is what makes the projects' colors readable.
+
+**AI tool recommendations.**
+- **Midjourney / Flux** with prompts like *"Pentagram case study photography, seamless paper backdrop, raking light, 100mm macro, packaging hero"* for product stills you cannot photograph.
+- **Recraft** for vector mockups of identity systems (logo, type specimen, color block).
+- **Topaz Photo AI** for upscaling existing case-study photography to retina full-bleed sizes.
+- Avoid Midjourney's default "epic cinematic" preset — explicitly prompt for studio lighting and a seamless backdrop. The look is *commercial photographer's portfolio*, not *movie poster*.
+
+**Aspect ratios.** 21:9 for hero case-study covers (cinematic editorial), 4:5 for detail crops (Pentagram inside-spread feel), 1:1 only for signage-on-architecture or single-object hero shots. Never 16:9 — that reads tech keynote.
+
+**Performance.** Case-study hero ≤200 KB AVIF at 2000w; inline figures ≤100 KB. LCP under 2.2s with a single hero. Lazy-load every case-study tile below the fold — the index page often holds 12+ heroes and the network budget is the constraint.
+
+**Avoid:**
+- Stock photography (a brand-agency portfolio with stock disqualifies itself).
+- Soft drop shadows on product cutouts — Pentagram and Collins use full-bleed environmental shots, not cutout-on-cream.
+- Glassmorphic anything.
+- Decorative SVG ornament (swooshes, dots, abstract gradients) — vermilion is the only accent, and it's never decorative.
+- Video that autoplays in the case-study index (case-study *detail* pages may use a 4MB H.265 hero loop with poster fallback; the index never does).
+- Logo walls rendered as monochrome grayscale stamps — JKR puts real client logos at full color on the cream, sized down. Restraint applies to the shell, never to the client work.
+
+**Accessibility.** Long-form alt-text on every case-study image — describe the project AND the photograph as if for a blind reader. *"Image: packaging for Aesop, three apothecary bottles on a walnut surface, soft north light from camera left"* is the bar.
+
+## Component families
+None at install time. Likely first families: `CaseStudyTile` (cover image + Fraunces title + mono metadata row), `IndexGrid` (12-column ink-rule case-study index), `ClientWall` (full-color logo grid on cream), `PullQuote` (Fraunces display with vermilion underline — the one accent moment).
+
+## Details
+- **Selection:** `hsl(var(--ring) / 0.22)` background, foreground text. Vermilion at low opacity — the page's only warm wash.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin vermilion. Quiet, single warm signal.
+- **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/agency-portfolio/tokens.ts

@@ -0,0 +1,159 @@
+import type { Direction } from "../schema";
+
+export const agencyPortfolio: Direction = {
+  name: "agency-portfolio",
+  ethos:
+    "Pentagram severity · Collins editorial cream · Mucca Fraunces restraint · JKR brand-mark sharpness · Order cinematic case studies",
+  references: [
+    { brand: "Pentagram", trait: "severe black-and-white, Helvetica, giant type" },
+    { brand: "Collins", trait: "deep cream, serif display, structured grid" },
+    { brand: "Mucca Design", trait: "cream paper, Fraunces, editorial restraint" },
+    { brand: "Jones Knowles Ritchie", trait: "sharp black, Plus Jakarta, brand-mark first" },
+    { brand: "Order (NYC)", trait: "restraint plus cinematic case studies" },
+  ],
+  feel:
+    "Top-tier brand-agency portfolio energy. Severe restraint, oversized headline type, " +
+    "full-bleed case-study photography, near-mono palette with one cream warmth. The page " +
+    "says we don't need to advertise our talent — the work is the argument.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Tiempos Headline", "Canela", "GT Sectra", "Georgia", "serif"],
+      from: "Mucca / Collins move — high-contrast serif with optical sizing, editorial weight without preciousness",
+      googleFont: "Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700;9..144,900",
+      weights: [400, 500, 700, 900],
+    },
+    body: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Inter", "Helvetica Neue", "Helvetica", "Arial", "system-ui", "sans-serif"],
+      from: "JKR / Pentagram default-sans body — neutral grotesk that disappears under the serif",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "case-study metadata — project number, year, role; mono is the studio's marginalia voice",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.025em",        // Fraunces display needs the squeeze — Pentagram-tight headlines
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "ss02", "calt", "liga"', // Fraunces stylistic sets + Plus Jakarta alternates
+    h1ScaleClamp: "clamp(3.5rem, 11vw, 9rem)", // oversized — the headline is the case-study cover
+    bodyBaseSize: "1.0625rem",          // 17px — slightly above default, magazine-comfortable
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "36 20% 94%", from: "Collins / Mucca deep cream — warm paper, not white; the page is a sheet" },
+    foreground: { hsl: "0 0% 7%", from: "Pentagram near-black — ink, never pure 0; gives the cream room to glow" },
+    card: { hsl: "36 20% 97%", from: "lighter cream — case-study tile sits a half-stop above the page" },
+    popover: { hsl: "36 20% 97%", from: "same as card; depth comes from hairline borders, not fill" },
+    primary: { hsl: "0 0% 7%", from: "ink as the primary — JKR brand-mark-first stance, no decorative accent color" },
+    primaryForeground: { hsl: "36 20% 94%", from: "cream on ink — full-bleed inverted blocks" },
+    secondary: { hsl: "36 14% 88%", from: "deeper cream — tag rows, footer band, secondary surfaces" },
+    secondaryForeground: { hsl: "0 0% 7%", from: "ink on deeper cream" },
+    muted: { hsl: "36 14% 88%", from: "same as secondary — restraint refuses to invent extra surfaces" },
+    mutedForeground: { hsl: "0 0% 38%", from: "Pentagram caption gray — bylines, year, role labels" },
+    accent: { hsl: "36 14% 88%", from: "same as secondary — hover is a half-stop, never a new hue" },
+    accentForeground: { hsl: "0 0% 7%", from: "ink on hover surface" },
+    border: { hsl: "0 0% 7%", from: "ink hairline — every rule on the page is a 1px ink line" },
+    input: { hsl: "0 0% 7%", from: "same as border — inputs are border-bottom ink rules" },
+    ring: { hsl: "12 75% 48%", from: "Pentagram editorial vermilion — focus only; the single warm signal" },
+    destructive: { hsl: "12 75% 48%", from: "same vermilion — destructive shares the focus color; one warm tone in the whole palette" },
+    destructiveForeground: { hsl: "36 20% 94%", from: "cream on vermilion" },
+    brand: {
+      ink: { hsl: "0 0% 7%", from: "= foreground; the Pentagram near-black, named for case-study inverted blocks" },
+      cream: { hsl: "36 20% 94%", from: "= background; the Collins deep cream, named for surface inversions" },
+      "cream-deep": { hsl: "36 14% 88%", from: "= secondary; the Mucca paper-shadow tone" },
+      vermilion: { hsl: "12 75% 48%", from: "Pentagram editorial red — focus, destructive, and exactly one accent moment per page" },
+      "caption-gray": { hsl: "0 0% 38%", from: "= mutedForeground; project-metadata gray, used for year/role/medium captions" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128, 192],  // wide gulf between small detail and section breath
+    containerMax: "max-w-7xl",         // wide — case-study photography demands full-bleed neighbors
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-32",   // the title block breathes; Pentagram pages don't rush
+      default: "py-24 lg:py-40",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",                          // sharp only — agency portfolios do not round corners
+    pillsAllowed: false,                // pills read SaaS; this language is editorial
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "inset 0 -1px 0 0 hsl(var(--border))",     // Mucca column divider
+      "hairline-top":
+        "inset 0 1px 0 0 hsl(var(--border))",      // section opener rule, paired with date metadata
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,                     // slow on purpose — the page settles, it does not perform
+      loop: 0,                          // no loops — restraint forbids ambient cycling
+      ambient: 28000,                   // single ambient: ken-burns on hero case-study photography
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(24px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "section entrance — case-study title cards and image reveals, deliberately slow",
+      },
+      "ken-burns-slow": {
+        css:
+          "0% { transform: scale(1.03) translate(0, 0); }\n" +
+          "100% { transform: scale(1.12) translate(-1.5%, -0.5%); }",
+        defaultDuration: 28000,
+        iteration: "infinite",
+        purpose: "hero case-study photography drift — restrained camera push, not Hollywood",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text-link primaries with the hairline-bottom utility — underline-on-hover in ink. " +
+      "The single hero action per case study may render solid: full ink-fill rectangle, cream text, sharp corners. " +
+      "Never the vermilion accent on a button face — vermilion is reserved for focus and one accent moment per page.",
+    card:
+      "Hairline top and bottom borders, no fill differentiation from page. Case-study tile padding p-8 lg:p-12. " +
+      "Title in Fraunces display at near-h2 scale; metadata row in mono caption-gray (year · role · client). " +
+      "No shadows, no radius, no fill — the photograph below the title is the only decoration.",
+    input:
+      "Border-bottom only (1px --ink), bg-transparent. Label sits above in mono uppercase tracking 0.12em. " +
+      "Placeholder italic in caption-gray. Focus shifts border to vermilion ring — the only warm touch on the form.",
+    cta:
+      "Text-link primaries with hairline underline; one solid ink-fill rectangle permitted per case study as the hero action. " +
+      "CTA copy in display serif, not body sans — the CTA carries the same voice as the headline above it.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--ring) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",      // thin vermilion — quiet, single warm signal
+    scrollbarStyle: "thin",
+  },
+};

package/themes/ai-startup/THEME.md

@@ -0,0 +1,95 @@
+# Design Direction — Ai-Startup
+
+## Ethos
+Anthropic cream-and-Tiempos · OpenAI matte restraint · Mistral structured Inter · Inflection soft serif · DeepMind research-paper density
+
+## Feel
+Deep cream paper, formal serif display, structured like a journal preprint. One restrained accent color (rust) used once per section. Long-form headers, byline-and-affiliation metadata, figure captions in mono. The page reads like it could be submitted to NeurIPS. This is the "we publish in peer review" aesthetic — severe restraint as a posture of seriousness.
+
+## Reference brands
+- **Anthropic** → warm cream + Tiempos-feel serif + research-formal restraint. The blueprint for this direction.
+- **OpenAI** → matte cream/black + EB Garamond restraint + structured. Research blog as marketing site.
+- **Mistral** → cream + Inter + structured European tech. Restraint without serif sentimentality.
+- **Inflection** → cream + serif + soft AI restraint. The warmer end of this register.
+- **DeepMind blog** → cream + Source Serif + research-paper density. Affiliations, citations, figure captions as design elements.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **deep cream** (background) → lighter cream (card) → deeper cream (secondary/muted/accent). Depth comes from hairline borders only. Cards are *framed*, not lifted.
+
+Brand tokens: `--paper`, `--ink`, `--rust`, `--ink-soft`, `--paper-deep`. Primary is the deep ink — primary action is text-on-paper inversion, not a brand color. Rust is the one allowed accent, used for focus rings and the single hero CTA per page.
+
+## Typography
+- **Display:** EB Garamond (Anthropic Tiempos / OpenAI Garamond). h1–h4, research-formal humanist serif, never decorative. Tracking `-0.015em` — display serifs tighten at scale.
+- **Body:** Inter (Mistral / DeepMind body sans). Body base **17px** with **line-height 1.7** — long-form reading, dense-friendly.
+- **Mono:** JetBrains Mono. Code blocks, model names, figure captions, affiliations — research-paper instrument feel.
+
+H1 uses `clamp(2.5rem, 5vw, 4.25rem)` — restrained. Never broadcast scale; this is a paper, not a poster. Numbers always use `font-variant-numeric: tabular-nums`. Font features: `"ss01"`, `"calt"`, `"tnum"`, `"kern"`.
+
+## Spacing
+- **Container:** `max-w-3xl px-6 lg:px-10` — prose-first. 768px reading column matches Anthropic and DeepMind blog. Wider columns break long-form research flow.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-40 lg:pb-24` (deliberately oversized — title page energy)
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-20`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 96 128.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token.
+
+The palette is paper-and-ink with one allowed accent. Pure white and pure black are forbidden — `--paper` and `--ink` replace them. The rust accent appears **once per major section**: the hero CTA, a single highlighted callout, or the focus ring. Repeated rust reads decorative and breaks the research register.
+
+## Radius
+`--radius: 0.125rem`. Barely-there softening — research-paper, not soft-modern. Pills are disallowed (`pillsAllowed: false`) — pills read consumer-app; research papers use rectangles and rules.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.hairline-bottom` — 1px border-bottom, journal-paper rule
+- `.figure-frame` — 1px border on all sides, no drop. Research figures are framed, never lifted.
+
+No drop shadows. No glows. Depth is a hairline or nothing.
+
+## Motion
+Two keyframes — almost as restrained as editorial:
+- `fade-rise` (1000ms) — the primary entrance, section settles into place, no flourish
+- `cursor-blink` (1100ms, infinite) — single allowed loop, terminal-style cursor for ONE demo/prompt block per page
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. No marquee, no parallax, no ambient drift. `prefers-reduced-motion` honored — cursor-blink collapses to a static block. **No ambient motion, ever**, except the single cursor.
+
+## Component patterns
+- **Buttons:** default = 1px ink border + ink text on paper, sharp `0.125rem` radius, no fill. Hover = invert (ink fill, cream text), no transition fanfare. The rust accent fill is reserved for **the single hero CTA per page** (try the model, read the paper). Tertiary = serif text-link in ink with underline-on-hover. Never a gradient. Never a glow.
+- **Cards:** `0.125rem` radius, hairline border, bg-card a hair brighter than the page. Padding `p-8 lg:p-12`. Title in EB Garamond display. Affiliation/byline in mono uppercase tracking `0.08em`. Figures use `.figure-frame` — 1px border, no drop shadow.
+- **Inputs:** border-bottom only for inline forms. Full-box variant for structured fields (1px `--border`, bg-card, `0.125rem` radius). Label sits above in serif. Focus ring is rust, 1px.
+- **CTA:** the single hero action per page may use the rust filled rectangle. All other CTAs are serif text-links in ink with underline-on-hover. **Never repeat the rust fill** — once per page, like a footnote dagger.
+
+## Recommended rich media
+Ai-Startup uses very little decorative media. The figures *are* the media: model architecture diagrams, evaluation tables, scaling-law charts, attention-pattern visualizations. These get the `.figure-frame` treatment — 1px border, mono caption beneath in `--ink-soft`, figure number in display serif (*Fig. 3*).
+
+Where photography is used, it is **environmental research photography** color-graded to neutral Kodak Portra 160 — researchers at whiteboards, ambient office light, never staged "hero shot of CEO". Avoid people-on-stage keynote photography (wrong register — that's enterprise-tech), avoid abstract AI-imagery (neural-net glow art, swirling particles — these are exactly what this direction refuses).
+
+**AI tool recommendations:** **Midjourney / Flux** prompts like *"researcher at whiteboard, ambient office light, Kodak Portra 160, documentary photography, no eye contact with camera"* for environmental shots; *"clean architectural diagram of [system], black on cream, technical illustration, minimal, no gradient"* for system diagrams. Strictly avoid: glowing neural-net abstractions, particle swirls, holographic blue grids, robot hands — the entire "AI Stock Photography" visual genre is forbidden in this direction.
+
+**Aspect ratios:** 3:2 landscape for environmental photography; 4:3 or square for diagrams (research-paper standard); never 16:9 widescreen (marketing-deck feel).
+
+**Video:** generally avoided. If a model demo needs to be shown, prefer a **single screen-recording with a poster image and click-to-play** — never autoplay, never ambient loops. Demos run silently if at all. ≤4 MB per video, AV1 or H.265.
+
+**Performance:** hero AVIF ≤120 KB at 1600w; figures inlined as SVG where possible (≤20 KB); total page weight budget ≤800 KB. LCP under 1.5s. The cream palette and minimal media make this achievable; if it slips, media is too heavy, not the framework.
+
+**Avoid:** AI-stock-art (glowing brains, particle networks, holographic blue grids), gradient meshes, glassmorphism, 3D-rendered abstract shapes, lens flare, staged CEO portraits, conference-stage photography, anything that reads "Series A pitch deck". The negative space is the design.
+
+**Accessibility:** every figure has long-form alt-text describing the diagram in prose (research-paper convention: *"Figure 3. The architecture comprises three layers: …"*). Mathematical notation in inline figures has a text equivalent. Color is never the only signal — rust accent always pairs with a text label or icon.
+
+## Component families
+None at install time. Expect early conventions around `<Figure>`, `<Citation>`, `<Affiliation>`, `<ModelCard>`, `<EvaluationTable>`, `<PromptBlock>`, `<ResearchPaperLink>`.
+
+## Details
+- **Selection:** `hsl(var(--rust) / 0.22)` background, foreground text.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin and quiet, never glows.
+- **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.