@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/marketplace-vintage/tokens.ts

@@ -0,0 +1,185 @@
+import type { Direction } from "../schema";
+
+export const marketplaceVintage: Direction = {
+  name: "marketplace-vintage",
+  ethos:
+    "Etsy warm paper · Depop saturated youth · Grailed sharp resale · Vestiaire dignified vintage · eBay redesigned restraint",
+  references: [
+    { brand: "Etsy", trait: "warm orange + friendly geometric sans + hand-crafted feel" },
+    { brand: "Depop", trait: "saturated youth palette + grid density + casual energy" },
+    { brand: "Grailed", trait: "sharp black + Helvetica + men's-resale density" },
+    { brand: "Vestiaire Collective", trait: "cream + serif + luxury-resale dignified" },
+    { brand: "eBay (recent redesign)", trait: "warm white + restraint + tight grid" },
+  ],
+  feel:
+    "Warm paper canvas you'd flip through at a flea market. Friendly secondary palette, a hand-feeling " +
+    "serif sub-accent on top of a confident geometric sans, and seller personality forward — every card " +
+    "carries a maker, a price, and a story. Decorative, but never corporate-marketplace.",
+
+  fonts: {
+    display: {
+      family: "Recoleta",
+      fallback: ["Fraunces", "DM Serif Display", "Georgia", "serif"],
+      from: "Vestiaire/Etsy hand-warm display serif — rounded humanist terminals; Fraunces is the Google-Font swap",
+      googleFont: "Fraunces",
+      weights: [400, 600, 700],
+    },
+    body: {
+      family: "DM Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "Segoe UI", "sans-serif"],
+      from: "Etsy/Depop friendly geometric sans — open apertures, confident at card titles",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 700],
+    },
+    mono: {
+      family: "DM Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "Courier New", "monospace"],
+      from: "price tag / listing meta — receipt-paper feel for sku, price, condition",
+      googleFont: "DM+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",          // Fraunces sits near zero — slight tighten reads confident
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "ss01", "tnum"',
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "32 36% 95%", from: "Etsy warm paper — the flea-market canvas, never pure white" },
+    foreground: { hsl: "24 22% 14%", from: "Grailed near-black with a warm tilt — ink, not pure black" },
+    card: { hsl: "32 28% 98%", from: "lifted warm paper — listing card, fractionally brighter than canvas" },
+    popover: { hsl: "32 28% 98%", from: "same as card — popover/menu surface" },
+    primary: { hsl: "16 86% 52%", from: "Etsy warm orange — the canonical action color, friendly and confident" },
+    primaryForeground: { hsl: "32 36% 97%", from: "warm paper on orange" },
+    secondary: { hsl: "32 24% 90%", from: "deeper warm paper — secondary panels, seller cards" },
+    secondaryForeground: { hsl: "24 22% 14%", from: "warm ink on deeper paper" },
+    muted: { hsl: "32 20% 88%", from: "muted paper — listing meta strips, condition pills" },
+    mutedForeground: { hsl: "24 14% 38%", from: "warm secondary text — readable on paper" },
+    accent: { hsl: "32 26% 92%", from: "hover paper — one tier under secondary" },
+    accentForeground: { hsl: "24 22% 14%", from: "warm ink on accent paper" },
+    border: { hsl: "30 18% 80%", from: "warm hairline — visible on paper without going corporate" },
+    input: { hsl: "30 18% 78%", from: "input border — slightly stronger than card border" },
+    ring: { hsl: "16 86% 52%", from: "= primary; orange ring for focus" },
+    destructive: { hsl: "356 72% 46%", from: "Depop saturated red — sold-out / removed listing tone" },
+    destructiveForeground: { hsl: "32 36% 97%", from: "warm paper on red" },
+    brand: {
+      "paper-warm": { hsl: "32 36% 95%", from: "= background; the flea-market canvas" },
+      "paper-deep": { hsl: "32 24% 90%", from: "= secondary; the deeper paper for seller panels" },
+      "orange-etsy": { hsl: "16 86% 52%", from: "= primary; Etsy warm orange, the action color" },
+      "plum-depop": { hsl: "320 52% 42%", from: "Depop deep plum — secondary brand accent, story tags" },
+      "olive-vintage": { hsl: "78 28% 38%", from: "vintage olive — verified-seller / Vestiaire-dignified tag" },
+      "mustard-tag": { hsl: "42 88% 56%", from: "price-tag mustard — On Sale / Make Offer chip color" },
+      "ink-grailed": { hsl: "24 22% 14%", from: "= foreground; Grailed warm ink" },
+      "cream-vest": { hsl: "38 30% 96%", from: "Vestiaire cream — alt panel surface for the luxury-resale tier" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-16",
+      default: "py-12 lg:py-20",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.625rem",                     // 10px — softer than utility, never balloon
+    pillsAllowed: true,                   // condition pills, category chips, story tags
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-card":
+        "0 1px 2px hsl(24 22% 14% / 0.05), 0 4px 12px hsl(24 22% 14% / 0.07)",
+      "shadow-card-hover":
+        "0 2px 4px hsl(24 22% 14% / 0.06), 0 14px 28px hsl(24 22% 14% / 0.12)",
+      "shadow-pricetag":
+        "1px 1px 0 hsl(var(--ink-grailed) / 0.9)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 320,                        // friendly snap — marketplace pace, not catalog
+      loop: 1800,
+      ambient: 20000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(10px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 320,
+        iteration: "once",
+        purpose: "listing entrance — quick, casual, not ceremonial",
+      },
+      "tag-wiggle": {
+        css:
+          "0%, 100% { transform: rotate(-1.5deg); }\n" +
+          "50% { transform: rotate(1.5deg); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "On Sale / New / Maker tag hover — hand-pinned label energy",
+      },
+      "heart-pop": {
+        css:
+          "0% { transform: scale(1); }\n" +
+          "40% { transform: scale(1.35); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 280,
+        iteration: "once",
+        purpose: "favorite/heart action — confirms a save, vintage-feeling pop",
+      },
+      "marquee-slow": {
+        css:
+          "from { transform: translateX(0); }\n" +
+          "to { transform: translateX(-50%); }",
+        defaultDuration: 28000,
+        iteration: "infinite",
+        purpose: "seller-strip and category-strip horizontal scroll — flea-market frieze",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid-fill primary in orange-etsy with white text, 0.625rem radius, shadow-card. " +
+      "Secondary is ghost (border, foreground text). Tertiary is text-link in primary. " +
+      "Pill is reserved for tags and chips — never for primary CTAs. " +
+      "Make Offer / On Sale buttons may use mustard-tag with ink text for a price-tag feel.",
+    card:
+      "Listing card: rounded radius, bg-card, shadow-card, no border. " +
+      "Photo-first (1:1 square — the marketplace standard). Below: title in display serif (Fraunces 600), " +
+      "price in mono, seller handle in body 500 with avatar. Hover applies card-lift via shadow-card-hover. " +
+      "Story tags (Vintage 1970s, Handmade) sit as pills overlaying the photo top-left.",
+    input:
+      "Full rounded box with 1px --input border, bg-card. " +
+      "Search bar carries a leading magnifier icon and a trailing 'in shops/listings' segmented control. " +
+      "Focus = 2px primary ring at 40%.",
+    cta:
+      "Filled primary orange button for Add to Cart / Buy It Now. " +
+      "Heart (favorite) is icon-only ghost on the card; Follow Seller is pill ghost. " +
+      "Mustard On Sale chip is a status pill — never a CTA.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.55)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/maximalist/THEME.md

@@ -0,0 +1,96 @@
+# Design Direction — Maximalist
+
+## Ethos
+Wes Anderson symmetry · Memphis-design pattern play · Esquire 1960s editorial borders · Push Pin Studios color · Paula Scher type-as-art
+
+## Feel
+Many colors, layered patterns, playful type, decorative borders. The opposite of minimal — every surface carries decoration earned by composition. Symmetric and intentional like Wes Anderson, never chaotic like 90s rave flyers. Backgrounds are a paint surface, not a void.
+
+## Reference brands
+- **Wes Anderson (Grand Budapest, French Dispatch)** → symmetric composition, candy palette, color-graded photography.
+- **Memphis Design (Ettore Sottsass)** → pattern play, color collisions, laminate prints.
+- **Esquire 1960s (George Lois era)** → editorial borders, bordered-block layouts, type-and-image as one object.
+- **Push Pin Studios (Glaser/Chwast)** → flat illustration, saturated flat color, decorative ornament.
+- **Paula Scher** → type-as-art, oversized typographic posters, type that fills the frame.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin. The surface stack is **cream** (background) → **lighter cream** (card) → **deeper cream** (muted). Depth comes from **thick 3px borders** and from **per-component background overrides** — components are encouraged to set their own bg using any of the brand tokens. This direction treats the background as a paint surface.
+
+Brand tokens (named, never numbered): `--coral` (= primary), `--mustard`, `--teal`, `--magenta`, `--mint`, `--chartreuse`, `--cream` (= background), `--ink` (= foreground). At least five named accent colors is the *minimum* — this direction is built around having many.
+
+Primary is **bright coral** (`12 88% 60%`) — the Memphis pink-red, the principal action color. Foreground is **deep teal-black** (`200 40% 18%`), never pure black; the slight hue gives the palette room to sit against it.
+
+## Typography
+- **Display:** Playfair Display (Wes Anderson title-card feel — high-contrast serif, theatrical). Fallback Bodoni Moda. Weights 400/700/900. h1–h4.
+- **Body:** Crimson Pro (warm serif — pairs with Playfair for full serif maximalism). 17px, line-height 1.55.
+- **Mono:** Space Mono (Push Pin energy — geometric mono with playful proportions). Used for labels, captions, micro-type.
+
+H1 uses `clamp(3rem, 8vw, 6rem)` — Paula Scher posters: large, unafraid. Tracking `-0.005em` on headings (Playfair sits well near zero — too tight crushes the contrast). Font features: `"liga"`, `"dlig"`, `"ss01"` — discretionary ligatures, type-as-art.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-10` — wide enough for symmetric multi-column compositions.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64. Medium density — decoration takes room, but the scale stops before editorial generosity.
+
+## Color
+No hex anywhere. Color is the medium. Components are *encouraged* to override their background with any brand token — a card may be mustard, an input panel may be mint, a sidebar may be magenta. The cream background is a canvas, not a default. Pure white and pure black are forbidden — `--cream` and `--ink` replace them.
+
+## Radius
+Binary: `--radius: 0` (sharp) for default editorial blocks, **OR** `999px` (pill) for tags, toggles, and status. **No in-between** — the language does not use `0.25rem` or `0.5rem` corners. `pillsAllowed: true`.
+
+## Shadows
+**None.** Color does the work of separation. Single utility: `.border-thick` (`inset 0 0 0 3px hsl(var(--border))`) — the Esquire-editorial bordered-block treatment. Drop shadows would muddle the flat-color language; borders are the depth.
+
+## Motion
+Three keyframes, all playful:
+- `wiggle` — rotate ±2deg, 300ms once. Hover nudge for buttons, tags, decorative ornament.
+- `pop` — scale 0.95 → 1.05 → 1, 200ms once. Entrance and click feedback — the primary reveal in this language.
+- `rotate-slow` — continuous 60s rotation. **Decorative ornament only** — never on functional UI.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored — wrapped in a media query in every motion utility.
+
+## Component patterns
+- **Buttons:** filled, brightly colored (any brand token), often with a thick contrasting border (Esquire editorial). Pills allowed for tags and toggles. **Primary CTA = bold coral fill with a chartreuse 3px border.** Sharp corners by default; pill only for tag/toggle role. No ghost-only buttons — this language commits to fill.
+- **Cards:** thick 3px border in `--ink`. Background is a brand token, not card-white by default — cards are colored panels. Internal padding generous (`p-8 lg:p-12`). Title in Playfair Display, often oversized.
+- **Inputs:** full box with 3px `--ink` border. `bg-card`. Sharp corners. Label sits above in Space Mono. Focus shifts border color to `--ring` (coral). **No border-bottom-only treatment** — that's editorial language.
+- **CTAs:** filled rect button, bold color + thick contrasting border. Pills reserved for secondary tags. **Never a plain text link** — every CTA carries decoration.
+
+## Component families
+None at install time. Patterns to expect: bordered-block cards, color-panel sections, oversized display-serif heroes, mono-label captions, pill tag rows. The Director appends conventions here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--brand-chartreuse) / 0.5)` background, foreground text. The high-vibration accent doubles as the selection color.
+- **Focus ring:** `3px solid hsl(var(--ring))` — thick to match the border language. A 1px ring would disappear against the decoration.
+- **Scrollbar:** auto. Native scrollbars in cream-system browsers carry their own decoration; let them.
+
+## Recommended rich media
+
+**Cover imagery.** Bold flat illustrations, patterned backgrounds, decorative borders, mixed photo+illustration collages, color-blocked photography (Wes Anderson palette grading).
+
+**AI tool recommendations.**
+- **Recraft** for vector illustrations with playful flat style — best match for the Push Pin lineage.
+- **Midjourney/Flux** with the prompt fragment `"Wes Anderson color palette, symmetrical composition, Kodak Portra 400"` for photography.
+- **Stable Diffusion + a custom Memphis-design LoRA** for pattern generation.
+- **patternpad.com** or comparable generative tools for repeating backgrounds (use as `bg-image` on section panels).
+
+**Aspect ratios.** 1:1 square (Instagram-friendly, fits the maximalist editorial layout) or 3:4 portrait (movie-poster feel — Wes Anderson title-card framing). 16:9 landscape is allowed for hero-strip use but is not the default.
+
+**Color.** Lean into the full brand palette — **every image uses at least 3 of the named tokens** (coral, mustard, teal, magenta, mint, chartreuse). A single-color image reads as a different direction.
+
+**What to AVOID.**
+- Muted desaturated photography
+- Single-color hero images
+- Dark backgrounds (`--background` is cream; dark hero panels break the paint-surface premise)
+- Anything that reads "premium minimal" — that is the editorial direction, not this one
+- Soft drop shadows on imagery (the language is flat color + thick border)
+
+**Accessibility.** High decoration count means more `aria-hidden` on purely ornamental elements (rotating sun, pattern fills, border flourishes). Alt-text must distinguish content imagery from ornament — if an image is decoration, mark it; if it carries meaning, describe it. Color contrast is preserved by foreground `--ink` against cream and against every brand token; verify any custom color-on-color pairing meets WCAG AA before shipping.
+
+## 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/maximalist/tokens.ts

@@ -0,0 +1,168 @@
+import type { Direction } from "../schema";
+
+export const maximalist: Direction = {
+  name: "maximalist",
+  ethos:
+    "Wes Anderson symmetry · Memphis-design pattern play · Esquire 1960s editorial borders · Push Pin Studios color · Paula Scher type-as-art",
+  references: [
+    { brand: "Wes Anderson (Grand Budapest, French Dispatch)", trait: "symmetric composition, candy palette" },
+    { brand: "Memphis Design (Ettore Sottsass)", trait: "pattern play, color collisions" },
+    { brand: "Esquire 1960s (George Lois era)", trait: "editorial borders, bordered-block layout" },
+    { brand: "Push Pin Studios (Glaser/Chwast)", trait: "flat illustration color" },
+    { brand: "Paula Scher", trait: "type-as-art, typographic posters" },
+  ],
+  feel:
+    "Many colors, layered patterns, playful type, decorative borders. The opposite of minimal — " +
+    "every surface carries decoration earned by composition. Symmetric and intentional like Wes Anderson, " +
+    "never chaotic like 90s rave flyers. Backgrounds are a paint surface, not a void.",
+
+  fonts: {
+    display: {
+      family: "Playfair Display",
+      fallback: ["Bodoni Moda", "Didot", "Bodoni 72", "Georgia", "serif"],
+      from: "Wes Anderson title-card feel — high-contrast serif, theatrical",
+      googleFont: "Playfair+Display",
+      weights: [400, 700, 900],
+    },
+    body: {
+      family: "Crimson Pro",
+      fallback: ["Iowan Old Style", "Apple Garamond", "Georgia", "serif"],
+      from: "warm serif body — pairs with Playfair for full serif maximalism",
+      googleFont: "Crimson+Pro",
+      weights: [400, 600],
+    },
+    mono: {
+      family: "Space Mono",
+      fallback: ["Courier Prime", "ui-monospace", "Courier New", "monospace"],
+      from: "Push Pin energy — geometric mono with playful proportions",
+      googleFont: "Space+Mono",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.005em",         // Playfair sits well near zero — too tight crushes the contrast
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "dlig", "ss01"',  // discretionary ligatures — type-as-art
+    h1ScaleClamp: "clamp(3rem, 8vw, 6rem)",          // Paula Scher posters: large, unafraid
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "40 30% 92%", from: "cream — Wes Anderson Grand Budapest interior; treat as paint surface" },
+    foreground: { hsl: "200 40% 18%", from: "deep teal-black — not pure black; gives palette room to sit against it" },
+    card: { hsl: "40 30% 96%", from: "lighter cream — card sits on the paint surface" },
+    popover: { hsl: "40 30% 96%", from: "same as card; depth from thick borders, not fill" },
+    primary: { hsl: "12 88% 60%", from: "Memphis pink-red — bright coral, the principal action color" },
+    primaryForeground: { hsl: "40 30% 96%", from: "cream on coral" },
+    secondary: { hsl: "44 92% 55%", from: "= brand.mustard — Wes Anderson costume mustard, secondary action" },
+    secondaryForeground: { hsl: "200 40% 18%", from: "teal-black on mustard" },
+    muted: { hsl: "40 20% 85%", from: "deeper cream — backgrounds for quiet panels inside loud pages" },
+    mutedForeground: { hsl: "200 30% 32%", from: "teal-ink, secondary text — readable against muted cream" },
+    accent: { hsl: "180 55% 42%", from: "= brand.teal — Push Pin teal, hover and selection accent" },
+    accentForeground: { hsl: "40 30% 96%", from: "cream on teal" },
+    border: { hsl: "200 40% 18%", from: "Esquire editorial border — same as foreground; thick and intentional" },
+    input: { hsl: "200 40% 18%", from: "same as border — inputs wear the editorial border treatment" },
+    ring: { hsl: "12 88% 60%", from: "primary coral, focus only" },
+    destructive: { hsl: "350 80% 45%", from: "deeper magenta-red — distinct from coral primary" },
+    destructiveForeground: { hsl: "40 30% 96%", from: "cream on alert" },
+    brand: {
+      coral: { hsl: "12 88% 60%", from: "= primary; Memphis pink-red, also semantic brand-mark" },
+      mustard: { hsl: "44 92% 55%", from: "Wes Anderson costume mustard — Margot's coat, Zissou submarine yellow" },
+      teal: { hsl: "180 55% 42%", from: "Push Pin teal — Glaser/Chwast flat-color illustration palette" },
+      magenta: { hsl: "320 75% 55%", from: "Memphis magenta — Sottsass laminate prints" },
+      mint: { hsl: "160 50% 65%", from: "Grand Budapest pastel mint — hotel facade trim" },
+      chartreuse: { hsl: "75 70% 55%", from: "Memphis chartreuse — high-vibration accent against coral" },
+      cream: { hsl: "40 30% 92%", from: "= background; the paint surface itself, also a token" },
+      ink: { hsl: "200 40% 18%", from: "= foreground; teal-black, also semantic for editorial borders" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64],   // medium — decoration takes room
+    containerMax: "max-w-5xl",                       // wide enough for symmetric multi-column compositions
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                          // binary: sharp default for editorial blocks
+    pillsAllowed: true,                 // 999px pills for tags, toggles, status — no in-between
+  },
+
+  shadows: {
+    style: "none",                       // color does the work of separation
+    utilities: {
+      "border-thick":
+        "inset 0 0 0 3px hsl(var(--border))",   // Esquire editorial bordered-block treatment
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,                       // pop — playful, immediate
+      loop: 300,                         // wiggle cycle
+      ambient: 60000,                    // rotate-slow — decorative-only ambient
+    },
+    keyframes: {
+      "wiggle": {
+        css:
+          "0%, 100% { transform: rotate(-2deg); }\n" +
+          "50% { transform: rotate(2deg); }",
+        defaultDuration: 300,
+        iteration: "once",
+        purpose: "playful nudge on hover — buttons, tags, decorative ornament",
+      },
+      "pop": {
+        css:
+          "0% { transform: scale(0.95); }\n" +
+          "50% { transform: scale(1.05); }\n" +
+          "100% { transform: scale(1); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "entrance and click feedback — the primary reveal in this language",
+      },
+      "rotate-slow": {
+        css:
+          "from { transform: rotate(0deg); }\n" +
+          "to { transform: rotate(360deg); }",
+        defaultDuration: 60000,
+        iteration: "infinite",
+        purpose: "continuous rotation for decorative ornament only — never on functional UI",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Filled, brightly colored (any brand token), often with a thick contrasting border (Esquire editorial). " +
+      "Pills allowed for tags and toggles. Primary CTA is a bold coral fill with a chartreuse 3px border. " +
+      "Sharp corners by default; pill only for tag/toggle role. No ghost-only buttons — this language commits to fill.",
+    card:
+      "Thick 3px border in --ink (foreground). Background is a brand token, not card-white by default — " +
+      "cards are colored panels. Internal padding generous (p-8 lg:p-12). Title in Playfair Display, often oversized.",
+    input:
+      "Full box with 3px --ink border. bg-card. Sharp corners. Label sits above in mono. " +
+      "Focus shifts border color to --ring (coral). No border-bottom-only treatment — that's editorial language.",
+    cta:
+      "Filled rect button, bold color + thick contrasting border. Pills reserved for secondary tags. " +
+      "Never a plain text link — every CTA carries decoration.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-chartreuse) / 0.5)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "3px solid hsl(var(--ring))",     // thick — matches the border language
+    scrollbarStyle: "auto",
+  },
+};

package/themes/mid-century/THEME.md

@@ -0,0 +1,109 @@
+# Design Direction — Mid-Century
+
+## Ethos
+Eames warmth · Saul Bass geometric play · Knoll restraint · Aalto natural · Pushpin Studios color
+
+## Feel
+Warm cream surfaces, geometric typography, a restrained palette built around a single bold accent. Not bright, not minimal — composed. Reads like a 1962 design magazine spread, not a Memphis-style maximalist throwback. Every surface earns its place in the composition; the rust orange is the only thing that raises its voice.
+
+## Reference brands
+- **Eames** → warmth. Plywood, fiberglass, upholstery linen — the warm cream ground.
+- **Saul Bass** → geometric play. Vertigo, Anatomy of a Murder, The Man with the Golden Arm — cut-paper flat color, the source of the rust-orange primary.
+- **Knoll** → restraint. The mid-century catalog discipline — show the object, hold the page.
+- **Alvar Aalto** → natural. Wood-and-glass interiors — the source of the teak brown.
+- **Push Pin Studios (Milton Glaser era)** → color. The mustard yellow and the willingness to use color as composition, not decoration.
+- **Mad Men set design** → 1962 composed period detail. The reference point for "is this too loud" — if it would look out of place in a Sterling Cooper office, it's out.
+
+## Tokens
+HSL triples in `src/index.css`. Every `from:` comment names its brand origin. Surface stack is **warm cream linen** (background) → **lifted cream** (card) → **warm-cream-deeper** (secondary/muted/accent). Depth comes primarily from hairline borders, with a single very soft `.shadow-eames` utility for lifted cards.
+
+Brand tokens: `--cream`, `--ink`, `--rust`, `--avocado`, `--mustard`, `--teak`. The accent palette (avocado, mustard, teak) supports the rust primary — they are for category coding, charts, and illustrated accents, not for body UI. Rust is the only color allowed to carry an action.
+
+## Typography
+- **Display:** Futura (Bauhaus origin, geometric mid-century canonical). h1–h4. Falls back to DM Sans where Futura is not licensed locally. Tracking `0` — Futura is already geometric, tightening it kills the personality.
+- **Body:** DM Sans (geometric humanist). Body base **16px** with **line-height 1.6** — composed, not magazine-oversized, not dense-dashboard.
+- **Mono:** IBM Plex Mono. Modernist geometric mono — feels period-correct. Used for captions, datelines, metric labels.
+
+H1 uses `clamp(2.25rem, 5vw, 4rem)`. Font features: `"ss01", "tnum"`.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-10` — composed column, wider than editorial prose, narrower than utility-wide.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64. Medium-low density — breathing but composed.
+
+## Color
+No hex anywhere in component files. All color via tokens. Pure white and pure black are forbidden — `--cream` and `--ink` replace them. The ink carries a slight brown bias (`25 8% 15%`) to read as printed ink, not as web black.
+
+Rust is the **only** loud color. Avocado, mustard, and teak are used for category coding, illustration, and chart fills — never for CTAs, never for status. Status colors derive from the destructive token plus muted variants of the brand palette.
+
+## Radius
+`--radius: 0.25rem` (4px). **Subtle — not pillow-soft, not razor-sharp.** Mid-century is composed: corners are softened just enough to read as crafted, not enough to read as soft-modern. Pills are disallowed (`pillsAllowed: false`) — status-pill shapes read web-app, not catalog.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.hairline` (`0 1px 0 0 var(--border)`) — catalog divider.
+- `.shadow-eames` (`0 1px 2px 0 hsl(25 20% 20% / 0.08)`) — very soft 1px offset, low blur, warm shadow tint. Card lift only; never on buttons or inputs.
+
+No glows. No glassmorphism. No layered drop-shadow stacks.
+
+## Motion
+Two keyframes, both slow:
+- `fade-rise` (~900ms) — opacity + 16px translate, the only entrance. No bounce.
+- `ken-burns` (~12s infinite) — slow zoom on hero photographs. Eames catalog stillness in motion.
+
+No marquee, no parallax, no bouncing. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` honored — both keyframes are wrapped in the media query.
+
+## Component patterns
+- **Buttons:** filled rect with `0.25rem` radius. **Primary** = rust orange bg + cream text. **Secondary** = ghost (transparent bg, ink border + ink text, hover `bg-accent`). **Tertiary** = underlined text-link in rust orange.
+- **Cards:** cream surface lifted one tier from background (`--card`), hairline border, soft `.shadow-eames`. Padding `p-6 lg:p-8`. Title in Futura; meta in IBM Plex Mono.
+- **Inputs:** full box, `0.25rem` radius, hairline border on cream card surface. Label above, geometric and small. Focus = 2px rust ring.
+- **CTAs:** underlined text-link in rust orange for inline CTAs. Hero/primary action = filled rust rect. **No gradients, no pills, no glow.**
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established. Likely additions: Catalog cards (Knoll/Eames product-shot pattern), Caption blocks (IBM Plex Mono dateline + Futura title), Section dividers (hairline + small Futura label).
+
+## Recommended rich media
+
+### Cover and hero imagery
+- **Editorial photography with warm color grading.** Orange/teal warmth, the Kodak Portra film-stock palette. Skin tones warm, shadows holding teal.
+- **Illustrated figures in Saul Bass cut-paper style.** Flat colors, geometric simplification, no gradients, no shading.
+- **Eames-era product shots.** Single object on warm seamless backdrop, soft directional light, generous negative space.
+- **Vintage maps and diagrams.** Topographic, exploded-axonometric, period-correct cartography — anything that reads as 1962 reference material.
+
+### AI tool recommendations
+- **Midjourney or Flux** for illustrated covers. Prompt template:
+  `Saul Bass illustration, cut-paper aesthetic, flat colors, geometric simplification, [subject], 1960s editorial poster`
+- **Recraft** for vector-style flat illustrations — best for icon families, spot art, and category marks that need to be re-edited.
+- **Midjourney** for photography. Prompt template:
+  `Kodak Portra 400, warm grading, 35mm film, [subject], natural light, shallow depth of field`
+
+### Aspect ratios
+**4:5 portrait** or **3:2 landscape** — the photographic standards. Mid-century predates widescreen; 16:9 and 21:9 read as contemporary cinema, not catalog. Square (1:1) is acceptable for product shots and spot illustrations.
+
+### Color grading
+Warm orange/teal split-toning. Highlights warm (toward rust/cream), shadows cool (toward muted teal). Never neutral, never high-contrast HDR.
+
+### What to avoid
+- Glossy 3D renders.
+- Lens flare, light leaks (anachronistic to the catalog reference).
+- Glassmorphic effects.
+- Dark moody photography — this direction is warm-lit, not noir.
+- Hyperrealistic AI photos with HDR look.
+- Memphis-style maximalist patterning (squiggles, confetti, neon).
+
+### Accessibility
+Alt-text should describe the **warmth and composition**, not just the contents. "A warm-lit product shot of a molded plywood chair on cream seamless, soft directional light from upper left" — not "chair photo." The warmth is part of the meaning.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring))` — rust orange, visible but composed.
+- **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.