@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/nature-distilled/BUILD_BRIEF.md

@@ -0,0 +1,158 @@
+# Nature-Distilled — Build Brief
+
+> The contract this theme ships with. Read at commit time by the
+> brief-enforcer subagent; handed to Claude Code via the Copy-for-Claude
+> button on the theme detail page.
+
+---
+
+## MANDATORY BUILD DIRECTIVE — you MUST
+
+1. **Hold the warm cream ground at `#EDE4D3`** on the light canvas.
+   Never the Claude-cream tell `#F4F1EA`. Never pure white. On dark
+   canvas invert to warm charcoal `#3D3226` bg + cream ink.
+2. **Use terra `#A6714E` STRUCTURALLY, never as a CTA button color.**
+   Terra is: the initial drop-cap on the hero H1, the hairline divider
+   under the hero, per-region tile top-rules, structural underlines.
+   Buttons are walnut on cream, terra bordered ghost, or accent bg.
+3. **Set the hero display in Fraunces serif** at `clamp(3rem, 7vw,
+   6rem)`, weight 500, tracking -0.015em. Line-height 1.02. Body copy
+   in Hanken Grotesk / Inter at 17px line-height 1.55.
+4. **Olive-green mono `#6B7256` for sourcing chrome** — batch numbers
+   ("Batch 104"), region labels ("Oaxaca"), journal author bylines
+   ("Nia Ortiz · 8 min read"). This is the ONE place mono lives.
+   Never mono-caps eyebrows.
+5. **Terra initial cap on the hero H1** — the first letter of the
+   headline is in terra, weight 600, otherwise the headline is in
+   walnut ink `#3D3226`. This is the register-defining move.
+6. **Real Pexels photos** for the hero (aged wood or artisan hands),
+   sourcing tiles (3 region shots), journal cards (3 field photos),
+   and studio still. No SVG stand-ins. Photos: warm-toned, still-life
+   or artisan-context, never generic stock.
+
+---
+
+## SLOP-BLOCKLIST — you MUST NOT
+
+- **Terra used as a CTA button fill color.** Terra is structural only.
+  A terra-fill button reads as decorative and breaks the register.
+- **Mono-caps decorative eyebrows** (`SOURCING · REGIONS`, `BATCH 104`
+  at fingerprint `textTransform: uppercase` + `letterSpacing ≥ 0.14em`
+  at `fontSize < 20px`). Real content labels like `Batch 104-a` on a
+  product card are content, not eyebrow chrome.
+- **`№` / N.º / no. / vol. ornaments.**
+- **Roman-numeral copyright** (`MMXXVI`).
+- **Cold gray body copy.** The register is warm-black `#3D3226` on
+  cream, or warm cream on charcoal. NEVER `#0F0F0F` or `#FFFFFF` or
+  any 0° hue neutral.
+- **Sunset/sunrise gradient backdrops** — this theme uses grain
+  overlay, not gradients.
+- **Vague trust copy:** hand-crafted, thoughtfully-made, considered.
+  This theme's whole register IS handcrafted — SHOW it via named
+  makers + origin postcodes, don't SAY it.
+- **Attribution of influence in visible copy** — Aesop, The Ordinary,
+  Patagonia, Kinfolk can be studied but never NAMED.
+- **Auto-advancing anything.** No sliders, no ticker, no cycling
+  headline words.
+- **3-pillar identical feature grids.** Region tiles are 3-wide but
+  each tile has DIFFERENT internal composition (photo aspect,
+  material name, story length).
+
+---
+
+## CHROME INVENTORY — the allow-list
+
+- **Sticky palette + canvas picker strip** — meta-UI, sentence-case
+  body font.
+- **Masthead nav** — Fraunces "Ochre & Ash" wordmark (weight 600 at
+  22px, letter-spacing -0.01em) + 4 nav items (body font, 14px,
+  walnut) + "Cart (0)" link (body font, walnut).
+- **Grain-textured hero band** — SVG-filter fractal noise at
+  `mixBlendMode: multiply` (dark canvas: `screen`), opacity 0.7,
+  revealed on IntersectionObserver.
+- **Hero H1 with terra drop-cap** — Fraunces 500 at clamp(3rem, 7vw,
+  6rem), first letter in terra weight 600, rest in walnut ink.
+- **Terra hairline divider** — 1px terra, 80px wide, between H1 and
+  body copy.
+- **Walnut-filled CTA button** — walnut bg `#3D3226`, cream text,
+  padding 14px 24px, no radius, body font 15px weight 500. THIS is
+  the primary button style. Never terra-filled.
+- **Full-bleed hero photograph** — 16:8 or 21:9, warm-toned, natural
+  materials.
+- **Product tile grid (4-up)** — each tile: 4:5 photo, batch chip
+  (mono olive), product name (Fraunces 500 at 18px), tag (italic
+  body), price. NEVER add a hover animation.
+- **Sourcing region tile (3-up)** — 3:2 photo + batch chip + region
+  name (Fraunces H3) + material italic + terra 32px hairline + prose.
+- **Journal card (3-up)** — 3:2 photo + Fraunces title (22px) + mono
+  olive byline (`Nia Ortiz · 8 min read`).
+- **Studio manifesto band** — surface-cream bg, 2-col: photo 4:5 +
+  Fraunces H2 + 2 body paragraphs.
+- **Newsletter capture** — center-aligned Fraunces H2 + body + one-row
+  email input + walnut submit button.
+- **Cream footer** — brand + one-liner + 3 link columns (mono olive
+  column labels are permitted here as content — they're footer nav
+  headings, not decorative eyebrows).
+
+---
+
+## SIGNATURE MOVES — verbs, not adjectives
+
+- **Reveal the grain overlay on scroll** using IntersectionObserver at
+  threshold 0.3 — opacity 0 → 0.7 over 400ms cubic-bezier. Cream
+  paper texture is the visual grounding.
+- **Drop-cap the hero's first letter in terra** — this is the ONE
+  structural use of terra above the hairline. If the drop-cap isn't
+  there, the theme is broken.
+- **Batch every product with a mono olive chip** — `Batch 104-b`.
+  This IS the theme's slow-goods signature.
+- **Alternate 60/40 splits for the sourcing regions** — each region
+  tile keeps photo-left OR photo-top, but every alternate section
+  through the page swaps side. Never render three regions in a
+  uniform grid.
+- **Italic Fraunces for product tags** ("50ml", "180mm", "Set of two")
+  — italic Fraunces at 13px in warm walnut. This is how the theme
+  reads as slow-goods and not modern-DTC.
+- **The batch letter is six letters a year, no offers** — the
+  newsletter copy IS the theme's product-voice signature.
+
+---
+
+## COLOR TOKENS
+
+**Light canvas** — `cream: #EDE4D3` / `surfaceCream: #F5EFE0` /
+`walnut: #3D3226` (ink) / body / mute / footer copy.
+
+**Dark canvas** — `bg: #3D3226` (warm charcoal) / `surface: #4E4235` /
+`ink: #F5EFE0` / mute.
+
+**Structural** — `terra: #A6714E` (drop-cap, hairlines, dividers).
+
+**Sourcing chrome** — `olive: #6B7256` (batch chips, footer column
+labels, journal bylines).
+
+---
+
+## TYPOGRAPHY
+
+- **Display:** Fraunces (fallback Playfair Display, Georgia).
+  Weight 500 default, 600 for the drop-cap. Tracking -0.015em.
+- **Body:** Hanken Grotesk (fallback Inter), 17px, line-height 1.55.
+- **Mono:** JetBrains Mono / IBM Plex Mono, 11px, `color: olive`,
+  letter-spacing 0.16-0.20em. ONLY for batch chips, region labels,
+  journal bylines, footer column labels, and the palette picker.
+
+---
+
+## SECTION SKELETON
+
+1. Sticky palette + canvas picker.
+2. Masthead nav.
+3. Grain-textured hero with terra drop-cap.
+4. Full-bleed hero photograph.
+5. Featured products (4-up batch).
+6. Sourcing regions (3-up).
+7. Journal / field reports (3-up).
+8. Studio manifesto (2-col: portrait + copy).
+9. Batch-letter newsletter capture.
+10. Cream footer band.

