@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/studio-architect/THEME.md

@@ -0,0 +1,108 @@
+# Design Direction — Studio-Architect
+
+## Ethos
+Sou Fujimoto numbered projects · OMA dense archive · Snøhetta curated monograph · BIG structured boldness · Herzog & de Meuron extreme restraint
+
+## Feel
+The printed studio monograph the practice sends to a developer. Cream paper page, every project filed as **Nº 047**, structured case-study grids with hairline rules, deep serif headers, mono metadata. No decoration, no rounded corners, no shadows beyond a 1px structural divider. The page reads as document, not marketing. Sou Fujimoto's project index, OMA's dense archive, Snøhetta's curated portfolio — all written in the same restrained register.
+
+## Reference brands
+- **Sou Fujimoto Architects** → cream paper background, structured project-numbered grids (Nº 001 through Nº 200+), deep serif headers, photography flush on the page. The studio book.
+- **OMA** → warm cream + minimal type + dense project archives. Hundreds of entries indexed in mono, scanned in a single sitting. The archive is the architecture.
+- **Snøhetta** → cream + Source Serif + curated project pages. Each project gets a single spread; the spread is the project.
+- **BIG (Bjarke Ingels)** → cream + bold sans labels + structured case-study grids. Sans labels live alongside serif headers without fighting.
+- **Herzog & de Meuron** → deep cream paper, extreme typographic restraint, project-as-document. No marketing language anywhere; the work speaks.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **cream monograph paper** (background) → **lifted cream card** → **cream paper deeper tiers** (secondary/muted/accent). Depth comes from hairline rules at `foreground / 0.16`, never from fill differentiation, never from drop shadows.
+
+Brand tokens: `--paper-cream` (Sou Fujimoto monograph cream, alias of background), `--paper-deep` (OMA archive surface), `--ink-serif` (Snøhetta deep cocoa serif ink), `--ink-archive` (Herzog & de Meuron archival shadow, the foreground), `--stone-warm` (BIG warm stone mid-tone for plan drawings and figure backgrounds). Primary is `20 22% 22%` — a deep cocoa-ink serif color, never a saturated brand mark.
+
+## Typography
+- **Display:** Source Serif 4 at 400/600/700. Project headers, pull quotes, Nº-numbered titles. Tracking `-0.015em` — Source Serif at monograph scale wants slight negative tracking to settle.
+- **Body:** Inter at 400/500/600, **16px**, line-height **1.65**. Söhne-feel architectural sans. Case-study density; not magazine prose, not enterprise UI. The OMA/BIG body register.
+- **Mono:** JetBrains Mono at 400/500. Used **only small** — Nº 047 project numbers, location/year/program metadata, credits, archive indices. Never display, never body.
+
+Hierarchy is pair-driven: Source Serif 4 display + Inter body, with tracked-uppercase Inter small caps (letter-spacing 0.1em) for eyebrows and labels. H1 uses `clamp(2.5rem, 6vw, 5.25rem)` — monograph scale, not magazine-cinematic. Font features: `"kern", "tnum", "onum", "ss01"`.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-12` — 1152px, case-study grids need horizontal room for indexed lists and photo-grid layouts.
+- **Section padding tiers:**
+  - Hero: `pt-32 pb-20 lg:pt-48 lg:pb-32` (monograph-spread scale)
+  - 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 192. The high end (128/160/192) is intentional — monograph whitespace between projects signals that each project gets its own page.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. White and pure black are forbidden — `--paper-cream` (`38 24% 94%`) and `--ink-archive` (`30 14% 12%`) replace them.
+
+The palette is restraint and paper:
+- **Paper-cream** — Sou Fujimoto monograph cream, the printed page surface.
+- **Paper-deep** — OMA archive surface; secondary/muted live here.
+- **Ink-serif** — Snøhetta deep cocoa serif ink; project headers and primary actions.
+- **Ink-archive** — Herzog & de Meuron archival shadow; the foreground, every body line, every divider color base.
+- **Stone-warm** — BIG warm stone mid-tone; used on plan drawings, axonometric figures, and figure backgrounds.
+
+Saturation never exceeds what would read in a printed studio monograph under warm gallery light. No accent color exists outside the cocoa-ink primary — the photography is the color.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills are disallowed (`pillsAllowed: false`) — pills read consumer-app, not studio book. Architecture is right angles; the page reflects the buildings.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.hairline-rule` — `0 1px 0 0 hsl(var(--foreground) / 0.16)`. A 1px structural divider between archive entries — the Herzog & de Meuron hairline.
+- `.hairline-top` — `inset 0 1px 0 0 hsl(var(--foreground) / 0.16)`. Top-side rule for case-study card chrome; pairs with `.hairline-rule` to bracket the entry.
+
+No drop shadows. No glows. No floating elevation. The page is paper.
+
+## Motion
+Two keyframes, both deliberately slow:
+- **`page-settle`** — opacity + 12px translate, **1200ms**. The standard entrance for case-study cards and project headers. Studio-monograph pacing; the page settles, it does not perform.
+- **`index-rule-draw`** — `scaleX(0) → scaleX(1)` from left origin, **1600ms**, once. Hairline rules between archive entries draw left-to-right on scroll-in — the structural divider being inscribed onto the page.
+
+No marquee, no parallax, no chip-bounce, no ken-burns. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — both keyframes collapse to instantaneous final-state under reduced motion.
+
+## Component patterns
+- **Buttons:** the default primary CTA is an **uppercase tracked text-link with a hairline underline** (foreground color, Inter 500, letter-spacing 0.12em). Solid-filled rectangular buttons are reserved for **one 'Visit Project' or 'View Studio' CTA per page** — ink-archive bg + paper-cream text, sharp rectangle. No rounded corners, no shadows, no hover lift. The case study earns the visit; the button does not perform.
+- **Cards (case-study entries):** hairline top + hairline bottom rule at `foreground / 0.16`, no fill differentiation from page. **Project number (Nº 047)** in JetBrains Mono small-caps eyebrow, **title** in Source Serif 4 display, **location/year/program** metadata in a mono row beneath. Internal padding `p-8 lg:p-12`. Photography sits flush, no chrome around the image.
+- **Inputs:** border-bottom only (1px `--border`). No full box. Label above in tracked-uppercase Inter small caps (letter-spacing 0.1em). Placeholder italic in muted-foreground. Focus is the cocoa-ink primary ring, 1px.
+- **CTAs:** default CTA is uppercase tracked text-link with hairline underline appearing on hover. The single 'Visit Project' solid-fill button per page is the **one** marketing moment — never repeated, never duplicated in the page footer.
+
+## Recommended rich media
+
+The page is led by **architectural project photography** — completed buildings in context, dramatic perspective, natural daylight. Supporting imagery: **line-drawing floor plans, axonometric projections, section drawings**, and the occasional material close-up. The monograph rhythm is photo-plan-photo-plan-photo, repeated across Nº-numbered entries.
+
+**AI tool recommendations.**
+- **Midjourney / Flux** — *"Sou Fujimoto architectural project photograph, completed building in context, dramatic perspective, natural daylight, 35mm Hasselblad, restrained color"*; for interiors, *"OMA project interior, Herzog & de Meuron material palette, large-format film"*; for material studies, *"close-up cedar grain texture, soft shadow, Snøhetta monograph still life"*.
+- **Recraft** — for line-drawing floor plans, axonometric projections, and section drawings. Single-weight black line on `--paper-cream`, no fill, BIG technical-drawing register.
+- **Hand-drawn plan scans** — when authentic, a scanned hand-drawn plan beats any AI render. The smudge and the eraser-line earn the page.
+
+**Aspect ratios.** **4:5 portrait** for project hero photographs (monograph-spread standard), **16:9** for the singular site/context shot at the top of a project page, and **1:1.414 (A-series proportion)** for floor plans and axonometrics — they should read like scanned pages. Never 1:1 social-media square. Never 3:2 casual.
+
+**Color in imagery.** Natural light, warm-cool balance, restrained saturation. Concrete grays, cedar browns, paper-cream backgrounds, sky-blues — never neon, never high-key consumer color. Black-and-white architectural photography is welcome and reads as canonical.
+
+**Video.** Used sparingly and only for hero project pages — a single 24s slow pan or static long-take over completed work. Never autoplay with sound. Never UI demo footage. ≤8 MB AV1 or H.265.
+
+**Captions are mandatory.** Project number, name, location, year, program, client — in JetBrains Mono small caps. *"Nº 047 · Serpentine Pavilion · London · 2013 · Pavilion · Serpentine Galleries"* style attribution always.
+
+**Performance.** Hero image ≤200 KB AVIF at 2000w; inline figures ≤100 KB; floor-plan SVGs ≤40 KB. LCP under 2.5s — if it slips, the project photograph is too large, not the framework.
+
+**Avoid.** Action photography. Marketing language ("transformative," "innovative"). Decorative ornament. Gradient meshes. Social-media energy. Stock photography. AI-photorealistic renders with uncanny perspective. Glassmorphism. Lens flare. Pseudo-3D building flyovers. Render-style imagery; the work should be **built and photographed**, not visualized.
+
+**Accessibility.** Long-form alt-text — describe the building, materials, light, perspective, program as if for a blind reader. *"A four-story cedar-clad pavilion with a glazed double-height atrium, photographed from across an oak-shaded plaza in late summer afternoon."* The bar is monograph editorial, not e-commerce.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they are established.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.18)` background, foreground text — cocoa-ink highlight on cream paper.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin and quiet — architectural precision, never decorative.
+- **Scrollbar:** thin.
+
+## 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.

package/themes/studio-architect/tokens.ts

@@ -0,0 +1,162 @@
+import type { Direction } from "../schema";
+
+export const studioArchitect: Direction = {
+  name: "studio-architect",
+  ethos:
+    "Sou Fujimoto numbered projects · OMA dense archive · Snøhetta curated monograph · BIG structured boldness · Herzog & de Meuron extreme restraint",
+  references: [
+    { brand: "Sou Fujimoto Architects", trait: "cream + structured grids + serif headers + numbered projects" },
+    { brand: "OMA", trait: "warm cream + minimal type + dense project archives" },
+    { brand: "Snøhetta", trait: "cream + Source Serif + curated project pages" },
+    { brand: "BIG (Bjarke Ingels)", trait: "cream + bold sans + structured case-study grids" },
+    { brand: "Herzog & de Meuron", trait: "deep cream + extreme restraint + project-as-document" },
+  ],
+  feel:
+    "Cream paper studio monograph. Every project is filed as Nº 047, captioned, " +
+    "and laid into a structured case-study grid. Deep serif accents, no decoration, " +
+    "thin sans labels, mono metadata. Reads like the printed studio book that " +
+    "Sou Fujimoto or OMA sends to a developer — quiet, authoritative, archival.",
+
+  fonts: {
+    display: {
+      family: "Source Serif 4",
+      fallback: ["Source Serif Pro", "Iowan Old Style", "Garamond", "Georgia", "serif"],
+      from: "Source Serif 4 — Snøhetta-feel deep monograph serif, project headers and pull quotes",
+      googleFont: "Source+Serif+4:wght@400;600;700",
+      weights: [400, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Söhne", "Neue Haas Grotesk", "system-ui", "-apple-system", "sans-serif"],
+      from: "Inter — Söhne-feel architectural sans body, OMA/BIG project copy register",
+      googleFont: "Inter:wght@400;500;600",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — Nº 047 project numbers, credits, location/year metadata, archive indices",
+      googleFont: "JetBrains+Mono:wght@400;500",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.015em",       // Source Serif 4 at display size — slight negative tracking settles the serif
+    bodyTracking: "0",                  // Inter body — neutral architectural register
+    fontFeatureSettings: '"kern", "tnum", "onum", "ss01"',
+    h1ScaleClamp: "clamp(2.5rem, 6vw, 5.25rem)",  // monograph-scale, not magazine-cinematic
+    bodyBaseSize: "1rem",              // 16px — case-study density, not magazine prose
+    bodyLineHeight: "1.65",            // structured, slightly tighter than editorial
+  },
+
+  colors: {
+    background: { hsl: "38 24% 94%", from: "Sou Fujimoto cream — printed monograph paper stock" },
+    foreground: { hsl: "30 14% 12%", from: "Herzog & de Meuron deep ink — heritage architectural shadow" },
+    card: { hsl: "38 28% 97%", from: "lifted cream card — one tier brighter than the monograph page" },
+    popover: { hsl: "38 28% 97%", from: "same as card; depth from hairline only" },
+    primary: { hsl: "20 22% 22%", from: "Snøhetta serif-ink primary — deep cocoa for project headers and actions" },
+    primaryForeground: { hsl: "38 24% 94%", from: "cream on cocoa-ink primary" },
+    secondary: { hsl: "38 20% 90%", from: "cream paper, one tier deeper — OMA archive surface" },
+    secondaryForeground: { hsl: "30 14% 12%", from: "deep ink on cream archive surface" },
+    muted: { hsl: "38 20% 90%", from: "same as secondary — differentiation by usage, not by color" },
+    mutedForeground: { hsl: "30 10% 38%", from: "BIG project-caption ink — secondary text and metadata" },
+    accent: { hsl: "38 22% 87%", from: "cream paper, deepest tier — hover surface only" },
+    accentForeground: { hsl: "30 14% 12%", from: "deep ink on cream accent" },
+    border: { hsl: "30 10% 78%", from: "Herzog & de Meuron hairline rule — barely visible structural divider" },
+    input: { hsl: "30 10% 78%", from: "same as border — single hairline language across the studio book" },
+    ring: { hsl: "20 22% 22%", from: "primary cocoa-ink — focus only, never decorative" },
+    destructive: { hsl: "8 50% 38%", from: "restrained terracotta alert — printed warning, never screaming red" },
+    destructiveForeground: { hsl: "38 24% 94%", from: "cream on terracotta alert" },
+    brand: {
+      "paper-cream": { hsl: "38 24% 94%", from: "Sou Fujimoto monograph cream — alias of the background" },
+      "paper-deep": { hsl: "38 22% 87%", from: "OMA archive surface — third tier in the cream stack" },
+      "ink-serif": { hsl: "20 22% 22%", from: "Snøhetta deep serif ink — display headers and primary actions" },
+      "ink-archive": { hsl: "30 14% 12%", from: "Herzog & de Meuron archival shadow — the foreground" },
+      "stone-warm": { hsl: "32 14% 56%", from: "BIG warm stone mid-tone — used on plan drawings and figure backgrounds" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160, 192],   // monograph scale — generous but not editorial-extreme
+    containerMax: "max-w-6xl",          // 1152px — case-study grids need horizontal room
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-20 lg:pt-48 lg:pb-32",
+      default: "py-24 lg:py-40",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",                          // architectural precision — every corner is right-angled
+    pillsAllowed: false,                // pills read consumer-app; the studio book is printed
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-rule":
+        "0 1px 0 0 hsl(var(--foreground) / 0.16)",   // 1px structural divider at 16% — Herzog & de Meuron hairline
+      "hairline-top":
+        "inset 0 1px 0 0 hsl(var(--foreground) / 0.16)", // top-side rule for case-study card chrome
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,                     // monograph pacing — the page settles
+      loop: 6000,
+      ambient: 24000,
+    },
+    keyframes: {
+      "page-settle": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose:
+          "the standard entrance — 1.2s reveal at studio-monograph pace. Case-study cards and project headers settle into the page; no bounce, no flash.",
+      },
+      "index-rule-draw": {
+        css:
+          "from { transform: scaleX(0); transform-origin: left center; }\n" +
+          "to { transform: scaleX(1); transform-origin: left center; }",
+        defaultDuration: 1600,
+        iteration: "once",
+        purpose:
+          "1.6s left-to-right draw on hairline rules between archive entries — the structural divider being inscribed onto the page.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary CTA is an uppercase tracked text-link with a hairline underline (foreground color, letter-spacing 0.12em, Inter 500). " +
+      "Solid-filled rectangular buttons are reserved for ONE 'Visit Project' or 'View Studio' CTA per page — ink-archive bg + paper-cream text, sharp rectangle. " +
+      "No rounded corners, no shadows, no hover lift. The case study earns the visit, the button does not perform.",
+    card:
+      "Case-study cards: hairline top + hairline bottom rule at foreground/16, no fill differentiation from page. " +
+      "Project number (Nº 047) in JetBrains Mono small-caps eyebrow, title in Source Serif 4 display, " +
+      "location/year/program metadata in mono row beneath. Internal padding p-8 lg:p-12. Photography sits flush, no chrome.",
+    input:
+      "Border-bottom only (1px --border). No full box. Label sits above in tracked-uppercase Inter small caps (letter-spacing 0.1em). " +
+      "Placeholder in muted-foreground italic. Focus is the cocoa-ink primary ring, 1px.",
+    cta:
+      "Default CTA is uppercase tracked text-link with hairline underline appearing on hover. " +
+      "The single 'Visit Project' solid-fill button per page uses ink-archive bg + paper-cream text — never repeated, never duplicated in the page footer.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.18)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/studio-photographer/THEME.md

@@ -0,0 +1,88 @@
+# Design Direction — Studio-Photographer
+
+## Ethos
+Annie Leibovitz full-bleed portraiture · Platon dark restraint · Dan Winters cream editorial · Magnum photojournalism · Aperture curatorial
+
+## Feel
+The work is the website. Photographs sit full-bleed against a cream or near-black canvas with almost no chrome around them — captions sit in small serif italics, navigation collapses to a single line of type. Pacing is deliberate: one frame, then breath, then the next. The interface gets out of the way so the image lands.
+
+## Reference brands
+- **Annie Leibovitz (portfolio)** → full-bleed image, minimal nav. The photograph is the page.
+- **Platon (portfolio)** → dark canvas, image-grid restraint. Near-zero chrome.
+- **Dan Winters (portfolio)** → cream paper, image-led editorial pacing. The page is hung, not designed.
+- **Magnum Photos** → cream + Helvetica, photojournalist authority. Captions matter.
+- **Aperture** → cream + serif, curatorial quietude. The publication frames the work.
+
+## 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 color traces to a brand.
+
+Surface stack is **cream** (background) → **cream** (card; no differentiation) → **deeper cream** (secondary/muted). Depth comes from the photograph itself, not from fills or shadows. The card token deliberately matches background — cards are not separate surfaces in this language.
+
+Brand tokens: `--cream`, `--archival-ink`, `--toned-sepia`, `--platinum-shadow`, `--blackout`. Primary is **ink** — restraint is the brand. The `--blackout` token enables an alternate Platon-mode canvas without redefining the system.
+
+## Typography
+- **Display:** Lora (editorial serif, warm and curatorial). Used for project titles and section headers — never larger than `2.5rem`. The headline never competes with the photograph.
+- **Body:** Source Sans Pro (Magnum house-style clean sans). Body base **15px** with **line-height 1.65** — caption-scale by default.
+- **Mono:** IBM Plex Mono. Exposure data, archive call-numbers, frame metadata — contact-sheet texture.
+
+H1 uses `clamp(1.5rem, 2.5vw, 2.5rem)`. This is unusually small for an h1 and is the single most important typographic decision in this direction: **the photograph is the headline.** Font features: `"liga"`, `"kern"`, `"tnum"` for tabular metadata.
+
+## Spacing
+- **Container:** `max-w-[1800px] px-0 md:px-6` — very wide, with mobile going true full-bleed (image edge-to-edge against the screen). Desktop keeps a thin breathing margin so the cream paper shows.
+- **Section padding tiers:**
+  - Hero: `pt-0 pb-32 lg:pt-0 lg:pb-48` (zero top — image starts at the viewport edge)
+  - Default: `py-32 lg:py-48` (long breath between frames)
+  - Tight: `py-16 lg:py-24`
+- **Allowed scale values:** 4 8 12 16 24 32 48 64 96 128 192 256. The scale tops out high because the pacing between photographs is part of the curation.
+
+## 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 — `--cream` and `--archival-ink` replace them; both are warm. Color accents (sepia, oxblood) are print-tones — gallery-derived, never digital-saturated. If a Platon-mode page is needed, swap `--background` to `--blackout` and `--foreground` to `--cream` — the rest of the system follows.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Gallery prints have no rounded corners. Pills are disallowed (`pillsAllowed: false`) — they read web-app, not print-gallery. If softness is wanted, it comes from a wide cream margin around the image, not from corner radius.
+
+## Shadows
+**None.** Photographs never wear shadows — depth is *in* the photograph, not added by CSS. Single utility: `.hairline-under` (1px bottom border in `--border / 0.5`) — the contact-sheet rule that separates caption from image. No drop shadows, no glows, no inner shadows.
+
+## Motion
+Three keyframes. Motion is rare and slow.
+- **develop-in** (1600ms, once) — photographs fade in from a slight contrast/brightness lift, like a print emerging in the bath. The signature entrance.
+- **caption-rise** (800ms, once) — caption fades up beneath the photograph after the image has settled. Sequenced, not simultaneous.
+- **slow-ken-burns** (30s, infinite) — used only on hero stills. Almost imperceptible drift, gallery-projection feel.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. **No marquee, no parallax, no hover swaps on images** — a photograph is not a button. `prefers-reduced-motion` is honored; with it on, images appear immediately and ken-burns is suspended.
+
+## Component patterns
+- **Buttons:** text links only as primary navigation — foreground text with hairline underline that thickens on hover. The single page-level CTA (Contact, Inquire, Newsletter) may use a sharp ink-on-cream filled rect. Never colored, never pill, never gradient.
+- **Cards:** **there is no card.** Images sit directly on the page with caption below in small Lora italic. If grouping is needed, use a single `hairline-under` above the caption — no border, no fill, no shadow. The photograph is the card.
+- **Inputs:** border-bottom only, 1px `--border`. No full box. Label above in mono uppercase, `tracking-[0.12em]` — archive-metadata feel. Focus thickens the underline to 2px (same color). Placeholder is italic Lora.
+- **CTA links:** text-link with hairline underline. The hairline thickens to 2px on hover. Never a chip, never a pill, never colored — restraint is the brand.
+
+## Recommended rich media
+This direction *is* a photography portfolio. Lead media is **photography, full-bleed, color-graded as gelatin-silver or Kodak Tri-X for monochrome work, or Portra 800 for color work with deep shadow and warm highlight**. Image quality matters more than any other design decision: every photograph should be the largest reasonable file the bandwidth supports — sharpness is brand. Captions are mandatory and follow museum-label format: *"Portrait, sitter name, location, year. Print medium."* Italic Lora, left-aligned, sits 24–32px below the image.
+
+**AI tool recommendations:** generally avoid. This direction presumes real photography — synthetic imagery breaks the entire premise of a working photographer's portfolio. If reference comps are needed during build-out, use **Midjourney** with prompts like *"black and white portrait, Platon studio, single softbox, Hasselblad, medium format, contact-sheet edge"* or *"Annie Leibovitz portrait, magazine cover, dramatic side light, 50mm"* — but the production build must replace every AI placeholder with real work.
+
+**Aspect ratios:** 3:2 landscape and 4:5 portrait (35mm and medium-format standards). 1:1 acceptable for contact-sheet grids only. Never 16:9 (cinematic, off-feel for stills). Never irregular crops without a reason.
+
+**Video:** rare. If a moving-image piece is in the body of work, it sits in its own page with a poster image and play button — never autoplay, never silent loop. Behind-the-scenes video is acceptable on a process page; the main portfolio is stills.
+
+**Performance:** the budget is **inverted** here. Hero image may go up to 400 KB AVIF at 2400w because sharpness sells the portfolio. LCP target is 2.5s; if it slips, optimize the encoder and CDN before reducing image size. A blurry hero defeats the entire direction.
+
+**Avoid:** stock photography of any kind, AI photos with uncanny hands or fake film grain, gradient backgrounds, glassmorphic anything, drop shadows on photographs, decorative SVG ornament, lightboxes with heavy chrome (the modal frame must be near-invisible), hover effects that scale or tilt images.
+
+**Accessibility:** long-form alt-text mandatory — describe the photograph as a museum docent would. *"A man in a dark suit faces the camera, lit from a single hard source above-left; his hands rest folded on a desk; shadow falls across the right half of his face."* Captions are screen-reader-friendly and not redundant with alt-text. Dark-mode (Platon canvas) is an explicit toggle, not a system-pref auto-switch — the photographer chooses the gallery wall.
+
+## 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(--toned-sepia) / 0.25)` background, foreground text — gallery-tone selection.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin and quiet — ink color, never a hue.
+- **Scrollbar:** none. Scroll the page; the chrome stays out.
+
+## 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.

