@stylecrib/cli 0.3.1 → 0.3.2

package/themes/hotel-boutique/THEME.md

@@ -0,0 +1,110 @@
+# Design Direction — Hotel-Boutique
+
+## Ethos
+The Standard cinematic warm-gradient property shots · Ace Hotel matte navy + characterful serif + community voice · Hotel Esencia Caribbean cream restraint · Soho House members-club gravity · Standard High Line nightlife-luxury
+
+## Feel
+A boutique-hotel brand site with a personality — not chain-corporate, not OTA-aggregator. **The property has a name, a neighborhood, an opening hour for the bar, and a doorman who knows you.** Warm cream paper canvas, matte navy ink, a single lobby-velvet terracotta accent, and full-bleed property and neighborhood photography. Cormorant serif display at oversized property-headline scale, Plus Jakarta Sans body. The voice writes in first person — *"we built this room"*, *"the bar opens at six"*, *"the neighborhood eats here, not at the lobby restaurant"* — Ace Hotel community register layered over Standard cinematic gravity. Soho House members-club composure underneath.
+
+## Reference brands
+- **The Standard** → warm gradient + Plus Jakarta + cinematic property shots. The rooftop at dusk, the lobby at midnight. Photography is the lead.
+- **Ace Hotel** → matte navy + cream + characterful serif + community voice. The hotel writes copy like a neighborhood newspaper.
+- **Hotel Esencia** → warm cream + EB Garamond serif + Caribbean restraint. The room is the program; the page gets out of the way.
+- **Soho House** → matte cream + serif + members-club gravity. Application, not booking. Cormorant italic, members'-only register.
+- **Standard High Line** → warm gradient + restrained + nightlife-luxury. The brass-warm flicker on the key icon traces here.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **warm cream canvas** (background) → **lifted cream room** (card/popover) → **cream tiered deeper** (secondary/muted/accent). Depth comes from hairline rules at `foreground / 0.10` plus a soft `card-soft` lift; hero property photography gets `property-lift`, a diffuse cinematic drop. This direction is **soft**, not **minimal** — boutique hospitality earns one degree of warmth that architectural/editorial do not.
+
+Brand tokens: `--cream-canvas` (Ace Hotel warm cream, alias of background), `--cream-room` (Hotel Esencia lifted cream, room-page stock), `--ink-navy` (Standard matte navy, foreground/midnight lobby), `--velvet-terracotta` (Soho House lobby-velvet, primary accent), `--brass-warm` (Standard High Line brass fixture, sparingly on key-icon eyebrows and member-tier badges), `--ocean-deep` (Hotel Esencia Caribbean deep-water, amenity icons and weather chips). Primary is `12 48% 36%` — a deep lobby-velvet terracotta, never a gilded gold.
+
+## Typography
+- **Display:** Cormorant Garamond at 400/500/600/700, italic-friendly. Property names, room names, neighborhood essay titles. Tracking `-0.018em` — Cormorant at property-headline scale wants tighter tracking; the serif settles.
+- **Body:** Plus Jakarta Sans at 400/500/600, **17px**, line-height **1.7**. Long-form property prose, neighborhood essays, the bar's opening-hours copy. The Standard / Standard High Line warm geometric sans register.
+- **Mono:** JetBrains Mono at 400. Used **only small** — room numbers (Nº 412), neighborhood coordinates, weather/local-time captions, member-tier numbers. Never display, never body.
+
+Hierarchy is pair-driven: Cormorant italic display + Plus Jakarta body, with tracked-uppercase Plus Jakarta small caps (letter-spacing 0.1em) for eyebrows ('THE PROPERTY', 'THE NEIGHBORHOOD', 'THE BAR'). H1 uses `clamp(2.75rem, 7.5vw, 6.5rem)` — property-headline scale, Standard cinematic register. Font features: `"liga", "dlig", "onum", "kern"` — discretionary ligatures earn their place in Cormorant italic property names.
+
+## Spacing
+- **Container:** `max-w-6xl px-6 lg:px-12` — 1152px. Property photography is hero; the rooms-grid needs the width to read as a curated set, not a list.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-40 lg:pb-28` (cinematic property-shot hero)
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-14 lg:py-20`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. The high end (80/96/128/160) is intentional — hotel-program pacing, room to breathe between sections.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. White and pure black are forbidden — `--cream-canvas` (`32 22% 91%`) and `--ink-navy` (`220 28% 12%`) replace them.
+
+The palette is warmth and one accent:
+- **Cream-canvas** — Ace Hotel warm cream, the matte page.
+- **Cream-room** — Hotel Esencia lifted cream, room-page and property-card stock.
+- **Ink-navy** — Standard matte navy, the foreground and the midnight-lobby base color.
+- **Velvet-terracotta** — Soho House lobby-velvet, the **one** primary accent. Characterful, never gilded.
+- **Brass-warm** — Standard High Line brass fixture, used **sparingly** on key-icon eyebrows, member-tier badges, and the single `key-flicker` marker.
+- **Ocean-deep** — Hotel Esencia Caribbean deep-water blue. Used for amenity icons (pool, beach, spa) and weather chips. **Never** as a primary action color.
+
+Saturation never exceeds what would read in a printed members'-card mailer under warm lobby light. The property photography carries the color — the chrome stays warm-neutral.
+
+## Radius
+`--radius: 0.25rem` (4px). Softer than restaurant/architecture, **signals hospitality warmth without going consumer-pill**. Pills are disallowed (`pillsAllowed: false`) — member-tier badges are sharp rects, characterful not playful. The 0.25rem corner reads like the rounded edge of a printed Soho House member card, not a delivery-app chip.
+
+## Shadows
+**Soft.** Two utilities:
+- `.property-lift` — `0 18px 48px -24px hsl(var(--foreground) / 0.32)`. Diffuse drop for **property hero photography only** — lobby-light register, rooftop-at-dusk lift.
+- `.card-soft` — `0 1px 0 0 hsl(var(--foreground) / 0.10), 0 8px 24px -16px hsl(var(--foreground) / 0.18)`. Room-card hairline + subtle lift; the warmest chrome the page is allowed.
+
+No glows. No neon-pulse. Buttons never carry shadow; the lift lives on cards and photography.
+
+## Motion
+Three keyframes:
+- **`welcome-rise`** — opacity + 18px translate, **1100ms**. The standard entrance for property cards, room-page headers, and neighborhood essays. The door is opened, the guest steps in.
+- **`lobby-ken-burns`** — `scale(1.04) translate(0,0) → scale(1.14) translate(-1.5%, -1%)`, **28000ms**, infinite. Slow cinematic drift on hero property photography — Standard camera-push, lobby and rooftop tableaus breathing.
+- **`key-flicker`** — opacity flicker on the brass-warm key icon, **6000ms**, infinite. Neon-sign-at-dusk reference; used **once per page**, never on more than one element.
+
+No marquee, no parallax. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `lobby-ken-burns` and `key-flicker` are disabled entirely under reduced motion; `welcome-rise` collapses to instantaneous final-state.
+
+## Component patterns
+- **Buttons:** the default primary CTA is a **serif italic text-link in velvet-terracotta**, underline always visible — members-club register. The solid button is reserved for **one 'Book a Room' hero CTA per page** — ink-navy bg + cream-canvas text, 0.25rem radius, **no shadow on the button itself**. Secondary actions ('Tour the Property', 'Read the Neighborhood Guide') are tracked-uppercase text-links in Plus Jakarta Sans 500.
+- **Cards (property/room):** hairline top + bottom at `foreground / 0.10` plus the soft `.card-soft` lift, **cream-room bg** (one tier above canvas). Room number in JetBrains Mono small-caps eyebrow (Nº 412), room name in **Cormorant italic display**, square-footage/bed-count in a mono row beneath. Internal padding `p-8 lg:p-10`. The hero property shot uses `.property-lift` drop shadow, never `.card-soft`.
+- **Inputs:** booking form — border-bottom + thin all-around border (1px `--border`), cream-room bg, 0.25rem radius. Label above in tracked-uppercase Plus Jakarta small caps (letter-spacing 0.1em). Placeholder in muted-foreground italic serif. Focus is velvet-terracotta ring, 1px. Date pickers and guest-count steppers use the same hairline language.
+- **CTAs:** default CTA is serif italic text-link in velvet-terracotta with always-visible underline. The single 'Book a Room' hero CTA is the one solid-fill exception — ink-navy bg, cream-canvas text. Members'-only CTAs ('Member Login', 'Apply for Membership') use brass-warm tracked-uppercase text-link with optional `.key-flicker` on the key icon.
+
+## Recommended rich media
+
+The page is led by **cinematic property and neighborhood photography** — the rooftop at dusk, the lobby at midnight, the bar at six, the room with the window open. The Standard's photographic register; warm gradient skies, occupied spaces, never empty marketing-stage shots. **Show the doorman, show the bartender, show the regular at the corner table.**
+
+**AI tool recommendations.**
+- **Midjourney / Flux** — *"The Standard hotel rooftop at golden-hour dusk, warm gradient sky, occupied bar in middle distance, cinematic 35mm, Annie Leibovitz lighting"*; for rooms, *"Hotel Esencia guest room interior, late afternoon Caribbean window light, unmade linen, cedar floor, single subject"*; for neighborhood essays, *"Ace Hotel neighborhood street scene, locals at a coffee counter, warm afternoon light, Kodak Portra 400, 50mm"*.
+- **Avoid Midjourney's default hotel-photography register** — it tends toward empty-room real-estate-listing energy. Always prompt for occupied spaces, warm gradient light, and a sense of time-of-day.
+- **Real photography wins** — boutique hotels live on the photographer relationship. If a property-shoot is possible, use it.
+
+**Aspect ratios.** **16:9** for the hero rooftop/lobby cinematic shot (Standard cinematic register), **4:5 portrait** for room interiors and chef/doorman portraits, **3:2 landscape** for neighborhood-essay photography. Never 1:1 social-square as the hero; the property is not an Instagram tile.
+
+**Color in imagery.** Warm gradient skies, candlelit interiors, neon at dusk, terracotta and navy and brass. Never high-key bright, never harsh midday, never the empty-room real-estate-listing register. Black-and-white is welcome for member portraits and bar staff.
+
+**Video.** Used for the property hero — a single 28s `.lobby-ken-burns`-style slow drift over a still, **or** a muted 20s loop of the rooftop at golden hour. Never autoplay with sound. Never room-tour-walkthrough video. ≤10 MB AV1 or H.265.
+
+**Captions are mandatory.** Property name, neighborhood, room name, photographer credit, time of day — in JetBrains Mono small caps. *"The Standard · East Village, NY · Suite 1207 · Photograph by Brigitte Lacombe · 19:42 EDT"* style attribution always.
+
+**Performance.** Hero property image ≤220 KB AVIF at 2000w; room-card photography ≤110 KB each. LCP under 2.8s — if it slips, the property photograph is too large, not the framework. Boutique hotels can afford slightly heavier hero media than editorial because **the photograph is the property**.
+
+**Avoid.** OTA-aggregator energy (Booking.com tile grids). Empty-room real-estate-listing photography. Stock smiling-staff photos. Generic "boutique luxury" hotel-chain marketing language. AI-glossy "perfect" interiors (uncanny). Pop-up booking widgets that block the photograph. Lens flare. Anything that reads more **Hilton than Hotel Esencia**.
+
+**Accessibility.** Long-form alt-text — describe the room, the light, the time of day, the occupants as if for a blind reader. *"A double room with an unmade linen bed, cedar floor, and a single open window looking out onto a coconut palm; photographed in late Caribbean afternoon light."* The bar is hotel-brochure editorial.
+
+## 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.22)` background, foreground text — lobby-velvet highlight on cream canvas.
+- **Focus ring:** `1px solid hsl(var(--ring))`. Thin and quiet — hospitality precision, never decorative.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. A **dark Ace Hotel variant** (matte navy background, cream foreground, same velvet-terracotta accent) is anticipated for properties whose mood is intentionally nocturnal — it lives as a future direction-mode, not as a within-direction toggle. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/hotel-boutique/tokens.ts