package/themes/nature-distilled/THEME.md

@@ -0,0 +1,81 @@
+# Nature Distilled
+
+> Earthy grounded warmth — skin, wood, and soil tones anchor a light surface with tactile depth. Trustworthy without being sterile.
+
+**Slug:** `nature-distilled` — **Surface:** web — **Density:** airy
+
+## Influence
+
+The Ordinary skincare (sand + walnut layering), Aesop packaging (warm earth on cream), Cotopaxi (natural texture over flat), Field Notes (warm paper + olive accent), Patagonia storytelling (organic photography).
+
+## Signature move
+
+Grain texture overlay on hero imagery (subtle noise, 8-12% opacity)
++ walnut ink on cream surface (never terracotta — that's the AI tell).
+Serif display type at generous size, one olive-green secondary used
+sparingly for sourcing/attribution chrome, and a single terra accent
+#A6714E used STRUCTURALLY (a section divider, an initial cap) not
+as the safe cream+terra button color.
+
+## Palette
+
+- **bg:** `#EDE4D3`
+- **surface:** `#F5EFE0`
+- **ink:** `#3D3226`
+- **accent:** `#A6714E`
+- **secondary:** `#6B7256`
+
+## Typography
+
+- **Display:** Fraunces (soft variable serif) — 500-600 weight for headlines at 40-72px, optical size tuned wide, letter-spacing -0.015em
+- **Body:** Hanken Grotesk — 400, 16px, line-height 1.55. Warm but not calligraphic. Doesn't compete with the serif display.
+- **Mono:** JetBrains Mono — 12-13px, only for metadata (batch numbers, sourcing lines, weight indicators). Never body.
+- **Scale:** 1.333 (perfect fourth — organic contrast, doesn't feel measured)
+
+## Motion
+
+One texture-in reveal on scroll — grain overlay fades in over the hero
+image at 400ms ease-out when the hero enters viewport. Nothing else
+moves. No card hover animation, no CTA glow, no scroll parallax.
+Warmth comes from PALETTE and TEXTURE, never from motion.
+
+
+## Imagery
+
+Warm organic photography — hands working material, wood grain,
+earth-toned still life. Slight desaturation (85-90%), warm color-cast.
+Grain overlay when the image is a hero. Illustration if used is
+botanical line-art in walnut ink. NO stock photography of "hands
+reaching," NO gradient overlays.
+
+## Best for
+
+- Skincare and beauty brands with an earth-conscious register
+- Craft goods (ceramics, textiles, furniture, small-batch food)
+- Sustainability-focused DTC and mission-driven consumer brands
+- Warm-editorial magazines and lifestyle publishing
+- Wellness and wine brands that want depth without going full luxury
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- #D97757 or any terracotta accent as the primary CTA / decoration — that IS the Claude-cream tell (R-CLAUDE-CREAM in slop-blocklist)
+- Pure #FFFFFF background — the register is warm cream, never sterile white
+- shadow-md or drop-shadow on cards — depth comes from grain texture, not shadow bloom
+- Cold gray body text — ink is #3D3226 walnut, never #64748b slate-gray
+- Gradient overlays on hero photography — grain overlay is the technique, not gradients
+- Sans-serif display (this register requires the Fraunces optical-serif contrast)
+- Rounded button corners greater than 8px — softer than brutalism but not pill-shaped
+- Bright saturated accents — walnut/terra/olive stay muted (saturation <45%)
+- Two accent colors visible simultaneously beyond the walnut-ink + one earthy accent
+
+## 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)
+- cream-plus-terra (any hex within Lab 8 of #F4F1EA background paired with any hex within Lab 8 of #D97757 accent — the specific Claude-cream tell)
+- sterile-nature (cream/white bg with cold gray body ink and one saturated green — the AI 'nature' default that reads as pharmacy, not craft)

package/themes/nature-distilled/audit.log.jsonl

@@ -0,0 +1,2 @@
+{"slug":"nature-distilled","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T18:32:00.081Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T18:32:00.089Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T18:32:27.642Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T18:32:41.517Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T18:32:00.081Z"}
+{"slug":"nature-distilled","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T22:52:14.404Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-03T22:52:14.413Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — avoid-rubric gate skipped. Set the key to grade against theme.avoid array."},"ran_at":"2026-07-03T22:52:14.413Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"ANTHROPIC_API_KEY not set — anchor-compare skipped. Set the key to enable rubric grading."},"ran_at":"2026-07-03T22:52:17.614Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-03T22:52:14.404Z"}

package/themes/nature-distilled/tailwind.snippet.ts

@@ -0,0 +1,16 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: nature-distilled
+export const natureDistilledTailwindExtend = {
+  colors: {
+    bg: "#EDE4D3",
+    surface: "#F5EFE0",
+    ink: "#3D3226",
+    accent: "#A6714E",
+    secondary: "#6B7256",
+  },
+  fontFamily: {
+    display: ["Fraunces (soft variable serif) — 500-600 weight for headlines at 40-72px, optical size tuned wide, letter-spacing -0.015em"],
+    body: ["Hanken Grotesk — 400, 16px, line-height 1.55. Warm but not calligraphic. Doesn't compete with the serif display."],
+    mono: ["JetBrains Mono — 12-13px, only for metadata (batch numbers, sourcing lines, weight indicators). Never body."],
+  },
+};

package/themes/nature-distilled/theme.yml

@@ -0,0 +1,91 @@
+# Base 34 Nature Distilled — Family D, Contemporary Web.
+#
+# Per BESPOKE_THEME_SYSTEM.md #34: earthy grounded warmth. Skin/wood/soil
+# tones. Tactile, human, trustworthy. The spec explicitly says AVOID
+# #D97757 on cream — anchor in walnut/olive instead. That's the exact
+# Claude-cream tell R-CLAUDE-CREAM catches; Nature Distilled has to
+# refuse it by construction.
+#
+# Theme #4 through the v2 harness. Chosen deliberately as a test: does
+# the Family D rubric (written around Dark Premium's dark-ground signal-
+# accent register) accept a LIGHT earthy theme in the same family?
+# Prediction: anchor-compare may fire on surface-layering (rubric axis 1,
+# looking for dark layered panels). That's a real finding about rubric
+# breadth if it happens — surface it, don't paper over.
+#
+# Precedent: pet-food + zone-drift survivors, per SURVIVOR_MAPPING.md.
+
+name: Nature Distilled
+concept: Earthy grounded warmth — skin, wood, and soil tones anchor a light surface with tactile depth. Trustworthy without being sterile.
+influence: The Ordinary skincare (sand + walnut layering), Aesop packaging (warm earth on cream), Cotopaxi (natural texture over flat), Field Notes (warm paper + olive accent), Patagonia storytelling (organic photography).
+
+family: D
+base_number: 34
+render_url: http://localhost:5173/themes/nature-distilled
+
+surface: web
+
+typography:
+  display: Fraunces (soft variable serif) — 500-600 weight for headlines at 40-72px, optical size tuned wide, letter-spacing -0.015em
+  body: Hanken Grotesk — 400, 16px, line-height 1.55. Warm but not calligraphic. Doesn't compete with the serif display.
+  mono: JetBrains Mono — 12-13px, only for metadata (batch numbers, sourcing lines, weight indicators). Never body.
+  scale: 1.333 (perfect fourth — organic contrast, doesn't feel measured)
+
+palette:
+  bg: "#EDE4D3"
+  surface: "#F5EFE0"
+  ink: "#3D3226"
+  accent: "#A6714E"
+  secondary: "#6B7256"
+
+density: airy
+
+motion: |
+  One texture-in reveal on scroll — grain overlay fades in over the hero
+  image at 400ms ease-out when the hero enters viewport. Nothing else
+  moves. No card hover animation, no CTA glow, no scroll parallax.
+  Warmth comes from PALETTE and TEXTURE, never from motion.
+
+signature: |
+  Grain texture overlay on hero imagery (subtle noise, 8-12% opacity)
+  + walnut ink on cream surface (never terracotta — that's the AI tell).
+  Serif display type at generous size, one olive-green secondary used
+  sparingly for sourcing/attribution chrome, and a single terra accent
+  #A6714E used STRUCTURALLY (a section divider, an initial cap) not
+  as the safe cream+terra button color.
+
+imagery: |
+  Warm organic photography — hands working material, wood grain,
+  earth-toned still life. Slight desaturation (85-90%), warm color-cast.
+  Grain overlay when the image is a hero. Illustration if used is
+  botanical line-art in walnut ink. NO stock photography of "hands
+  reaching," NO gradient overlays.
+
+best_for:
+  - Skincare and beauty brands with an earth-conscious register
+  - Craft goods (ceramics, textiles, furniture, small-batch food)
+  - Sustainability-focused DTC and mission-driven consumer brands
+  - Warm-editorial magazines and lifestyle publishing
+  - Wellness and wine brands that want depth without going full luxury
+
+avoid:
+  - "#D97757 or any terracotta accent as the primary CTA / decoration — that IS the Claude-cream tell (R-CLAUDE-CREAM in slop-blocklist)"
+  - "Pure #FFFFFF background — the register is warm cream, never sterile white"
+  - "shadow-md or drop-shadow on cards — depth comes from grain texture, not shadow bloom"
+  - "Cold gray body text — ink is #3D3226 walnut, never #64748b slate-gray"
+  - "Gradient overlays on hero photography — grain overlay is the technique, not gradients"
+  - "Sans-serif display (this register requires the Fraunces optical-serif contrast)"
+  - "Rounded button corners greater than 8px — softer than brutalism but not pill-shaped"
+  - "Bright saturated accents — walnut/terra/olive stay muted (saturation <45%)"
+  - "Two accent colors visible simultaneously beyond the walnut-ink + one earthy accent"
+
+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
+  - "cream-plus-terra (any hex within Lab 8 of #F4F1EA background paired with any hex within Lab 8 of #D97757 accent — the specific Claude-cream tell)"
+  - "sterile-nature (cream/white bg with cold gray body ink and one saturated green — the AI 'nature' default that reads as pharmacy, not craft)"

package/themes/nature-distilled/tokens.ts

@@ -0,0 +1,26 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "nature-distilled",
+  family: "D",
+  base: "34",
+  palette: {
+    "bg": "#EDE4D3",
+    "surface": "#F5EFE0",
+    "ink": "#3D3226",
+    "accent": "#A6714E",
+    "secondary": "#6B7256"
+  },
+  typography: {
+    "display": "Fraunces (soft variable serif) — 500-600 weight for headlines at 40-72px, optical size tuned wide, letter-spacing -0.015em",
+    "body": "Hanken Grotesk — 400, 16px, line-height 1.55. Warm but not calligraphic. Doesn't compete with the serif display.",
+    "mono": "JetBrains Mono — 12-13px, only for metadata (batch numbers, sourcing lines, weight indicators). Never body.",
+    "scale": "1.333 (perfect fourth — organic contrast, doesn't feel measured)"
+  },
+  surface: "web",
+  density: "airy",
+  motion: "One texture-in reveal on scroll — grain overlay fades in over the hero\nimage at 400ms ease-out when the hero enters viewport. Nothing else\nmoves. No card hover animation, no CTA glow, no scroll parallax.\nWarmth comes from PALETTE and TEXTURE, never from motion.\n",
+  signature: "Grain texture overlay on hero imagery (subtle noise, 8-12% opacity)\n+ walnut ink on cream surface (never terracotta — that's the AI tell).\nSerif display type at generous size, one olive-green secondary used\nsparingly for sourcing/attribution chrome, and a single terra accent\n#A6714E used STRUCTURALLY (a section divider, an initial cap) not\nas the safe cream+terra button color.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/news-tabloid/THEME.md

@@ -0,0 +1,72 @@
+# Design Direction — News-Tabloid
+
+## Ethos
+Daily Mail sidebar-of-shame · NY Post wood-type front page · The Sun condensed screamer · Bild red-rule masthead · NY Daily News photo-density
+
+## Feel
+Loud, condensed, photo-dense. Red masthead rule + black ink on near-white newsprint. Knockout-style condensed bold sans at oversized sizes screaming the headline. Stacks of headlines, grids of thumbnails, talker sidebars. The page is the noise. The opposite of editorial restraint — every inch carries shout.
+
+## Reference brands
+- **Daily Mail** → sidebar-of-shame headline stack, photo-densest layout in news.
+- **NY Post** → wood-type-condensed front-page screamer, all-caps shout.
+- **The Sun** → red+black bold, white-on-red kicker chips.
+- **Bild** → thick red masthead rule, sans-only display register.
+- **NY Daily News** → tabloid headline tower, talker sidebar.
+
+## Tokens
+HSL triples in `src/index.css`. Brand tokens: `--ink`, `--tabloid-red`, `--exclusive-yellow`, `--newsprint`, `--rule-heavy`, `--chip-fill`. Foreground is nearly pure black (`hsl(0 0% 8%)`) — tabloid ink is screamer-ready, not editorial-warm.
+
+Primary is **tabloid red** (`hsl(0 82% 48%)`) — saturated, used aggressively as masthead, kicker chips, and CTA fills. EXCLUSIVE-chip yellow (`hsl(48 100% 50%)`) is the second loud accent, used sparingly on top-story flags.
+
+## Typography
+- **Display:** Oswald (Knockout-style condensed bold sans). Weights 500–700. The headline tower lives here, all-caps at oversized sizes.
+- **Body:** Source Sans 3. 15px tight / `line-height: 1.45` — high density.
+- **Mono:** JetBrains Mono. Timestamps, comment counts (`12,847 COMMENTS`), picture credits.
+
+H1 uses `clamp(3rem, 9vw, 7rem)` — front-page screamer scale.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8` — wide; photo grids and headline towers need the room.
+- **Section padding:** hero `pt-10 pb-8 lg:pt-16 lg:pb-12`; default `py-12 lg:py-16`; tight `py-6 lg:py-10`. Tighter than every other direction.
+- **Scale:** 2 4 6 8 10 12 16 20 24 32 48 64 — high density.
+
+## Color
+No hex in components. The page is built from four colors: `--ink`, `--newsprint`, `--tabloid-red`, `--exclusive-yellow`. The combination is the brand.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills disallowed — no soft chips. Tabloid chips are angular rects with heavy ink borders.
+
+## Shadows
+None / utility-only. Two utilities: `.rule-heavy` (2px ink rule under section bars) and `.chip-shadow` (crude 2px / 2px offset shadow on EXCLUSIVE chips — newsprint-printing-press feel).
+
+## Motion
+Two keyframes. `snap-in` (250ms) — fast snap entrance, no theatrical rise. `chip-flash` (800ms infinite) — flashes the BREAKING/EXCLUSIVE chip between red and yellow, used sparingly (single top story only). Honors `prefers-reduced-motion`.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`.
+
+## Component patterns
+- **Buttons:** solid-fill in `--tabloid-red` with white text + heavy `--ink` border. Bold condensed display font, all-caps. Secondary buttons invert: `--ink` fill + white text. No ghost buttons — tabloid commits to fill.
+- **Cards:** thick 2px `--ink` border, no radius. White or `--newsprint` background. Oversized Oswald headline, colored kicker chip bar above. Padding tight (`p-3 lg:p-4`).
+- **Inputs:** full box with 2px `--ink` border. Bold sans label above in caps. Focus shifts border to `--tabloid-red`.
+- **CTA links:** filled rect in `--tabloid-red` or `--ink`, heavy border, all-caps. **Never a text-link CTA.**
+
+## Bespoke section
+A headline tower of 8 stacked headlines (varying sizes — top story oversized, descending) + a 6-thumbnail photo grid with caption strips beneath each + a "Talkers" sidebar list (5 most-commented stories with comment-count mono badges). The tower uses BREAKING / EXCLUSIVE / SHOCK kicker chips in flashing colors. Composition is dense and packed — no white space breathing room.
+
+## Recommended rich media
+Tabloid photography — paparazzi shots, court entrances, celebrity-with-coffee. High contrast, slight oversaturation. Thumbnails are tight 4:3 with bold caption strips beneath in white-on-black.
+
+**AI tool recommendations:** Midjourney prompts like *"paparazzi long-lens, tabloid front page, harsh flash, high contrast"*. Avoid editorial portraiture (newspaper-classic / magazine-glossy territory). Use bold Knockout-style headlines as caption overlays.
+
+**Avoid:** subtle photography, magazine-glossy lighting, drop shadows (the offset crude shadow is the only allowed shadow), pill chips, gradient backgrounds, any restrained palette.
+
+## Details
+- **Selection:** `hsl(var(--exclusive-yellow) / 0.6)` — yellow highlighter.
+- **Focus ring:** `2px solid hsl(var(--ring))` — thick, screamer-loud.
+- **Scrollbar:** auto.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction.

package/themes/news-tabloid/tokens.ts

@@ -0,0 +1,158 @@
+import type { Direction } from "../schema";
+
+// Note: "news-tabloid" is not yet in the Direction["name"] enum.
+// The schema is closed; until it is extended this file casts the name.
+
+export const newsTabloid: Direction = {
+  name: "news-tabloid" as Direction["name"],
+  ethos: "Daily Mail sidebar-of-shame · NY Post wood-type front page · The Sun condensed screamer · Bild red-rule masthead · NY Daily News photo-density",
+  references: [
+    { brand: "Daily Mail", trait: "sidebar-of-shame headline stack, photo-densest layout in news" },
+    { brand: "NY Post", trait: "wood-type-condensed front-page screamer, all-caps shout" },
+    { brand: "The Sun", trait: "red+black bold, white-on-red kicker chips" },
+    { brand: "Bild", trait: "thick red masthead rule, sans-only display register" },
+    { brand: "NY Daily News", trait: "tabloid headline tower, talker sidebar" },
+  ],
+  feel:
+    "Loud, condensed, photo-dense. Red masthead rule + black ink on near-white newsprint. " +
+    "Knockout-style condensed bold sans at oversized sizes screaming the headline. " +
+    "Stacks of headlines, grids of thumbnails, talker sidebars. The page is the noise.",
+
+  fonts: {
+    display: {
+      family: "Oswald",
+      fallback: ["Knockout", "Bebas Neue", "Anton", "Impact", "Haettenschweiler", "sans-serif"],
+      from: "Knockout-style condensed bold sans — NY Post / Daily Mail front-page register",
+      googleFont: "Oswald",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Source Sans 3",
+      fallback: ["Helvetica Neue", "Helvetica", "Arial", "sans-serif"],
+      from: "tabloid body sans — dense, readable in narrow tabloid columns",
+      googleFont: "Source+Sans+3",
+      weights: [400, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "timestamps, comment counts, picture credits — newsroom wire-feed metadata",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.005em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(3rem, 9vw, 7rem)",     // screamer — tabloid front-page scale
+    bodyBaseSize: "0.9375rem",                   // 15px — tight tabloid column
+    bodyLineHeight: "1.45",
+  },
+
+  colors: {
+    background: { hsl: "40 12% 96%", from: "near-white tabloid newsprint — slightly warm" },
+    foreground: { hsl: "0 0% 8%", from: "tabloid ink — nearly pure black, screamer-ready" },
+    card: { hsl: "0 0% 100%", from: "white card — sits brighter than the newsprint" },
+    popover: { hsl: "0 0% 100%", from: "white popover" },
+    primary: { hsl: "0 82% 48%", from: "tabloid red — The Sun / NY Post masthead and kicker chip" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on red" },
+    secondary: { hsl: "0 0% 12%", from: "near-black secondary — for inverted bars and chips" },
+    secondaryForeground: { hsl: "40 12% 96%", from: "newsprint on black" },
+    muted: { hsl: "40 8% 90%", from: "muted newsprint — quiet panels in a loud page" },
+    mutedForeground: { hsl: "0 0% 32%", from: "slate ink — timestamps, comment counts" },
+    accent: { hsl: "48 100% 50%", from: "EXCLUSIVE-chip yellow — Daily Mail tag accent" },
+    accentForeground: { hsl: "0 0% 8%", from: "ink on yellow" },
+    border: { hsl: "0 0% 22%", from: "thick rule — tabloid uses heavy rules to organize the shout" },
+    input: { hsl: "0 0% 22%", from: "same as border" },
+    ring: { hsl: "0 82% 48%", from: "primary red, focus" },
+    destructive: { hsl: "0 82% 40%", from: "deeper red — alert" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on alert" },
+    brand: {
+      ink: { hsl: "0 0% 8%", from: "= foreground; tabloid ink" },
+      "tabloid-red": { hsl: "0 82% 48%", from: "= primary; the canonical tabloid red" },
+      "exclusive-yellow": { hsl: "48 100% 50%", from: "= accent; EXCLUSIVE/BREAKING chip" },
+      newsprint: { hsl: "40 12% 96%", from: "= background; near-white newsprint" },
+      "rule-heavy": { hsl: "0 0% 22%", from: "= border; thick organizing rule" },
+      "chip-fill": { hsl: "0 0% 8%", from: "black chip for SHOCK / SCOOP labels" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48, 64],   // tight — high density
+    containerMax: "max-w-7xl",         // wide — photo grids and headline towers need room
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-10 pb-8 lg:pt-16 lg:pb-12",
+      default: "py-12 lg:py-16",
+      tight: "py-6 lg:py-10",
+    },
+  },
+
+  radius: {
+    base: "0",                           // sharp — no soft chips in tabloid
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "none",
+    utilities: {
+      "rule-heavy":
+        "0 2px 0 0 hsl(var(--ink))",        // thick rule under section bars
+      "chip-shadow":
+        "2px 2px 0 0 hsl(var(--ink))",      // crude offset shadow on EXCLUSIVE chips
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 250,                       // snap — tabloid does not breathe
+      loop: 800,                         // flash chip
+      ambient: 20000,
+    },
+    keyframes: {
+      "snap-in": {
+        css:
+          "from { opacity: 0; transform: translateY(8px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 250,
+        iteration: "once",
+        purpose: "section entrance — fast snap, no theatrical slow rise",
+      },
+      "chip-flash": {
+        css:
+          "0%, 100% { background-color: hsl(var(--tabloid-red)); color: hsl(0 0% 100%); }\n" +
+          "50% { background-color: hsl(var(--exclusive-yellow)); color: hsl(var(--ink)); }",
+        defaultDuration: 800,
+        iteration: "infinite",
+        purpose: "BREAKING/EXCLUSIVE chip color flash — used sparingly on top story only",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Solid-fill in --tabloid-red with white text + heavy --ink border. Bold condensed display font, all-caps. " +
+      "Secondary buttons invert: --ink fill + white text. No ghost buttons — tabloid commits to fill.",
+    card:
+      "Thick 2px --ink border, no radius. Background is white or --newsprint. " +
+      "Headline in oversized Oswald, kicker chip in colored bar. Padding tight (p-3 lg:p-4).",
+    input:
+      "Full box with 2px --ink border. Bold sans label above in caps. Focus shifts border to --tabloid-red.",
+    cta:
+      "Filled rect in --tabloid-red or --ink. Heavy border. All-caps display font. Never a text-link CTA.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--exclusive-yellow) / 0.6)",
+    selectionFg: "hsl(var(--ink))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",
+  },
+};