@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/nonprofit-warm/tokens.ts

@@ -0,0 +1,188 @@
+import type { Direction } from "../schema";
+
+export const nonprofitWarm: Direction = {
+  name: "nonprofit-warm",
+  ethos:
+    "charity:water yellow signal · Wikimedia serif restraint · Doctors Without Borders warm-red urgency · 350.org activist serif · GiveDirectly tabular trust",
+  references: [
+    { brand: "charity:water", trait: "yellow signal + warm cream + documentary photography" },
+    { brand: "Wikimedia Foundation", trait: "warm cream + serif headlines + restrained chrome" },
+    { brand: "Doctors Without Borders / MSF", trait: "warm cream + warm-red signal + field photography" },
+    { brand: "350.org", trait: "deep cream + activist serif + grassroots warmth" },
+    { brand: "GiveDirectly", trait: "cream + structured nonprofit-tabular impact data" },
+  ],
+  feel:
+    "Warm cream paper, serif headlines that read like a printed annual report, and photographic " +
+    "storytelling that puts the people first. One restrained give-button signal — warm-yellow on " +
+    "cream — earns attention without ever feeling slick. The whole surface telegraphs trust: " +
+    "emotionally honest, structurally clear, with the financials and the field reports both visible " +
+    "in the same calm hierarchy.",
+
+  fonts: {
+    display: {
+      family: "Source Serif 4",
+      fallback: ["Source Serif Pro", "Iowan Old Style", "Charter", "Georgia", "serif"],
+      from: "Wikimedia/350.org humanist serif — annual-report headline weight without academic stiffness",
+      googleFont: "Source+Serif+4",
+      weights: [400, 600, 700],
+    },
+    body: {
+      family: "Source Sans 3",
+      fallback: ["Source Sans Pro", "Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Wikimedia/charity:water humanist sans — warm, readable, never corporate-flat",
+      googleFont: "Source+Sans+3",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "impact-data tables, financial statements, beneficiary counts — instrument feel for numbers",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.012em",      // Source Serif at display scale wants a hair tighter
+    bodyTracking: "0",
+    fontFeatureSettings: '"liga", "kern", "tnum", "ss01"',
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",   // emotional but not theatrical — annual-report cover scale
+    bodyBaseSize: "1.0625rem",        // 17px — slightly larger for trust and accessibility
+    bodyLineHeight: "1.7",            // magazine-generous; nonprofit stories read slow on purpose
+  },
+
+  colors: {
+    background: { hsl: "38 35% 95%", from: "warm cream paper — charity:water/Wikimedia stock, ledger-warm" },
+    foreground: { hsl: "24 28% 14%", from: "warm-deep ink — softer than blue-black, has empathy in it" },
+    card: { hsl: "38 30% 98%", from: "card surface — one tier brighter than paper, never pure white" },
+    popover: { hsl: "38 30% 98%", from: "popover surface — same as card" },
+    primary: { hsl: "8 72% 44%", from: "Doctors Without Borders warm red — urgency without anger, used for give CTAs" },
+    primaryForeground: { hsl: "38 35% 95%", from: "warm cream on warm red" },
+    secondary: { hsl: "38 25% 90%", from: "warm paper, one tier deeper — section dividers, quote-block backgrounds" },
+    secondaryForeground: { hsl: "24 28% 14%", from: "warm ink on warm paper" },
+    muted: { hsl: "38 22% 88%", from: "muted surface — sidebars, footers, secondary panels" },
+    mutedForeground: { hsl: "24 18% 36%", from: "secondary text — bylines, captions, last-updated stamps" },
+    accent: { hsl: "44 88% 62%", from: "charity:water signal yellow — the give-button accent, sun-warm" },
+    accentForeground: { hsl: "24 28% 14%", from: "warm ink on signal yellow (yellow can't carry white text accessibly)" },
+    border: { hsl: "30 18% 82%", from: "hairline rule — annual-report ledger line, warm-toned not gray" },
+    input: { hsl: "30 18% 82%", from: "same as border — single hairline language" },
+    ring: { hsl: "8 72% 44%", from: "primary warm-red — focus ring matches give-CTA accent" },
+    destructive: { hsl: "0 75% 42%", from: "alert red, more saturated than the primary urgency-red" },
+    destructiveForeground: { hsl: "38 35% 95%", from: "warm cream on alert red" },
+    brand: {
+      paper: { hsl: "38 35% 95%", from: "the warm cream — semantic background, also page surface in print analog" },
+      ink: { hsl: "24 28% 14%", from: "the warm-deep ink — semantic foreground, also body prose" },
+      "give-yellow": { hsl: "44 88% 62%", from: "charity:water signal — the give-button color, sun-warm" },
+      "field-red": { hsl: "8 72% 44%", from: "MSF/350.org urgency red — restrained, used for primary CTA only" },
+      "trust-green": { hsl: "150 38% 36%", from: "GiveDirectly verified-data green — for impact-stat check marks and progress" },
+      "ink-soft": { hsl: "24 22% 26%", from: "secondary headings and deck text — softer than primary ink" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],   // low-to-medium density — story breathing
+    containerMax: "max-w-5xl",        // 1024px — wider than editorial (photo room), narrower than dashboard
+    containerPadding: "px-5 lg:px-10",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-28 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-14",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                  // 4px — gently softened ledger-rect, never pillow
+    pillsAllowed: false,              // no pills — pills read web-app/marketing-slick; nonprofit uses rectangles and rules
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--border))",
+      "card-paper":
+        "0 1px 2px 0 hsl(24 28% 14% / 0.04), " +
+        "0 4px 10px 0 hsl(24 28% 14% / 0.05)",
+      "give-glow":
+        "0 0 0 1px hsl(var(--give-yellow) / 0.5), " +
+        "0 4px 16px hsl(var(--give-yellow) / 0.3)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1000,
+      loop: 3000,
+      ambient: 12000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(20px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1000,
+        iteration: "once",
+        purpose: "section entrance — gentle rise, never theatrical, story-paced",
+      },
+      "count-up": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 1800,
+        iteration: "once",
+        purpose: "impact-stat opacity reveal — pair with JS counter for the number itself (people served, wells dug)",
+      },
+      "progress-fill": {
+        css:
+          "from { width: 0%; }\n" +
+          "to { width: var(--progress, 0%); }",
+        defaultDuration: 1600,
+        iteration: "once",
+        purpose: "campaign progress bar — fundraising goal, vaccination progress; honest, never gamified",
+      },
+      "give-pulse": {
+        css:
+          "0%, 100% { box-shadow: 0 0 0 0 hsl(var(--give-yellow) / 0.55); }\n" +
+          "50% { box-shadow: 0 0 0 10px hsl(var(--give-yellow) / 0); }",
+        defaultDuration: 2800,
+        iteration: "infinite",
+        purpose: "the single Donate CTA breathes — never more than one per page, never on a secondary action",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Default = ghost: 1px --border, foreground text, hover bg-secondary. " +
+      "Primary 'Donate' / 'Give' = solid --give-yellow fill with --ink text (yellow + dark for accessible contrast). " +
+      "Secondary 'Take action' = solid --field-red fill with paper text (urgency red, used sparingly). " +
+      "Tertiary = inline text link, --foreground color, underline always visible (accessibility-first). " +
+      "Buttons are rectangles with 0.25rem radius — never pills, never gradients.",
+    card:
+      "Soft 0.25rem corners, hairline border (--border), bg-card (one tier above paper). " +
+      "Story-card variant: full-bleed photo top, prose body p-6 lg:p-8, byline in mono. " +
+      "Impact-stat card: oversized serif number, body sans label, optional --trust-green check glyph. " +
+      "No drop shadows on story cards; .card-paper utility allowed for floating impact panels.",
+    input:
+      "Full box, 1px --border, bg-card, 0.25rem radius. " +
+      "Donation-amount input has prefix '$' in --muted-foreground; preset amount buttons sit below as a row of ghost buttons. " +
+      "Focus = 2px --ring with 2px offset — accessibility-first, never thin.",
+    cta:
+      "The Give/Donate CTA is the single visual anchor per page — solid --give-yellow rectangle with --ink text, " +
+      "optional give-pulse loop, optional give-glow shadow. " +
+      "Secondary CTAs ('Read the report', 'Volunteer') are ghost buttons or text links. " +
+      "Never two yellow buttons on the same screen — the signal loses its meaning.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--give-yellow) / 0.4)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",
+  },
+};

package/themes/outdoor-adventure/THEME.md

@@ -0,0 +1,113 @@
+# Design Direction — Outdoor Adventure
+
+## Ethos
+Patagonia earth · REI utility · Powder magazine speed · Nike Trail urgency · National Park Service signage clarity · Black Diamond rescue-orange
+
+## Feel
+Earth-toned, photo-heavy, sans-serif headlines that feel athletic. Hero image is always a real outdoor scene — mountains, snow, trail, water. The brand says "go outside" in every surface choice; the UI gets out of the way of the photography.
+
+## Reference brands
+- **Patagonia** → earth-toned catalog photography. Greens, browns, golden-hour skin tones; photography is the brand.
+- **REI** → utility-first retail layout. Specs, stats, and gear sit on the page like a price tag — honest and legible.
+- **Powder magazine** → condensed headline speed. Big, fast, ALL-CAPS display sans over a slope shot.
+- **Nike Trail Running** → athletic urgency. The CTA reads like a start-line bib number.
+- **US National Park Service** → signage clarity. Brown-and-white routed-wood typography logic; one read, no hesitation.
+- **Black Diamond** → rescue-orange gear branding. The primary is a safety color, not a marketing color.
+
+## Tokens
+HSL triples in `src/index.css`. 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 cream paper** (background) → **white** (card) → **warm cream paper deeper** (secondary/muted/accent). Depth comes from hairline borders and the `.shadow-photo` utility under hero images, never from blanket drop-shadows.
+
+Brand tokens: `--forest` (Patagonia green), `--mountain` (alpine blue), `--sky` (bluebird sky), `--earth` (Patagonia brown), `--snow` (cool snowfield white). These are the **palette of the landscape** — used for badges, category accents, illustration fills, and chart strokes. They are not the primary CTA color.
+
+Primary is **rescue-orange** (`18 92% 52%`) — the Black Diamond / Petzl safety hue. Use it for one CTA per surface; it should feel like the only orange thing on a mountain.
+
+## Typography
+- **Display:** Anton (Powder magazine condensed sans). h1–h4, ALL CAPS by default, tracking `0.02em`. Anton is high-contrast and tall — pairs with athletic copy and full-bleed photography.
+- **Body:** Inter (Patagonia/REI body voice). Base 16px, line-height 1.6. Tracking `0`. Inter is the neutral that lets the photography lead — the type does not perform.
+- **Mono:** JetBrains Mono. Elevation, distance, pace, time — anywhere a trail stat needs tabular numerics. `"tnum"` on by default.
+
+H1 uses `clamp(2.5rem, 7vw, 5.5rem)` — signage-loud at the top of the page. Numbers always use `font-variant-numeric: tabular-nums`. Font features: `"ss01", "cv11", "tnum"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8`. Landscape photography needs width; mountains demand horizontal.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-16 lg:pt-28 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64 96. Medium-low density — photography needs breathing room around it.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier. Pure white is allowed for cards only; **pure black is forbidden** — `--foreground` (`220 20% 14%`) is the deep alpine ink.
+
+The background is a warm cream (`40 18% 96%`), not a pure white — it is paper from a Patagonia catalog, not a SaaS dashboard. Cool whites are reserved for `--snow` (snowfield illustration use).
+
+## Radius
+`--radius: 0.25rem` (4px). **Subtle — gear-catalog rectangular.** Pills are disallowed (`pillsAllowed: false`) — they read consumer-lifestyle, not field gear. Hardware and signage are rectangular; this UI mirrors that.
+
+## Shadows
+**Minimal.** Two utilities:
+- `.hairline` — 1px ring in `--border` for cards. The default surface elevation.
+- `.shadow-photo` — `0 12px 24px -12px hsl(220 20% 14% / 0.35)`. Bottom-only lift, applied to hero images so the photograph reads as a printed object on the cream paper, not a flat tile.
+
+No glows, no layered soft-shadows, no inner highlights. The shadow is photography's job, not the UI's.
+
+## Motion
+Four keyframes:
+- `fade-rise` (800ms) — standard content entrance under a hero photo.
+- `ken-burns` (1200ms) — hero photo reveal. Slow zoom (1 → 1.08) + fade. Documentary cadence; the landscape settles into place.
+- `parallax` (1200ms tied to scroll) — slow vertical shift, gives depth without theatrics.
+- `scale-in` (600ms) — stats counting up. Elevation, distance, pace tickers.
+
+Reveal duration is **1200ms** on the hero — slow on purpose, the landscape deserves the time. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — wrapped in a media query in every motion utility; ken-burns and parallax collapse to a static reveal.
+
+## Component patterns
+- **Buttons:** primary is **solid orange filled, ALL CAPS, font-display (Anton)**, tracking `0.04em`, `rounded-sm`. It reads like a trail-sign or a start-line bib. Secondary is ghost (border + foreground text, also ALL CAPS condensed). **No pill shapes** — rectangular only.
+- **Cards:** hairline 1px border, `bg-card` (white) on `bg-background` (cream paper), `rounded-sm`, `p-6 lg:p-8`. Title in `font-display`. When the card leads with a photo, apply `.shadow-photo` to the image, never to the card.
+- **Inputs:** full `rounded-sm` box, 1px border, `bg-card`. Focus = `2px solid var(--ring) / 0.6` (rescue-orange). Label above in `font-display` small-caps; helper text below in `mutedForeground`.
+- **CTAs:** primary filled orange ALL CAPS button is the default. Tertiary is a foreground-color text link with a 1px underline at 4px offset — trail-sign honest, no decoration.
+
+## Component families
+None at install time. As `*Stat`, `*TrailCard`, `*GearTile`, `*RouteBadge` families emerge in the project, the Director lists them here with their shared pattern.
+
+## Recommended rich media
+
+**Cover medium.** Wide landscape photography is the lead. Hero images are 16:9 or 21:9, full-bleed under the headline. Drone footage carries the same role in video. Athletic action shots (skiing, climbing, hiking, paddling) anchor mid-page; trail-map illustrations sit beside route data.
+
+**AI tool recommendations.**
+- *Photography:* **Midjourney** or **Flux**. Prompt pattern: `"Patagonia catalog photography, golden hour, alpine landscape, 35mm Kodak Ektachrome, drone perspective"`. Vary lens (35mm / 50mm / drone), film stock (Ektachrome / Portra / Provia), and time-of-day (golden hour / blue hour / pre-dawn) to keep a set cohesive.
+- *Video:* **Sora**, **Runway**, or **Pika**. Prompt pattern: `"drone shot, mountain ridge at dawn, slow pan, cinematic"`. Hold shots long; this language does not cut fast.
+- *Trail-map illustration:* **Recraft**. Prompt pattern: `"topographic line illustration, USGS map aesthetic, single-weight stroke, brown-on-cream"`.
+- *Hero overlays:* prefer **attributed photographers** when budget allows — the Chris Burkard / Jimmy Chin pedigree. AI fills the gaps; attribution carries the brand.
+
+**Aspect ratios.**
+- **16:9 or 21:9** for hero landscapes. Never vertical for landscape — mountains demand horizontal.
+- **1:1** for product / gear shots.
+- **3:4** for athlete portraits.
+
+**Color grading.** Warm golden-hour highlights with cool shadows. Never oversaturated. Preserve the air — atmospheric haze on distant ridges is part of the look. Skin tones run warm, never orange.
+
+**Performance budgets.**
+- Hero photos: ≤200 KB AVIF/WebP at 1920w.
+- Hero videos: ≤8 MB at 1080p, muted autoplay loop, mobile fallback to a still frame.
+- Lazy-load anything below the fold; the first paint is the hero photo and the headline.
+
+**What to AVOID.**
+- Stock photography with watermarks.
+- Generic forest stock (the un-located "trees and a path" shot).
+- Fake "AI mountain" images with rendered-looking peaks, plastic snow, or impossible geology.
+- Polished studio product photography — this is field gear, not luxury goods. Show wear, dust, sweat.
+
+**Accessibility.** Alt-text describes the place when possible (`"looking northeast from Triolet Glacier, French Alps"`), not just the subject. Decorative imagery uses `aria-hidden="true"`. Captions credit the photographer.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.25)` background, foreground text — a glow of rescue-orange.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.6)` — visible, rescue-orange, never quiet.
+- **Scrollbar:** thin.
+
+## 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/outdoor-adventure/tokens.ts