@@ -0,0 +1,179 @@
+import type { Direction } from "../schema";
+
+export const hotelBoutique: Direction = {
+  name: "hotel-boutique",
+  ethos:
+    "The Standard cinematic warm-gradient property shots · Ace Hotel matte navy + characterful serif + community voice · Hotel Esencia Caribbean cream restraint · Soho House members-club gravity · Standard High Line nightlife-luxury",
+  references: [
+    { brand: "The Standard", trait: "warm gradient + Plus Jakarta + cinematic property shots" },
+    { brand: "Ace Hotel", trait: "matte navy + cream + characterful serif + community voice" },
+    { brand: "Hotel Esencia", trait: "warm cream + EB Garamond + Caribbean restraint" },
+    { brand: "Soho House", trait: "matte cream + serif + members-club gravity" },
+    { brand: "Standard High Line", trait: "warm gradient + restrained + nightlife-luxury" },
+  ],
+  feel:
+    "Boutique-hotel brand site with a personality — not chain-corporate, not OTA. " +
+    "Matte navy-ink canvas with warm cream paper and a single terracotta accent " +
+    "(the lobby velvet). Cormorant serif display at oversized property-headline scale, " +
+    "Plus Jakarta Sans body, full-bleed property and neighborhood photography. " +
+    "The voice writes in first person — 'we built this room', 'the bar opens at six' " +
+    "— Ace Hotel community register layered over Standard cinematic gravity.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Garamond",
+      fallback: ["EB Garamond", "Iowan Old Style", "Garamond", "Georgia", "serif"],
+      from: "Cormorant Garamond — Soho House / Hotel Esencia members-club serif, italic-friendly for property names",
+      googleFont: "Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Plus Jakarta Sans",
+      fallback: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Plus Jakarta Sans — The Standard / Standard High Line body register; warm geometric sans, hospitality-friendly",
+      googleFont: "Plus+Jakarta+Sans:wght@400;500;600",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — room numbers, neighborhood coordinates, weather/local-time captions, small only",
+      googleFont: "JetBrains+Mono:wght@400",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.018em",       // Cormorant at hotel-display scale wants tighter tracking; the serif settles
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "dlig", "onum", "kern"',
+    h1ScaleClamp: "clamp(2.75rem, 7.5vw, 6.5rem)",   // property-headline scale, Standard cinematic register
+    bodyBaseSize: "1.0625rem",         // 17px — long-form property prose, neighborhood essays
+    bodyLineHeight: "1.7",
+  },
+
+  colors: {
+    background: { hsl: "32 22% 91%", from: "Ace Hotel warm cream paper — the matte boutique canvas, never bright white" },
+    foreground: { hsl: "220 28% 12%", from: "Standard matte navy-ink — deep blue-black, lobby velvet shadow at midnight" },
+    card: { hsl: "32 26% 95%", from: "Hotel Esencia lifted cream — one tier brighter than the canvas, room-page surface" },
+    popover: { hsl: "32 26% 95%", from: "same as card; depth from hairline only" },
+    primary: { hsl: "12 48% 36%", from: "Soho House lobby-velvet terracotta — the single warm accent, characterful not gilded" },
+    primaryForeground: { hsl: "32 22% 91%", from: "warm cream on lobby-velvet terracotta" },
+    secondary: { hsl: "32 18% 86%", from: "Ace Hotel cream paper, one tier deeper — printed property-card second-tone" },
+    secondaryForeground: { hsl: "220 28% 12%", from: "navy-ink on cream" },
+    muted: { hsl: "32 18% 86%", from: "same as secondary — differentiation by usage, not by color" },
+    mutedForeground: { hsl: "220 18% 36%", from: "Standard secondary text — slate-navy for captions and small print" },
+    accent: { hsl: "32 20% 82%", from: "warm cream, deepest tier — hover surface only" },
+    accentForeground: { hsl: "220 28% 12%", from: "navy-ink on cream accent" },
+    border: { hsl: "220 14% 72%", from: "Soho House hairline rule — printed members-card divider weight, barely visible" },
+    input: { hsl: "220 14% 72%", from: "same as border — reservation/booking form is hairlines, not boxes" },
+    ring: { hsl: "12 48% 36%", from: "primary lobby-velvet terracotta — focus ring, the one accent moment" },
+    destructive: { hsl: "8 60% 42%", from: "fire-warm alert — characterful warning, never screaming red" },
+    destructiveForeground: { hsl: "32 22% 91%", from: "warm cream on fire-warm alert" },
+    brand: {
+      "cream-canvas": { hsl: "32 22% 91%", from: "Ace Hotel warm cream — alias of background, the matte canvas" },
+      "cream-room": { hsl: "32 26% 95%", from: "Hotel Esencia lifted cream — room-page card stock" },
+      "ink-navy": { hsl: "220 28% 12%", from: "Standard matte navy — foreground, the midnight lobby" },
+      "velvet-terracotta": { hsl: "12 48% 36%", from: "Soho House lobby-velvet terracotta — primary accent" },
+      "brass-warm": { hsl: "38 42% 56%", from: "Standard High Line brass fixture — used sparingly on key-icon eyebrows and member-tier badges" },
+      "ocean-deep": { hsl: "200 38% 28%", from: "Hotel Esencia Caribbean deep-water blue — used for amenity icons and weather chips, never as a primary action" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],   // hotel-program pacing, room to breathe
+    containerMax: "max-w-6xl",          // 1152px — property photography is hero; rooms-grid needs the width
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-40 lg:pb-28",
+      default: "py-20 lg:py-32",
+      tight: "py-14 lg:py-20",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                    // 4px — softer than restaurant/architecture, signals hospitality warmth without going consumer-pill
+    pillsAllowed: false,                // no pill chips; member badges are sharp rects, characterful not playful
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "property-lift":
+        "0 18px 48px -24px hsl(var(--foreground) / 0.32)",   // diffuse drop for property hero photography, lobby-light register
+      "card-soft":
+        "0 1px 0 0 hsl(var(--foreground) / 0.10), " +
+        "0 8px 24px -16px hsl(var(--foreground) / 0.18)",     // room-card hairline + subtle lift
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1100,                     // hospitality pacing — welcoming, unhurried
+      loop: 4000,
+      ambient: 28000,
+    },
+    keyframes: {
+      "welcome-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(18px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1100,
+        iteration: "once",
+        purpose:
+          "the standard entrance — 1.1s reveal for property cards, room-page headers, neighborhood essays. The door is opened, the guest steps in.",
+      },
+      "lobby-ken-burns": {
+        css:
+          "0% { transform: scale(1.04) translate(0, 0); }\n" +
+          "100% { transform: scale(1.14) translate(-1.5%, -1%); }",
+        defaultDuration: 28000,
+        iteration: "infinite",
+        purpose:
+          "28s slow drift on hero property photography — Standard cinematic camera-push, lobby and rooftop tableaus breathing.",
+      },
+      "key-flicker": {
+        css:
+          "0%, 96%, 100% { opacity: 1; }\n" +
+          "97% { opacity: 0.7; }\n" +
+          "98% { opacity: 1; }\n" +
+          "99% { opacity: 0.85; }",
+        defaultDuration: 6000,
+        iteration: "infinite",
+        purpose:
+          "6s subtle flicker on a single brass-warm key-icon eyebrow — neon-sign-at-dusk reference, used once per page, never on more than one element.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Primary CTA is a serif italic text-link in velvet-terracotta (--primary), underline always visible — members-club register. " +
+      "The solid button is reserved for ONE 'Book a Room' hero CTA per page — ink-navy bg + cream-canvas text, 0.25rem radius, no shadow on the button itself. " +
+      "Secondary actions ('Tour the Property', 'Read the Neighborhood Guide') are tracked-uppercase text-links in Plus Jakarta Sans 500.",
+    card:
+      "Property/room cards: hairline top + bottom at foreground/10 plus soft card-soft lift, cream-room bg (one tier above canvas). " +
+      "Room number in JetBrains Mono small-caps eyebrow (Nº 412), room name in Cormorant italic display, square-footage/bed-count in mono row beneath. " +
+      "Internal padding p-8 lg:p-10. Hero property shot uses property-lift drop shadow, never card-soft.",
+    input:
+      "Booking form: border-bottom + thin all-around border (1px --border), cream-room bg, 0.25rem radius. " +
+      "Label above in tracked-uppercase Plus Jakarta small caps (letter-spacing 0.1em). Placeholder in muted-foreground italic serif. " +
+      "Focus is velvet-terracotta ring, 1px. Date pickers and guest-count steppers use the same hairline language.",
+    cta:
+      "Default CTA is serif italic text-link in velvet-terracotta with always-visible underline. " +
+      "The single 'Book a Room' hero CTA is the one solid-fill exception — ink-navy bg, cream-canvas text. " +
+      "Members'-only CTAs ('Member Login', 'Apply for Membership') use brass-warm tracked-uppercase text-link with optional key-flicker on the key icon.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/hyperminimal-mono/THEME.md

@@ -0,0 +1,91 @@
+# Design Direction — Hyperminimal-Mono
+
+## Ethos
+Müller-Brockmann grid · Vignelli reduction · Apple Notes restraint · Browser Company purity · Bauhaus origin
+
+## Feel
+Pure black on pure white. Helvetica everywhere — same family for display and body; size and weight are the only hierarchy tools. Grid-strict, one accent color used once per page. The discipline is reductive: every element must justify its existence; defaults are the design.
+
+## Reference brands
+- **Josef Müller-Brockmann** → Swiss-Style poster grid; *Grid Systems in Graphic Design*. The page is a module field, not a canvas.
+- **Massimo Vignelli** → NYC subway map, American Airlines identity. A handful of typefaces, a handful of colors, forever.
+- **Apple Notes** → restraint as default. The app has no opinion until you give it one.
+- **The Browser Company** → landing-site typographic purity. Type carries the page; chrome stays out of the way.
+- **Bauhaus** → origin. Form follows function; ornament is the enemy.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names a brand origin.
+
+Surface stack is **white** (background, card, popover, secondary). There is no surface differentiation — depth comes from **whitespace and 1px black rules**, never from fill tiers, never from shadows.
+
+Brand tokens: `--accent-red` (the one allowed color, used **once per page, never twice**), `--ink` (alias for the foreground black), `--paper` (alias for the background white). Primary is `0 0% 0%` — black is the primary; the accent-red is reserved for one moment.
+
+## Typography
+- **Display:** Helvetica Neue (Inter as Helvetica substitute when Helvetica is unavailable). Same family as body.
+- **Body:** Helvetica Neue / Inter, **16px**, line-height **1.5** (16 × 1.5 = 24, lands on the grid).
+- **Mono:** Berkeley Mono. Restrained — used **only** for code and metadata (timestamps, IDs, hashes). Never for body, never for headings.
+
+Hierarchy is built from **size and weight only** — never from face change, never from italic display, never from color. H1 uses `clamp(2rem, 5vw, 3.5rem)`. Tracking is `-0.01em` on headings, `0` everywhere else. Font features: `"kern", "tnum"`.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-8` — Vignelli grid module, generous but disciplined.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** **4 8 12 16 24 32 48 64 96**. Powers of 4 or multiples that fit the grid — nothing else. No `2px`, no `10px`, no `40px`.
+
+## Color
+No hex anywhere. **Pure black (`0 0% 0%`) and pure white (`0 0% 100%`) are the language** — the opposite of editorial's "no pure black, no pure white" rule. The single `--accent-red` (`0 100% 50%`) is the Müller-Brockmann poster red and the only allowed third color. Use it **once per page**: one primary CTA, or the link-visited state, or one rule. Never twice. Never as a card border, never as a heading color, never in imagery.
+
+`--muted` (`0 0% 96%`) and `--muted-foreground` (`0 0% 40%`) exist for code blocks and secondary text only — they are the only grays.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills are disallowed (`pillsAllowed: false`) — pills are anti-grid. Status uses rectangles or plain text. Vignelli and Müller-Brockmann never rounded a corner.
+
+## Shadows
+**None.** The shadow utilities object is intentionally empty. Depth is forbidden; everything sits flat on the grid. Separation comes from whitespace and 1px black rules.
+
+## Motion
+Single keyframe: `fade-in` (100ms, opacity only — **no transform**). 100ms is just enough to avoid harsh paint; anything more is performance. No marquee, no parallax, no ambient motion (`loop: 0`, `ambient: 0`). Motion is anti-Swiss; what little exists is apologetic.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored.
+
+## Component patterns
+- **Buttons:** plain rectangle. Default = 1px black border + black text on white, no fill, no hover lift, no rounded corners. Hover = invert (black bg, white text), instant. Tertiary = underlined link, black, no border. The `--accent-red` filled rectangle is reserved for **one primary action per page** — never repeated.
+- **Cards:** no card chrome. Content sits directly on the page, separated by whitespace and a single top hairline rule when grouping is required. No fill, no shadow, no rounded corners. Padding grid-aligned (16/24/32).
+- **Inputs:** 1px black border, sharp corners, white background. Label above (not floating). Focus = 1px inset black ring, no glow. Placeholders state expected format only — no clever copy.
+- **CTAs:** the default CTA is a plain rectangle button. The accent-red filled rectangle is the **one** marketing moment per page. There is no second.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they are established. If a family ever needs a second color, the rule is broken — escalate before adding.
+
+## Details
+- **Selection:** `hsl(var(--foreground))` background, `hsl(var(--background))` text — pure inversion.
+- **Focus ring:** `1px solid hsl(var(--ring))` (black). No offset, no glow.
+- **Scrollbar:** OS default (`auto`). The designer does not redecorate browser chrome.
+
+## Recommended rich media
+
+**Cover.** A single bold typographic image as hero; a single editorial photo (when one is used) at exact **1:1 or 16:9**, no other ratios; geometric illustrations in pure black on white, in the Müller-Brockmann grid-poster tradition.
+
+**AI tool recommendations.**
+- **Midjourney / Flux** for hero imagery — prompts like *"Müller-Brockmann Swiss design poster, pure geometric, Helvetica typography, black on white"*; for photography, *"Helmut Newton black and white, high contrast, single subject"*.
+- **Recraft** for illustration — *"Vignelli geometric pictogram, single color, flat"*.
+- **Or just use typography itself as the hero** — large Helvetica text, no image needed. This is often the right answer.
+
+**Aspect ratios.** 1:1 or 16:9. Nothing else.
+
+**Color in imagery.** Black and white **only**. The accent-red appears in UI chrome — never in images.
+
+**What to avoid.** Gradients. AI-photorealistic images. Video (motion is anti-Swiss). 3D renders. Decorative SVG. Anything color-saturated. Stock photography with people smiling at laptops.
+
+**Honest constraint.** A hyperminimal-mono site is often best served by **zero images**. Let the grid and the type carry it. If you are reaching for an image to fill space, the layout is the problem — fix the layout.
+
+**Accessibility.** Alt text must be functional and describe what the image communicates. If an image is purely decorative, **remove it** rather than `aria-hidden`-ing it — decoration is the thing this direction rejects.
+
+## 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/hyperminimal-mono/tokens.ts

@@ -0,0 +1,150 @@
+import type { Direction } from "../schema";
+
+export const hyperminimalMono: Direction = {
+  name: "hyperminimal-mono",
+  ethos:
+    "Müller-Brockmann grid · Vignelli reduction · Apple Notes restraint · Browser Company purity · Bauhaus origin",
+  references: [
+    { brand: "Josef Müller-Brockmann", trait: "Swiss-Style grid posters, Grid Systems book" },
+    { brand: "Massimo Vignelli", trait: "NYC subway map, American Airlines identity" },
+    { brand: "Apple Notes", trait: "default-is-the-design restraint" },
+    { brand: "The Browser Company", trait: "landing-site typographic purity" },
+    { brand: "Bauhaus", trait: "form-follows-function origin" },
+  ],
+  feel:
+    "Pure black on pure white. Helvetica everywhere — same family for display and " +
+    "body, size and weight are the only hierarchy tools. Grid-strict, one accent color " +
+    "used once per page. The discipline is reductive: every element must justify its " +
+    "existence; defaults are the design.",
+
+  fonts: {
+    display: {
+      family: "Helvetica Neue",
+      fallback: ["Inter", "Helvetica", "Arial", "system-ui", "-apple-system", "sans-serif"],
+      from: "Müller-Brockmann/Vignelli Swiss canon — size and weight do the hierarchy, not face change",
+      googleFont: "Inter",
+      weights: [400, 500, 700],
+    },
+    body: {
+      family: "Helvetica Neue",
+      fallback: ["Inter", "Helvetica", "Arial", "system-ui", "-apple-system", "sans-serif"],
+      from: "same family as display — Bauhaus/Vignelli reduction: one face, no decoration",
+      googleFont: "Inter",
+      weights: [400, 500, 700],
+    },
+    mono: {
+      family: "Berkeley Mono",
+      fallback: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Berkeley Mono — technical precision; restrained, used only for code and metadata",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",      // Helvetica at large sizes wants a hair tighter
+    bodyTracking: "0",               // Vignelli neutrality — no character spacing tricks
+    fontFeatureSettings: '"kern", "tnum"',
+    h1ScaleClamp: "clamp(2rem, 5vw, 3.5rem)",  // hierarchy by weight, not by extreme scale
+    bodyBaseSize: "1rem",            // 16px — Apple Notes default, no clever choice
+    bodyLineHeight: "1.5",           // grid-friendly; 16 × 1.5 = 24 lands on the 4/8 grid
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "pure white — not paper-cream, not off-white; Browser Company purity" },
+    foreground: { hsl: "0 0% 0%", from: "pure black — Müller-Brockmann ink" },
+    card: { hsl: "0 0% 100%", from: "no card differentiation; surface is the page" },
+    popover: { hsl: "0 0% 100%", from: "same as page; depth is forbidden" },
+    primary: { hsl: "0 0% 0%", from: "black is the primary action color; accent-red is reserved for one moment" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on black" },
+    secondary: { hsl: "0 0% 100%", from: "no secondary surface — differentiate by spacing and rule lines" },
+    secondaryForeground: { hsl: "0 0% 0%", from: "black, always" },
+    muted: { hsl: "0 0% 96%", from: "Apple Notes faintest gray — used only for code blocks and inline mono cells" },
+    mutedForeground: { hsl: "0 0% 40%", from: "Vignelli secondary text — readable, never decorative" },
+    accent: { hsl: "0 0% 96%", from: "hover surface; same as muted — restraint over distinction" },
+    accentForeground: { hsl: "0 0% 0%", from: "black on hover" },
+    border: { hsl: "0 0% 0%", from: "pure black 1px rule — Swiss grid line, never softened to gray" },
+    input: { hsl: "0 0% 0%", from: "same as border; inputs are hairlines on the grid" },
+    ring: { hsl: "0 0% 0%", from: "black focus ring — no accent leakage" },
+    destructive: { hsl: "0 100% 50%", from: "same single red as accent-red; destructive shares the one allowed color" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on red" },
+    brand: {
+      "accent-red": {
+        hsl: "0 100% 50%",
+        from: "Müller-Brockmann poster red — the one allowed color, used once per page, never twice",
+      },
+      ink: { hsl: "0 0% 0%", from: "alias for the foreground black — Bauhaus ink" },
+      paper: { hsl: "0 0% 100%", from: "alias for the background white — Browser Company purity" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96],   // powers/multiples of 4 only — grid-strict
+    containerMax: "max-w-5xl",                    // 1024px — generous but disciplined; Vignelli grid module
+    containerPadding: "px-6 lg:px-8",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",      // grid-aligned (96/64/128 multiples)
+      default: "py-16 lg:py-24",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0",                       // sharp corners — Vignelli/Müller-Brockmann never rounded
+    pillsAllowed: false,             // pills are anti-grid; status uses rectangles or text
+  },
+
+  shadows: {
+    style: "none",                   // depth is forbidden; everything sits flat on the grid
+    utilities: {},                   // intentionally empty — no shadow utilities ship
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 100,                   // instant — just enough to avoid harsh appearance
+      loop: 0,                       // no loops — motion is anti-Swiss
+      ambient: 0,                    // no ambient motion, ever
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 100,
+        iteration: "once",
+        purpose:
+          "the only keyframe — opacity only, no transform. 100ms is just enough to avoid harsh paint.",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Plain rectangle. Default = 1px black border + black foreground text, no fill, no hover lift, no rounded corners. " +
+      "Hover = invert (black bg, white text), no transition fanfare. " +
+      "Tertiary = underlined link, black, no border. " +
+      "The accent-red is used ONLY for one 'buy' or primary action button per page, and the link-visited state. " +
+      "Never as a card border, never as a heading color.",
+    card:
+      "No card chrome. Content sits directly on the page, separated by whitespace and a single top hairline rule when grouping is needed. " +
+      "No fill, no shadow, no rounded corners. Padding is grid-aligned (16/24/32).",
+    input:
+      "1px black border, sharp corners, white background. Label sits above (not floating). " +
+      "Focus = 1px black ring on the inside (inset), no glow. No placeholder cleverness — placeholders state expected format only.",
+    cta:
+      "Default CTA is a plain rectangle button (border + text). " +
+      "The accent-red filled rectangle is reserved for the single primary action per page — never repeated. " +
+      "Marketing flourish does not exist in this language.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--foreground))",        // black selection — pure inversion
+    selectionFg: "hsl(var(--background))",        // white text on black
+    focusRing: "1px solid hsl(var(--ring))",      // 1px black, no offset, no glow
+    scrollbarStyle: "auto",                       // OS default; designer does not redecorate the chrome
+  },
+};