@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/kinetic-data/THEME.md

@@ -0,0 +1,172 @@
+# Kinetic Data
+
+> Editorial data-journalism register — FT-pink cream canvas at
+
+**Slug:** `kinetic-data` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+Modern editorial data-journalism (NYT Upshot section at its most
+chart-forward, Financial Times Chart Doctor, Reuters Graphics,
+Bloomberg Businessweek Graphics, ProPublica investigative
+visualizations). Distinct from institutional dashboards through the
+EDITORIAL VOICE + LONG-FORM NARRATIVE + HAND-DRAWN CALLOUT
+ANNOTATIONS + SOURCE-CITATION discipline. The register carries a
+reader through the data with editorial writing, not with an
+interactive product tour.
+
+
+## Signature move
+
+FT-pink cream canvas at #fff1e5 — the register's non-negotiable base
+(deliberately warmer than pure cream, distinctly editorial-warm and
+distinctly NOT the pharma cream #f7f3e8 or the Yale ivory #f7f1e0).
+Charcoal ink #333333 (warmer than pure black) with ONE editorial-red
+accent #c8102e used ONLY for chart lines, hand-drawn callout arrows,
+hover states, and pull-quote borders. Sharp corners everywhere.
+
+MASTHEAD — a "THE READOUT" serif display wordmark on the left in the
+Playfair-family display at 28px (mixed case, letter-spacing -0.01em,
+drop caps optional), horizontal nav (Charts / Economy / Politics /
+Climate / Newsletter / About) center, filled editorial-red "Subscribe"
+button right-aligned. Shrinks after 200px scroll.
+
+LIVE DATA TICKER — a thin band directly below the masthead with 4
+mono numeric readouts updating every 4 seconds (unemployment / market
+close / inflation / consumer sentiment). Format: 'UNEMPLOYMENT · 3.7% ·
+▲ 0.1' in mono with red up/down deltas.
+
+CHART OF THE DAY (hero) — a two-column split. LEFT column carries a
+small caps 'CHART OF THE DAY · MARCH 2026' label + big Playfair
+display headline ('When the labor market cooled') + editorial body
+copy in Inter Tight at 16px + author byline. RIGHT column carries a
+MONUMENTAL LINE CHART SVG at ~640x400px — the line draws via
+stroke-dashoffset over 1800ms, then 3 red arrow-and-caption
+ANNOTATIONS fade in pointing to specific data points ('Peak monthly
+additions, February 2024', 'Fed pause, June 2024', 'Latest reading:
+47k below trend'). Chart axis labels in Inter Tight 11px, source line
+in small caps ('SOURCE · US BUREAU OF LABOR STATISTICS · MARCH 2026').
+
+BY THE NUMBERS — 4-column monumental numeric callout grid. Each
+column: 'Numeric callout (240% / 47k / -12% / 3.7% Playfair display
+at 72px in editorial red) + short caption + source citation'. Numbers
+count up from 0 → target on scroll into view.
+
+BAR CHART SECTION — a two-column split. LEFT: Playfair headline
+('Where the jobs actually landed.') + editorial body + methodology
+note. RIGHT: HORIZONTAL BAR CHART SVG at ~560x480px with 8 sectors,
+bars grow from 0 to target width with 80ms per-bar stagger on scroll,
+baseline red rule draws first, longest bar highlighted red with
+numeric label at end of bar.
+
+DATA NARRATIVE — long-form editorial paragraphs with INLINE SMALL
+MULTIPLES (mini line charts at 120x60px embedded in the body copy
+as reader-supporting visualizations). Drop-cap on first paragraph in
+Playfair 88px red.
+
+AREA CHART SECTION — full-width area chart at ~1200x480px showing a
+historical trend with editorial red area fill revealing via clip-path
+animation. 4 red arrow-and-caption annotations at inflection points.
+Body copy beneath.
+
+SMALL MULTIPLES GRID — 8 mini line charts in a 4×2 grid showing the
+same measurement across 8 subjects (regions / industries / countries).
+Each chart has its own line draw + region label + numeric value.
+Stagger reveal 120ms per chart.
+
+BYLINE + METHODOLOGY — an inverted white surface with author photo
+(bespoke SVG portrait), author bio, and a small caps 'METHODOLOGY'
+section explaining the data provenance and calculations.
+
+NEWSLETTER SUBSCRIBE STRIP — a warm cream inverted band with a
+bespoke SVG chart-worthy illustration + subscribe form with mono
+input placeholder.
+
+FOOTER — dark inverted band with a Playfair 'THE READOUT'
+wordmark at ~120px, 4-column utility grid (Editorial / Data / About /
+Newsletter), and a small caps 'A FICTIONAL DAILY DATA-JOURNALISM
+OUTLET' colophon line.
+
+Six bespoke SVG marks (arrow-annotation, mini-line-chart, mini-bar-
+chart, callout-bracket, source-citation-mark, byline-mark) drop as
+PUNCTUATION at specific compositional moments, never as a uniform
+icon row.
+
+## Palette
+
+- **bg:** `#fff1e5`
+- **surface:** `#ffffff`
+- **ink:** `#333333`
+- **accent:** `#c8102e`
+- **secondary:** `#0a5a5a`
+
+## Typography
+
+- **Display:** An editorial display serif with strong stress contrast and a hint of newspaper masthead character — the reference uses NYT Cheltenham / FT Financier. Free fallback stack — "Playfair Display", "PT Serif Display", "Georgia", serif. Weight 700-900, mixed case for section titles and Chart of the Day headline (NEVER uppercase — collapses newspaper feel), small-caps only for section markers. Top of scale ~72px hero headline, 48px section titles, 32px chart-of-the-day title. Letter-spacing -0.01em.
+- **Body:** A tight sans for body copy and chart labels — the reference uses NYT Franklin / FT Metric. Free fallback stack — "Inter Tight", Inter, "Söhne", system-ui, sans-serif. Weight 400 for body copy at 16px 1.65 line-height (generous for long-form data journalism reading), 500 for chart axis labels + small caps section markers, 600 for numeric callouts.
+- **Mono:** A geometric mono for numeric data readouts and live ticker values — "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace. Weight 400-500, 11-14px. LEGITIMATE here because live-ticker data readouts require tabular alignment.
+- **Scale:** 1.333 (perfect fourth — comfortable for long-form data journalism with strong hierarchy contrast)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Hero + Chart of the Day reveal — headline fades in from opacity 0 + translateY(20px) over 800ms cubic-bezier(0.23,1,0.32,1) on first paint. The line chart draws via SVG stroke-dashoffset from 0 to full path length over 1800ms cubic-bezier immediately after headline lands.
+2. Chart callout annotations — 3 red arrow-and-caption annotations fade in AFTER the chart line finishes drawing, staggered 200ms each. Each annotation is anchored to a specific data point with a hand-drawn arrow.
+3. Live data ticker — 4 numeric readouts at the top of the page cycle their values every 4 seconds via mock event stream (small delta each tick — reads as live-updating BLS-style stats).
+4. Bar chart animation — bars grow from 0 to target height with 80ms per-bar stagger + 700ms cubic-bezier on IntersectionObserver at 35% threshold. Baseline red rule draws first.
+5. Area chart animation — area fill reveals via clip-path animation from left to right over 1600ms cubic-bezier on scroll into view. Line traces along the top edge.
+6. Small multiples grid stagger — 8 small line charts stagger reveal at 120ms per chart, each with its own stroke-dashoffset draw.
+7. Numeric callout counters — 'By the Numbers' section numbers count up from 0 → target on IntersectionObserver at 30% threshold, 2000ms ease-out.
+8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier at 25% threshold.
+9. Nav shrink on scroll after 200px.
+10. prefers-reduced-motion: reduce — all reveals disabled; chart lines show at full stroke; bars at full height; areas fully filled; ticker still updates (state readout); state changes still fire.
+
+Motion character: editorial, measured, source-cited. Custom cubic-bezier(0.23,1,0.32,1) for reveals. Never marketing-loud, never product-launch — reads as a data-journalism piece landing, not a SaaS product.
+
+
+## Imagery
+
+BESPOKE SVG chart illustrations — the reference uses hand-illustrated
+editorial charts (line / bar / area / small multiples) with
+hand-drawn callout annotations and clean typographic axis labels.
+FPO imagery here should read as considered editorial data
+visualization (custom-drawn SVG charts, editorial-red single-hue
+color scheme, small annotation arrows, source-citation lines).
+NO stock chart imagery, NO 3D-rendered chart mockups, NO
+warm-radial-gradient placeholder fills.
+
+## Best for
+
+- Editorial data-journalism outlets (NYT Upshot / FT Chart Doctor / Reuters Graphics style)
+- Investigative data-forward publications (ProPublica, Bloomberg Businessweek Graphics)
+- Financial-news editorial sites with a data emphasis
+- Think-tank quarterly publications with chart-heavy analysis
+- Government / academic statistical reports (BLS / EU statistics agencies)
+- Data-forward economic newsletters (Stratechery, Money Stuff-style)
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Dark canvas — Kinetic Data's canvas is FT-PINK CREAM #fff1e5. Dark canvas inverts the editorial data-journalism register into a monitoring-dashboard register (which is a different theme — Enterprise Tech).
+- Pure white or claude-cream canvas — #fff1e5 is deliberately WARMER and MORE SATURATED than pure cream, matching FT's distinctive salmon-pink canvas. Swapping to white/pure-cream kills the specific warmth of this base.
+- Sans-serif display — the display face MUST be an editorial serif (Playfair / PT Serif / Georgia fallback). Sans display collapses the register into modern SaaS.
+- Multi-color chart palettes — the whole register's move is ONE editorial-red hue doing all the chart line/annotation/callout work. Introducing blue + green + orange for chart data series collapses the discipline into generic-dashboard slop.
+- Rounded corners on cards, buttons, or chart-container frames — 0px radius everywhere.
+- Static charts with no animation — the register REQUIRES kinetic reveal. Line via stroke-dashoffset, bars via animated height, areas via clip-path. Static rendering collapses the theme's own name.
+- Marketing-loud copy ('game-changing insights', 'unlock your data') — the register requires MEASURED editorial voice. Marketing-loud copy collapses into SaaS slop.
+- 3D-rendered chart mockups or glossy dashboard imagery — visuals must be bespoke SVG editorial charts. 3D renders read as consumer-tech, not editorial journalism.
+- Mono-caps eyebrow labels outside the two legitimate use sites — CHART DESIGNATION markers ('CHART OF THE DAY') and SOURCE citation lines ('SOURCE · US BLS · MARCH 2026') are the ONLY permitted uses. Any additional 'SECTION · X' plate is slop-blocklist violation.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is #fff1e5 FT-pink, distinct from claude-cream.
+- void+acid (near-black bg + single bright acid-green or vermilion accent) — canvas is cream, not dark.
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns) — Kinetic Data IS editorial so newspaper columns are legitimate, but hairline rules + 0px radius + newspaper columns must serve the chart-forward register, not fight it.
+- tech-bro purple gradient
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- dark-canvas-inversion (canvas is FT-pink cream. Swapping to dark inverts the editorial data-journalism register into a monitoring-dashboard register.)
+- sans-display-anywhere (editorial serif display is the register's fingerprint. Sans display collapses into SaaS.)
+- multi-color-chart-palettes (ONE editorial-red hue does 100% of the chart accent work. Introducing multi-color chart palettes collapses into generic-dashboard slop.)
+- static-charts (the register's own name — kinetic — requires kinetic chart reveals. Static charts fail the register.)
+- 3d-chart-mockups (charts must be bespoke SVG editorial illustrations. 3D renders read as consumer-tech.)

package/themes/kinetic-data/audit.log.jsonl

@@ -0,0 +1 @@
+{"slug":"kinetic-data","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-05T05:59:43.467Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-05T05:59:43.478Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-05T06:00:21.381Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"Family C rubric.md missing at /Users/mattfrischer/Taste/site/design-system/golden-set/C/rubric.md — anchor-compare skipped."},"ran_at":"2026-07-05T06:00:21.381Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-05T05:59:43.467Z"}

package/themes/kinetic-data/tailwind.snippet.ts

@@ -0,0 +1,16 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: kinetic-data
+export const kineticDataTailwindExtend = {
+  colors: {
+    bg: "#fff1e5",
+    surface: "#ffffff",
+    ink: "#333333",
+    accent: "#c8102e",
+    secondary: "#0a5a5a",
+  },
+  fontFamily: {
+    display: ["An editorial display serif with strong stress contrast and a hint of newspaper masthead character — the reference uses NYT Cheltenham / FT Financier. Free fallback stack — \"Playfair Display\", \"PT Serif Display\", \"Georgia\", serif. Weight 700-900, mixed case for section titles and Chart of the Day headline (NEVER uppercase — collapses newspaper feel), small-caps only for section markers. Top of scale ~72px hero headline, 48px section titles, 32px chart-of-the-day title. Letter-spacing -0.01em."],
+    body: ["A tight sans for body copy and chart labels — the reference uses NYT Franklin / FT Metric. Free fallback stack — \"Inter Tight\", Inter, \"Söhne\", system-ui, sans-serif. Weight 400 for body copy at 16px 1.65 line-height (generous for long-form data journalism reading), 500 for chart axis labels + small caps section markers, 600 for numeric callouts."],
+    mono: ["A geometric mono for numeric data readouts and live ticker values — \"IBM Plex Mono\", \"JetBrains Mono\", ui-monospace, monospace. Weight 400-500, 11-14px. LEGITIMATE here because live-ticker data readouts require tabular alignment."],
+  },
+};

package/themes/kinetic-data/theme.yml

@@ -0,0 +1,207 @@
+# Kinetic Data — Family C, Editorial & Print (data-journalism subregion).
+#
+# NYT Upshot / FT Chart Doctor-anchored editorial data journalism.
+# FT-pink cream canvas at #fff1e5 + charcoal ink (#333333) + ONE
+# editorial-red accent (#c8102e) used for chart lines, annotations,
+# and callout arrows. Editorial display serif + sans body pair (NYT
+# Cheltenham + Franklin fallback: Playfair + Inter). Custom animated
+# charts (line / bar / area / small multiples) with drawn callout
+# annotations pointing to specific data points. Sharp corners
+# everywhere.
+#
+# Influence anchor: New York Times Upshot section + Financial Times
+# Chart Doctor + Reuters Graphics. Placeholder brand: "THE READOUT" —
+# a fictional daily data-journalism outlet.
+#
+# Distinct from other Family C bases:
+#   - Editorial (v2) is Aperture photography-first quarterly
+#   - Pharma Clinical is Genentech warm-professional pharma
+#   - Education Formal is Yale institutional (dark navy)
+#   - Ember Poster is warm-dark editorial with hand-drawn ornaments
+#   - Cabana Poster is vintage travel-poster warmth
+# Kinetic Data fills the EDITORIAL DATA JOURNALISM slot — chart-forward
+# editorial magazine with animated data reveals, monumental numeric
+# callouts, and a live data ticker.
+#
+# Twentieth theme via the v2 harness. Ninth Family C theme.
+# Upgrade of the existing v1 archetype-fallback slug.
+
+name: Kinetic Data
+concept: Editorial data-journalism register — FT-pink cream canvas at #fff1e5 with charcoal ink and ONE editorial-red accent used for chart lines, annotations, and callout arrows. Editorial display serif for headlines paired with sans body for chart labels. Custom animated line / bar / area / small-multiples charts drawn via SVG stroke-dashoffset and animated fill-height, with hand-drawn callout annotations pointing to specific data points. Live data ticker at the top updating every 4s, monumental numeric callouts ('240%' 'k' style) at Chart of the Day scale, and a long-form data narrative with inline small multiples. Reads like an NYT Upshot / FT Chart Doctor feature — measured, source-cited, chart-anchored.
+influence: |
+  Modern editorial data-journalism (NYT Upshot section at its most
+  chart-forward, Financial Times Chart Doctor, Reuters Graphics,
+  Bloomberg Businessweek Graphics, ProPublica investigative
+  visualizations). Distinct from institutional dashboards through the
+  EDITORIAL VOICE + LONG-FORM NARRATIVE + HAND-DRAWN CALLOUT
+  ANNOTATIONS + SOURCE-CITATION discipline. The register carries a
+  reader through the data with editorial writing, not with an
+  interactive product tour.
+
+family: C
+base_number: 34
+base_note: |
+  Family C editorial subregion, DATA-JOURNALISM slot. Distinct from
+  other Family C editorial bases through the CHART-FORWARD composition
+  (every section anchored by a custom SVG chart), the ANIMATED CHART
+  DRAWING signature (line via stroke-dashoffset, bars via animated
+  height, areas via clipPath), the HAND-DRAWN CALLOUT ANNOTATIONS
+  (small red arrows pointing to specific data points with editorial
+  captions), and the LIVE DATA TICKER at the top. Editorial v2 is
+  photography-first; Kinetic Data is chart-first. Upgrade of the
+  existing v1 kinetic-data slug from archetype-fallback.
+
+render_url: http://localhost:5173/themes/kinetic-data
+
+surface: web
+
+typography:
+  display: An editorial display serif with strong stress contrast and a hint of newspaper masthead character — the reference uses NYT Cheltenham / FT Financier. Free fallback stack — "Playfair Display", "PT Serif Display", "Georgia", serif. Weight 700-900, mixed case for section titles and Chart of the Day headline (NEVER uppercase — collapses newspaper feel), small-caps only for section markers. Top of scale ~72px hero headline, 48px section titles, 32px chart-of-the-day title. Letter-spacing -0.01em.
+  body: A tight sans for body copy and chart labels — the reference uses NYT Franklin / FT Metric. Free fallback stack — "Inter Tight", Inter, "Söhne", system-ui, sans-serif. Weight 400 for body copy at 16px 1.65 line-height (generous for long-form data journalism reading), 500 for chart axis labels + small caps section markers, 600 for numeric callouts.
+  mono: A geometric mono for numeric data readouts and live ticker values — "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace. Weight 400-500, 11-14px. LEGITIMATE here because live-ticker data readouts require tabular alignment.
+  scale: 1.333 (perfect fourth — comfortable for long-form data journalism with strong hierarchy contrast)
+  eyebrow_exception: |
+    Kinetic Data LEGITIMATELY uses two small-caps use sites — CHART DESIGNATION markers ('CHART OF THE DAY' / 'BY THE NUMBERS' / 'MEASURED') and SOURCE citation lines ('SOURCE · US BUREAU OF LABOR STATISTICS · MARCH 2026'). These are DIEGETIC editorial-newspaper markers (chart-designation labels + source citations), not decorative eyebrow slop.
+
+palette:
+  bg: "#fff1e5"           # canvas — FT-pink cream, distinctive editorial warmth
+  surface: "#ffffff"      # raised white panel for chart backgrounds
+  ink: "#333333"          # charcoal ink (warmer than pure black — editorial reading)
+  accent: "#c8102e"       # editorial red — chart lines, annotations, callouts
+  cream: "#fff1e5"        # alias for bg
+  darkInk: "#0a0a0a"      # near-black for masthead + inverted band
+  mute: "#8a8580"         # dimmed warm-gray for captions, chart axis labels
+  secondary: "#0a5a5a"    # deep teal — secondary chart data series (used sparingly)
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Hero + Chart of the Day reveal — headline fades in from opacity 0 + translateY(20px) over 800ms cubic-bezier(0.23,1,0.32,1) on first paint. The line chart draws via SVG stroke-dashoffset from 0 to full path length over 1800ms cubic-bezier immediately after headline lands.
+  2. Chart callout annotations — 3 red arrow-and-caption annotations fade in AFTER the chart line finishes drawing, staggered 200ms each. Each annotation is anchored to a specific data point with a hand-drawn arrow.
+  3. Live data ticker — 4 numeric readouts at the top of the page cycle their values every 4 seconds via mock event stream (small delta each tick — reads as live-updating BLS-style stats).
+  4. Bar chart animation — bars grow from 0 to target height with 80ms per-bar stagger + 700ms cubic-bezier on IntersectionObserver at 35% threshold. Baseline red rule draws first.
+  5. Area chart animation — area fill reveals via clip-path animation from left to right over 1600ms cubic-bezier on scroll into view. Line traces along the top edge.
+  6. Small multiples grid stagger — 8 small line charts stagger reveal at 120ms per chart, each with its own stroke-dashoffset draw.
+  7. Numeric callout counters — 'By the Numbers' section numbers count up from 0 → target on IntersectionObserver at 30% threshold, 2000ms ease-out.
+  8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier at 25% threshold.
+  9. Nav shrink on scroll after 200px.
+  10. prefers-reduced-motion: reduce — all reveals disabled; chart lines show at full stroke; bars at full height; areas fully filled; ticker still updates (state readout); state changes still fire.
+
+  Motion character: editorial, measured, source-cited. Custom cubic-bezier(0.23,1,0.32,1) for reveals. Never marketing-loud, never product-launch — reads as a data-journalism piece landing, not a SaaS product.
+
+signature: |
+  FT-pink cream canvas at #fff1e5 — the register's non-negotiable base
+  (deliberately warmer than pure cream, distinctly editorial-warm and
+  distinctly NOT the pharma cream #f7f3e8 or the Yale ivory #f7f1e0).
+  Charcoal ink #333333 (warmer than pure black) with ONE editorial-red
+  accent #c8102e used ONLY for chart lines, hand-drawn callout arrows,
+  hover states, and pull-quote borders. Sharp corners everywhere.
+
+  MASTHEAD — a "THE READOUT" serif display wordmark on the left in the
+  Playfair-family display at 28px (mixed case, letter-spacing -0.01em,
+  drop caps optional), horizontal nav (Charts / Economy / Politics /
+  Climate / Newsletter / About) center, filled editorial-red "Subscribe"
+  button right-aligned. Shrinks after 200px scroll.
+
+  LIVE DATA TICKER — a thin band directly below the masthead with 4
+  mono numeric readouts updating every 4 seconds (unemployment / market
+  close / inflation / consumer sentiment). Format: 'UNEMPLOYMENT · 3.7% ·
+  ▲ 0.1' in mono with red up/down deltas.
+
+  CHART OF THE DAY (hero) — a two-column split. LEFT column carries a
+  small caps 'CHART OF THE DAY · MARCH 2026' label + big Playfair
+  display headline ('When the labor market cooled') + editorial body
+  copy in Inter Tight at 16px + author byline. RIGHT column carries a
+  MONUMENTAL LINE CHART SVG at ~640x400px — the line draws via
+  stroke-dashoffset over 1800ms, then 3 red arrow-and-caption
+  ANNOTATIONS fade in pointing to specific data points ('Peak monthly
+  additions, February 2024', 'Fed pause, June 2024', 'Latest reading:
+  47k below trend'). Chart axis labels in Inter Tight 11px, source line
+  in small caps ('SOURCE · US BUREAU OF LABOR STATISTICS · MARCH 2026').
+
+  BY THE NUMBERS — 4-column monumental numeric callout grid. Each
+  column: 'Numeric callout (240% / 47k / -12% / 3.7% Playfair display
+  at 72px in editorial red) + short caption + source citation'. Numbers
+  count up from 0 → target on scroll into view.
+
+  BAR CHART SECTION — a two-column split. LEFT: Playfair headline
+  ('Where the jobs actually landed.') + editorial body + methodology
+  note. RIGHT: HORIZONTAL BAR CHART SVG at ~560x480px with 8 sectors,
+  bars grow from 0 to target width with 80ms per-bar stagger on scroll,
+  baseline red rule draws first, longest bar highlighted red with
+  numeric label at end of bar.
+
+  DATA NARRATIVE — long-form editorial paragraphs with INLINE SMALL
+  MULTIPLES (mini line charts at 120x60px embedded in the body copy
+  as reader-supporting visualizations). Drop-cap on first paragraph in
+  Playfair 88px red.
+
+  AREA CHART SECTION — full-width area chart at ~1200x480px showing a
+  historical trend with editorial red area fill revealing via clip-path
+  animation. 4 red arrow-and-caption annotations at inflection points.
+  Body copy beneath.
+
+  SMALL MULTIPLES GRID — 8 mini line charts in a 4×2 grid showing the
+  same measurement across 8 subjects (regions / industries / countries).
+  Each chart has its own line draw + region label + numeric value.
+  Stagger reveal 120ms per chart.
+
+  BYLINE + METHODOLOGY — an inverted white surface with author photo
+  (bespoke SVG portrait), author bio, and a small caps 'METHODOLOGY'
+  section explaining the data provenance and calculations.
+
+  NEWSLETTER SUBSCRIBE STRIP — a warm cream inverted band with a
+  bespoke SVG chart-worthy illustration + subscribe form with mono
+  input placeholder.
+
+  FOOTER — dark inverted band with a Playfair 'THE READOUT'
+  wordmark at ~120px, 4-column utility grid (Editorial / Data / About /
+  Newsletter), and a small caps 'A FICTIONAL DAILY DATA-JOURNALISM
+  OUTLET' colophon line.
+
+  Six bespoke SVG marks (arrow-annotation, mini-line-chart, mini-bar-
+  chart, callout-bracket, source-citation-mark, byline-mark) drop as
+  PUNCTUATION at specific compositional moments, never as a uniform
+  icon row.
+
+imagery: |
+  BESPOKE SVG chart illustrations — the reference uses hand-illustrated
+  editorial charts (line / bar / area / small multiples) with
+  hand-drawn callout annotations and clean typographic axis labels.
+  FPO imagery here should read as considered editorial data
+  visualization (custom-drawn SVG charts, editorial-red single-hue
+  color scheme, small annotation arrows, source-citation lines).
+  NO stock chart imagery, NO 3D-rendered chart mockups, NO
+  warm-radial-gradient placeholder fills.
+
+best_for:
+  - Editorial data-journalism outlets (NYT Upshot / FT Chart Doctor / Reuters Graphics style)
+  - Investigative data-forward publications (ProPublica, Bloomberg Businessweek Graphics)
+  - Financial-news editorial sites with a data emphasis
+  - Think-tank quarterly publications with chart-heavy analysis
+  - Government / academic statistical reports (BLS / EU statistics agencies)
+  - Data-forward economic newsletters (Stratechery, Money Stuff-style)
+
+avoid:
+  - "Dark canvas — Kinetic Data's canvas is FT-PINK CREAM #fff1e5. Dark canvas inverts the editorial data-journalism register into a monitoring-dashboard register (which is a different theme — Enterprise Tech)."
+  - "Pure white or claude-cream canvas — #fff1e5 is deliberately WARMER and MORE SATURATED than pure cream, matching FT's distinctive salmon-pink canvas. Swapping to white/pure-cream kills the specific warmth of this base."
+  - "Sans-serif display — the display face MUST be an editorial serif (Playfair / PT Serif / Georgia fallback). Sans display collapses the register into modern SaaS."
+  - "Multi-color chart palettes — the whole register's move is ONE editorial-red hue doing all the chart line/annotation/callout work. Introducing blue + green + orange for chart data series collapses the discipline into generic-dashboard slop."
+  - "Rounded corners on cards, buttons, or chart-container frames — 0px radius everywhere."
+  - "Static charts with no animation — the register REQUIRES kinetic reveal. Line via stroke-dashoffset, bars via animated height, areas via clip-path. Static rendering collapses the theme's own name."
+  - "Marketing-loud copy ('game-changing insights', 'unlock your data') — the register requires MEASURED editorial voice. Marketing-loud copy collapses into SaaS slop."
+  - "3D-rendered chart mockups or glossy dashboard imagery — visuals must be bespoke SVG editorial charts. 3D renders read as consumer-tech, not editorial journalism."
+  - "Mono-caps eyebrow labels outside the two legitimate use sites — CHART DESIGNATION markers ('CHART OF THE DAY') and SOURCE citation lines ('SOURCE · US BLS · MARCH 2026') are the ONLY permitted uses. Any additional 'SECTION · X' plate is slop-blocklist violation."
+
+banned_defaults:
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is #fff1e5 FT-pink, distinct from claude-cream."
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent) — canvas is cream, not dark."
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns) — Kinetic Data IS editorial so newspaper columns are legitimate, but hairline rules + 0px radius + newspaper columns must serve the chart-forward register, not fight it."
+  - "tech-bro purple gradient"
+  - "uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)"
+  - "dark-canvas-inversion (canvas is FT-pink cream. Swapping to dark inverts the editorial data-journalism register into a monitoring-dashboard register.)"
+  - "sans-display-anywhere (editorial serif display is the register's fingerprint. Sans display collapses into SaaS.)"
+  - "multi-color-chart-palettes (ONE editorial-red hue does 100% of the chart accent work. Introducing multi-color chart palettes collapses into generic-dashboard slop.)"
+  - "static-charts (the register's own name — kinetic — requires kinetic chart reveals. Static charts fail the register.)"
+  - "3d-chart-mockups (charts must be bespoke SVG editorial illustrations. 3D renders read as consumer-tech.)"

package/themes/kinetic-data/tokens.ts

@@ -0,0 +1,30 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "kinetic-data",
+  family: "C",
+  base: "34",
+  palette: {
+    "bg": "#fff1e5",
+    "surface": "#ffffff",
+    "ink": "#333333",
+    "accent": "#c8102e",
+    "cream": "#fff1e5",
+    "darkInk": "#0a0a0a",
+    "mute": "#8a8580",
+    "secondary": "#0a5a5a"
+  },
+  typography: {
+    "display": "An editorial display serif with strong stress contrast and a hint of newspaper masthead character — the reference uses NYT Cheltenham / FT Financier. Free fallback stack — \"Playfair Display\", \"PT Serif Display\", \"Georgia\", serif. Weight 700-900, mixed case for section titles and Chart of the Day headline (NEVER uppercase — collapses newspaper feel), small-caps only for section markers. Top of scale ~72px hero headline, 48px section titles, 32px chart-of-the-day title. Letter-spacing -0.01em.",
+    "body": "A tight sans for body copy and chart labels — the reference uses NYT Franklin / FT Metric. Free fallback stack — \"Inter Tight\", Inter, \"Söhne\", system-ui, sans-serif. Weight 400 for body copy at 16px 1.65 line-height (generous for long-form data journalism reading), 500 for chart axis labels + small caps section markers, 600 for numeric callouts.",
+    "mono": "A geometric mono for numeric data readouts and live ticker values — \"IBM Plex Mono\", \"JetBrains Mono\", ui-monospace, monospace. Weight 400-500, 11-14px. LEGITIMATE here because live-ticker data readouts require tabular alignment.",
+    "scale": "1.333 (perfect fourth — comfortable for long-form data journalism with strong hierarchy contrast)",
+    "eyebrow_exception": "Kinetic Data LEGITIMATELY uses two small-caps use sites — CHART DESIGNATION markers ('CHART OF THE DAY' / 'BY THE NUMBERS' / 'MEASURED') and SOURCE citation lines ('SOURCE · US BUREAU OF LABOR STATISTICS · MARCH 2026'). These are DIEGETIC editorial-newspaper markers (chart-designation labels + source citations), not decorative eyebrow slop.\n"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Hero + Chart of the Day reveal — headline fades in from opacity 0 + translateY(20px) over 800ms cubic-bezier(0.23,1,0.32,1) on first paint. The line chart draws via SVG stroke-dashoffset from 0 to full path length over 1800ms cubic-bezier immediately after headline lands.\n2. Chart callout annotations — 3 red arrow-and-caption annotations fade in AFTER the chart line finishes drawing, staggered 200ms each. Each annotation is anchored to a specific data point with a hand-drawn arrow.\n3. Live data ticker — 4 numeric readouts at the top of the page cycle their values every 4 seconds via mock event stream (small delta each tick — reads as live-updating BLS-style stats).\n4. Bar chart animation — bars grow from 0 to target height with 80ms per-bar stagger + 700ms cubic-bezier on IntersectionObserver at 35% threshold. Baseline red rule draws first.\n5. Area chart animation — area fill reveals via clip-path animation from left to right over 1600ms cubic-bezier on scroll into view. Line traces along the top edge.\n6. Small multiples grid stagger — 8 small line charts stagger reveal at 120ms per chart, each with its own stroke-dashoffset draw.\n7. Numeric callout counters — 'By the Numbers' section numbers count up from 0 → target on IntersectionObserver at 30% threshold, 2000ms ease-out.\n8. Section reveals — each below-fold section fades in from opacity 0 + translateY(24px) → 0 over 700ms cubic-bezier at 25% threshold.\n9. Nav shrink on scroll after 200px.\n10. prefers-reduced-motion: reduce — all reveals disabled; chart lines show at full stroke; bars at full height; areas fully filled; ticker still updates (state readout); state changes still fire.\n\nMotion character: editorial, measured, source-cited. Custom cubic-bezier(0.23,1,0.32,1) for reveals. Never marketing-loud, never product-launch — reads as a data-journalism piece landing, not a SaaS product.\n",
+  signature: "FT-pink cream canvas at #fff1e5 — the register's non-negotiable base\n(deliberately warmer than pure cream, distinctly editorial-warm and\ndistinctly NOT the pharma cream #f7f3e8 or the Yale ivory #f7f1e0).\nCharcoal ink #333333 (warmer than pure black) with ONE editorial-red\naccent #c8102e used ONLY for chart lines, hand-drawn callout arrows,\nhover states, and pull-quote borders. Sharp corners everywhere.\n\nMASTHEAD — a \"THE READOUT\" serif display wordmark on the left in the\nPlayfair-family display at 28px (mixed case, letter-spacing -0.01em,\ndrop caps optional), horizontal nav (Charts / Economy / Politics /\nClimate / Newsletter / About) center, filled editorial-red \"Subscribe\"\nbutton right-aligned. Shrinks after 200px scroll.\n\nLIVE DATA TICKER — a thin band directly below the masthead with 4\nmono numeric readouts updating every 4 seconds (unemployment / market\nclose / inflation / consumer sentiment). Format: 'UNEMPLOYMENT · 3.7% ·\n▲ 0.1' in mono with red up/down deltas.\n\nCHART OF THE DAY (hero) — a two-column split. LEFT column carries a\nsmall caps 'CHART OF THE DAY · MARCH 2026' label + big Playfair\ndisplay headline ('When the labor market cooled') + editorial body\ncopy in Inter Tight at 16px + author byline. RIGHT column carries a\nMONUMENTAL LINE CHART SVG at ~640x400px — the line draws via\nstroke-dashoffset over 1800ms, then 3 red arrow-and-caption\nANNOTATIONS fade in pointing to specific data points ('Peak monthly\nadditions, February 2024', 'Fed pause, June 2024', 'Latest reading:\n47k below trend'). Chart axis labels in Inter Tight 11px, source line\nin small caps ('SOURCE · US BUREAU OF LABOR STATISTICS · MARCH 2026').\n\nBY THE NUMBERS — 4-column monumental numeric callout grid. Each\ncolumn: 'Numeric callout (240% / 47k / -12% / 3.7% Playfair display\nat 72px in editorial red) + short caption + source citation'. Numbers\ncount up from 0 → target on scroll into view.\n\nBAR CHART SECTION — a two-column split. LEFT: Playfair headline\n('Where the jobs actually landed.') + editorial body + methodology\nnote. RIGHT: HORIZONTAL BAR CHART SVG at ~560x480px with 8 sectors,\nbars grow from 0 to target width with 80ms per-bar stagger on scroll,\nbaseline red rule draws first, longest bar highlighted red with\nnumeric label at end of bar.\n\nDATA NARRATIVE — long-form editorial paragraphs with INLINE SMALL\nMULTIPLES (mini line charts at 120x60px embedded in the body copy\nas reader-supporting visualizations). Drop-cap on first paragraph in\nPlayfair 88px red.\n\nAREA CHART SECTION — full-width area chart at ~1200x480px showing a\nhistorical trend with editorial red area fill revealing via clip-path\nanimation. 4 red arrow-and-caption annotations at inflection points.\nBody copy beneath.\n\nSMALL MULTIPLES GRID — 8 mini line charts in a 4×2 grid showing the\nsame measurement across 8 subjects (regions / industries / countries).\nEach chart has its own line draw + region label + numeric value.\nStagger reveal 120ms per chart.\n\nBYLINE + METHODOLOGY — an inverted white surface with author photo\n(bespoke SVG portrait), author bio, and a small caps 'METHODOLOGY'\nsection explaining the data provenance and calculations.\n\nNEWSLETTER SUBSCRIBE STRIP — a warm cream inverted band with a\nbespoke SVG chart-worthy illustration + subscribe form with mono\ninput placeholder.\n\nFOOTER — dark inverted band with a Playfair 'THE READOUT'\nwordmark at ~120px, 4-column utility grid (Editorial / Data / About /\nNewsletter), and a small caps 'A FICTIONAL DAILY DATA-JOURNALISM\nOUTLET' colophon line.\n\nSix bespoke SVG marks (arrow-annotation, mini-line-chart, mini-bar-\nchart, callout-bracket, source-citation-mark, byline-mark) drop as\nPUNCTUATION at specific compositional moments, never as a uniform\nicon row.\n",
+} as const;
+
+export type Tokens = typeof tokens;

package/themes/kinetic-headline/BUILD_BRIEF.md

@@ -0,0 +1,156 @@
+# Kinetic-Headline — 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 paper canvas** — dark `#0B0B0F` on the dark canvas, cotton
+   `#FAFAFA` on the light canvas. Never pure black. Never pure white.
+   The canvas toggle swaps between them; the SIGNAL variant is
+   independent.
+2. **Use ONE accent color per page** — the palette variant. The accent
+   is used ONLY for: the studio "Say hello" nav CTA border + text, the
+   selected-work highlight, one link border in the body. Nothing else.
+3. **Set the hero display at the theme's variable-weight range:**
+   `fontFamily: "Bricolage Grotesque Variable"` (or `Neue Haas Grotesk
+   Display` fallback) with `font-variation-settings: 'wght' 400 → 700`
+   morphing on paint. `clamp(3rem, 8vw, 8rem)`, tracking -0.03em.
+4. **Restraint everywhere else.** Body copy in Uncut Sans / Inter at
+   17px line-height 1.55. No mono anywhere as decorative label. Mono
+   permitted ONLY for the "sixty-second install" microcopy pattern
+   (code-shaped things).
+5. **Single-column body** — hero content stays under 900px max-width.
+   Multi-column layout ONLY on the "Selected work" project list and
+   "Recognition" awards strip.
+6. **Real Pexels photos for the featured-project and portrait bands.**
+   No SVG stand-ins for photo-worthy subjects. Photos: workspace
+   (project section), designer-at-monitor (portrait section), abstract
+   typography (recognition), each shot at 3:2 or 16:9.
+
+---
+
+## SLOP-BLOCKLIST — you MUST NOT
+
+- **Mono-caps decorative eyebrows** (`FEATURED · X`, `SELECTED WORK`,
+  `THE STUDIO`). CSS fingerprint: `textTransform: uppercase` +
+  `letterSpacing ≥ 0.14em` at `fontSize < 20px`. Not on this theme's
+  chrome inventory.
+- **Dot-separated decorative metadata** in visible copy
+  (`Featured · Herald Financial · 2026`, `Founded · Team · Location`).
+  Content-level `·` inside prose (e.g. `Zurich, Switzerland`) is fine.
+- **`№` / N.º / no. / vol. ornaments.**
+- **Auto-advancing hero sliders** (setInterval < 6s mutating a headline
+  word or image); **cycling headline words** (`we [design][build][ship]`).
+- **3-pillar identical feature-card grids** as the marketing spine.
+  The Selected Work section is a LIST of projects, not a grid of
+  identical pillars.
+- **Ticker bars** or horizontal marquees.
+- **Vague trust copy:** hand-crafted, thoughtfully-made, considered,
+  for-teams-that-care.
+- **Roman-numeral copyright** (`MMXXVI`).
+- **Attribution of influence in visible copy** — Studio Feixen,
+  Pentagram, Base Design, MUBI can be studied but never NAMED in
+  slug, copy, or UI.
+- **A second accent color** for hover / focus / status. There's ONE
+  accent per page.
+- **Warm-glow radial gradients** as image fallbacks (Stripe/Linear
+  AI-default slop).
+
+---
+
+## CHROME INVENTORY — the allow-list
+
+- **Sticky palette + canvas picker strip** — meta-UI at the top; the
+  brief-enforcer treats picker labels as picker chrome, not theme
+  composition. Labels use body font, sentence-case, no letter-spacing.
+- **Masthead nav** — brand mark (small filled square in accent) +
+  studio wordmark (Bricolage 700 at 18px, letter-spacing -0.02em) +
+  4 nav items (body font, sentence-case, 14px) + 1 accent-bordered
+  "Say hello" CTA (accent border + accent text, no fill).
+- **Variable-weight morphing hero** — display at clamp(3rem, 8vw,
+  8rem), `font-variation-settings: 'wght' 400 → 700` transition on
+  paint, tracking -0.03em, one line-break max.
+- **Featured-project section** — real photo (3:2) + display h2 for
+  project title + body copy + "View case study →" ghost link with
+  accent underline. NOT a card, NOT a grid tile.
+- **Selected-work list** — vertical stack, each row = display-font
+  project title + year in sentence-case body + one-line description +
+  accent underline on hover. Divider hairlines between rows. NEVER
+  a 3-col grid.
+- **Portrait band** — designer photo (5:6 or 4:5) + display h3 +
+  1-2 paragraphs of body copy + one accent-bordered ghost CTA.
+- **Recognition strip** — 3-6 award / press logos, each in body font
+  at 16px, evenly spaced. NO ticker animation.
+- **Contact CTA** — display h2 + accent-filled button (radius 4px,
+  accent bg + `footerInk` text) + optional email underneath.
+- **Dark footer band** — inverted canvas (uses `footerBg` +
+  `footerInk`), brand wordmark + one-line note + 3 columns of
+  small links + tiny copyright (regular Arabic numerals).
+
+---
+
+## SIGNATURE MOVES — verbs, not adjectives
+
+- **Morph the headline weight from 400 → 700** on paint over 400ms
+  cubic-bezier(0.22, 1, 0.36, 1). `font-variation-settings` transition
+  is the ONLY animation on the hero. No fade-rise, no ambient drift.
+- **Underline selected-work rows with the accent** on hover — 1px
+  hairline animates from left to right over 240ms. This is how the
+  list reads as a portfolio, not a feature grid.
+- **Set project titles in the body font at display scale** (48-64px)
+  — Bricolage Grotesque at 500 weight, sentence-case, tracking
+  -0.025em. Never uppercase. This is the tell that separates a
+  studio-portfolio register from a marketing-page register.
+- **Photos are 3:2 landscape** except the portrait which is 4:5.
+  Warm shadow + cool highlight grade so the accent doesn't compete.
+- **The accent-bordered CTA is the studio's signature move** —
+  transparent bg, 1px accent border, accent text, no glow. Never a
+  solid accent-filled button.
+- **Restraint elsewhere** — every other section is single-column,
+  body font, one accent element per section max. The morphing hero
+  earns the moment by being the only maximalist thing on the page.
+
+---
+
+## COLOR TOKENS
+
+**Dark canvas** — `bg #0B0B0F` / `surface #16161B` / `ink #F5F5F5` /
+`mute #8B8B92`. Footer band inverts to `footerBg: #FAFAFA` +
+`footerInk: #0B0B0F`.
+
+**Light canvas** — `bg #FAFAFA` / `surface #F0F0F0` / `ink #0A0A0A` /
+`mute #7A7A7A`. Footer band inverts to `footerBg: #0A0A0A` +
+`footerInk: #FAFAFA`.
+
+**Accent** (per palette variant — 10 studio-brand hues; default `cobalt`
+`#3D5AFE` on dark, `#3D5AFE` on light).
+
+---
+
+## TYPOGRAPHY
+
+- **Display:** Bricolage Grotesque Variable (fallback Neue Haas Grotesk
+  Display, Inter). Weight morphs 400 → 700 on paint. Hero clamp(3rem,
+  8vw, 8rem), tracking -0.03em.
+- **Body:** Uncut Sans (fallback Inter), 17px, line-height 1.55,
+  tracking -0.005em.
+- **Mono:** IBM Plex Mono — ONLY for the "sixty-second install"
+  microcopy and code-shaped things. Never for decorative labels.
+
+---
+
+## SECTION SKELETON
+
+1. Sticky palette + canvas picker strip.
+2. Masthead nav (Studio Feixen wordmark + 4 nav items + "Say hello").
+3. Hero — variable-weight morphing display headline.
+4. Featured project — real photo + display title + body + ghost CTA.
+5. Selected work — vertical list of 6 projects.
+6. Studio / about split — designer portrait + body copy.
+7. Recognition — award / press credits row.
+8. Contact CTA — display + accent-filled button.
+9. Dark footer band.