@@ -0,0 +1,181 @@
+import type { Direction } from "../schema";
+
+export const outdoorAdventure: Direction = {
+  // identity is constrained by the schema's name union; outdoor-adventure
+  // is introduced as a new direction and cast through the existing slot.
+  name: "outdoor-adventure",
+  ethos:
+    "Patagonia earth · REI utility · Powder magazine speed · " +
+    "Nike Trail urgency · National Park Service signage clarity",
+  references: [
+    { brand: "Patagonia", trait: "earth-toned catalog photography" },
+    { brand: "REI", trait: "utility-first retail layout" },
+    { brand: "Powder magazine", trait: "condensed headline speed" },
+    { brand: "Nike Trail Running", trait: "athletic urgency" },
+    { brand: "US National Park Service", trait: "signage clarity" },
+    { brand: "Black Diamond", trait: "rescue-orange gear branding" },
+  ],
+  feel:
+    "Earth-toned, photo-heavy, sans-serif headlines that feel athletic. " +
+    "Hero image is always a real outdoor scene — mountains, snow, trail, water. " +
+    "The brand says 'go outside' in every surface choice; the UI gets out of " +
+    "the way of the photography.",
+
+  fonts: {
+    display: {
+      family: "Anton",
+      fallback: ["Oswald", "Impact", "Haettenschweiler", "sans-serif"],
+      from: "Powder magazine headline feel — condensed sans, athletic copy",
+      googleFont: "Anton",
+      weights: [400],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "Patagonia/REI body voice — clean, neutral, lets the photography lead",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "elevation, distance, time stats — tabular numerics for trail data",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.02em",       // condensed display sans benefits from slight openness
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "cv11", "tnum"',
+    h1ScaleClamp: "clamp(2.5rem, 7vw, 5.5rem)",   // big, signage-loud
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "40 18% 96%", from: "warm cream paper — Patagonia catalog stock, never pure white" },
+    foreground: { hsl: "220 20% 14%", from: "deep ink with slight blue bias — feels alpine" },
+    card: { hsl: "0 0% 100%", from: "white card surface — lifts off the cream paper subtly" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "18 92% 52%", from: "Black Diamond / Petzl rescue-orange — the trail-sign CTA" },
+    primaryForeground: { hsl: "40 18% 96%", from: "cream paper on rescue-orange" },
+    secondary: { hsl: "40 14% 92%", from: "cream paper, one tier deeper — REI shelf neutral" },
+    secondaryForeground: { hsl: "220 20% 14%", from: "alpine ink on warm neutral" },
+    muted: { hsl: "40 14% 92%", from: "same as secondary; differentiation by usage, not color" },
+    mutedForeground: { hsl: "220 12% 38%", from: "secondary text — slate, like NPS small print" },
+    accent: { hsl: "40 18% 88%", from: "cream paper, deeper still — hover surface" },
+    accentForeground: { hsl: "220 20% 14%", from: "alpine ink on warm neutral" },
+    border: { hsl: "30 14% 82%", from: "warm hairline — gear-catalog rule, not cool gray" },
+    input: { hsl: "30 14% 82%", from: "same as border" },
+    ring: { hsl: "18 92% 52%", from: "primary rescue-orange, used for focus only" },
+    destructive: { hsl: "4 78% 46%", from: "warning red — distinct from rescue-orange, alert-louder" },
+    destructiveForeground: { hsl: "40 18% 96%", from: "cream paper on alert" },
+    brand: {
+      forest: { hsl: "145 35% 30%", from: "Patagonia forest green — outerwear, conservation" },
+      mountain: { hsl: "210 30% 40%", from: "alpine blue — distant ridges, shadowed snow" },
+      sky: { hsl: "200 50% 70%", from: "high-altitude sky — bluebird-day backdrop" },
+      earth: { hsl: "30 25% 35%", from: "Patagonia brown — soil, bark, well-worn leather" },
+      snow: { hsl: "210 8% 92%", from: "cool white for snowfields — distinct from cream paper bg" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 96],   // photography needs breathing room
+    containerMax: "max-w-7xl",         // landscape photography wants width
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-28 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",                  // 4px — gear-catalog feel, not pillowy
+    pillsAllowed: false,              // rectangular reads field-gear, not lifestyle app
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline":
+        "0 0 0 1px hsl(var(--border))",                  // gear-catalog rule for cards
+      "shadow-photo":
+        "0 12px 24px -12px hsl(220 20% 14% / 0.35)",      // subtle bottom-only lift for hero images
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1200,                    // bold reveal — landscapes deserve time
+      loop: 3200,
+      ambient: 28000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 800,
+        iteration: "once",
+        purpose: "standard content entrance — short rise under a hero photo",
+      },
+      "ken-burns": {
+        css:
+          "from { transform: scale(1); opacity: 0; }\n" +
+          "20% { opacity: 1; }\n" +
+          "to { transform: scale(1.08); opacity: 1; }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "hero photo reveal — slow zoom + fade, documentary cadence",
+      },
+      "parallax": {
+        css:
+          "from { transform: translateY(0); }\n" +
+          "to { transform: translateY(-12%); }",
+        defaultDuration: 1200,
+        iteration: "once",
+        purpose: "slow vertical shift on scroll — gives landscapes depth without theatrics",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.92); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "stats counting up — elevation, distance, time tickers",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid orange filled primary (bg-primary, primary-foreground text, font-display, " +
+      "ALL CAPS, tracking 0.04em, rounded-sm). Secondary is ghost (border, foreground text, " +
+      "also ALL CAPS condensed). No pill shapes — rectangular reads trail-sign, not app chrome.",
+    card:
+      "Hairline border (1px var(--border)), bg-card, rounded-sm. Internal padding p-6 lg:p-8. " +
+      "Title in font-display (Anton). When the card leads with a photo, apply .shadow-photo " +
+      "to the image and let the card itself stay shadow-free.",
+    input:
+      "Full rounded-sm box, 1px border, bg-card. Focus = 2px primary ring at 60% opacity. " +
+      "Label above in uppercase font-display at small size; helper text below in mutedForeground.",
+    cta:
+      "Primary filled orange ALL CAPS button is the default. Secondary CTAs use ghost button. " +
+      "Tertiary is a foreground-color text link with a 1px underline offset 4px — trail-sign honest.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.6)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/overland-broadside/THEME.md

@@ -0,0 +1,119 @@
+# Overland Broadside
+
+> Monumental heritage brand-book register — condensed all-caps display at broadside scale, full-bleed automotive photography under directional light, paper-white canvas broken by inverted deep-navy bands, a single hot-orange accent used as punctuation inside headlines.
+
+**Slug:** `overland-broadside` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+Heritage automotive marque relaunches (the Bronco / Scout / Land Cruiser / Defender register — where a legacy nameplate returns and the marketing is monumental and confident). Broadsheet poster print at brand-book scale. The type-as-substance discipline of a proper marque book. Also 1970s automotive brochure design (huge condensed caps, full-bleed hero photography, editorial captions).
+
+## Signature move
+
+Monumental condensed all-caps display at broadside scale — 240px hero
+headline breaking across multiple lines, filling most of the viewport
+width, letter-spacing crushed to -0.03em. Inside the counterforms of
+the display letters, masked photo tiles show product / lifestyle
+imagery — the type IS a container for the imagery, not just labeling.
+One word in the hero headline flips to the accent orange as punctuation
+(never the whole line, never rotating, never cycling). Full-bleed
+automotive / product photography sits under directional light on the
+white canvas — no framed cards, no shadows, no corner treatments.
+Deep-navy inverted bands break the white rhythm with monumental caps
+set even bigger than the white-canvas hero, pinning through scroll so
+the type holds while the page moves past. Border-radius is 2px — a
+microscopic softening, not a design element (buttons, image containers,
+small tags). Small pill nav sits transparent over hero, transitions to
+solid ink on scroll. NO mono-caps eyebrows, NO dot-metadata rows, NO
+spec-sheet triads, NO "TRUSTED BY" rows, NO three-column feature grids
+— brand character sits in the display type, the photography, and the
+navy/orange discipline, not in ornamented labels.
+
+## Palette
+
+- **bg:** `#FFFFFF`
+- **surface:** `#F0F0F0`
+- **ink:** `#010101`
+- **accent:** `#FF5432`
+- **secondary:** `#11232F`
+- **signal:** `#007AFF`
+
+## Typography
+
+- **Display:** Anton (free, Google Fonts) or Bebas Neue as broader-market fallback — 400 weight, UPPERCASE always, letter-spacing tightened to -0.03em at monumental scale (heavier tracking negative than typical). At scale — 240px hero-monumental (fluid, capped near viewport width), 96px section-headline, 48px inverted-band-headline, 32px h3. The paid reference face is a scout-sans-semicond-bold-family condensed sans; Anton is the closest free approximation with the right condensed-caps proportions.
+- **Body:** Inter Tight (variable 100-900) — 400/500 for body, 600 for captions and specs. Mixed-case, line-height 1.5, 16px body copy. Caption specs get 13px 500-weight with slightly loosened tracking for legibility inside dark bands.
+- **Mono:** IBM Plex Mono — narrowly scoped to spec-sheet callouts (dimensions, drivetrain, capacity numbers) inside product-detail sections. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face).
+- **Scale:** 1.5 (perfect fifth — deliberately wide contrast so the monumental display shouts at broadside scale and the body settles into calm captioning)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Photo-fill hero headline reveal — IntersectionObserver + CSS transitions. Each letterform of the monumental display headline has a masked photo tile inside its counterform; on scroll into view, the tiles translate up from 20% opacity to full over 700ms cubic-bezier(0.16,1,0.3,1), staggered 60ms per letter.
+2. Accent-word color shift — one word inside the hero headline flips from ink-black to accent-orange after the letter-stagger completes (300ms delay). It stays orange; no cycling, no rotation.
+3. Inverted band scroll-triggered lock — the "For [brand] in all of us" style monumental navy band pins for 400vh, giant caps holding while the surrounding white content scrolls past. Uses position: sticky with a scroll-linked scale transform on the type (0.94 → 1.0 over the pin duration).
+4. Full-bleed product hero — the vehicle photograph enters with a subtle 800ms cubic-bezier scale (1.05 → 1.0) + fade, so the composition settles rather than pops. Triggered on first paint, not on scroll.
+5. Duo-tile compare — the "duo that does it all" two-vehicle side-by-side reveals right tile 200ms after left tile with matched scale-in.
+6. Nav pill — background transitions to solid ink-black + white-text at scroll offset 80px; before that it sits transparent over the hero. 200ms transition.
+7. Microinteractions — CSS transitions on link hover states (underline expands left-to-right 200ms), active-state scale(0.98) on primary buttons.
+8. prefers-reduced-motion: reduce — all keyframe animations pause, transitions become instant, photo-fill tiles start at full opacity (no stagger), inverted-band pin still fires (it's structural), 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 (the pin-and-hold on the inverted band needs inertial scroll to feel monumental).
+- GSAP ScrollTrigger — orchestrated multi-element timelines for the photo-fill letter stagger + inverted-band scroll-linked scale.
+- Custom branded preloader with condensed-caps typography-in-progress reveal.
+
+Motion character: weighty, cinematic, never bouncy. Custom cubic-bezier(0.16,1,0.3,1) for reveal easings, cubic-bezier(0.65,0,0.35,1) for hover/state transitions. All motion serves the "monumental heritage brand" tone — nothing is quick, nothing is cute.
+
+
+## Imagery
+
+Full-bleed automotive / adventure-hardware photography under DIRECTIONAL
+LIGHT — vehicles emerging from shadow, hero shots with a single strong
+light source (dusk, dawn, headlight against dark landscape), or
+three-quarter product shots on pure white with hard shadow anchoring
+them to the ground. NEVER on a gradient background, NEVER floating in a
+card, NEVER with a soft box-shadow. Photo-fill letters use tightly
+cropped product / lifestyle details — a fender line, a wheel arch, a
+headlight, a hand on a steering wheel, a landscape — masked cleanly to
+the letterform. Cream/tan `#EDE9E8` band at the footer as a warm
+breathing space — the only warmth in an otherwise cool composition.
+Placeholder compositions use clearly-labeled FPO photograph blocks so
+the layout reads legible without shipping licensed imagery.
+
+## Best for
+
+- Heritage automotive marque relaunches — a legacy nameplate returning to market
+- Premium automotive marketing where the vehicle is the hero (SUVs, trucks, adventure vehicles)
+- Adventure-hardware brands (overlanding kit, outdoor equipment) that want cinematic-brand register instead of REI-catalog register
+- Heritage brand relaunches broadly — anything with a monumental type-plus-photography story to tell
+- Founder-scale product launches where the physical object photographs beautifully
+- Deck / brand-book / launch pages where the point is monumental confidence, not information density
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Border-radius greater than 2px anywhere on the page — the 2px is a microscopic softening on functional chrome only, not a design gesture
+- Rounded pill buttons or fully-rounded CTAs — buttons are sharp-cornered with 2px radius, that's it
+- Multiple accent colors used decoratively — orange is punctuation inside headlines and small CTA fill only; navy is inverted-band background only; blue is interactive-state only. No accent lives outside its role.
+- Sans-serif humanist display like Inter Display or Söhne at hero scale — display face must carry condensed-caps monumental proportions (Anton, Bebas Neue, or paid scout-sans-semicond-bold-family)
+- 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.03em at monumental scale, tighter than typical, and MUST stay negative
+- Corporate polish — no shadow-md cards, no soft glow, no gradient hero backdrop, no mesh gradients
+- Three-tier pricing cards or feature-pillar grids — the composition refuses SaaS defaults structurally, information laid out as full-bleed bands and side-by-side comparisons, not card grids
+- Center-aligned everything — hero composition is left-weighted and grid-breaking; monumental type intentionally violates the baseline
+- Warm palettes — this register is cool-and-crisp (white, ink, navy, orange as punctuation only), never espresso/cream/amber flooding the canvas
+- The photo-fill move on more than the hero headline — it's a one-time signature, not a repeated decoration; secondary headlines are solid ink
+- Emoji or decorative unicode marks anywhere in the composition — the display type carries all the personality
+- Grain or texture overlay on the white canvas — grain is reserved for the darker inverted-band overlays only
+
+## 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)
+- monumental-caps-plus-decoration (the display type IS the design; the moment you add mono-caps eyebrows, corner tags, or dot-metadata rows on top of it the register collapses into generic 2020s-agency slop)
+- photo-fill-everywhere (the letterform photo-fill is a signature ONCE — hero only. Applied to every headline, it becomes a decorative gimmick and the register dies)
+- cool-palette-plus-warm-photography (if the photography is warm-tungsten-lit, the palette here still stays cool navy/orange — do not drift into amber/gold to match the imagery, that's the ember-poster register)

package/themes/overland-broadside/audit.log.jsonl

@@ -0,0 +1 @@
+{"slug":"overland-broadside","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T01:08:53.523Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T01:08:53.532Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T01:09:35.321Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"Family E rubric.md missing at /Users/mattfrischer/Taste/site/design-system/golden-set/E/rubric.md — anchor-compare skipped."},"ran_at":"2026-07-04T01:09:35.323Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-04T01:08:53.523Z"}

package/themes/overland-broadside/tailwind.snippet.ts

@@ -0,0 +1,17 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: overland-broadside
+export const overlandBroadsideTailwindExtend = {
+  colors: {
+    bg: "#FFFFFF",
+    surface: "#F0F0F0",
+    ink: "#010101",
+    accent: "#FF5432",
+    secondary: "#11232F",
+    signal: "#007AFF",
+  },
+  fontFamily: {
+    display: ["Anton (free, Google Fonts) or Bebas Neue as broader-market fallback — 400 weight, UPPERCASE always, letter-spacing tightened to -0.03em at monumental scale (heavier tracking negative than typical). At scale — 240px hero-monumental (fluid, capped near viewport width), 96px section-headline, 48px inverted-band-headline, 32px h3. The paid reference face is a scout-sans-semicond-bold-family condensed sans; Anton is the closest free approximation with the right condensed-caps proportions."],
+    body: ["Inter Tight (variable 100-900) — 400/500 for body, 600 for captions and specs. Mixed-case, line-height 1.5, 16px body copy. Caption specs get 13px 500-weight with slightly loosened tracking for legibility inside dark bands."],
+    mono: ["IBM Plex Mono — narrowly scoped to spec-sheet callouts (dimensions, drivetrain, capacity numbers) inside product-detail sections. NEVER used for section eyebrows, corner tags, metadata rows, or bylines (those are universal-slop-blocklist hits regardless of face)."],
+  },
+};