@stylecrib/cli 0.3.1 → 0.3.3

package/themes/education-warm/THEME.md

@@ -0,0 +1,91 @@
+# Design Direction — Education-Warm
+
+## Ethos
+Duolingo celebratory feedback · Khan Academy warm sun · Brilliant soft purple · Quizlet mint UI · Notion-for-Education friendly chrome
+
+## Feel
+Friendly mascot energy without the saccharine. Rounded chrome, warm accent palette, celebratory progress moments — the green-streak ping, the confetti on completion. Built to retain a twelve-year-old's attention; engineered so a parent doesn't feel embarrassed. Saturation is high but balanced against a warm off-white paper, not a gamified neon void.
+
+## Reference brands
+- **Duolingo** → rounded sans, saturated owl-green, celebratory streak feedback. The bottom-edge button shadow is the press-feedback signature.
+- **Khan Academy** → warm yellow accent, soft blues, friendly Plus Jakarta sans display. Lesson surfaces, not dashboard chrome.
+- **Brilliant** → soft purple math-illustration warmth, geometric softness. Decorative highlight, never the primary surface.
+- **Quizlet** → mint and warm card stack, friendly progress UI. The quiz-correct mint moment.
+- **Notion for Education** → warm gray surfaces, soft iconography, gentle chrome. Educator-facing without being institutional.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **warm off-white paper** (background) → pure white (card) → deeper warm cream (muted/secondary panels). Depth comes from soft shadows and 12px rounded corners, supplemented by warm sandy borders. Color carries meaning: owl-green = celebration and primary, sky-blue = secondary and progress, sun-yellow = streak and achievement, brilliant-purple = decorative accent, mint = quiz-correct, warm-coral = try-again.
+
+Brand tokens: `--owl-green`, `--sun-yellow`, `--sky-blue`, `--brilliant-purple`, `--mint`, `--warm-coral`, `--paper`, `--ink`. Every saturated color traces to a reference brand's signature feedback moment.
+
+## Typography
+- **Display:** Plus Jakarta Sans (Khan Academy display). h1–h4 and lesson-card titles. Tracking `-0.02em` — Plus Jakarta wants tightening at display size. Weights 600/700/800 used liberally for friendly emphasis.
+- **Body:** DM Sans (Duolingo body). Body base **16px** with **line-height 1.6** — short instructional copy, optimized for tap-target proximity.
+- **Mono:** JetBrains Mono. Code lessons, math expressions, streak counters. Tabular figures mandatory for XP and score widgets.
+
+H1 uses `clamp(2rem, 5vw, 3.5rem)` — medium scale, lesson-header weight not poster-banner. Font features: `"ss01"`, `"cv11"` (stylistic single-storey *a* — friendlier), `"tnum"` for score widgets.
+
+## Spacing
+- **Container:** `max-w-5xl px-4 lg:px-8` — 1024px max, accommodates lesson-card grids without going full-bleed. Lessons live in 2–3 column grids on desktop.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-12 lg:pt-24 lg:pb-20`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-14`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80. Generous medium — lessons need breathing room.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. Pure black is forbidden — `--ink` (deep blue-warm-ink) replaces it. Pure white is allowed but only on card surfaces, never as page background.
+
+Saturation is high and intentional. The palette commits to color — desaturating any token reads as broken. Multiple brand colors coexist on a single page because they carry different roles: green celebrates, blue progresses, yellow rewards, purple decorates, coral corrects.
+
+## Radius
+`--radius: 0.75rem` (12px). **Distinctly rounded** — Duolingo/Khan card rounding. Pills allowed (`pillsAllowed: true`) and central to the language: tags, streak counters, level badges, filter chips all use pill radius. Square corners are disallowed everywhere except divider rules.
+
+## Shadows
+**Soft.** Three utilities: `.card-soft` (default card lift), `.card-lift` (hover state — deeper double-shadow), `.button-press` (Duolingo bottom-edge shadow — `0 4px 0 0` in a darker shade of the button color). The button-press shadow is signature: it makes every primary CTA feel like a physical button being tapped, and pairs with the `tap-press` keyframe on click.
+
+## Motion
+Four keyframes:
+- `celebrate-bounce` (350ms) — the signature: lesson-complete badge, streak-extension toast, correct-answer ping. Scale up past 1.0, settle back. Used for all positive feedback moments.
+- `progress-fill` (600ms) — XP bar fill on lesson completion. Sky-blue bar reveals left-to-right via `scaleX` transform.
+- `mascot-wiggle` (2400ms, infinite) — idle mascot ambient sway. Reserved for decorative illustration only; never on functional UI.
+- `tap-press` (150ms) — button tap-down feedback, pairs with `.button-press` bottom-edge shadow.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — celebrate-bounce degrades to a simple opacity fade, mascot-wiggle pauses entirely.
+
+## Component patterns
+- **Buttons:** filled, rounded (12px), with a contrasting bottom-edge shadow (`.button-press`) — the Duolingo press-feedback. Primary CTA is owl-green fill, white text, dark-green bottom edge. Pills allowed for filter chips and tags. Ghost buttons exist as secondary actions: 2px sandy border, ink text, no shadow. **Never gradient.**
+- **Cards:** white fill on warm-paper bg, 12px radius, `.card-soft` shadow, no border by default. Hover lifts to `.card-lift`. Padding `p-6 lg:p-8`. Title in Plus Jakarta 700 at 1.25rem. Status indicators (streak flame, level badge) sit top-right as colored pills.
+- **Inputs:** full box with 2px sandy border, 12px radius, `p-3` internal. Label sits above in DM Sans 500. Focus thickens border to owl-green and adds a 4px ring offset in green/15. Validation states use warm-coral (error) and owl-green (success) borders with matching icon.
+- **CTA:** filled rounded button by default — primary in owl-green, secondary in sky-blue. Inline text links are sky-blue with no underline at rest, underline on hover. Streak and achievement CTAs may use sun-yellow fill with ink text for celebration moments.
+
+## Recommended rich media
+This direction leans heavily on **friendly illustration** — geometric flat-color characters, simplified mascot figures, gentle gradients on illustrated backgrounds (illustration only, never on UI chrome). Think Duolingo's Duo, Khan's Khanmigo, Brilliant's math figures. Photography is rare and reserved for student testimonials and instructor portraits, color-graded warm and bright.
+
+**AI tool recommendations:** **Recraft** for vector character illustration in flat-color geometric style — prompt for *"flat geometric character illustration, Duolingo style, soft palette, single-line weight"*. **Midjourney** with *"warm friendly classroom photography, natural light, smiling student, soft focus background"* for testimonial photos. **SVGator** for animating mascot illustrations. Avoid Midjourney's default photorealistic style for illustrations — explicitly prompt vector flat.
+
+**Aspect ratios:** 1:1 square for mascot illustrations and lesson-card heroes. 4:3 for instructor portraits and classroom photography. 16:9 for video lessons. Never 3:2 (editorial), never 9:16 (mobile-vertical signals social).
+
+**Video:** core to the direction. Short lesson-intro videos (≤90s) with poster image and play button. Autoplay on hover for explainer thumbnails (muted, looped). Lesson-complete celebration animations are first-class — Lottie or short MP4 of confetti, badge flips, streak flames. ≤6 MB per video, H.265 or AV1.
+
+**Performance:** lesson-card hero illustrations ≤50 KB SVG or AVIF. Mascot animations ≤120 KB Lottie. LCP under 2.5s. If a lesson grid pushes past 1 MB total, lazy-load below the fold.
+
+**Avoid:** corporate-stock photography (handshakes, headsets, generic-office), dark moody anything, photorealistic 3D renders of children (uncanny), gradient-heavy synthwave illustration, hand-drawn marker-style (too casual — this is education, not preschool craft). Never use mascots that look like NFT PFPs — the warmth must feel pedagogical, not collectible.
+
+**Accessibility:** every illustration has descriptive alt-text. Mascot animations have a static fallback for `prefers-reduced-motion`. Celebration confetti must not flash more than 3 times/sec (WCAG 2.3.1). Lesson videos require captions, not just transcripts.
+
+## Component families
+None at install time. Family conventions emerge as the project grows; the Director appends them here as they're established.
+
+## Details
+- **Selection:** `hsl(var(--brand-sun-yellow) / 0.4)` background — warm yellow highlighter, pencil-on-paper feel.
+- **Focus ring:** `3px solid hsl(var(--ring) / 0.4)` — soft owl-green ring, visible and warm. Larger than typical because tap-targets matter on touch devices.
+- **Scrollbar:** auto (browser default) — friendly, no thin-restraint move.
+
+## 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/education-warm/tokens.ts

