@stylecrib/cli 0.3.1 → 0.3.3

package/themes/beauty-luxury/tokens.ts

@@ -0,0 +1,178 @@
+import type { Direction } from "../schema";
+
+// Note: "beauty-luxury" is not yet in the Direction["name"] enum.
+// The schema is closed; until it is extended this file casts the name.
+// All other fields fully validate.
+
+export const beautyLuxury: Direction = {
+  name: "beauty-luxury" as Direction["name"],
+  ethos:
+    "La Mer cream-and-jade vault · Augustinus Bader clinical-restraint cream · Sisley apothecary serif · Guerlain Orchidée Impériale gilded glass · Vintner's Daughter botanical alchemy",
+  references: [
+    { brand: "La Mer", trait: "deep ocean cream jar + jade green seal + serif logotype" },
+    { brand: "Augustinus Bader", trait: "clinical white-on-cream + restrained navy + TFC8 minimalism" },
+    { brand: "Sisley Paris", trait: "old-world apothecary serif + cream + gold-leaf detailing" },
+    { brand: "Guerlain Orchidée Impériale", trait: "gilded glass jar + ivory + champagne gold + heritage seal" },
+    { brand: "Vintner's Daughter", trait: "botanical alchemy + ivory paper + sage + single-product reverence" },
+  ],
+  feel:
+    "Restrained luxury cosmetic. Ivory and cream surfaces hold a single SKU like a museum vitrine — " +
+    "champagne gold appears only on hairlines and seals, never as a fill. Italic serif tells the " +
+    "ingredient story; small-caps mono carries the technical lineage. The page reads like a Guerlain " +
+    "boutique window at dusk: ceremonial, withholding, expensive in its silence.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Garamond",
+      fallback: ["EB Garamond", "Garamond", "Didot", "Georgia", "serif"],
+      from: "Sisley/Guerlain old-world apothecary serif — high-contrast, italic-first, ceremonial",
+      googleFont: "Cormorant+Garamond",
+      weights: [300, 400, 500],
+    },
+    body: {
+      family: "Cormorant",
+      fallback: ["EB Garamond", "Iowan Old Style", "Georgia", "serif"],
+      from: "La Mer/Vintner's Daughter body serif — luxury beauty rarely uses sans for body copy",
+      googleFont: "Cormorant",
+      weights: [400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["Berkeley Mono", "ui-monospace", "monospace"],
+      from: "ingredient INCI, lot numbers, technical lineage — small-caps tracked-out instrument feel",
+      googleFont: "JetBrains+Mono",
+      weights: [400],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.005em",         // high-contrast serif barely tightened — luxury sits near zero
+    bodyTracking: "0.01em",
+    fontFeatureSettings: '"liga", "dlig", "onum", "kern"',  // old-style figures for prices, ligatures on
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1.0625rem",          // 17px — slow reading column for ingredient stories
+    bodyLineHeight: "1.75",             // generous — ceremonial pacing
+  },
+
+  colors: {
+    background: { hsl: "40 28% 95%", from: "Guerlain ivory — warm paper, slightly toasted, heritage feel" },
+    foreground: { hsl: "30 15% 16%", from: "Sisley deep earth ink — never pure black, holds gold accent" },
+    card: { hsl: "40 32% 97%", from: "lighter ivory — card lifts off the bg by half a tone, vitrine effect" },
+    popover: { hsl: "40 32% 97%", from: "same as card — popovers wear the lifted-ivory tone" },
+    primary: { hsl: "38 38% 52%", from: "Guerlain champagne gold — the canonical luxury accent, restrained" },
+    primaryForeground: { hsl: "40 28% 95%", from: "ivory on champagne gold — never white" },
+    secondary: { hsl: "40 24% 92%", from: "deeper ivory — secondary surface, one tone off bg" },
+    secondaryForeground: { hsl: "30 15% 16%", from: "earth ink on deeper ivory" },
+    muted: { hsl: "40 18% 88%", from: "stone-cream — muted backgrounds for technical-lineage zones" },
+    mutedForeground: { hsl: "30 10% 44%", from: "earth-gray — captions, ingredient names, lot numbers" },
+    accent: { hsl: "155 20% 88%", from: "La Mer jade-pale — accent tint, single-color counterpoint to gold" },
+    accentForeground: { hsl: "155 32% 22%", from: "deep jade on its pale tint" },
+    border: { hsl: "38 22% 80%", from: "warm hairline — visible on ivory, never harsh; champagne adjacent" },
+    input: { hsl: "38 22% 80%", from: "same as border — single hairline language" },
+    ring: { hsl: "38 38% 52%", from: "champagne gold, focus only — the luxury accent" },
+    destructive: { hsl: "8 50% 42%", from: "muted oxblood — recall/discontinued, never alarm red" },
+    destructiveForeground: { hsl: "40 28% 95%", from: "ivory on oxblood" },
+    brand: {
+      ivory: { hsl: "40 28% 95%", from: "= background; Guerlain heritage ivory paper" },
+      "ivory-deep": { hsl: "40 24% 92%", from: "secondary ivory — one tone deeper, panel surface" },
+      gold: { hsl: "38 38% 52%", from: "= primary; champagne gold — Guerlain Impériale seal, single luxury mark" },
+      "gold-deep": { hsl: "36 42% 38%", from: "darker champagne — engraved seal, hover, gradient anchor" },
+      jade: { hsl: "155 28% 32%", from: "La Mer deep jade — the single saturated counterpoint to gold" },
+      "jade-pale": { hsl: "155 20% 88%", from: "= accent; pale jade for restrained ingredient-tag tint" },
+      navy: { hsl: "215 35% 22%", from: "Augustinus Bader clinical navy — used once, on the lot-number block" },
+      ink: { hsl: "30 15% 16%", from: "= foreground; warm earth-ink, semantic for all body copy" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160, 192],   // sparse — luxury withholding
+    containerMax: "max-w-4xl",          // narrow — boutique vitrine column, never splash
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-32 pb-24 lg:pt-48 lg:pb-32",
+      default: "py-24 lg:py-40",
+      tight: "py-16 lg:py-24",
+    },
+  },
+
+  radius: {
+    base: "0",                           // sharp — La Mer, Guerlain, Sisley do not round; rounding reads app
+    pillsAllowed: false,                 // pills are app-language; tags are hairline-bounded small-caps
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "shadow-vitrine":
+        "0 1px 0 hsl(38 22% 78%), 0 24px 60px hsl(30 15% 16% / 0.08)",
+      "shadow-gold-hairline":
+        "inset 0 0 0 1px hsl(38 38% 52% / 0.45)",
+      "shadow-quiet":
+        "0 1px 0 hsl(38 22% 80%)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1400,                     // slow — ceremonial pacing
+      loop: 0,                          // no looped motion
+      ambient: 28000,                   // single ambient ken-burns on hero product still
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1400,
+        iteration: "once",
+        purpose: "section entrance — slow, ceremonial, never abrupt",
+      },
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "ingredient-story paragraph and product-shot entrance — opacity only",
+      },
+      "gold-sheen": {
+        css:
+          "0% { background-position: -200% 0; }\n" +
+          "100% { background-position: 200% 0; }",
+        defaultDuration: 4800,
+        iteration: "infinite",
+        purpose: "gold hairline-rule sheen on seal/monogram only — never on text, never on multiple elements",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text-link CTAs by default — earth-ink with hairline gold underline appearing on hover. " +
+      "Solid gold-fill is reserved for the single primary action per page (Reserve, Discover). " +
+      "No secondary solid buttons. No pills, no chips. Destructive is muted-oxblood text-link.",
+    card:
+      "No card chrome by default. When grouping is essential, hairline 1px gold-tinted border + " +
+      "ivory-deep bg + shadow-vitrine — a single vitrine per page. Internal padding p-10 lg:p-16. " +
+      "Title in Cormorant italic; body in Cormorant 400.",
+    input:
+      "Border-bottom only, 1px gold at 45% opacity. Ivory bg, no full box. " +
+      "Label sits above in small-caps mono with letter-spacing 0.28em. " +
+      "Focus = gold 1px underline, no glow. Placeholder italic, lowercase.",
+    cta:
+      "Primary CTA is a text-link with hairline gold underline. The single hero action per page " +
+      "may use a gold-fill rectangle with ivory text — once, never twice. All other actions are text-links.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--gold) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/bento-modular/BUILD_BRIEF.md

@@ -0,0 +1,171 @@
+# Bento-Modular — Build Brief
+
+> The contract this theme ships with. Read at commit time by the
+> brief-enforcer subagent; handed to Claude Code via the Copy-for-Claude
+> button on the theme detail page.
+
+---
+
+## MANDATORY BUILD DIRECTIVE — you MUST
+
+1. **Hold the dark ground at `#0F0F12`** on dark canvas — cool
+   near-black, 240° hue bias. Tile surface `#1A1A1F`. Hover surface
+   `#22222A`. Never pure black. On light canvas: paper `#FAFAFA`,
+   tile `#FFFFFF`, hover `#F0F0F0`.
+2. **Surface luminance shift is the boundary.** Tiles have NO
+   borders and NO drop shadows. The boundary is the ~+3-5%
+   luminance step between bg and tile bg. This is the whole point
+   of the register.
+3. **Set tiles at `borderRadius: 12`** (12px). Never 4px, never 20px.
+   12px is the Apple-iOS card radius that reads as premium-modern.
+4. **Asymmetric bento — six tiles at VARIED spans.** Use
+   `grid-template-columns: repeat(4, 1fr)` + `grid-auto-flow: dense`.
+   Tile spans are: `2×1`, `2×1`, `1×1`, `1×1`, `2×1`, `4×1`. NEVER
+   render 6 tiles all at the same size — that's the "Bootstrap card
+   grid" failure mode this theme was built to refuse.
+5. **Body font Hanken Grotesk / Inter, display font Neue Montreal.**
+   Mono font IBM Plex Mono ONLY for numeric metrics, CSS/code
+   samples, and token specimen labels. Never mono for decorative
+   headings.
+6. **Tabular figures** on every number in a metric tile —
+   `fontFeatureSettings: '"tnum"'`. Non-tabular metric numerals
+   break the register.
+
+---
+
+## SLOP-BLOCKLIST — you MUST NOT
+
+- **Same-size tile grid.** If every tile has `gridColumn: span 1`
+  the theme has failed. Fingerprint: all tiles with identical
+  `gridColumn` and `gridRow` values.
+- **`border: 1px solid` on tiles.** Depth is surface-luminance, not
+  hairlines. The ONE exception: the palette specimen's `#0F0F12`
+  sample swatch gets a hairline to be visible against the tile bg.
+- **`boxShadow: 0 4px ...` or `shadow-md`** on tiles. Solid dropshadow
+  is banned. On the hover surface change from `#1A1A1F` → `#22222A`
+  IS the interaction.
+- **Mono-caps decorative eyebrows** (`BENTO / SPECIMEN`, `THE PRODUCT`,
+  `CAPABILITIES`). CSS fingerprint: `textTransform: uppercase` +
+  `letterSpacing ≥ 0.14em` at `fontSize < 20px`. NOT permitted.
+  Tile inner labels use the `TileEyebrow` mono style in sentence-case
+  10px letter-spacing 0.20em uppercase is banned — refactor to
+  sentence-case at 12px.
+- **`TRUSTED BY` / `AS SEEN IN` / `COMPOSED BY TEAMS AT` wordmark
+  strips.** The `Composed by teams at Linear/Vercel/etc.` slop pattern
+  is banned.
+- **Dot-metadata rows** (`ISSUE 04 · CHAPTER 03`, `EST. 2019`,
+  `12 MIN READ`).
+- **3-pillar identical feature-card grids.** Bento IS the answer to
+  the 3-pillar grid; don't devolve back.
+- **Purple/indigo/pink gradient backgrounds** on the bg or tiles.
+  The register is single-color surface + accent, no gradients.
+- **Ticker bars**, cycling headline words, auto-advancing sliders.
+- **Vague trust copy:** hand-crafted, thoughtfully-made, considered.
+- **Roman-numeral copyright** (`MMXXVI`).
+- **Attribution of influence in visible copy** — Apple, Vercel are
+  studied but never NAMED in slug, copy, or UI.
+
+---
+
+## CHROME INVENTORY — the allow-list
+
+- **Sticky palette + canvas picker strip** — meta-UI, sentence-case
+  body font.
+- **Masthead nav** — brand square (accent bg, 12px display) +
+  wordmark ("Facet" in Neue Montreal 600 at 17px, tracking -0.02em)
+  + 4 nav items (body font 14px) + accent-filled "Start free" pill
+  (radius 8px, accent bg + bg-color text).
+- **Hero display H1** — Neue Montreal 600 at `clamp(3rem, 7vw, 6rem)`,
+  tracking -0.035em, one line-break, two lines max (`Six tiles.` +
+  `One idea each.`).
+- **Asymmetric 6-tile bento** — 4-col grid at `grid-template-columns:
+  repeat(4, 1fr)`, gap 28px, `grid-auto-flow: dense`. Six tiles at
+  spans `2×1 / 2×1 / 1×1 / 1×1 / 2×1 / 4×1`.
+- **Tile primitive** — `background: #1A1A1F`, `borderRadius: 12`,
+  `padding: 24`, `display: flex / flexDirection: column`,
+  `minHeight: 180`. Hover surface shifts to `#22222A`. NO border,
+  NO shadow.
+- **Big-metric tile** — `<TileEyebrow>` in mono 10px sentence-case
+  color mute + display metric numeral in mono 92px tabular figures.
+- **Chart-mini tile** — 8 bars, flex end-aligned, last bar in accent
+  color; delta below in `#30D158` (success green) mono 18px tabular.
+- **Code-sample tile** — `<pre>` in IBM Plex Mono 11px
+  line-height 1.5, ink color, inline `<code>` for the highlighted
+  clause. Body inside tile uses `TileFooter` style (12px body font).
+- **Full-bleed photo tile** — 2×1 or 4×1 span, `objectFit: cover`,
+  `borderRadius: 12`. NO caption card.
+- **Palette specimen tile (4×1)** — bottom-full-width row showing
+  the 5 palette swatches with hex + label. The token label uses
+  mono 10px sentence-case (not caps).
+- **Feature grid (2×2)** — 4 numbered features (`01`-`04` in mono
+  accent 12px), each in its own tile.
+- **Testimonial + photo split** — 2-col, left column italic display
+  quote + attribution, right column photo tile.
+- **3-tier pricing card row** — three tiles (radius 12px), middle
+  tier "featured" is accent-filled bg with bg-color text and
+  contrast CTA.
+- **Bottom CTA** — center-aligned display H2 (72px) + accent-filled
+  button + one-line lede.
+- **Footer** — 4-col grid (brand + 3 link columns), copyright line
+  in body 12px muted.
+
+---
+
+## SIGNATURE MOVES — verbs, not adjectives
+
+- **Vary tile spans across the row.** Never 6 identical tiles.
+  Layout: `[2×1] [2×1]` / `[1×1] [1×1] [2×1]` / `[4×1]`. This is
+  what makes the register bento and not card-grid.
+- **Shift tile background on hover from `#1A1A1F` to `#22222A`** —
+  200ms ease. This is the ONLY interaction on the tile. No
+  translate, no shadow, no border. Surface luminance IS the feedback.
+- **Set metric numerals in IBM Plex Mono at 92px with tabular
+  figures.** The big "6" in the hero tile IS the theme's signature.
+  Non-tabular figures break the alignment.
+- **Use `grid-auto-flow: dense`** to pack tiles. Without it, the
+  asymmetric spans leave holes.
+- **Accent the last bar in a mini-chart with the palette accent.**
+  Non-last bars in `#2F2F38` (neutral tile-mute). This is how the
+  mini-chart reads as "growth" without a text label.
+- **Draw palette swatches as filled 20×20 squares with a 4px
+  radius** — matches the tile radius scaled down. Hex in mono
+  11px, label in mono 9px sentence-case.
+
+---
+
+## COLOR TOKENS
+
+**Dark canvas** — `bg: #0F0F12` / `tileBg: #1A1A1F` / `tileHoverBg:
+#22222A` / `ink: #F5F5F7` / `muted: #8B8B96` / `success: #30D158`.
+
+**Light canvas** — `bg: #FAFAFA` / `tileBg: #FFFFFF` / `tileHoverBg:
+#F0F0F0` / `ink: #0F0F12` / `muted: #6E6E7A` / `success: #0E8A3E`.
+
+**Accent** — per palette variant (10 product-brand hues; default
+`electric` `#0A84FF` on dark, `#0A66D9` on light).
+
+---
+
+## TYPOGRAPHY
+
+- **Display:** Neue Montreal (fallback Hanken Grotesk, Inter). Weight
+  600, tracking -0.03em on hero, -0.02em on section H2.
+- **Body:** Hanken Grotesk (fallback Inter), 15-17px, line-height
+  1.5-1.55.
+- **Mono:** IBM Plex Mono, 10-13px for metric numerals + code
+  specimens + palette hex + token labels. NEVER for decorative
+  section eyebrows.
+
+---
+
+## SECTION SKELETON
+
+1. Sticky palette + canvas picker.
+2. Masthead nav (brand + 4 items + accent CTA).
+3. Hero — asymmetric 6-tile bento (the signature move).
+4. Product hero photo — full-bleed 16:9.
+5. Feature grid (2×2 of numbered feature tiles).
+6. Testimonial + photo split.
+7. 3-tier pricing.
+8. Bottom CTA — big display + accent button.
+9. Footer.

package/themes/bento-modular/THEME.md

@@ -0,0 +1,80 @@
+# Bento Modular
+
+> Asymmetric grid of self-contained tiles — mixed sizes, generous gutters, one idea per module.
+
+**Slug:** `bento-modular` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+Apple iPhone product pages, Vercel dashboard, Linear /pricing, Notion inbox, Arc browser feature grids.
+
+## Signature move
+
+Asymmetric grid of tiles at varied spans — a 4×4 or 6×6 conceptual grid
+where individual tiles span 2×1, 2×2, 3×1, 1×2, etc. Each tile carries
+ONE idea (a metric, a headline, a single product feature, a chart, a
+quote). Corners are subtly rounded (12px). Gutters are generous (24-32px).
+No tile has a border — the surface luminance shift IS the boundary.
+
+## Palette
+
+- **bg:** `#0F0F12`
+- **surface:** `#1A1A1F`
+- **ink:** `#F5F5F7`
+- **accent:** `#0A84FF`
+- **secondary:** `#8B8B96`
+- **signal:** `#30D158`
+
+## Typography
+
+- **Display:** Neue Montreal (paid) or Hanken Grotesk (free) — 600 weight for tile headlines at 24-36px, tight tracking -0.02em
+- **Body:** Hanken Grotesk — 400, 14-15px, line-height 1.5. Quiet, doesn't compete with the tile composition.
+- **Mono:** IBM Plex Mono — for metric numerals (tile stats), timestamps, keyboard shortcuts. 13px.
+- **Scale:** 1.25 (major third — controlled contrast so tiles feel varied without shouting)
+
+## Motion
+
+Tile hover reveals a soft luminance lift (bg goes from #1A1A1F to
+#22222A) with a 200ms ease. No card scale/translate on hover. Optional:
+a single featured tile can carry ONE small motion moment (chart animating
+in, number counter). Never more than one animated tile per screen.
+
+
+## Imagery
+
+Product photography in individual tiles is fine — hero-crop style, filling
+the tile. Charts and data viz can occupy their own tile. No decorative
+imagery filling gutters. No background pattern behind tiles — the dark
+ground is the composition.
+
+## Best for
+
+- Product landing pages (Apple-style feature bentos)
+- Analytics dashboards showcasing multiple metrics
+- Feature-highlight pages for SaaS products
+- Pitch decks — one bento per section
+- Portfolio grids showing selected work at varied sizes
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Uniform grid of same-size cards — that's a Bootstrap card grid, not bento
+- Bordered tiles with 1px hairlines — the surface shift IS the boundary; borders read as cramped
+- shadow-md or drop-shadow on tiles — kills the flat-luminance composition
+- More than one animated tile per viewport — dilutes the featured moment
+- Cramming tiles at consistent 240×240 sizes — negates the whole 'varied span' signature
+- Rounded corners greater than 16px — bento tiles are subtly rounded (12px), not pill-shaped
+- Secondary accent color beyond the one dominant hue (#0A84FF) plus optional #30D158 for success-state semantic ONLY
+- Filled backgrounds inside tiles beyond the base surface color — no gradient tiles, no colored tiles
+- Tile hover states beyond the luminance lift (no scale, no translate, no shadow bloom)
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757)
+- void+acid (near-black bg + single bright acid-green or vermilion accent)
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)
+- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- bento-as-cards (same-size tiles + hairline borders + shadow-md — that's the safe SaaS card grid the bento was supposed to escape)
+- shadow-bento (drop-shadows doing the layer separation instead of surface luminance — kills the composition)

package/themes/bento-modular/tailwind.snippet.ts

@@ -0,0 +1,17 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: bento-modular
+export const bentoModularTailwindExtend = {
+  colors: {
+    bg: "#0F0F12",
+    surface: "#1A1A1F",
+    ink: "#F5F5F7",
+    accent: "#0A84FF",
+    secondary: "#8B8B96",
+    signal: "#30D158",
+  },
+  fontFamily: {
+    display: ["Neue Montreal (paid) or Hanken Grotesk (free) — 600 weight for tile headlines at 24-36px, tight tracking -0.02em"],
+    body: ["Hanken Grotesk — 400, 14-15px, line-height 1.5. Quiet, doesn't compete with the tile composition."],
+    mono: ["IBM Plex Mono — for metric numerals (tile stats), timestamps, keyboard shortcuts. 13px."],
+  },
+};

package/themes/bento-modular/theme.yml

@@ -0,0 +1,83 @@
+# Base 31 Bento Modular — Family D, Contemporary Web.
+#
+# Per BESPOKE_THEME_SYSTEM.md #31: Apple-style bento grid. Mixed-size
+# tiles at varied spans, each a self-contained module, one idea per tile,
+# generous gutters. NOT a uniform card grid — asymmetry is the register.
+#
+# Theme #3 through the v2 harness. Third theme in Family D (signal-dark
+# survivor as Dark Premium anchor; kinetic-headline as Base 32; this is
+# Base 31). Precedent for bento authoring: team-kanban survivor.
+
+name: Bento Modular
+concept: Asymmetric grid of self-contained tiles — mixed sizes, generous gutters, one idea per module.
+influence: Apple iPhone product pages, Vercel dashboard, Linear /pricing, Notion inbox, Arc browser feature grids.
+
+family: D
+base_number: 31
+render_url: http://localhost:5173/themes/bento-modular
+
+surface: web
+
+typography:
+  display: Neue Montreal (paid) or Hanken Grotesk (free) — 600 weight for tile headlines at 24-36px, tight tracking -0.02em
+  body: Hanken Grotesk — 400, 14-15px, line-height 1.5. Quiet, doesn't compete with the tile composition.
+  mono: IBM Plex Mono — for metric numerals (tile stats), timestamps, keyboard shortcuts. 13px.
+  scale: 1.25 (major third — controlled contrast so tiles feel varied without shouting)
+
+palette:
+  bg: "#0F0F12"
+  surface: "#1A1A1F"
+  ink: "#F5F5F7"
+  accent: "#0A84FF"
+  secondary: "#8B8B96"
+  signal: "#30D158"
+
+density: balanced
+
+motion: |
+  Tile hover reveals a soft luminance lift (bg goes from #1A1A1F to
+  #22222A) with a 200ms ease. No card scale/translate on hover. Optional:
+  a single featured tile can carry ONE small motion moment (chart animating
+  in, number counter). Never more than one animated tile per screen.
+
+signature: |
+  Asymmetric grid of tiles at varied spans — a 4×4 or 6×6 conceptual grid
+  where individual tiles span 2×1, 2×2, 3×1, 1×2, etc. Each tile carries
+  ONE idea (a metric, a headline, a single product feature, a chart, a
+  quote). Corners are subtly rounded (12px). Gutters are generous (24-32px).
+  No tile has a border — the surface luminance shift IS the boundary.
+
+imagery: |
+  Product photography in individual tiles is fine — hero-crop style, filling
+  the tile. Charts and data viz can occupy their own tile. No decorative
+  imagery filling gutters. No background pattern behind tiles — the dark
+  ground is the composition.
+
+best_for:
+  - Product landing pages (Apple-style feature bentos)
+  - Analytics dashboards showcasing multiple metrics
+  - Feature-highlight pages for SaaS products
+  - Pitch decks — one bento per section
+  - Portfolio grids showing selected work at varied sizes
+
+avoid:
+  - "Uniform grid of same-size cards — that's a Bootstrap card grid, not bento"
+  - "Bordered tiles with 1px hairlines — the surface shift IS the boundary; borders read as cramped"
+  - "shadow-md or drop-shadow on tiles — kills the flat-luminance composition"
+  - "More than one animated tile per viewport — dilutes the featured moment"
+  - "Cramming tiles at consistent 240×240 sizes — negates the whole 'varied span' signature"
+  - "Rounded corners greater than 16px — bento tiles are subtly rounded (12px), not pill-shaped"
+  - "Secondary accent color beyond the one dominant hue (#0A84FF) plus optional #30D158 for success-state semantic ONLY"
+  - "Filled backgrounds inside tiles beyond the base surface color — no gradient tiles, no colored tiles"
+  - "Tile hover states beyond the luminance lift (no scale, no translate, no shadow bloom)"
+
+banned_defaults:
+  # Global blocklist from BESPOKE_THEME_SYSTEM.md
+  - "claude-cream (#F4F1EA + serif + #D97757)"
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent)"
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)"
+  - "tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)"
+  - "uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)"
+  # Base-specific
+  - "bento-as-cards (same-size tiles + hairline borders + shadow-md — that's the safe SaaS card grid the bento was supposed to escape)"
+  - "shadow-bento (drop-shadows doing the layer separation instead of surface luminance — kills the composition)"

package/themes/bento-modular/tokens.ts

@@ -0,0 +1,27 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "bento-modular",
+  family: "D",
+  base: "31",
+  palette: {
+    "bg": "#0F0F12",
+    "surface": "#1A1A1F",
+    "ink": "#F5F5F7",
+    "accent": "#0A84FF",
+    "secondary": "#8B8B96",
+    "signal": "#30D158"
+  },
+  typography: {
+    "display": "Neue Montreal (paid) or Hanken Grotesk (free) — 600 weight for tile headlines at 24-36px, tight tracking -0.02em",
+    "body": "Hanken Grotesk — 400, 14-15px, line-height 1.5. Quiet, doesn't compete with the tile composition.",
+    "mono": "IBM Plex Mono — for metric numerals (tile stats), timestamps, keyboard shortcuts. 13px.",
+    "scale": "1.25 (major third — controlled contrast so tiles feel varied without shouting)"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Tile hover reveals a soft luminance lift (bg goes from #1A1A1F to\n#22222A) with a 200ms ease. No card scale/translate on hover. Optional:\na single featured tile can carry ONE small motion moment (chart animating\nin, number counter). Never more than one animated tile per screen.\n",
+  signature: "Asymmetric grid of tiles at varied spans — a 4×4 or 6×6 conceptual grid\nwhere individual tiles span 2×1, 2×2, 3×1, 1×2, etc. Each tile carries\nONE idea (a metric, a headline, a single product feature, a chart, a\nquote). Corners are subtly rounded (12px). Gutters are generous (24-32px).\nNo tile has a border — the surface luminance shift IS the boundary.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/bookstore-indie/THEME.md

@@ -0,0 +1,78 @@
+# Design Direction — Bookstore-Indie
+
+## Ethos
+Strand 18 miles of books · Powell's stacked-card warmth · City Lights beat-poet pedigree · Three Lives neighborhood serif · Greenlight handwritten staff blurbs
+
+## Feel
+Walking into a small neighborhood bookstore on a side street. Warm cream paper, generous body serif throughout, italic staff-blurbs that read like someone actually wrote them. The page is for readers, not customers — pick up the book, flip a few pages, find a hand-lettered shelf tag. Color is sparing; a single brick-red accent marks staff-picks and new arrivals.
+
+## Reference brands
+- **Strand Bookstore** → warm cream, dense shelves, no marketing varnish.
+- **Powell's City of Books** → color-coded room signage, handwritten staff blurbs.
+- **City Lights** → literary-magazine serif, beat-poet austerity.
+- **Three Lives & Co** → neighborhood-bookstore serif, single-window display.
+- **Greenlight Bookstore** → Lora-feel body serif, staff-pick shelf as homepage.
+
+## Tokens
+Surface stack is **paperback cream** (background) → **shelf-tag cream** (card) → **deeper cream** (secondary/muted). Hairline borders are wood-tone shelf-edges. Brand tokens: `--ink` (espresso brown), `--cream`, `--brick` (staff-pick stamp), `--sage` (event listings).
+
+Primary is `--brick`. Reserved for staff-pick stamps, new-arrival markers, focus ring, and the single 'Buy local' CTA.
+
+## Typography
+- **Display:** Lora (Greenlight / Three Lives book-cover serif feel). h1–h4.
+- **Body:** Lora as well — same family, smaller, lighter weight. Single-family discipline is intentional: bookstores don't mix typefaces, books don't mix typefaces.
+- **Mono:** JetBrains Mono. ISBNs, event times, shelf-tag numbers — receipt-tape feel.
+
+Body 17px / 1.7. Reading is the point.
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-10` — wider than editorial (room for a shelf of 6 books), narrower than cinematic.
+- **Sections:** hero `pt-24 pb-14 lg:pt-36 lg:pb-20`; default `py-16 lg:py-24`; tight `py-10 lg:py-16`.
+- **Scale:** 4 6 8 12 16 20 24 32 40 48 64 80 96.
+
+## Color
+No hex. Tokens only. Brick appears only on staff-pick stamps, hover states, focus, selection, and the buy-local CTA. Sage appears only on event listings (readings, signings) — never elsewhere.
+
+## Radius
+`--radius: 0.125rem` — a hair of softness, the way a shelf-tag has a slightly trimmed corner. Pills disallowed.
+
+## Shadows
+**Minimal.** Two utilities: `.hairline-bottom` and `.shelf-tag` (hairline border + hairline bottom, mimicking a tag pinned to a shelf edge).
+
+## Motion
+Single keyframe: `fade-rise` (opacity + 16px translate, 1000ms). Page-turn pace. `prefers-reduced-motion` honored.
+
+## Component patterns
+- **Buttons:** text-link CTAs with brick-on-hover. The single solid-fill is 'Buy local' / 'Order from us' — brick bg + cream text.
+- **Cards:** hairline border, slight cream-tier shift. Padding `p-6 lg:p-8`. Title in display serif italic; author in display serif roman; staff blurb in body serif italic with a small mono attribution (`— Maya, since 2019`).
+- **Inputs:** border-bottom only (1px ink).
+- **CTA links:** ink → brick on hover. Never a chip.
+
+## Recommended rich media
+Book covers — only. Each cover photographed flat against cream paper or on a wood shelf with neutral lighting. Author headshots are black-and-white, environmental (writing at a desk, not a press shot). Never lifestyle stock, never models reading, never decorative gradients.
+
+**AI tool recommendations:** **Midjourney / Flux** for placeholder covers: *"book cover photographed flat on warm cream paper, neutral overhead lighting, slight shadow"*. Avoid AI-generated "book stack" hero images — they always have wrong proportions and uncanny text.
+
+**Aspect ratios:** 3:4 portrait (book cover convention), 2:3 (slightly taller, also valid). Never 16:9.
+
+**Captions:** italic body-serif, with the staff attribution. *"— Maya recommends, since 2019."*
+
+**Avoid:** generic "person reading" stock, AI gradients, glassmorphic anything, animated GIFs.
+
+**Accessibility:** alt-text describes the cover — *"Book cover: 'Trust' by Hernan Diaz, dark green with gold typography, paperback edition."*
+
+## Component families
+- `StaffPick` family — book card with cover + title + author + italic blurb + signed attribution.
+- `EventListing` family — date column + title + reader name + brief description.
+- `BuyLocal` family — single callout with brick stamp.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.2)` — brick wash.
+- **Focus ring:** `1px solid hsl(var(--ring))`.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction.