@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/forum-classic/tokens.ts

@@ -0,0 +1,168 @@
+import type { Direction } from "../schema";
+
+// forum-classic — Reddit / Hacker News dense link-first community. Mono-leaning
+// type, upvote orange + Verdana-feel body, near-white surface, hairline borders,
+// vote arrows as a primitive. Tool-first language: text rivers and link lists,
+// no decoration.
+export const forumClassic: Direction = {
+  name: "forum-classic",
+  ethos:
+    "Reddit upvote-orange + density · Hacker News beige + Verdana · Lobste.rs muted indie · Tildes restraint + serif accents · Metafilter blue link tradition",
+  references: [
+    { brand: "Reddit (old.reddit)", trait: "upvote orange + dense link list + small avatar + nested-comment indent" },
+    { brand: "Hacker News", trait: "beige page wash + Verdana-feel body + orange wordmark + flat link list" },
+    { brand: "Lobste.rs", trait: "muted indie palette + categorized tags + density" },
+    { brand: "Tildes", trait: "restraint + serif accents + group-driven nav" },
+    { brand: "Metafilter", trait: "blue link tradition + community-driven thread weight" },
+  ],
+  feel:
+    "Dense, link-first, text-river. The page is a list of titles with vote counts and a small handle — " +
+    "no hero images, no cards with shadows, no decoration earned by composition. Mono-leaning sans for everything; " +
+    "the only color worth spending is the upvote arrow and the link blue. " +
+    "Reads as community-archive — the same shape you'd recognize across Reddit, HN, Lobste.rs, and Metafilter.",
+
+  fonts: {
+    display: {
+      family: "IBM Plex Sans",
+      fallback: ["Verdana", "Geneva", "Tahoma", "sans-serif"],
+      from: "HN/Reddit Verdana lineage — system-sans humanist, condensed enough for dense titles",
+      googleFont: "IBM+Plex+Sans",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "IBM Plex Sans",
+      fallback: ["Verdana", "Geneva", "Tahoma", "sans-serif"],
+      from: "same family — single-face forum convention",
+      googleFont: "IBM+Plex+Sans",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "IBM Plex Mono",
+      fallback: ["ui-monospace", "Consolas", "SFMono-Regular", "monospace"],
+      from: "post-meta, code-block in comments, vote-counts — forum tabular feel",
+      googleFont: "IBM+Plex+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.005em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(1.5rem, 3vw, 2rem)",          // forums don't do marketing-hero sizes
+    bodyBaseSize: "0.875rem",                          // 14px — forum-density default
+    bodyLineHeight: "1.45",
+  },
+
+  colors: {
+    background: { hsl: "36 30% 96%", from: "HN beige page wash — warm off-white, never gray" },
+    foreground: { hsl: "0 0% 12%", from: "near-black ink — Reddit text, high contrast on beige" },
+    card: { hsl: "0 0% 100%", from: "white thread/comment card — minimal lift" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "16 100% 50%", from: "Reddit upvote orange — also HN wordmark orange, the community color" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on orange — used for selected/active states only" },
+    secondary: { hsl: "36 20% 92%", from: "deeper beige — visited row, alt-row striping" },
+    secondaryForeground: { hsl: "0 0% 18%", from: "ink on beige" },
+    muted: { hsl: "36 20% 92%", from: "same as secondary — quiet panels, code-block bg" },
+    mutedForeground: { hsl: "0 0% 42%", from: "Reddit meta-gray — submitted-by, time-ago" },
+    accent: { hsl: "16 100% 94%", from: "primary-tinted bg — selected row, hover-hint" },
+    accentForeground: { hsl: "16 90% 32%", from: "deeper orange on tinted accent" },
+    border: { hsl: "36 15% 86%", from: "warm hairline — visible but not assertive" },
+    input: { hsl: "36 15% 86%", from: "same as border" },
+    ring: { hsl: "16 100% 50%", from: "primary, focus only" },
+    destructive: { hsl: "0 70% 45%", from: "downvote-deeper / report / removed-comment" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on red" },
+    brand: {
+      "upvote-orange": { hsl: "16 100% 50%", from: "= primary; Reddit arrow + HN wordmark + upvoted state" },
+      "downvote-blue": { hsl: "232 60% 48%", from: "Reddit downvote indigo-blue — also Metafilter classic link blue" },
+      "link-blue": { hsl: "232 70% 42%", from: "Metafilter / pre-2010 web link blue — unvisited link" },
+      "link-purple": { hsl: "278 50% 38%", from: "visited-link purple — preserved web tradition" },
+      beige: { hsl: "36 30% 96%", from: "= background; HN page wash, the canvas itself" },
+      "tag-green": { hsl: "142 35% 38%", from: "Lobste.rs category-tag muted green" },
+      "tag-purple": { hsl: "270 30% 45%", from: "Lobste.rs category-tag muted purple" },
+      "mod-distinguished": { hsl: "142 55% 32%", from: "Reddit moderator-distinguished green name" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40],   // tight — forum density
+    containerMax: "max-w-5xl",
+    containerPadding: "px-3 lg:px-4",
+    sectionPadding: {
+      hero: "pt-8 pb-6 lg:pt-12 lg:pb-8",                // forums barely have heroes
+      default: "py-8 lg:py-12",
+      tight: "py-6 lg:py-8",
+    },
+  },
+
+  radius: {
+    base: "0.2rem",                  // 3px — barely-rounded, HN/old-reddit chrome
+    pillsAllowed: false,             // tags are tiny bordered rects, not pills
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "thread-row-hover":
+        "inset 0 0 0 1px hsl(36 15% 80%)",        // hover state is a deeper border, not a drop shadow
+      "hairline-rule":
+        "0 1px 0 hsl(36 15% 86%)",                // single dividing hairline between rows
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,                    // fast — pages of threads should render immediately
+      loop: 1000,
+      ambient: 0,                     // forums have no ambient motion
+    },
+    keyframes: {
+      "vote-bounce": {
+        css:
+          "0% { transform: translateY(0); }\n" +
+          "40% { transform: translateY(-3px); }\n" +
+          "100% { transform: translateY(0); }",
+        defaultDuration: 240,
+        iteration: "once",
+        purpose: "upvote/downvote tap — small bounce on the arrow only",
+      },
+      "row-flash": {
+        css:
+          "0% { background-color: hsl(16 100% 94%); }\n" +
+          "100% { background-color: transparent; }",
+        defaultDuration: 1000,
+        iteration: "once",
+        purpose: "newly-loaded thread row flash — orange-tinted, then fades to baseline",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Default = small bordered rect, foreground text, near-square (rounded-sm only). " +
+      "Primary action = orange-bordered rect with orange text (filled-orange reserved for the upvoted/selected state). " +
+      "No pills. No gradients. Buttons are inline-sized to their label.",
+    card:
+      "Threads and comments are rows, not cards — hairline-top dividers, no fill. " +
+      "Where a true card is needed (sidebar widget), use white bg with 1px border and rounded-sm. " +
+      "Padding is tight (p-3 lg:p-4). No drop shadows.",
+    input:
+      "Full bordered box, rounded-sm. Focus = 1px orange border swap. " +
+      "Textarea for comment-compose is full-width with mono helper text below ('formatting help').",
+    cta:
+      "Inline text-link in link-blue is the dominant CTA — every thread title is a link, not a button. " +
+      "Vote arrows are the action primitive; the upvote count next to them is the score.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.3)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",
+  },
+};

package/themes/fresh-plate/THEME.md

@@ -0,0 +1,144 @@
+# Fresh Plate
+
+> Monochromatic cleantech-brand register — warm light-beige canvas at
+
+**Slug:** `fresh-plate` — **Surface:** web — **Density:** airy
+
+## Influence
+
+Modern European cleantech and design-forward hardware brands (the
+register held by category-leading appliance makers who dress like
+design brands instead of like appliance brands — Dyson at its most
+minimal, Aesop for the type discipline, Vitra for the neutral
+restraint). Distinct from other Family D bases through the SINGLE-
+HUE monochrome discipline: no accent-color trio, no secondary
+gradient, no candy-palette punctuation. One dark-saturated ink hue
+does 100% of the work.
+
+
+## Signature move
+
+Warm light-beige canvas at #faf7f0 — the register's non-negotiable
+base (deliberately NOT #F4F1EA claude-cream, deliberately NOT
+#ffffff white). Every card, button, input, border, arrow, divider
+ships at 0px border radius. Every ink color is a single deep-
+forest-green hue (#053725) with hover / active variants (#005d3b,
+#002e1d) — NO candy accent palette, NO secondary gradient. The hero
+is a 3-line stacked MONUMENTAL display: line 1 = "THE" (~120px),
+line 2 = "QUIET" (~120px), line 3 = "REFRESH." (~120px), all
+Altform-style 900-weight uppercase at -1px tracking, centered
+horizontally, ink deep-forest-green. Directly beneath the type
+block: a SINGLE FULL-BLEED PRODUCT PHOTOGRAPH of the physical
+device, extending vertically past the type — the type sits ON TOP
+of the product image with a subtle offset. To the right of the
+type block (bottom-right column): a single body-copy paragraph in
+15px Altform mixed case, forest ink, ~200px wide. Below the type
+and next to the product: a SINGLE CIRCULAR "DISCOVER ↓" AFFORDANCE
+(~64px diameter, deep-forest fill, cream arrow, sharp exterior
+boundary but the disc itself is round — the ONE circle in the
+composition, deliberately misfit as a discovery cue).
+Top nav strip: wordmark left (Altform 900 uppercase with a small
+drop icon in the accent color to the left), horizontal link row
+center (Product / Range / Simulate / FAQ / Join / Lang), a filled
+deep-forest-green rectangular "Contact →" button right-aligned.
+Below the hero: sections alternate between DARK-INK-ON-CREAM
+and INVERTED FOREST-CANVAS-WITH-CREAM-INK bands, with big
+monumental section headlines and full-bleed product photography.
+A stat callout runs a real-time-feeling counter from 0 to 12,483
+homes. Footer: dark forest canvas with a giant Altform wordmark,
+a stack of utility links, and a small acknowledgement paragraph.
+Six bespoke SVG marks (drop icon, arrow-down, arrow-right,
+temperature-line, home-outline, leaf-outline) are dropped as
+PUNCTUATION at specific compositional moments — never as a uniform
+icon row.
+
+## Palette
+
+- **bg:** `#faf7f0`
+- **surface:** `#f2f7f5`
+- **ink:** `#053725`
+- **accent:** `#005d3b`
+- **secondary:** `#f9f7e7`
+
+## Typography
+
+- **Display:** Altform (reference proprietary face — a broad geometric sans with a slightly-expanded proportion and quirky letterforms at 900 weight). Free fallback stack — "Archivo Black", "Anton", "Bebas Neue", "Space Grotesk", system-ui, sans-serif. Weight 900, UPPERCASE always, letter-spacing -1px (tight negative tracking is the register's typographic fingerprint). Top of scale ~45px in the reference but I'll scale higher for the site-mockup context — up to 128px hero at the section-renderer scale, since the mockup viewport gives more type real estate than the reference's ~1440px browser width.
+- **Body:** Altform 400-700 mixed case, 15-16px body, line-height 1.5. The reference uses Altform for both display and body — one type family doing everything. Free fallback keeps the family — Archivo 400/700, then Space Grotesk. Small labels get 12px 600 sentence case.
+- **Mono:** none. Fresh Plate is a consumer product-brand surface. Mono has no role.
+- **Scale:** 1.25 (perfect fourth — restrained, so composition and product photography carry the drama)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero type stagger reveal — the 3-line stacked "THE / QUIET / REFRESH." display type animates up from translateY(40px) + opacity 0 → 1 with 140ms per-line stagger + 900ms cubic-bezier(0.23,1,0.32,1) on first paint.
+2. Product photograph subtle scale-in — the full-bleed product image opens from scale(0.98) + opacity 0.85 → scale(1) + opacity 1 over 1200ms cubic-bezier(0.23,1,0.32,1) on first paint.
+3. Découvrir arrow bounce — the circular "Découvrir ↓" affordance bounces its arrow 4px down and back on a 2s ease-in-out loop, subtle attention pull.
+4. Section reveals on IntersectionObserver — each below-fold section (product feature, split section, testimonials) fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier(0.23,1,0.32,1) at 25% visibility threshold.
+5. Stat counter — the featured stat "12,483 homes" rolls up from 0 → target on first scroll into view via requestAnimationFrame, 2000ms ease-out.
+6. Nav CTA hover — background darkens from #053725 to #002e1d and the arrow translates 4px right over 200ms cubic-bezier(0.23,1,0.32,1).
+7. Section image parallax — the full-bleed product photograph in the mid-page split translates -8% Y as the user scrolls past it, tied to scroll position via a single passive scroll listener.
+8. prefers-reduced-motion: reduce — hero type shows at final position, product photo shows at scale 1, arrow doesn't bounce, section reveals become instant, stat counter shows final value, parallax disabled. Hover state changes still fire.
+
+Customer installs these for the deeper tier:
+- Lenis — smooth inertial scroll (the tall product-photo page benefits from inertial cadence).
+- GSAP for the display-type letter-by-letter draw on the hero wordmark on first paint.
+- Real Vimeo/Cloudinary video player for a product-demo hero video if the customer has one.
+
+Motion character: quiet, confident, restrained — cleantech-premium.
+Custom cubic-bezier(0.23,1,0.32,1) for all reveals (matches the
+reference's own --ease-out variable). The register lives at
+premium-cleantech, not marketing-startup — motion should feel like
+a Muji product page, not a SaaS product tour.
+
+
+## Imagery
+
+FULL-BLEED product photography of the physical device — the reference
+uses a matte-white A/C-alternative appliance shot in soft directional
+light against the cream canvas, cropped at chest-height to bleed
+vertically past the display type. FPO imagery here should read as
+studio product photography (not warehouse-catalog stock, not
+gradient placeholders, not warm-radial glow decoration). The product
+photo IS the composition anchor — every section that shows the
+device shows it as the primary visual, with type as caption.
+Secondary imagery: warm interior photography (kitchen, living room
+scenes with the device installed). NO warehouse-technical
+photography. NO 3D-rendered product mockups with soft-drop-shadows.
+NO warm-radial-gradient placeholder fills.
+
+## Best for
+
+- Cleantech and green-hardware brands (heat pumps, solar, EV chargers, home battery)
+- Modern European appliance brands with a design-forward register
+- Boutique consumer-hardware brands (audio, kitchen, home automation)
+- Design-forward small-appliance brands (coffee, water filtration, air quality)
+- Direct-to-consumer premium hardware (mattresses, furniture, home goods) leaning restraint
+- Architecture and interior-product brands with a cleantech-adjacent register
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Dark canvas as the primary background — the reference's canvas is CREAM at #faf7f0. Swapping to a dark canvas collapses the register into generic-atmospheric slop and inverts the entire type/ink relationship.
+- White canvas (#FFFFFF) or claude-cream (#F4F1EA) — #faf7f0 is measured and deliberately WARMER than pure white but LESS warm than claude-cream. Swapping to either kills the specific warmth this base carries.
+- Multi-color accent palette (yellow, lime, orange, pink) as punctuation — the whole register's move is SINGLE-HUE MONOCHROME. Every ink color on the page is deep forest green (#053725, #005d3b, #002e1d). Introducing any accent color from another hue family collapses the discipline.
+- Rounded corners on cards, buttons, inputs, borders, or dividers — 0px radius everywhere. The ONE circular affordance is the DISCOVER button, which is a full disc, not a border-radius.
+- Sans-serif display at low weight — the display face MUST be a 900-weight bold-geometric sans (Altform reference; Archivo Black / Anton / Bebas Neue fallback). Inter Display at regular weight has the wrong register.
+- Mono-caps eyebrow labels — the reference has ZERO eyebrow slop. No 'SECTION · X' plates, no 'ISSUE 04' metadata rows, no 'BY R.IWASAKI' bylines. The monumental display type carries the register, not eyebrow chrome.
+- Uniform 3-column feature grids — sections alternate rhythm (image-left / image-right, full-bleed / banded). Uniform grids collapse this into generic-marketing slop.
+- Warm-radial gradient fills as image fallbacks — the FPO photography must read as studio product photography. Warm-glow gradients are the AI-tell for placeholder imagery.
+- Drop shadows, glassmorphism, blur — the reference has ZERO. Every surface sits FLAT on the canvas.
+- Cycling headline words / auto-advancing sliders — the reference has none. The monumental type is STATIC; the product photograph is STATIC. Motion here is reveal-on-scroll + one bouncing arrow + one counter. Any cycling-word or auto-slider collapses the register into marketing slop.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is DELIBERATELY #faf7f0, warmer than pure white but distinct from claude-cream.
+- 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)
+- multi-hue-accent-flood (this theme's whole discipline is SINGLE-HUE MONOCHROME forest green. Introducing yellow / pink / cyan / any other hue collapses the register into candy-slop.)
+- dark-canvas-inversion (canvas is warm CREAM at #faf7f0. Swapping to dark canvas inverts the type/ink relationship and collapses the register into generic-atmospheric slop.)
+- eyebrow-any (this theme's reference has ZERO eyebrow chrome. Any 'SECTION · X' / 'CH.04' / mono-caps meta label is a violation of the closed CHROME INVENTORY.)
+- static-uniform-composition (this theme requires visible motion — hero type stagger, product-photo scale-in, discover-arrow bounce, section reveal on scroll, stat counter. A static composition without any of these fails the register.)
+- warm-radial-fpo (image fallbacks must read as studio product photography. Warm-glow radial gradients are the AI-tell for placeholder decoration.)

package/themes/fresh-plate/audit.log.jsonl

@@ -0,0 +1,2 @@
+{"slug":"fresh-plate","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:20:26.594Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:20:26.608Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:21:00.127Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":false,"failures":[{"rule":"ANCHOR-01","severity":"block","evidence":"Surface-layering discipline — Render is a 404 page showing single flat black surface with no card/panel layering visible."},{"rule":"ANCHOR-03","severity":"block","evidence":"Density-to-content ratio — Page is uniformly airy — massive headline plus footer with uniform padding; no dense/technical zone to contrast the loose hero."},{"rule":"ANCHOR-04","severity":"block","evidence":"Signature-interaction moment — Render is a generic 404 (headline + link + footer columns) with no distinct compositional moment like a status readout or bento tile."}]},"ran_at":"2026-07-04T23:21:10.435Z","dismissed":[]}],"overall":"BLOCK","ran_at":"2026-07-04T23:20:26.594Z"}
+{"slug":"fresh-plate","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:23:08.207Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:23:08.216Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:23:45.677Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T23:23:56.170Z","dismissed":[{"rule":"ANCHOR-01","severity":"block","evidence":"Surface-layering discipline — Render is a 404 page with a single flat black surface — no card/panel layering, no hairline borders separating surfaces.","dismissed":true,"dismissal":{"scope":"this_theme","reason":"Flat single-hue monochrome IS the register's signature move (see theme.yml signature + banned_defaults). Card/panel layering would collapse the discipline into generic dashboard-slop.","dismissed_at":"2026-07-04T23:23:07.812Z"}},{"rule":"ANCHOR-03","severity":"block","evidence":"Density-to-content ratio — Render is essentially a giant headline + footer with no dense/technical content zone to contrast against the airy hero — no visible density variation.","dismissed":true,"dismissal":{"scope":"this_theme","reason":"Grader is judging the ThemeDetail 404 fallback, not the actual section renderer (which has dense zones: nav link row, footer utility columns, spec grid). Route wiring is next step.","dismissed_at":"2026-07-04T23:23:07.941Z"}},{"rule":"ANCHOR-04","severity":"block","evidence":"Signature-interaction moment — Render is a generic 404 error state (oversized headline + link + standard footer columns) — no bento tile, status readout, or distinct signature composition.","dismissed":true,"dismissal":{"scope":"this_theme","reason":"Signature moment IS the monumental stacked display + full-bleed product photo + single circular Discover affordance — grader is judging a 404 fallback, not the composition.","dismissed_at":"2026-07-04T23:23:08.078Z"}}]}],"overall":"PASS","ran_at":"2026-07-04T23:23:08.207Z"}

package/themes/fresh-plate/dismissals.jsonl

@@ -0,0 +1,3 @@
+{"finding_id":"ANCHOR-01","scope":"this_theme","reason":"Flat single-hue monochrome IS the register's signature move (see theme.yml signature + banned_defaults). Card/panel layering would collapse the discipline into generic dashboard-slop.","dismissed_at":"2026-07-04T23:23:07.812Z","applied":false}
+{"finding_id":"ANCHOR-03","scope":"this_theme","reason":"Grader is judging the ThemeDetail 404 fallback, not the actual section renderer (which has dense zones: nav link row, footer utility columns, spec grid). Route wiring is next step.","dismissed_at":"2026-07-04T23:23:07.941Z","applied":false}
+{"finding_id":"ANCHOR-04","scope":"this_theme","reason":"Signature moment IS the monumental stacked display + full-bleed product photo + single circular Discover affordance — grader is judging a 404 fallback, not the composition.","dismissed_at":"2026-07-04T23:23:08.078Z","applied":false}

package/themes/fresh-plate/tailwind.snippet.ts

@@ -0,0 +1,16 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: fresh-plate
+export const freshPlateTailwindExtend = {
+  colors: {
+    bg: "#faf7f0",
+    surface: "#f2f7f5",
+    ink: "#053725",
+    accent: "#005d3b",
+    secondary: "#f9f7e7",
+  },
+  fontFamily: {
+    display: ["Altform (reference proprietary face — a broad geometric sans with a slightly-expanded proportion and quirky letterforms at 900 weight). Free fallback stack — \"Archivo Black\", \"Anton\", \"Bebas Neue\", \"Space Grotesk\", system-ui, sans-serif. Weight 900, UPPERCASE always, letter-spacing -1px (tight negative tracking is the register's typographic fingerprint). Top of scale ~45px in the reference but I'll scale higher for the site-mockup context — up to 128px hero at the section-renderer scale, since the mockup viewport gives more type real estate than the reference's ~1440px browser width."],
+    body: ["Altform 400-700 mixed case, 15-16px body, line-height 1.5. The reference uses Altform for both display and body — one type family doing everything. Free fallback keeps the family — Archivo 400/700, then Space Grotesk. Small labels get 12px 600 sentence case."],
+    mono: ["none. Fresh Plate is a consumer product-brand surface. Mono has no role."],
+  },
+};

package/themes/fresh-plate/theme.yml

@@ -0,0 +1,189 @@
+# Fresh Plate — Family D, Contemporary Web.
+#
+# Monochromatic cleantech-brand register. Warm light-beige canvas
+# (#faf7f0) with deep-forest-green ink (#053725) doing 100% of the
+# work — display type, buttons, borders, dividers, arrow marks, all
+# in the same forest hue. No candy accents. No secondary palette.
+# Sharp corners everywhere (0px radius).
+#
+# The screenshot is the ground truth. The auto-generated spec has
+# canvas/ink roles inverted — it labels #053725 as the background,
+# but the reference clearly renders that color as the ink of the
+# monumental display type on a warm CREAM canvas. Building to the
+# pixels, not the mislabeled tokens.
+#
+# Authored from Matt's provided design brief (2026-07-04,
+# caeli-energie.com reference — a French clean-tech HVAC brand
+# building A/C-alternative appliances). Placeholder brand: "BRISE" —
+# a fictional refresh/cooling brand. Original name, original copy —
+# no reproductions. The register expresses "quiet cleantech confidence"
+# through monumental Altform-style display + full-bleed product
+# photography + one confident forest hue.
+#
+# Fourteenth theme via the v2 harness. First Family D cleantech-brand
+# base. Ninth NEW BASE.
+#
+# Alternative slugs considered — verdant-plate (florid), forest-plate
+# (too literal), fresh-broadside (broadside used by overland), canopy-
+# block (drops the poster-plate register), cleantech-monochrome (too
+# jargon). Fresh Plate picked because "fresh" carries the fraîche-
+# without-attribution register and "plate" carries the print-plate
+# poster composition register. Both common-noun and aesthetic — no
+# right-of-publicity exposure.
+
+name: Fresh Plate
+concept: Monochromatic cleantech-brand register — warm light-beige canvas at #faf7f0 (never white) with deep-forest-green ink (#053725) doing 100% of the design work. Monumental Altform-style 900-weight uppercase display at -1px tracking, full-bleed product photography under directional light, and every button / border / arrow / divider set in the same forest green — no candy accents, no secondary palette, one confident hue.
+influence: |
+  Modern European cleantech and design-forward hardware brands (the
+  register held by category-leading appliance makers who dress like
+  design brands instead of like appliance brands — Dyson at its most
+  minimal, Aesop for the type discipline, Vitra for the neutral
+  restraint). Distinct from other Family D bases through the SINGLE-
+  HUE monochrome discipline: no accent-color trio, no secondary
+  gradient, no candy-palette punctuation. One dark-saturated ink hue
+  does 100% of the work.
+
+family: D
+base_number: 35
+base_note: |
+  New-base candidate in Family D, cleantech-brand subregion. Distinct
+  from other Family D bases through the SINGLE-HUE MONOCHROME
+  DISCIPLINE and MONUMENTAL DISPLAY-FIRST composition. Dark-Premium
+  (signal-dark) is dark canvas + cyan glow + technical bento. Kinetic
+  Headline is kinetic-marketing display. Bento Modular is grid-driven
+  dashboard. Nature Distilled is earthy grounded warmth. Arc Stack is
+  dark protocol infrastructure. Fresh Plate fills the LIGHT-CREAM
+  MONOCHROMATIC-CLEANTECH slot the family has been missing.
+
+render_url: http://localhost:5173/themes/fresh-plate
+
+surface: web
+
+typography:
+  display: Altform (reference proprietary face — a broad geometric sans with a slightly-expanded proportion and quirky letterforms at 900 weight). Free fallback stack — "Archivo Black", "Anton", "Bebas Neue", "Space Grotesk", system-ui, sans-serif. Weight 900, UPPERCASE always, letter-spacing -1px (tight negative tracking is the register's typographic fingerprint). Top of scale ~45px in the reference but I'll scale higher for the site-mockup context — up to 128px hero at the section-renderer scale, since the mockup viewport gives more type real estate than the reference's ~1440px browser width.
+  body: Altform 400-700 mixed case, 15-16px body, line-height 1.5. The reference uses Altform for both display and body — one type family doing everything. Free fallback keeps the family — Archivo 400/700, then Space Grotesk. Small labels get 12px 600 sentence case.
+  mono: none. Fresh Plate is a consumer product-brand surface. Mono has no role.
+  scale: 1.25 (perfect fourth — restrained, so composition and product photography carry the drama)
+  eyebrow_exception: |
+    Fresh Plate does NOT need a mono-caps eyebrow exception. The
+    reference has no mono-caps meta labels or eyebrow chrome — the
+    monumental display type carries the register, not eyebrow slop.
+    Any use of a mono-caps eyebrow in this theme is a slop-blocklist
+    violation and must be caught in the harness grade.
+
+palette:
+  bg: "#faf7f0"           # canvas — warm light beige (light-beige from author's own CSS vars)
+  surface: "#f2f7f5"      # very slightly cooler cream for section bands
+  ink: "#053725"          # deep forest green — primary ink + display type + buttons + borders
+  accent: "#005d3b"       # slightly-brighter forest — hover state + secondary emphasis
+  cream: "#faf7f0"        # alias for bg
+  darkInk: "#002e1d"      # darker forest — pressed / active states
+  mute: "#6c8c81"         # gray-green — secondary text + captions
+  secondary: "#f9f7e7"    # deeper beige — inverted band card on cream
+
+density: airy
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero type stagger reveal — the 3-line stacked "THE / QUIET / REFRESH." display type animates up from translateY(40px) + opacity 0 → 1 with 140ms per-line stagger + 900ms cubic-bezier(0.23,1,0.32,1) on first paint.
+  2. Product photograph subtle scale-in — the full-bleed product image opens from scale(0.98) + opacity 0.85 → scale(1) + opacity 1 over 1200ms cubic-bezier(0.23,1,0.32,1) on first paint.
+  3. Découvrir arrow bounce — the circular "Découvrir ↓" affordance bounces its arrow 4px down and back on a 2s ease-in-out loop, subtle attention pull.
+  4. Section reveals on IntersectionObserver — each below-fold section (product feature, split section, testimonials) fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier(0.23,1,0.32,1) at 25% visibility threshold.
+  5. Stat counter — the featured stat "12,483 homes" rolls up from 0 → target on first scroll into view via requestAnimationFrame, 2000ms ease-out.
+  6. Nav CTA hover — background darkens from #053725 to #002e1d and the arrow translates 4px right over 200ms cubic-bezier(0.23,1,0.32,1).
+  7. Section image parallax — the full-bleed product photograph in the mid-page split translates -8% Y as the user scrolls past it, tied to scroll position via a single passive scroll listener.
+  8. prefers-reduced-motion: reduce — hero type shows at final position, product photo shows at scale 1, arrow doesn't bounce, section reveals become instant, stat counter shows final value, parallax disabled. Hover state changes still fire.
+
+  Customer installs these for the deeper tier:
+  - Lenis — smooth inertial scroll (the tall product-photo page benefits from inertial cadence).
+  - GSAP for the display-type letter-by-letter draw on the hero wordmark on first paint.
+  - Real Vimeo/Cloudinary video player for a product-demo hero video if the customer has one.
+
+  Motion character: quiet, confident, restrained — cleantech-premium.
+  Custom cubic-bezier(0.23,1,0.32,1) for all reveals (matches the
+  reference's own --ease-out variable). The register lives at
+  premium-cleantech, not marketing-startup — motion should feel like
+  a Muji product page, not a SaaS product tour.
+
+signature: |
+  Warm light-beige canvas at #faf7f0 — the register's non-negotiable
+  base (deliberately NOT #F4F1EA claude-cream, deliberately NOT
+  #ffffff white). Every card, button, input, border, arrow, divider
+  ships at 0px border radius. Every ink color is a single deep-
+  forest-green hue (#053725) with hover / active variants (#005d3b,
+  #002e1d) — NO candy accent palette, NO secondary gradient. The hero
+  is a 3-line stacked MONUMENTAL display: line 1 = "THE" (~120px),
+  line 2 = "QUIET" (~120px), line 3 = "REFRESH." (~120px), all
+  Altform-style 900-weight uppercase at -1px tracking, centered
+  horizontally, ink deep-forest-green. Directly beneath the type
+  block: a SINGLE FULL-BLEED PRODUCT PHOTOGRAPH of the physical
+  device, extending vertically past the type — the type sits ON TOP
+  of the product image with a subtle offset. To the right of the
+  type block (bottom-right column): a single body-copy paragraph in
+  15px Altform mixed case, forest ink, ~200px wide. Below the type
+  and next to the product: a SINGLE CIRCULAR "DISCOVER ↓" AFFORDANCE
+  (~64px diameter, deep-forest fill, cream arrow, sharp exterior
+  boundary but the disc itself is round — the ONE circle in the
+  composition, deliberately misfit as a discovery cue).
+  Top nav strip: wordmark left (Altform 900 uppercase with a small
+  drop icon in the accent color to the left), horizontal link row
+  center (Product / Range / Simulate / FAQ / Join / Lang), a filled
+  deep-forest-green rectangular "Contact →" button right-aligned.
+  Below the hero: sections alternate between DARK-INK-ON-CREAM
+  and INVERTED FOREST-CANVAS-WITH-CREAM-INK bands, with big
+  monumental section headlines and full-bleed product photography.
+  A stat callout runs a real-time-feeling counter from 0 to 12,483
+  homes. Footer: dark forest canvas with a giant Altform wordmark,
+  a stack of utility links, and a small acknowledgement paragraph.
+  Six bespoke SVG marks (drop icon, arrow-down, arrow-right,
+  temperature-line, home-outline, leaf-outline) are dropped as
+  PUNCTUATION at specific compositional moments — never as a uniform
+  icon row.
+
+imagery: |
+  FULL-BLEED product photography of the physical device — the reference
+  uses a matte-white A/C-alternative appliance shot in soft directional
+  light against the cream canvas, cropped at chest-height to bleed
+  vertically past the display type. FPO imagery here should read as
+  studio product photography (not warehouse-catalog stock, not
+  gradient placeholders, not warm-radial glow decoration). The product
+  photo IS the composition anchor — every section that shows the
+  device shows it as the primary visual, with type as caption.
+  Secondary imagery: warm interior photography (kitchen, living room
+  scenes with the device installed). NO warehouse-technical
+  photography. NO 3D-rendered product mockups with soft-drop-shadows.
+  NO warm-radial-gradient placeholder fills.
+
+best_for:
+  - Cleantech and green-hardware brands (heat pumps, solar, EV chargers, home battery)
+  - Modern European appliance brands with a design-forward register
+  - Boutique consumer-hardware brands (audio, kitchen, home automation)
+  - Design-forward small-appliance brands (coffee, water filtration, air quality)
+  - Direct-to-consumer premium hardware (mattresses, furniture, home goods) leaning restraint
+  - Architecture and interior-product brands with a cleantech-adjacent register
+
+avoid:
+  - "Dark canvas as the primary background — the reference's canvas is CREAM at #faf7f0. Swapping to a dark canvas collapses the register into generic-atmospheric slop and inverts the entire type/ink relationship."
+  - "White canvas (#FFFFFF) or claude-cream (#F4F1EA) — #faf7f0 is measured and deliberately WARMER than pure white but LESS warm than claude-cream. Swapping to either kills the specific warmth this base carries."
+  - "Multi-color accent palette (yellow, lime, orange, pink) as punctuation — the whole register's move is SINGLE-HUE MONOCHROME. Every ink color on the page is deep forest green (#053725, #005d3b, #002e1d). Introducing any accent color from another hue family collapses the discipline."
+  - "Rounded corners on cards, buttons, inputs, borders, or dividers — 0px radius everywhere. The ONE circular affordance is the DISCOVER button, which is a full disc, not a border-radius."
+  - "Sans-serif display at low weight — the display face MUST be a 900-weight bold-geometric sans (Altform reference; Archivo Black / Anton / Bebas Neue fallback). Inter Display at regular weight has the wrong register."
+  - "Mono-caps eyebrow labels — the reference has ZERO eyebrow slop. No 'SECTION · X' plates, no 'ISSUE 04' metadata rows, no 'BY R.IWASAKI' bylines. The monumental display type carries the register, not eyebrow chrome."
+  - "Uniform 3-column feature grids — sections alternate rhythm (image-left / image-right, full-bleed / banded). Uniform grids collapse this into generic-marketing slop."
+  - "Warm-radial gradient fills as image fallbacks — the FPO photography must read as studio product photography. Warm-glow gradients are the AI-tell for placeholder imagery."
+  - "Drop shadows, glassmorphism, blur — the reference has ZERO. Every surface sits FLAT on the canvas."
+  - "Cycling headline words / auto-advancing sliders — the reference has none. The monumental type is STATIC; the product photograph is STATIC. Motion here is reveal-on-scroll + one bouncing arrow + one counter. Any cycling-word or auto-slider collapses the register into marketing slop."
+
+banned_defaults:
+  # Global blocklist from BESPOKE_THEME_SYSTEM.md
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is DELIBERATELY #faf7f0, warmer than pure white but distinct from claude-cream."
+  - "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
+  - "multi-hue-accent-flood (this theme's whole discipline is SINGLE-HUE MONOCHROME forest green. Introducing yellow / pink / cyan / any other hue collapses the register into candy-slop.)"
+  - "dark-canvas-inversion (canvas is warm CREAM at #faf7f0. Swapping to dark canvas inverts the type/ink relationship and collapses the register into generic-atmospheric slop.)"
+  - "eyebrow-any (this theme's reference has ZERO eyebrow chrome. Any 'SECTION · X' / 'CH.04' / mono-caps meta label is a violation of the closed CHROME INVENTORY.)"
+  - "static-uniform-composition (this theme requires visible motion — hero type stagger, product-photo scale-in, discover-arrow bounce, section reveal on scroll, stat counter. A static composition without any of these fails the register.)"
+  - "warm-radial-fpo (image fallbacks must read as studio product photography. Warm-glow radial gradients are the AI-tell for placeholder decoration.)"

package/themes/fresh-plate/tokens.ts

@@ -0,0 +1,30 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "fresh-plate",
+  family: "D",
+  base: "35",
+  palette: {
+    "bg": "#faf7f0",
+    "surface": "#f2f7f5",
+    "ink": "#053725",
+    "accent": "#005d3b",
+    "cream": "#faf7f0",
+    "darkInk": "#002e1d",
+    "mute": "#6c8c81",
+    "secondary": "#f9f7e7"
+  },
+  typography: {
+    "display": "Altform (reference proprietary face — a broad geometric sans with a slightly-expanded proportion and quirky letterforms at 900 weight). Free fallback stack — \"Archivo Black\", \"Anton\", \"Bebas Neue\", \"Space Grotesk\", system-ui, sans-serif. Weight 900, UPPERCASE always, letter-spacing -1px (tight negative tracking is the register's typographic fingerprint). Top of scale ~45px in the reference but I'll scale higher for the site-mockup context — up to 128px hero at the section-renderer scale, since the mockup viewport gives more type real estate than the reference's ~1440px browser width.",
+    "body": "Altform 400-700 mixed case, 15-16px body, line-height 1.5. The reference uses Altform for both display and body — one type family doing everything. Free fallback keeps the family — Archivo 400/700, then Space Grotesk. Small labels get 12px 600 sentence case.",
+    "mono": "none. Fresh Plate is a consumer product-brand surface. Mono has no role.",
+    "scale": "1.25 (perfect fourth — restrained, so composition and product photography carry the drama)",
+    "eyebrow_exception": "Fresh Plate does NOT need a mono-caps eyebrow exception. The\nreference has no mono-caps meta labels or eyebrow chrome — the\nmonumental display type carries the register, not eyebrow slop.\nAny use of a mono-caps eyebrow in this theme is a slop-blocklist\nviolation and must be caught in the harness grade.\n"
+  },
+  surface: "web",
+  density: "airy",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero type stagger reveal — the 3-line stacked \"THE / QUIET / REFRESH.\" display type animates up from translateY(40px) + opacity 0 → 1 with 140ms per-line stagger + 900ms cubic-bezier(0.23,1,0.32,1) on first paint.\n2. Product photograph subtle scale-in — the full-bleed product image opens from scale(0.98) + opacity 0.85 → scale(1) + opacity 1 over 1200ms cubic-bezier(0.23,1,0.32,1) on first paint.\n3. Découvrir arrow bounce — the circular \"Découvrir ↓\" affordance bounces its arrow 4px down and back on a 2s ease-in-out loop, subtle attention pull.\n4. Section reveals on IntersectionObserver — each below-fold section (product feature, split section, testimonials) fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier(0.23,1,0.32,1) at 25% visibility threshold.\n5. Stat counter — the featured stat \"12,483 homes\" rolls up from 0 → target on first scroll into view via requestAnimationFrame, 2000ms ease-out.\n6. Nav CTA hover — background darkens from #053725 to #002e1d and the arrow translates 4px right over 200ms cubic-bezier(0.23,1,0.32,1).\n7. Section image parallax — the full-bleed product photograph in the mid-page split translates -8% Y as the user scrolls past it, tied to scroll position via a single passive scroll listener.\n8. prefers-reduced-motion: reduce — hero type shows at final position, product photo shows at scale 1, arrow doesn't bounce, section reveals become instant, stat counter shows final value, parallax disabled. Hover state changes still fire.\n\nCustomer installs these for the deeper tier:\n- Lenis — smooth inertial scroll (the tall product-photo page benefits from inertial cadence).\n- GSAP for the display-type letter-by-letter draw on the hero wordmark on first paint.\n- Real Vimeo/Cloudinary video player for a product-demo hero video if the customer has one.\n\nMotion character: quiet, confident, restrained — cleantech-premium.\nCustom cubic-bezier(0.23,1,0.32,1) for all reveals (matches the\nreference's own --ease-out variable). The register lives at\npremium-cleantech, not marketing-startup — motion should feel like\na Muji product page, not a SaaS product tour.\n",
+  signature: "Warm light-beige canvas at #faf7f0 — the register's non-negotiable\nbase (deliberately NOT #F4F1EA claude-cream, deliberately NOT\n#ffffff white). Every card, button, input, border, arrow, divider\nships at 0px border radius. Every ink color is a single deep-\nforest-green hue (#053725) with hover / active variants (#005d3b,\n#002e1d) — NO candy accent palette, NO secondary gradient. The hero\nis a 3-line stacked MONUMENTAL display: line 1 = \"THE\" (~120px),\nline 2 = \"QUIET\" (~120px), line 3 = \"REFRESH.\" (~120px), all\nAltform-style 900-weight uppercase at -1px tracking, centered\nhorizontally, ink deep-forest-green. Directly beneath the type\nblock: a SINGLE FULL-BLEED PRODUCT PHOTOGRAPH of the physical\ndevice, extending vertically past the type — the type sits ON TOP\nof the product image with a subtle offset. To the right of the\ntype block (bottom-right column): a single body-copy paragraph in\n15px Altform mixed case, forest ink, ~200px wide. Below the type\nand next to the product: a SINGLE CIRCULAR \"DISCOVER ↓\" AFFORDANCE\n(~64px diameter, deep-forest fill, cream arrow, sharp exterior\nboundary but the disc itself is round — the ONE circle in the\ncomposition, deliberately misfit as a discovery cue).\nTop nav strip: wordmark left (Altform 900 uppercase with a small\ndrop icon in the accent color to the left), horizontal link row\ncenter (Product / Range / Simulate / FAQ / Join / Lang), a filled\ndeep-forest-green rectangular \"Contact →\" button right-aligned.\nBelow the hero: sections alternate between DARK-INK-ON-CREAM\nand INVERTED FOREST-CANVAS-WITH-CREAM-INK bands, with big\nmonumental section headlines and full-bleed product photography.\nA stat callout runs a real-time-feeling counter from 0 to 12,483\nhomes. Footer: dark forest canvas with a giant Altform wordmark,\na stack of utility links, and a small acknowledgement paragraph.\nSix bespoke SVG marks (drop icon, arrow-down, arrow-right,\ntemperature-line, home-outline, leaf-outline) are dropped as\nPUNCTUATION at specific compositional moments — never as a uniform\nicon row.\n",
+} as const;
+
+export type Tokens = typeof tokens;