package/themes/studio-photographer/tokens.ts

@@ -0,0 +1,164 @@
+import type { Direction } from "../schema";
+
+export const studioPhotographer: Direction = {
+  name: "studio-photographer",
+  ethos:
+    "Annie Leibovitz full-bleed portraiture · Platon dark restraint · Dan Winters cream editorial · Magnum photojournalism · Aperture curatorial",
+  references: [
+    { brand: "Annie Leibovitz (portfolio)", trait: "full-bleed image, minimal nav, the photograph is the page" },
+    { brand: "Platon (portfolio)", trait: "dark canvas, image-grid restraint, near-zero chrome" },
+    { brand: "Dan Winters (portfolio)", trait: "cream paper, image-led editorial pacing" },
+    { brand: "Magnum Photos", trait: "cream + Helvetica, photojournalist authority" },
+    { brand: "Aperture", trait: "cream + serif, curatorial quietude" },
+  ],
+  feel:
+    "The work is the website. Photographs sit full-bleed against a cream or near-black canvas with almost " +
+    "no chrome around them — captions sit in small serif italics, navigation collapses to a single line of type. " +
+    "Pacing is deliberate: one frame, then breath, then the next. The interface gets out of the way so the image lands.",
+
+  fonts: {
+    display: {
+      family: "Lora",
+      fallback: ["Georgia", "Times New Roman", "Times", "serif"],
+      from: "Aperture/Dan Winters editorial serif — warm, curatorial, sits quietly under photographs",
+      googleFont: "Lora",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Source Sans Pro",
+      fallback: ["Helvetica Neue", "Helvetica", "Arial", "system-ui", "-apple-system", "sans-serif"],
+      from: "Magnum house-style clean sans — photojournalist caption authority, near-Helvetica",
+      googleFont: "Source+Sans+Pro",
+      weights: [300, 400, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "frame numbers, exposure data, archive call-numbers — contact-sheet metadata",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.01em",            // serif heading sits near zero — captions and titles, not display
+    bodyTracking: "0.005em",
+    fontFeatureSettings: '"liga", "kern", "tnum"',
+    h1ScaleClamp: "clamp(1.5rem, 2.5vw, 2.5rem)",   // small — the title NEVER competes with the photograph
+    bodyBaseSize: "0.9375rem",                       // 15px — caption-scale by default
+    bodyLineHeight: "1.65",
+  },
+
+  colors: {
+    background: { hsl: "38 25% 93%", from: "= brand.cream — Magnum/Aperture matte paper; the gallery wall" },
+    foreground: { hsl: "30 8% 14%", from: "= brand.archival-ink — warm photographic black, never pure" },
+    card: { hsl: "38 25% 93%", from: "same as background — cards do not differentiate from canvas; image is the depth" },
+    popover: { hsl: "38 25% 96%", from: "fractionally lighter cream — popover surface, lifts off paper" },
+    primary: { hsl: "30 8% 14%", from: "ink — primary actions wear the foreground; restraint is the brand" },
+    primaryForeground: { hsl: "38 25% 93%", from: "cream on ink" },
+    secondary: { hsl: "38 18% 86%", from: "deeper cream — quiet panels, contact-sheet ground" },
+    secondaryForeground: { hsl: "30 8% 14%", from: "ink on deeper cream" },
+    muted: { hsl: "38 15% 82%", from: "deepest cream — metadata strip, footer ground" },
+    mutedForeground: { hsl: "30 6% 38%", from: "warm graphite — caption gray, sits below body weight" },
+    accent: { hsl: "20 35% 32%", from: "= brand.toned-sepia — print-tone accent, gallery red-brown" },
+    accentForeground: { hsl: "38 25% 93%", from: "cream on sepia" },
+    border: { hsl: "30 8% 14%", from: "ink — hairline rule under captions, same as foreground" },
+    input: { hsl: "30 8% 14%", from: "same as border — single hairline language" },
+    ring: { hsl: "30 8% 14%", from: "ink — focus is the foreground, never a color accent" },
+    destructive: { hsl: "0 45% 38%", from: "muted oxblood — print-tone red, never alarm-bright" },
+    destructiveForeground: { hsl: "38 25% 93%", from: "cream on oxblood" },
+    brand: {
+      cream: { hsl: "38 25% 93%", from: "= background; the gallery wall, Magnum/Aperture matte paper" },
+      "archival-ink": { hsl: "30 8% 14%", from: "= foreground; warm photographic black, never pure" },
+      "toned-sepia": { hsl: "20 35% 32%", from: "= accent; gelatin-silver print-tone, gallery red-brown" },
+      "platinum-shadow": { hsl: "30 6% 38%", from: "warm graphite, secondary caption tone" },
+      "blackout": { hsl: "30 8% 8%", from: "Platon dark mode — gallery-after-hours, alternate canvas" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256],   // generous — pacing matters, photographs need air
+    containerMax: "max-w-[1800px]",       // very wide — image-first means edge-to-edge is the canvas
+    containerPadding: "px-0 md:px-6",      // mobile is true full-bleed; desktop gets a thin margin
+    sectionPadding: {
+      hero: "pt-0 pb-32 lg:pt-0 lg:pb-48",
+      default: "py-32 lg:py-48",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",                            // sharp — gallery prints have no rounded corners
+    pillsAllowed: false,                  // pills read web-app; this is print-gallery
+  },
+
+  shadows: {
+    style: "none",                        // never on photographs; depth is the photograph itself
+    utilities: {
+      "hairline-under":
+        "inset 0 -1px 0 0 hsl(var(--border) / 0.5)",   // single rule under captions, contact-sheet style
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1600,                       // long fade — the photograph develops in
+      loop: 6000,                         // ambient print-tone breathing, used sparingly
+      ambient: 30000,                     // slow ken-burns for select hero stills
+    },
+    keyframes: {
+      "develop-in": {
+        css:
+          "0% { opacity: 0; filter: contrast(1.1) brightness(1.05); }\n" +
+          "100% { opacity: 1; filter: contrast(1) brightness(1); }",
+        defaultDuration: 1600,
+        iteration: "once",
+        purpose: "photograph entrance — develops in like a print emerging in the bath, never a hard pop",
+      },
+      "caption-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 800,
+        iteration: "once",
+        purpose: "caption fades up below the photograph after the image has settled",
+      },
+      "slow-ken-burns": {
+        css:
+          "0% { transform: scale(1.02) translate(0, 0); }\n" +
+          "100% { transform: scale(1.08) translate(-1.5%, -0.8%); }",
+        defaultDuration: 30000,
+        iteration: "infinite",
+        purpose: "very slow camera push on hero stills only — almost imperceptible, gallery-projection feel",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text links only as primary navigation. CTA is foreground text with a hairline underline that thickens on hover. " +
+      "Solid-fill button is reserved for a single page-level action (contact, inquire) and is ink-on-cream with sharp corners. " +
+      "Never a colored button, never a pill, never gradient.",
+    card:
+      "There is no card. Images sit directly on the page with the caption below in small serif italic. " +
+      "If grouping is needed, use a single hairline rule above the caption — no border, no fill, no shadow.",
+    input:
+      "Border-bottom only, 1px --border. No box. Label above in mono uppercase tracking 0.12em — archive metadata feel. " +
+      "Focus thickens the underline to 2px, same color. Placeholder is italic Lora.",
+    cta:
+      "Text-link with hairline underline. The single page-level CTA may use a sharp ink-on-cream filled rect. " +
+      "Never a chip, never a pill, never colored.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--toned-sepia) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "none",
+  },
+};