@@ -0,0 +1,185 @@
+import type { Direction } from "../schema";
+
+export const educationWarm: Direction = {
+  name: "education-warm",
+  ethos:
+    "Duolingo celebratory feedback · Khan Academy warm sun · Brilliant soft purple · Quizlet mint UI · Notion-for-Education friendly chrome",
+  references: [
+    { brand: "Duolingo", trait: "rounded sans, saturated owl-green, celebratory streak feedback" },
+    { brand: "Khan Academy", trait: "warm yellow accent, soft blues, friendly Plus Jakarta sans" },
+    { brand: "Brilliant", trait: "soft purple math-illustration warmth, geometric softness" },
+    { brand: "Quizlet", trait: "mint and warm card stack, friendly progress UI" },
+    { brand: "Notion for Education", trait: "warm gray surfaces, soft iconography, gentle chrome" },
+  ],
+  feel:
+    "Friendly mascot energy without the saccharine. Rounded chrome, warm accent palette, " +
+    "celebratory progress moments — the green-streak ping, the confetti on completion. " +
+    "Built to retain a twelve-year-old's attention; engineered so a parent doesn't feel embarrassed. " +
+    "Saturation is high but balanced against a warm off-white paper, not a gamified neon void.",
+
+  fonts: {
+    display: {
+      family: "Plus Jakarta Sans",
+      fallback: ["DM Sans", "Inter", "system-ui", "-apple-system", "sans-serif"],
+      from: "Khan Academy display — rounded geometric sans with friendly terminals, reads as warm-not-childish",
+      googleFont: "Plus+Jakarta+Sans",
+      weights: [400, 500, 600, 700, 800],
+    },
+    body: {
+      family: "DM Sans",
+      fallback: ["Plus Jakarta Sans", "Inter", "system-ui", "sans-serif"],
+      from: "Duolingo body — soft humanist sans, optimized for short instructional copy at 16px",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "SF Mono", "ui-monospace", "Menlo", "monospace"],
+      from: "code lessons, math expressions, streak counters — friendly slab-mono pairing",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",                 // Plus Jakarta wants tightening at display size
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "cv11", "tnum"', // stylistic single-storey a + tabular figures for score widgets
+    h1ScaleClamp: "clamp(2rem, 5vw, 3.5rem)",   // medium — Duolingo lesson headers, not Wes Anderson posters
+    bodyBaseSize: "1rem",                        // 16px — instructional copy is short; readability over luxury
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "44 50% 97%", from: "warm off-white paper — Khan Academy lesson surface; warm tint avoids clinical-app feel" },
+    foreground: { hsl: "230 35% 18%", from: "deep blue-ink — Brilliant body color, warmer than pure black, retains contrast" },
+    card: { hsl: "0 0% 100%", from: "pure white card — sits on warm paper, friendly tier-separation" },
+    popover: { hsl: "0 0% 100%", from: "same as card; depth from soft shadow + rounded corners" },
+    primary: { hsl: "148 58% 45%", from: "= brand.owl-green — Duolingo signal green, the celebration color and main CTA" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on owl-green" },
+    secondary: { hsl: "210 90% 60%", from: "= brand.sky-blue — Khan Academy soft sky, secondary CTAs and progress fills" },
+    secondaryForeground: { hsl: "0 0% 100%", from: "white on sky-blue" },
+    muted: { hsl: "44 35% 93%", from: "warm cream — quiet panels, lesson-aside surfaces" },
+    mutedForeground: { hsl: "230 18% 42%", from: "warm slate — secondary text, captions, progress meta" },
+    accent: { hsl: "270 65% 65%", from: "= brand.brilliant-purple — accent only, used for hover and decorative highlights" },
+    accentForeground: { hsl: "0 0% 100%", from: "white on purple" },
+    border: { hsl: "44 30% 88%", from: "warm sandy border — Notion-for-Education chrome line, soft and inviting" },
+    input: { hsl: "44 30% 88%", from: "same as border — inputs are rounded rectangles with warm border" },
+    ring: { hsl: "148 58% 45%", from: "owl-green focus — matches primary, signals tap-target" },
+    destructive: { hsl: "8 80% 58%", from: "warm coral alert — friendlier than red, still clearly negative" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on coral" },
+    brand: {
+      "owl-green": { hsl: "148 58% 45%", from: "= primary; Duolingo signal green, celebrations and streaks" },
+      "sun-yellow": { hsl: "44 95% 60%", from: "Khan Academy warm yellow — streak flames, achievement coins, badge highlights" },
+      "sky-blue": { hsl: "210 90% 60%", from: "= secondary; Khan Academy soft sky, progress and secondary CTA" },
+      "brilliant-purple": { hsl: "270 65% 65%", from: "= accent; Brilliant math-illustration purple, decorative highlight" },
+      "mint": { hsl: "165 55% 70%", from: "Quizlet card mint — quiz-correct moments, friendly success surface" },
+      "warm-coral": { hsl: "8 80% 58%", from: "= destructive; warm coral, used for try-again moments without harshness" },
+      "paper": { hsl: "44 50% 97%", from: "= background; warm off-white paper" },
+      "ink": { hsl: "230 35% 18%", from: "= foreground; deep blue-ink for primary text" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80],   // generous medium — lessons need breathing room
+    containerMax: "max-w-5xl",                                // 1024px — accommodates lesson-card grids without going full-bleed
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-12 lg:pt-24 lg:pb-20",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.75rem",                              // 12px — Duolingo/Khan card rounding, distinctly soft
+    pillsAllowed: true,                            // pills for tags, streak counters, level badges — core to the language
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "card-soft":
+        "0 1px 2px 0 hsl(230 35% 18% / 0.05), 0 4px 12px -2px hsl(230 35% 18% / 0.08)",
+      "card-lift":
+        "0 4px 8px -2px hsl(230 35% 18% / 0.08), 0 12px 24px -6px hsl(230 35% 18% / 0.12)",
+      "button-press":
+        "0 4px 0 0 hsl(148 58% 35%)",            // Duolingo button bottom-edge — the press-feedback shadow
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 350,                                // quick and friendly, never slow
+      loop: 600,                                  // bounce cycle
+      ambient: 2400,                              // wiggle loop on idle mascot
+    },
+    keyframes: {
+      "celebrate-bounce": {
+        css:
+          "0% { transform: scale(0.9) translateY(8px); opacity: 0; }\n" +
+          "60% { transform: scale(1.08) translateY(-4px); opacity: 1; }\n" +
+          "100% { transform: scale(1) translateY(0); opacity: 1; }",
+        defaultDuration: 350,
+        iteration: "once",
+        purpose: "lesson-complete badge, streak-extension toast, correct-answer ping — the signature celebratory entrance",
+      },
+      "progress-fill": {
+        css:
+          "from { transform: scaleX(0); transform-origin: left center; }\n" +
+          "to { transform: scaleX(1); transform-origin: left center; }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "XP bar fill on lesson completion; sky-blue bar reveals left-to-right",
+      },
+      "mascot-wiggle": {
+        css:
+          "0%, 100% { transform: rotate(-3deg); }\n" +
+          "50% { transform: rotate(3deg); }",
+        defaultDuration: 2400,
+        iteration: "infinite",
+        purpose: "idle mascot animation — gentle ambient sway, reserved for decorative illustration only",
+      },
+      "tap-press": {
+        css:
+          "0% { transform: translateY(0); }\n" +
+          "50% { transform: translateY(2px); }\n" +
+          "100% { transform: translateY(0); }",
+        defaultDuration: 150,
+        iteration: "once",
+        purpose: "button tap-down feedback — pairs with .button-press bottom-edge shadow",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Filled, rounded (12px radius), with a contrasting bottom-edge shadow (.button-press) — the Duolingo press-feedback. " +
+      "Primary CTA is owl-green fill, white text, dark-green bottom edge. Pills allowed for filter chips and tags. " +
+      "Ghost buttons exist as secondary actions: 2px sandy border, ink text, no shadow. Never gradient.",
+    card:
+      "White fill on warm-paper bg, 12px radius, .card-soft shadow, no border by default. " +
+      "Hover lifts to .card-lift. Internal padding p-6 lg:p-8. Title in Plus Jakarta 700 at 1.25rem. " +
+      "Status indicators (streak flame, level badge) sit top-right as colored pills.",
+    input:
+      "Full box with 2px sandy border, 12px radius, p-3 internal. Label sits above in DM Sans 500. " +
+      "Focus thickens border to owl-green and adds 4px ring offset in green/15. Placeholder is mutedForeground. " +
+      "Validation states use warm-coral (error) and owl-green (success) borders with matching icon.",
+    cta:
+      "Filled rounded button by default — primary in owl-green, secondary in sky-blue. " +
+      "Inline text links are sky-blue with no underline at rest, underline on hover. " +
+      "Streak and achievement CTAs may use sun-yellow fill with ink text for celebration moments.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--brand-sun-yellow) / 0.4)",  // warm yellow highlighter — pencil-on-paper feel
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "3px solid hsl(var(--ring) / 0.4)",       // soft 3px owl-green ring — visible but warm
+    scrollbarStyle: "auto",                               // friendly default — no thin-restraint move
+  },
+};

package/themes/ember-poster/README.md

@@ -0,0 +1,79 @@
+# Ember Poster — install guide
+
+A warm-dark editorial theme with marker-drawn uppercase display type, three hot editorial accents (flame / chili / caramel-gold), and sharp corners throughout. Ships as a `DIRECTION.md`-ready theme with tokens, a bespoke section renderer, and live motion (hero slider, letter marquees, stateful cart transitions) built in.
+
+## What's in this folder
+
+| File | What it is |
+|---|---|
+| `theme.yml` | Source of truth — palette, type, motion, avoid rules, banned defaults. |
+| `THEME.md` | Auto-generated human-readable direction doc. Feed to `design-director` and `design-systems-engineer`. |
+| `tokens.ts` | TypeScript module with palette + typography + surface tokens. |
+| `tailwind.snippet.ts` | Partial `theme.extend` block. Merge into your `tailwind.config.ts`. |
+| `package.json` | Peer-dependencies your host project needs. |
+
+## Quick install
+
+```bash
+# in your project root
+npx stylecrib apply @taste/ember-poster
+```
+
+`stylecrib apply` copies the theme files into your `design-system/`, merges the tailwind snippet into your config, and adds the peer-deps below into your project's `package.json`. Run `npm install` after.
+
+## Deps you'll add to your project
+
+- **`lenis`** (~10 kB) — smooth inertial scroll across the whole page. The theme's `useEffect` initializes Lenis on mount and cleans up on unmount. Respects `prefers-reduced-motion`.
+- **`gsap`** (optional) — orchestrated scroll timelines. Only needed if you want the full "bottle stop-motion / staggered per-section reveal" behavior. Without GSAP, the theme still ships the essential motion (hero slider, marquees, cart states, IntersectionObserver reveals).
+
+## Fonts
+
+- **Display face (paid):** [Peperoncino Sans](https://resistenza.com) by Resistenza. The marker-drawn signature the theme is designed against. Commercial license required (free version is personal-use only). Purchase and self-host via `@font-face`. Recommended.
+- **Display face (free):** [Shrikhand](https://fonts.google.com/specimen/Shrikhand) via Google Fonts. The closest marker-adjacent free approximation — chunky slab-serif with hand-cut character. Load via:
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Inter+Tight:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  ```
+- **Body:** Inter Tight (free) — variable weight 100–900.
+- **Mono:** JetBrains Mono (free) — for small tracked-caps metadata labels.
+
+The theme's font stack:
+
+```css
+--font-display: "Peperoncino Sans", "Shrikhand", "Bricolage Grotesque", "Anton", Impact, sans-serif;
+--font-body:    "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
+--font-mono:    "JetBrains Mono", "IBM Plex Mono", monospace;
+```
+
+Peperoncino comes first — if you've licensed it and self-hosted, it wins. Otherwise Shrikhand takes over.
+
+## Motion ships live (no external code)
+
+- Hero item slider — auto-advances every 4s, click 1/2/3 to jump.
+- Immediate-fold horizontal ticker — CSS keyframe, 16s per loop.
+- Vertical letter marquee — CSS keyframe, 22s per loop, seamless.
+- Testimonial band — full-width alternating pull-quotes with a fast horizontal marquee ticker underneath the section header.
+- Stateful add-to-cart — React state, 3-phase transition (idle → adding → added).
+- Subscription tier toggle — React state, updates price + visual stack reactively.
+- Scroll-triggered reveal on the hero headline — IntersectionObserver + CSS transition.
+- **Smooth inertial scroll** — Lenis, requires the peer-dep.
+- `prefers-reduced-motion: reduce` is honored throughout — keyframes pause, transitions become instant, state changes still fire.
+
+## What you get after install
+
+- Every color, type scale, and spacing rule aligned to the theme.
+- One 500-line bespoke section renderer at `src/components/sections/ember-poster.tsx` that demonstrates the register end-to-end.
+- Motion primitives (marquees, cart states) as inline patterns you can copy into your own components.
+
+## Refuse-if defaults
+
+The theme's `theme.yml` includes an `avoid:` array. Feed it to your Design Director agent as reject conditions. In particular this theme refuses:
+
+- `border-radius > 0` anywhere on the page.
+- Rounded pill CTAs — buttons are sharp-cornered display type.
+- Cool blue/teal palette — this register is WARM.
+- Sans-serif humanist display like Inter Display or Söhne — display must be marker-hand.
+- Title case on display type — always uppercase.
+- Corporate polish — no shadow-md cards, no soft glow, no muted color-block hero.
+- Center-aligned everything — composition is left-weighted and asymmetric.
+
+See `theme.yml` for the full 11-entry avoid list plus the inherited global slop-blocklist.

package/themes/ember-poster/THEME.md

@@ -0,0 +1,101 @@
+# Ember Poster
+
+> Warm-dark editorial register — cream type on espresso canvas, hot editorial accents, oversized marker-uppercase display, sharp corners, loud tongue-in-cheek voice.
+
+**Slug:** `ember-poster` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+Small-batch print editorial. Awwwards-tier independent-magazine and craft-brand sites — the register that reads "hand-made premium" through type and motion instead of ornament. Also 1970s poster editorial (bold caps, negative tracking, condensed hot palettes) and hot-shop print like The Small Object.
+
+## Signature move
+
+Cream Shrikhand-family display at 104px scale broken across multiple lines,
+set on espresso-brown canvas, letter-spacing tightened to -0.02em. Feature
+names rendered as stacked single-word lines filling one side of the
+viewport, hero imagery beside. Three editorial accents map one-per-item
+(flame orange, chili red, caramel gold) and carry through card, hover, and
+cart state consistently. Border-radius is 0 everywhere. Hand-drawn splat +
+antler + chef-hat ornaments and a red pen-slash strike-through for
+negation. Inverted cream-bg bands break up the dark rhythm as callout
+sections. NO mono-caps eyebrows, NO dot-metadata rows, NO corner tags —
+brand character sits in the display type, not in ornamented labels.
+
+## Palette
+
+- **bg:** `#100B06`
+- **surface:** `#322C23`
+- **ink:** `#F5E4C7`
+- **accent:** `#F15726`
+- **secondary:** `#BE8D3F`
+- **signal:** `#DA1F27`
+
+## Typography
+
+- **Display:** Anton (or Bricolage Grotesque as broader-market fallback) — 400 weight, UPPERCASE always, letter-spacing -0.02em. At scale — 104px hero, 52px section title, 37px h3. The marker-hand alternative (Peperoncino Sans by Resistenza) is the reference face but requires commercial license; Anton is the safest free approximation.
+- **Body:** Inter Tight (variable 100-900) — 400/500/700, mixed-case, line-height 1.5, 16px body, up to 40px for manifesto "voice" lines that contrast with the display "shout."
+- **Mono:** JetBrains Mono — narrowly scoped to code specimens only. NOT used for section eyebrows, corner tags, metadata rows, or bylines (those defaults are universal-slop-blocklist hits).
+- **Scale:** 1.333 (perfect fourth — hero/display/lead/body span a wide contrast so the display shouts and the body speaks)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero item slider — auto-advances every 4s, click 1/2/3 to jump; FPO cover + accent-gradient backdrop transition on change.
+2. Scroll-triggered reveal on hero headline — IntersectionObserver + CSS transition (translate-up + fade, 500ms cubic-bezier).
+3. Vertical letter marquee ("SMALL BATCH SMALL BATCH...") — CSS keyframe, 22s linear infinite loop, seamless via content duplication.
+4. Testimonial rails — TWO rows, opposite directions, CSS keyframe 40s linear infinite, pause on hover via animation-play-state.
+5. Stateful add-to-cart: ADD → ADDING (600ms) → ✓ ADDED (1800ms) → back. Button background flips to cream on ADDED. Per-product + separate for the pack.
+6. Subscription tier 4-issue / 12-issue: click updates price ($60 / $160) and rebuilds the visual stack reactively.
+7. Microinteractions — CSS transitions on hover states, active-state scale(0.97) on cart buttons.
+8. prefers-reduced-motion: reduce — all keyframe animations pause, transitions become instant, state changes still fire (they're content).
+
+Customer installs these as dependencies for the deeper motion tier:
+- Lenis — smooth inertial scroll across the whole page (Awwwards-tier inertial feel).
+- GSAP ScrollTrigger — orchestrated multi-element timelines (image stop-motion / spin, staggered per-section reveals).
+- Custom branded preloader.
+
+Motion character: weighty but crisp, custom cubic-bezier(0.16,1,0.3,1) easings, nothing bouncy-cute. All motion serves the "confident + hand-made" tone. See sections/ember-poster.tsx for the shipping implementation.
+
+
+## Imagery
+
+Warm-lit editorial photography on the dark canvas with amber-tungsten
+spotlight, deep shadow, high contrast, saturated. Hero and feature imagery
+reads as small-batch print / small-studio quality — NO flat white product
+shots, NO gradient overlays behind imagery, NO stock photography. Illustration
+if used is marker-hand line-art in cream or accent color. Placeholder
+compositions use clearly-labeled FPO blocks so the layout is legible
+without shipping stock images.
+
+## Best for
+
+- Small independent magazines and quarterlies with a loud editorial voice
+- Craft goods and small-batch consumer brands (books, records, ceramics, apothecary)
+- Editorial launch pages for premium consumer brands that refuse corporate gloss
+- Independent zines and print-adjacent brand sites
+- Any Awwwards-tier editorial or brand site that trades on personality
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity
+- Rounded button chrome or pill CTAs — buttons are sharp-cornered display type
+- Cool color palette — this register is WARM (espresso, cream, flame, chili, caramel), never blue/teal/violet
+- Sans-serif humanist display like Inter Display or Söhne — the display face has to carry marker-hand character (Anton, Peperoncino Sans, Bricolage Grotesque)
+- Title case or sentence case on display type — display is ALWAYS uppercase in this register
+- Loose or default letter-spacing on display — display tracks -0.02em minimum, tighter at hero scale
+- Corporate polish — no shadow-md cards, no soft glow, no muted color-block hero
+- Three-tier pricing cards or feature-pillar grids — the composition refuses SaaS defaults structurally
+- Center-aligned everything — composition is left-weighted and asymmetric, display type BREAKS the grid
+- Cool grays for body text — body ink is cream (#F5E4C7), never #64748b slate
+
+## 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)
+- warm-dark-plus-rainbow (espresso canvas paired with more than three accent colors — the register only holds with three heat hues used sparingly)
+- generic-food-brand (safe rounded product cards + generic sans + soft photography — that's the corporate DTC default this register explicitly refuses)

package/themes/ember-poster/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@taste/ember-poster",
+  "version": "1.0.0",
+  "description": "Ember Poster — a warm-dark editorial theme. Marker-drawn uppercase display on espresso canvas, three hot editorial accents, sharp corners. Ships with live motion (hero slider, marquees, stateful cart) inline. Install the peerDependencies below to enable the deeper motion tier (Lenis smooth scroll + GSAP scroll timelines).",
+  "keywords": ["taste", "theme", "editorial", "warm-dark", "poster", "marker-hand", "family-c"],
+  "author": "StyleCrib (matt@glidetalk.com)",
+  "license": "See ../../LICENSE",
+  "files": [
+    "theme.yml",
+    "THEME.md",
+    "tokens.ts",
+    "tailwind.snippet.ts",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "lenis": "^1.1.0"
+  },
+  "peerDependenciesMeta": {
+    "gsap": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "gsap": "^3.12.0"
+  },
+  "fonts": {
+    "displayLicensed": "Peperoncino Sans (Resistenza) — commercial license required, purchase separately at https://resistenza.com and self-host as @font-face url",
+    "displayFree": "Shrikhand (Google Fonts, SIL Open Font License) — the marker-adjacent free approximation. Load via <link href='https://fonts.googleapis.com/css2?family=Shrikhand&display=swap' rel='stylesheet' />",
+    "bodyFree": "Inter Tight (Google Fonts, SIL Open Font License)",
+    "monoFree": "JetBrains Mono (Apache 2.0)"
+  }
+}

package/themes/ember-poster/tailwind.snippet.ts

@@ -0,0 +1,17 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: ember-poster
+export const emberPosterTailwindExtend = {
+  colors: {
+    bg: "#100B06",
+    surface: "#322C23",
+    ink: "#F5E4C7",
+    accent: "#F15726",
+    secondary: "#BE8D3F",
+    signal: "#DA1F27",
+  },
+  fontFamily: {
+    display: ["Anton (or Bricolage Grotesque as broader-market fallback) — 400 weight, UPPERCASE always, letter-spacing -0.02em. At scale — 104px hero, 52px section title, 37px h3. The marker-hand alternative (Peperoncino Sans by Resistenza) is the reference face but requires commercial license; Anton is the safest free approximation."],
+    body: ["Inter Tight (variable 100-900) — 400/500/700, mixed-case, line-height 1.5, 16px body, up to 40px for manifesto \"voice\" lines that contrast with the display \"shout.\""],
+    mono: ["JetBrains Mono — narrowly scoped to code specimens only. NOT used for section eyebrows, corner tags, metadata rows, or bylines (those defaults are universal-slop-blocklist hits)."],
+  },
+};

package/themes/ember-poster/theme.yml

@@ -0,0 +1,109 @@
+# Ember Poster — Family C, Editorial & Print.
+#
+# NEW-BASE CANDIDATE for BESPOKE_THEME_SYSTEM.md. Warm-dark editorial
+# register — espresso-brown canvas, cream type, three hot editorial accents
+# (flame, chili, caramel-gold). Marker-drawn uppercase display + Inter Tight
+# body. Sharp corners throughout. Loud, confident, small-batch voice.
+#
+# Authored from Matt's provided design brief (2026-07-03). Placeholder
+# demonstration domain is a fictional print quarterly ("PLATE") — a
+# domain-agnostic mockup that could be re-skinned to any small-batch
+# consumer or editorial brand. The register expresses "hand-made premium"
+# through TYPE and MOTION rather than decoration.
+#
+# Fifth theme via the v2 harness. First non-Family-D theme, first Family C
+# theme, first NEW BASE (not one of the current 60 in the spec).
+
+name: Ember Poster
+concept: Warm-dark editorial register — cream type on espresso canvas, hot editorial accents, oversized marker-uppercase display, sharp corners, loud tongue-in-cheek voice.
+influence: Small-batch print editorial. Awwwards-tier independent-magazine and craft-brand sites — the register that reads "hand-made premium" through type and motion instead of ornament. Also 1970s poster editorial (bold caps, negative tracking, condensed hot palettes) and hot-shop print like The Small Object.
+
+family: C
+render_url: http://localhost:5173/themes/ember-poster
+
+surface: web
+
+typography:
+  display: Anton (or Bricolage Grotesque as broader-market fallback) — 400 weight, UPPERCASE always, letter-spacing -0.02em. At scale — 104px hero, 52px section title, 37px h3. The marker-hand alternative (Peperoncino Sans by Resistenza) is the reference face but requires commercial license; Anton is the safest free approximation.
+  body: Inter Tight (variable 100-900) — 400/500/700, mixed-case, line-height 1.5, 16px body, up to 40px for manifesto "voice" lines that contrast with the display "shout."
+  mono: JetBrains Mono — narrowly scoped to code specimens only. NOT used for section eyebrows, corner tags, metadata rows, or bylines (those defaults are universal-slop-blocklist hits).
+  scale: 1.333 (perfect fourth — hero/display/lead/body span a wide contrast so the display shouts and the body speaks)
+
+palette:
+  bg: "#100B06"
+  surface: "#322C23"
+  ink: "#F5E4C7"
+  accent: "#F15726"
+  secondary: "#BE8D3F"
+  signal: "#DA1F27"
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero item slider — auto-advances every 4s, click 1/2/3 to jump; FPO cover + accent-gradient backdrop transition on change.
+  2. Scroll-triggered reveal on hero headline — IntersectionObserver + CSS transition (translate-up + fade, 500ms cubic-bezier).
+  3. Vertical letter marquee ("SMALL BATCH SMALL BATCH...") — CSS keyframe, 22s linear infinite loop, seamless via content duplication.
+  4. Testimonial rails — TWO rows, opposite directions, CSS keyframe 40s linear infinite, pause on hover via animation-play-state.
+  5. Stateful add-to-cart: ADD → ADDING (600ms) → ✓ ADDED (1800ms) → back. Button background flips to cream on ADDED. Per-product + separate for the pack.
+  6. Subscription tier 4-issue / 12-issue: click updates price ($60 / $160) and rebuilds the visual stack reactively.
+  7. Microinteractions — CSS transitions on hover states, active-state scale(0.97) on cart buttons.
+  8. prefers-reduced-motion: reduce — all keyframe animations pause, transitions become instant, state changes still fire (they're content).
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll across the whole page (Awwwards-tier inertial feel).
+  - GSAP ScrollTrigger — orchestrated multi-element timelines (image stop-motion / spin, staggered per-section reveals).
+  - Custom branded preloader.
+
+  Motion character: weighty but crisp, custom cubic-bezier(0.16,1,0.3,1) easings, nothing bouncy-cute. All motion serves the "confident + hand-made" tone. See sections/ember-poster.tsx for the shipping implementation.
+
+signature: |
+  Cream Shrikhand-family display at 104px scale broken across multiple lines,
+  set on espresso-brown canvas, letter-spacing tightened to -0.02em. Feature
+  names rendered as stacked single-word lines filling one side of the
+  viewport, hero imagery beside. Three editorial accents map one-per-item
+  (flame orange, chili red, caramel gold) and carry through card, hover, and
+  cart state consistently. Border-radius is 0 everywhere. Hand-drawn splat +
+  antler + chef-hat ornaments and a red pen-slash strike-through for
+  negation. Inverted cream-bg bands break up the dark rhythm as callout
+  sections. NO mono-caps eyebrows, NO dot-metadata rows, NO corner tags —
+  brand character sits in the display type, not in ornamented labels.
+
+imagery: |
+  Warm-lit editorial photography on the dark canvas with amber-tungsten
+  spotlight, deep shadow, high contrast, saturated. Hero and feature imagery
+  reads as small-batch print / small-studio quality — NO flat white product
+  shots, NO gradient overlays behind imagery, NO stock photography. Illustration
+  if used is marker-hand line-art in cream or accent color. Placeholder
+  compositions use clearly-labeled FPO blocks so the layout is legible
+  without shipping stock images.
+
+best_for:
+  - Small independent magazines and quarterlies with a loud editorial voice
+  - Craft goods and small-batch consumer brands (books, records, ceramics, apothecary)
+  - Editorial launch pages for premium consumer brands that refuse corporate gloss
+  - Independent zines and print-adjacent brand sites
+  - Any Awwwards-tier editorial or brand site that trades on personality
+
+avoid:
+  - "Border-radius greater than 0px anywhere on the page — sharp corners are core to the identity"
+  - "Rounded button chrome or pill CTAs — buttons are sharp-cornered display type"
+  - "Cool color palette — this register is WARM (espresso, cream, flame, chili, caramel), never blue/teal/violet"
+  - "Sans-serif humanist display like Inter Display or Söhne — the display face has to carry marker-hand character (Anton, Peperoncino Sans, Bricolage Grotesque)"
+  - "Title case or sentence case on display type — display is ALWAYS uppercase in this register"
+  - "Loose or default letter-spacing on display — display tracks -0.02em minimum, tighter at hero scale"
+  - "Corporate polish — no shadow-md cards, no soft glow, no muted color-block hero"
+  - "Three-tier pricing cards or feature-pillar grids — the composition refuses SaaS defaults structurally"
+  - "Center-aligned everything — composition is left-weighted and asymmetric, display type BREAKS the grid"
+  - "Cool grays for body text — body ink is cream (#F5E4C7), never #64748b slate"
+
+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
+  - "warm-dark-plus-rainbow (espresso canvas paired with more than three accent colors — the register only holds with three heat hues used sparingly)"
+  - "generic-food-brand (safe rounded product cards + generic sans + soft photography — that's the corporate DTC default this register explicitly refuses)"