takomi 2.1.45 → 2.5.4

package/assets/.agent/skills/hyperframes-creative/frame-presets/claude/FRAME.md

@@ -1,277 +1,277 @@
----
-version: alpha
-name: Claude — Frame (video / frame layer)
-description: >
-  Video-first companion to Claude's design.md. The unit is the frame (1920×1080). Atoms are
-  identical and sacred — warm cream paper (never pure white, never cool), a single terracotta coral
-  as scarce "voltage", hairline ink elevation (no heavy shadow), EB Garamond for all
-  display + Inter body + JetBrains Mono for the index/code voice on a warm-navy code surface,
-  sentence-case display, and the ✱ coral spike mark. Composition + frame scale rewritten. Motion out
-  of scope.
-unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented
-principle: atoms are sacred · composition is free · numbers come from the script
-
-colors:
-  ink: "#141413"
-  cream: "#FAF9F5"
-  tile: "#EFE9DE"
-  tile-strong: "#ECE3D4"
-  coral: "#CC785C"
-  navy: "#181715"
-  navy-soft: "#1F1E1B"
-  navy-elev: "#252320"
-
-borders: { hairline: "1px solid ink@12%", hairline-strong: "1px solid ink@20%", dark: "1px solid cream@14% (on navy)" }
-shadows: { card: "0 1px 3px ink@8%, 0 4px 16px ink@4%", none: "none" }
-
-typography:
-  # — reading + chrome ramp —
-  body:    { fontFamily: "Inter", cqw: 1.5, weight: 400, lineHeight: 1.5 }
-  lead:    { fontFamily: "Inter", cqw: 2.08, weight: 400, lineHeight: 1.5 }
-  card-title:{ fontFamily: "Inter", cqw: 2.3, weight: 500, lineHeight: 1.25, tracking: "-0.005em" }
-  button:  { fontFamily: "Inter", cqw: 1.46, weight: 500, lineHeight: 1.0 }
-  tag-upper:{ fontFamily: "Inter", cqw: 1.35, weight: 500, tracking: "0.18em", upper: true }
-  kicker:  { fontFamily: "JetBrains Mono", px: 28, cqw: 1.46, weight: 500, tracking: "0.16em", upper: true }
-  mono-label:{ fontFamily: "JetBrains Mono", px: 26, cqw: 1.35, weight: 500, tracking: "0.02em" }
-  code:    { fontFamily: "JetBrains Mono", cqw: 1.67, weight: 400, lineHeight: 1.6 }
-  # — display ramp (EB Garamond 400, sentence case, negative tracking. Renderer embeds only 400/700 — author at 400; italic is the synthesized slant) —
-  headline:{ fontFamily: "EB Garamond", cqw: 4.6, weight: 400, lineHeight: 1.06, tracking: "-0.018em" }
-  quote-pull:{ fontFamily: "EB Garamond", cqw: 5.0, weight: 400, lineHeight: 1.12, tracking: "-0.012em", italic: true }
-  display-italic:{ fontFamily: "EB Garamond", cqw: 6.7, weight: 400, lineHeight: 1.05, tracking: "-0.012em", italic: true }
-  display:{ fontFamily: "EB Garamond", cqw: 7.3, weight: 400, lineHeight: 1.02, tracking: "-0.022em" }
-  number-hero:{ fontFamily: "EB Garamond", cqw: 9.4, weight: 400, lineHeight: 0.95, tracking: "-0.025em" }
-  display-cover:{ fontFamily: "EB Garamond", cqw: 9.9, weight: 400, lineHeight: 0.98, tracking: "-0.028em" }
-  number-unit:{ fontFamily: "JetBrains Mono", cqw: 2.08, weight: 500, lineHeight: 1.0 }
-
-spacing:
-  slide-pad: "4.2cqw"   # ~80px @1920
-  gap-md: "1.7cqw"
-  hairline: "1px"
-  radius-sm: "6px"
-  radius-md: "8px"
-  radius-lg: "12px"
-  radius-pill: "9999px"
-
-components:
-  card-hairline:
-    backgroundColor: "{colors.cream} or {colors.tile}"
-    border: "1px solid {colors.ink}@12%"
-    rounded: "{spacing.radius-lg}"
-    shadow: "{shadows.card}"
-    typography: "{typography.card-title} + {typography.body}"
-    description: "The editorial content card. Elevation is the hairline + ONE soft warm shadow — never a heavy drop, glow, or gradient."
-  kicker-spike:
-    typography: "{typography.kicker}"
-    mark: "✱ coral spike prefix"
-    description: "The eyebrow — JetBrains Mono uppercase, indexical (2–5 words), prefixed with the coral ✱. Never plain text, never a sentence."
-  coral-callout:
-    backgroundColor: "{colors.coral} (full-bleed) or {colors.cream} with a coral edge"
-    textColor: "{colors.cream} on coral"
-    rounded: "{spacing.radius-md}"
-    typography: "{typography.button} / {typography.h2}"
-    description: "The ONE voltage moment per frame — the CTA, the single inline link, OR the full-bleed band. Never two corals in one frame."
-  number-lockup:
-    typography: "{typography.number-hero} figure + {typography.number-unit} unit"
-    description: "Hero stat — a EB Garamond figure paired with a JetBrains Mono unit (200K, +1,204, −318, 17 files). Figure is serif; the unit is ALWAYS mono, never the serif."
-  pull-quote:
-    typography: "{typography.quote-pull} (EB Garamond italic) + {typography.tag-upper} cite"
-    description: "A commit message, a reviewer line, or the thesis. EB Garamond italic, small Inter uppercase cite beneath."
-  section-rule:
-    rule: "1px solid {colors.ink}@12% (or {colors.cream}@14% on navy)"
-    description: "The only separator. A coral 1px rule may draw on to introduce a section. Never 2px+, never a heavy divider."
-  code-surface:
-    backgroundColor: "{colors.navy} body / {colors.navy-elev} title bar + status strip"
-    textColor: "{colors.cream} (JetBrains Mono); syntax in coral (keywords) / teal #5DB8A6 (strings) / amber #E8A55A (numbers)"
-    border: "1px solid {colors.cream}@14%"
-    rounded: "{spacing.radius-md}"
-    description: "The warm-navy code / terminal surface. The CODE ITSELF is rendered by the code-* registry blocks (code-diff / code-typing / code-snippet-*); this preset owns the surrounding surface, title bar, status strip, and mono chrome — not the code rendering."
-  spike-mark:
-    glyph: "✱ (U+2731), always {colors.coral}"
-    description: "The brand mark. Fades + scales 0.92→1 on a single emphasis beat; never spins."
----
-
-# Claude — Frame (video / frame layer)
-
-## Overview
-
-Claude at frame scale is a **warm-editorial brand book come to life** — the register of a literary
-imprint or a research note. The thesis is three colors: **cream is the ground, ink is the voice,
-coral is the voltage** — and a fourth (warm navy) only where code shows itself. Every surface is
-**warm cream** (never pure white, never cool gray); content gathers on a **tile** surface half a
-step darker — the demarcation is a half-step, never a hard contrast. Elevation is a **1px hairline**
-ink border at low alpha plus, rarely, one soft warm shadow. There are no heavy drops, no glows, no
-gradients on content.
-
-Three editorial voices, each in its own face: **EB Garamond** carries every display moment — covers,
-headlines, pull-quotes, big stat numerals — at large display sizes with gentle negative tracking;
-its **italic** is the expressive register. **Inter** carries body, leads, card titles, buttons, and
-UI chrome. **JetBrains Mono** carries the indexical layer — kickers, technical labels, the code
-window, status strips. Switching a voice's face collapses the register: a sans headline or a serif
-label reads as a different brand.
-
-**Key characteristics at frame scale:**
-
-- **Cream / ink / coral trinity** + a warm-navy code surface; cream is the default ground, ink the voice, coral the scarce voltage.
-- **EB Garamond** (sentence case, negative-tracked) for all display; **Inter** body/chrome; **JetBrains Mono** index + code.
-- **Hairline elevation** — a 1px low-alpha ink border + at most one soft warm shadow. No heavy drop, glow, or gradient.
-- **Coral is rationed** — at most ONE coral moment per frame (CTA, inline link, OR full-bleed band); coral never sets a headline or a body run.
-- **Density is free** — fill the frame as the content wants; a frame may stand on a single focal or carry a dense, layered composition.
-- **The ✱ coral spike** opens kickers; warm navy is reserved for the code/terminal surface.
-
-## The Frame
-
-### Frame Craft Bar
-
-Eyeball tests gate every frame before any structural check:
-
-- **Squint** — one EB Garamond display moment dominates at 3–6× its neighbor.
-- **Trinity** — cream/tile ground, ink text, coral exactly **once**; warm navy only on the code surface; no cool gray / pure white / fourth hue.
-- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code.
-
-- **Primary:** 1920×1080 (16:9). Display authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
-- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
-- **Safe area:** `slide-pad` ~4.2cqw; the kicker/mono chrome sit inside it.
-
-**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
-frame-relative units are `cqw`/`cqh` against it — never `vw`. Hairlines stay 1px; card radii stay
-6/8/12px; the warm-paper reading must survive every ratio.
-
-## Colors
-
-Tokens identical to the source. Default ground `{colors.cream}`; content gathers on
-`{colors.tile}` / `{colors.tile-strong}` (half-step warm steps, never a hard contrast).
-**Headlines & body:** `{colors.ink}` on cream/tile; `{colors.cream}` on navy. **Coral**
-(`{colors.coral}`) is the scarce voltage — one moment per frame (CTA, inline link, or full-bleed
-band), never body text, never a card fill. **Warm navy** (`{colors.navy}` / `navy-soft` /
-`navy-elev`) is the code / terminal / dark-card surface — a structural anchor, not a fourth brand
-hue. **No cool grays, no pure white, no pure black.**
-
-**Fixed syntax colors (decoration, NOT remixable brand hues).** When a code line is hand-set rather
-than rendered by a `code-*` block, keywords are coral, strings are **teal `#5DB8A6`**, numbers are
-**amber `#E8A55A`**; status reads success `#5DB872` / warn `#C64545`. These track the code surface,
-not the brand trinity — keep them out of the brand palette.
-
-## Typography
-
-Two ramps. The **reading/chrome ramp** (Inter `body` 1.5cqw / `lead` 2.08cqw weight 400; JetBrains
-Mono `kicker`/`mono-label` in px) carries copy + chrome; the **display ramp** (EB Garamond `headline` 4.6cqw
-→ `display-cover` 9.9cqw, weight 400, negative-tracked) carries every headline + stat.
-
-- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono px labels are chrome only.
-- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display-cover`; 4–6 → `display`; 7+ → `headline`. Reserve the 7.3–9.9cqw tier for cover / statement / stat.
-- **EB Garamond display is sentence case** (NOT title case, NOT uppercase), weight 400, negative-tracked (−0.012..−0.028em); reach for **italic** when the line is a stance or a definition. **Inter body** sentence case weight 400. **JetBrains Mono** kickers UPPERCASE 0.16em with the coral ✱. No uppercase serif, no sans headline, no serif label.
-
-## Depth & Surface
-
-Hairline elevation:
-
-- **1px hairline** ink border at ~12% alpha is the primary lift (cream@14% on navy).
-- **One soft warm shadow** (`0 1px 3px ink@8%, 0 4px 16px ink@4%`) — used rarely, never heavy.
-- **Half-step surface** — a `{colors.tile}` block on cream reads elevated by the warm step, not by a cast shadow.
-
-**Ceiling:** no heavy drop shadow, no glow, no gradient on content, no tilt. The system has no light
-to emit; it reads by warmth and hairline.
-
-## Shapes
-
-- **6px** small chrome, **8px** cards / code surface, **12px** large cards / quote frames, **9999px** true pills only. No square corners, no heavy rounding; the editorial register is gently rounded, never hard.
-
-## Components
-
-- **card-hairline** — the editorial content card (hairline + one soft shadow). **section-rule** — the only separator (1px, coral may draw on).
-- **kicker-spike** — the ✱ coral eyebrow. **coral-callout** — the one voltage moment (CTA / inline link / full-bleed band).
-- **number-lockup** — EB Garamond figure + mono unit (the PR `+N / −M`, `200K`, file counts). **pull-quote** — EB Garamond italic + cite (a commit message / reviewer line).
-- **code-surface** — the warm-navy code / terminal surface; the code itself comes from the **`code-*` registry blocks**, this owns the surface + mono chrome.
-- **spike-mark** — the ✱ brand glyph, always coral.
-
-## Frame Treatments
-
-> Recipe: ground · container · composes · focal · chrome · accent · Fixed/Free · density.
-> One coral moment per frame; open with a kicker-spike.
-
-### 1 · Cover (identity · move: oversized EB Garamond · cream)
-
-**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, display-cover, lead, mono-label index. **Focal** a 2–3 line EB Garamond `display-cover` (sentence case, ink) under a coral ✱ kicker. **Chrome** mono index strip (repo · branch). **Accent** the single coral ✱. **Fixed** EB Garamond 400 sentence case, hairline, cream ground. **Free** title, the mono index, layout + how full the frame runs. **Density** free.
-
-### 2 · Statement (statement · move: single EB Garamond line · cream or navy)
-
-**Ground** `{colors.cream}` (or `{colors.navy}` for gravity). **Composes** kicker-spike, display, optional lead. **Focal** one 2-line EB Garamond `display` carrying the change in a sentence — reach for **italic** if it's a stance. **Chrome** mono kicker. **Accent** none — the serif carries it (or one coral word). **Fixed** sentence-case serif. **Free** the line, ground, layout + density. **Density** free.
-
-### 3 · Code Surface (code · move: warm-navy code window · the PR-critical frame)
-
-**Ground** `{colors.cream}` framing a `{colors.navy}` **code-surface** (8px, cream@14% hairline, `navy-elev` title bar + filename in mono). **Composes** mono-label filename, the **`code-*` block** (code-diff / code-typing / code-snippet-_), optional `section-rule`. **Focal** the code panel — the diff / before→after / typed-on snippet. **Chrome** mono filename + status strip. **Accent** syntax coral/teal/amber inside the panel; one coral marker outside (e.g. a `+`/`−` gutter cue). **Fixed** warm-navy surface, mono code, hairline. **Free** which code-_ block, the code (from the diff), how large the panel runs. **Density** dense.
-
-### 4 · Number / Impact (data · move: oversized figure · cream)
-
-**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, number-lockup, lead/caption, optional `section-rule`. **Focal** a EB Garamond `number-hero` figure with a mono unit over a 1px rule — the PR impact (`+1,204 / −318`, `17 files`, `2.1× faster`). **Chrome** mono tag. **Accent** the figure in ink; at most one coral unit. **Fixed** serif figure + mono unit, hairline rule. **Free** the figures (from the script), tag, layout + density. **Density** free.
-
-### 5 · Pull-quote (quote · move: EB Garamond italic · cream)
-
-**Ground** `{colors.cream}`. **Composes** kicker-spike, pull-quote, tag-upper cite. **Focal** a EB Garamond **italic** `quote-pull` — a commit message, a reviewer line, or the thesis — with a small Inter uppercase cite (author · role) beneath. **Chrome** mono kicker. **Accent** none, or one coral mark. **Fixed** EB Garamond italic quote + uppercase cite. **Free** quote, attribution, layout + density. **Density** free.
-
-### 6 · Closing / CTA (closer · move: coral voltage · cream or navy)
-
-**Ground** `{colors.cream}` (or `{colors.navy}`). **Composes** display sign-off, coral-callout, optional contributor row (`assets/<login>.png` avatars + mono names). **Focal** a short EB Garamond sign-off with the one **coral-callout** (the CTA or full-bleed band) and, for a "shipped-by" close, a row of hairline-ringed avatar chips. **Chrome** mono index. **Accent** the single coral voltage. **Fixed** one coral moment, hairline avatar rings, sentence-case serif. **Free** sign-off, who ships, layout + density. **Density** free.
-
-## Composition Rules
-
-### Do
-
-- Stand every frame on the **warm cream floor**; gather content on a **half-step tile** surface.
-- Set all display in **EB Garamond, sentence case**, negative-tracked; **Inter 400** body; **JetBrains Mono** kickers (uppercase, 0.16em, coral ✱) + code.
-- Ration **coral to one moment per frame** — CTA, inline link, OR full-bleed band.
-- Elevate with a **1px hairline** + at most one soft warm shadow; reserve **warm navy** for the code/terminal surface.
-- Lead with **one clear focal**; open regions with a **kicker-spike**. Fill the frame as the content wants.
-- Pair a EB Garamond figure with a **mono unit** for every stat; render code via the **`code-*` blocks** on the navy surface.
-
-### Don't
-
-- No pure white, no cool gray, no pure black; no fourth brand hue (navy is structural, syntax colors are decoration).
-- No heavy drop shadow, glow, gradient on content, or tilt — hairline elevation only.
-- No uppercase or title-case EB Garamond display; no sans headline; no serif label; no serif-set numeric unit.
-- No two coral moments in one frame; coral never sets a headline or body run.
-- Don't blow a headline past the measure — step the ramp down.
-
-## Aspect-Ratio Behavior
-
-| Treatment     | 16:9                    | 9:16                        | 1:1                    |
-| ------------- | ----------------------- | --------------------------- | ---------------------- |
-| Cover         | display left, index top | display top, index below    | display, index corner  |
-| Statement     | line left/centered      | line stacked                | centered               |
-| Code Surface  | panel framed in cream   | panel taller, fewer lines   | panel centered, square |
-| Number/Impact | figure left             | figure centered, taller     | centered               |
-| Pull-quote    | quote left              | quote stacked               | centered               |
-| Closing/CTA   | sign-off + avatar row   | sign-off top, avatars below | centered, avatars wrap |
-
-`slide-pad` holds on the short edge; re-step display above the 1.4cqw floor. The code surface keeps
-its hairline + mono chrome on every ratio; the avatar row wraps rather than shrinks below legibility.
-
-## Approved Real Entities
-
-No real customers, logos, or vendors are defined in the source — render any such mark as a
-placeholder. Contributor avatars come from the project's `assets/<login>.png` (staged from the PR's
-people graph); the ✱ spike, hairlines, and the code surface are CSS-only and need no external imagery.
-
-## Numerals & Claims (hard rule)
-
-Never invent figures, stats, diffs, or counts at frame scale. Render slots as `— figure —`,
-`{metric}`, `+N / −M`. Number-lockups, code panels, and impact stats carry placeholders until the
-script (from the PR ingest) supplies real values. Branch names, file counts, and `+/−` totals trace
-to the diff; commit/issue numbers are chrome.
-
-## Pre-Render Self-Audit
-
-- **Squint** — one EB Garamond display moment dominates.
-- **Trinity** — cream floor + tile step + ink voice; coral appears exactly once; warm navy only on the code surface; no cool gray / pure white / fourth hue.
-- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code; ≥1.4cqw floor.
-- **Depth** — 1px hairline + at most one soft warm shadow; no heavy drop / glow / gradient / tilt; 6/8/12px radii.
-- **Code** — code rendered by a `code-*` block on the warm-navy surface; syntax coral/teal/amber; figures paired with a mono unit.
-- **Fabrication** — every numeral / diff traces to the PR, else placeholder.
-
-## Known Gaps
-
-- **Motion intentionally out of scope.** frame.md specifies composition only. Claude's motion register — short cross-dissolves, no overshoot/bounce/elastic, coral the only "draw-on", numbers count up, code types on line by line — lives in the workflow's `motion-language.md` + `hyperframes-animation`, not here.
-- **EB Garamond + Inter + JetBrains Mono are all bundled in the HyperFrames renderer (`@fontsource` embedded data) — they resolve offline by name, with no Google Fonts dependency.** This is deliberate: every face here renders deterministically on a clean machine or AWS Lambda, so a frame needs no captured `.woff2` or `@font-face` for these three. The embedded set ships **weights 400 + 700 only and no true italic** — so author display at **weight 400** (700 reads as a heavy bold, off-register), and treat italic as the browser-synthesized slant (acceptable for the pull-quote register; ship a real EB Garamond italic `.woff2` + `@font-face` only if a project leans hard on it). EB Garamond is a warm old-style serif (low contrast, humanist); if it ever fails, fall to Georgia or another old-style serif — never to a sans. CJK: Noto Serif SC (display) / Noto Sans SC (body) / Noto Sans Mono CJK (code); the sentence-case warmth carries when the serif drops.
-- **Syntax colors (teal `#5DB8A6` / amber `#E8A55A` / status) are fixed decoration**, declared in §Colors — they are NOT in the remixable `colors:` block, so a brand remix never repaints them.
-- **The code itself is the `code-*` registry blocks**, not this preset — this preset owns only the surrounding warm-navy surface + mono chrome.
-- **9:16 / 1:1 are guidance**; verify the legibility floor and that the cream/tile warmth + one-coral discipline hold per ratio.
+---
+version: alpha
+name: Claude — Frame (video / frame layer)
+description: >
+  Video-first companion to Claude's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — warm cream paper (never pure white, never cool), a single terracotta coral
+  as scarce "voltage", hairline ink elevation (no heavy shadow), EB Garamond for all
+  display + Inter body + JetBrains Mono for the index/code voice on a warm-navy code surface,
+  sentence-case display, and the ✱ coral spike mark. Composition + frame scale rewritten. Motion out
+  of scope.
+unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented
+principle: atoms are sacred · composition is free · numbers come from the script
+
+colors:
+  ink: "#141413"
+  cream: "#FAF9F5"
+  tile: "#EFE9DE"
+  tile-strong: "#ECE3D4"
+  coral: "#CC785C"
+  navy: "#181715"
+  navy-soft: "#1F1E1B"
+  navy-elev: "#252320"
+
+borders: { hairline: "1px solid ink@12%", hairline-strong: "1px solid ink@20%", dark: "1px solid cream@14% (on navy)" }
+shadows: { card: "0 1px 3px ink@8%, 0 4px 16px ink@4%", none: "none" }
+
+typography:
+  # — reading + chrome ramp —
+  body:    { fontFamily: "Inter", cqw: 1.5, weight: 400, lineHeight: 1.5 }
+  lead:    { fontFamily: "Inter", cqw: 2.08, weight: 400, lineHeight: 1.5 }
+  card-title:{ fontFamily: "Inter", cqw: 2.3, weight: 500, lineHeight: 1.25, tracking: "-0.005em" }
+  button:  { fontFamily: "Inter", cqw: 1.46, weight: 500, lineHeight: 1.0 }
+  tag-upper:{ fontFamily: "Inter", cqw: 1.35, weight: 500, tracking: "0.18em", upper: true }
+  kicker:  { fontFamily: "JetBrains Mono", px: 28, cqw: 1.46, weight: 500, tracking: "0.16em", upper: true }
+  mono-label:{ fontFamily: "JetBrains Mono", px: 26, cqw: 1.35, weight: 500, tracking: "0.02em" }
+  code:    { fontFamily: "JetBrains Mono", cqw: 1.67, weight: 400, lineHeight: 1.6 }
+  # — display ramp (EB Garamond 400, sentence case, negative tracking. Renderer embeds only 400/700 — author at 400; italic is the synthesized slant) —
+  headline:{ fontFamily: "EB Garamond", cqw: 4.6, weight: 400, lineHeight: 1.06, tracking: "-0.018em" }
+  quote-pull:{ fontFamily: "EB Garamond", cqw: 5.0, weight: 400, lineHeight: 1.12, tracking: "-0.012em", italic: true }
+  display-italic:{ fontFamily: "EB Garamond", cqw: 6.7, weight: 400, lineHeight: 1.05, tracking: "-0.012em", italic: true }
+  display:{ fontFamily: "EB Garamond", cqw: 7.3, weight: 400, lineHeight: 1.02, tracking: "-0.022em" }
+  number-hero:{ fontFamily: "EB Garamond", cqw: 9.4, weight: 400, lineHeight: 0.95, tracking: "-0.025em" }
+  display-cover:{ fontFamily: "EB Garamond", cqw: 9.9, weight: 400, lineHeight: 0.98, tracking: "-0.028em" }
+  number-unit:{ fontFamily: "JetBrains Mono", cqw: 2.08, weight: 500, lineHeight: 1.0 }
+
+spacing:
+  slide-pad: "4.2cqw"   # ~80px @1920
+  gap-md: "1.7cqw"
+  hairline: "1px"
+  radius-sm: "6px"
+  radius-md: "8px"
+  radius-lg: "12px"
+  radius-pill: "9999px"
+
+components:
+  card-hairline:
+    backgroundColor: "{colors.cream} or {colors.tile}"
+    border: "1px solid {colors.ink}@12%"
+    rounded: "{spacing.radius-lg}"
+    shadow: "{shadows.card}"
+    typography: "{typography.card-title} + {typography.body}"
+    description: "The editorial content card. Elevation is the hairline + ONE soft warm shadow — never a heavy drop, glow, or gradient."
+  kicker-spike:
+    typography: "{typography.kicker}"
+    mark: "✱ coral spike prefix"
+    description: "The eyebrow — JetBrains Mono uppercase, indexical (2–5 words), prefixed with the coral ✱. Never plain text, never a sentence."
+  coral-callout:
+    backgroundColor: "{colors.coral} (full-bleed) or {colors.cream} with a coral edge"
+    textColor: "{colors.cream} on coral"
+    rounded: "{spacing.radius-md}"
+    typography: "{typography.button} / {typography.h2}"
+    description: "The ONE voltage moment per frame — the CTA, the single inline link, OR the full-bleed band. Never two corals in one frame."
+  number-lockup:
+    typography: "{typography.number-hero} figure + {typography.number-unit} unit"
+    description: "Hero stat — a EB Garamond figure paired with a JetBrains Mono unit (200K, +1,204, −318, 17 files). Figure is serif; the unit is ALWAYS mono, never the serif."
+  pull-quote:
+    typography: "{typography.quote-pull} (EB Garamond italic) + {typography.tag-upper} cite"
+    description: "A commit message, a reviewer line, or the thesis. EB Garamond italic, small Inter uppercase cite beneath."
+  section-rule:
+    rule: "1px solid {colors.ink}@12% (or {colors.cream}@14% on navy)"
+    description: "The only separator. A coral 1px rule may draw on to introduce a section. Never 2px+, never a heavy divider."
+  code-surface:
+    backgroundColor: "{colors.navy} body / {colors.navy-elev} title bar + status strip"
+    textColor: "{colors.cream} (JetBrains Mono); syntax in coral (keywords) / teal #5DB8A6 (strings) / amber #E8A55A (numbers)"
+    border: "1px solid {colors.cream}@14%"
+    rounded: "{spacing.radius-md}"
+    description: "The warm-navy code / terminal surface. The CODE ITSELF is rendered by the code-* registry blocks (code-diff / code-typing / code-snippet-*); this preset owns the surrounding surface, title bar, status strip, and mono chrome — not the code rendering."
+  spike-mark:
+    glyph: "✱ (U+2731), always {colors.coral}"
+    description: "The brand mark. Fades + scales 0.92→1 on a single emphasis beat; never spins."
+---
+
+# Claude — Frame (video / frame layer)
+
+## Overview
+
+Claude at frame scale is a **warm-editorial brand book come to life** — the register of a literary
+imprint or a research note. The thesis is three colors: **cream is the ground, ink is the voice,
+coral is the voltage** — and a fourth (warm navy) only where code shows itself. Every surface is
+**warm cream** (never pure white, never cool gray); content gathers on a **tile** surface half a
+step darker — the demarcation is a half-step, never a hard contrast. Elevation is a **1px hairline**
+ink border at low alpha plus, rarely, one soft warm shadow. There are no heavy drops, no glows, no
+gradients on content.
+
+Three editorial voices, each in its own face: **EB Garamond** carries every display moment — covers,
+headlines, pull-quotes, big stat numerals — at large display sizes with gentle negative tracking;
+its **italic** is the expressive register. **Inter** carries body, leads, card titles, buttons, and
+UI chrome. **JetBrains Mono** carries the indexical layer — kickers, technical labels, the code
+window, status strips. Switching a voice's face collapses the register: a sans headline or a serif
+label reads as a different brand.
+
+**Key characteristics at frame scale:**
+
+- **Cream / ink / coral trinity** + a warm-navy code surface; cream is the default ground, ink the voice, coral the scarce voltage.
+- **EB Garamond** (sentence case, negative-tracked) for all display; **Inter** body/chrome; **JetBrains Mono** index + code.
+- **Hairline elevation** — a 1px low-alpha ink border + at most one soft warm shadow. No heavy drop, glow, or gradient.
+- **Coral is rationed** — at most ONE coral moment per frame (CTA, inline link, OR full-bleed band); coral never sets a headline or a body run.
+- **Density is free** — fill the frame as the content wants; a frame may stand on a single focal or carry a dense, layered composition.
+- **The ✱ coral spike** opens kickers; warm navy is reserved for the code/terminal surface.
+
+## The Frame
+
+### Frame Craft Bar
+
+Eyeball tests gate every frame before any structural check:
+
+- **Squint** — one EB Garamond display moment dominates at 3–6× its neighbor.
+- **Trinity** — cream/tile ground, ink text, coral exactly **once**; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code.
+
+- **Primary:** 1920×1080 (16:9). Display authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
+- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
+- **Safe area:** `slide-pad` ~4.2cqw; the kicker/mono chrome sit inside it.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Hairlines stay 1px; card radii stay
+6/8/12px; the warm-paper reading must survive every ratio.
+
+## Colors
+
+Tokens identical to the source. Default ground `{colors.cream}`; content gathers on
+`{colors.tile}` / `{colors.tile-strong}` (half-step warm steps, never a hard contrast).
+**Headlines & body:** `{colors.ink}` on cream/tile; `{colors.cream}` on navy. **Coral**
+(`{colors.coral}`) is the scarce voltage — one moment per frame (CTA, inline link, or full-bleed
+band), never body text, never a card fill. **Warm navy** (`{colors.navy}` / `navy-soft` /
+`navy-elev`) is the code / terminal / dark-card surface — a structural anchor, not a fourth brand
+hue. **No cool grays, no pure white, no pure black.**
+
+**Fixed syntax colors (decoration, NOT remixable brand hues).** When a code line is hand-set rather
+than rendered by a `code-*` block, keywords are coral, strings are **teal `#5DB8A6`**, numbers are
+**amber `#E8A55A`**; status reads success `#5DB872` / warn `#C64545`. These track the code surface,
+not the brand trinity — keep them out of the brand palette.
+
+## Typography
+
+Two ramps. The **reading/chrome ramp** (Inter `body` 1.5cqw / `lead` 2.08cqw weight 400; JetBrains
+Mono `kicker`/`mono-label` in px) carries copy + chrome; the **display ramp** (EB Garamond `headline` 4.6cqw
+→ `display-cover` 9.9cqw, weight 400, negative-tracked) carries every headline + stat.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono px labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display-cover`; 4–6 → `display`; 7+ → `headline`. Reserve the 7.3–9.9cqw tier for cover / statement / stat.
+- **EB Garamond display is sentence case** (NOT title case, NOT uppercase), weight 400, negative-tracked (−0.012..−0.028em); reach for **italic** when the line is a stance or a definition. **Inter body** sentence case weight 400. **JetBrains Mono** kickers UPPERCASE 0.16em with the coral ✱. No uppercase serif, no sans headline, no serif label.
+
+## Depth & Surface
+
+Hairline elevation:
+
+- **1px hairline** ink border at ~12% alpha is the primary lift (cream@14% on navy).
+- **One soft warm shadow** (`0 1px 3px ink@8%, 0 4px 16px ink@4%`) — used rarely, never heavy.
+- **Half-step surface** — a `{colors.tile}` block on cream reads elevated by the warm step, not by a cast shadow.
+
+**Ceiling:** no heavy drop shadow, no glow, no gradient on content, no tilt. The system has no light
+to emit; it reads by warmth and hairline.
+
+## Shapes
+
+- **6px** small chrome, **8px** cards / code surface, **12px** large cards / quote frames, **9999px** true pills only. No square corners, no heavy rounding; the editorial register is gently rounded, never hard.
+
+## Components
+
+- **card-hairline** — the editorial content card (hairline + one soft shadow). **section-rule** — the only separator (1px, coral may draw on).
+- **kicker-spike** — the ✱ coral eyebrow. **coral-callout** — the one voltage moment (CTA / inline link / full-bleed band).
+- **number-lockup** — EB Garamond figure + mono unit (the PR `+N / −M`, `200K`, file counts). **pull-quote** — EB Garamond italic + cite (a commit message / reviewer line).
+- **code-surface** — the warm-navy code / terminal surface; the code itself comes from the **`code-*` registry blocks**, this owns the surface + mono chrome.
+- **spike-mark** — the ✱ brand glyph, always coral.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · Fixed/Free · density.
+> One coral moment per frame; open with a kicker-spike.
+
+### 1 · Cover (identity · move: oversized EB Garamond · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, display-cover, lead, mono-label index. **Focal** a 2–3 line EB Garamond `display-cover` (sentence case, ink) under a coral ✱ kicker. **Chrome** mono index strip (repo · branch). **Accent** the single coral ✱. **Fixed** EB Garamond 400 sentence case, hairline, cream ground. **Free** title, the mono index, layout + how full the frame runs. **Density** free.
+
+### 2 · Statement (statement · move: single EB Garamond line · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}` for gravity). **Composes** kicker-spike, display, optional lead. **Focal** one 2-line EB Garamond `display` carrying the change in a sentence — reach for **italic** if it's a stance. **Chrome** mono kicker. **Accent** none — the serif carries it (or one coral word). **Fixed** sentence-case serif. **Free** the line, ground, layout + density. **Density** free.
+
+### 3 · Code Surface (code · move: warm-navy code window · the PR-critical frame)
+
+**Ground** `{colors.cream}` framing a `{colors.navy}` **code-surface** (8px, cream@14% hairline, `navy-elev` title bar + filename in mono). **Composes** mono-label filename, the **`code-*` block** (code-diff / code-typing / code-snippet-_), optional `section-rule`. **Focal** the code panel — the diff / before→after / typed-on snippet. **Chrome** mono filename + status strip. **Accent** syntax coral/teal/amber inside the panel; one coral marker outside (e.g. a `+`/`−` gutter cue). **Fixed** warm-navy surface, mono code, hairline. **Free** which code-_ block, the code (from the diff), how large the panel runs. **Density** dense.
+
+### 4 · Number / Impact (data · move: oversized figure · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, number-lockup, lead/caption, optional `section-rule`. **Focal** a EB Garamond `number-hero` figure with a mono unit over a 1px rule — the PR impact (`+1,204 / −318`, `17 files`, `2.1× faster`). **Chrome** mono tag. **Accent** the figure in ink; at most one coral unit. **Fixed** serif figure + mono unit, hairline rule. **Free** the figures (from the script), tag, layout + density. **Density** free.
+
+### 5 · Pull-quote (quote · move: EB Garamond italic · cream)
+
+**Ground** `{colors.cream}`. **Composes** kicker-spike, pull-quote, tag-upper cite. **Focal** a EB Garamond **italic** `quote-pull` — a commit message, a reviewer line, or the thesis — with a small Inter uppercase cite (author · role) beneath. **Chrome** mono kicker. **Accent** none, or one coral mark. **Fixed** EB Garamond italic quote + uppercase cite. **Free** quote, attribution, layout + density. **Density** free.
+
+### 6 · Closing / CTA (closer · move: coral voltage · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}`). **Composes** display sign-off, coral-callout, optional contributor row (`assets/<login>.png` avatars + mono names). **Focal** a short EB Garamond sign-off with the one **coral-callout** (the CTA or full-bleed band) and, for a "shipped-by" close, a row of hairline-ringed avatar chips. **Chrome** mono index. **Accent** the single coral voltage. **Fixed** one coral moment, hairline avatar rings, sentence-case serif. **Free** sign-off, who ships, layout + density. **Density** free.
+
+## Composition Rules
+
+### Do
+
+- Stand every frame on the **warm cream floor**; gather content on a **half-step tile** surface.
+- Set all display in **EB Garamond, sentence case**, negative-tracked; **Inter 400** body; **JetBrains Mono** kickers (uppercase, 0.16em, coral ✱) + code.
+- Ration **coral to one moment per frame** — CTA, inline link, OR full-bleed band.
+- Elevate with a **1px hairline** + at most one soft warm shadow; reserve **warm navy** for the code/terminal surface.
+- Lead with **one clear focal**; open regions with a **kicker-spike**. Fill the frame as the content wants.
+- Pair a EB Garamond figure with a **mono unit** for every stat; render code via the **`code-*` blocks** on the navy surface.
+
+### Don't
+
+- No pure white, no cool gray, no pure black; no fourth brand hue (navy is structural, syntax colors are decoration).
+- No heavy drop shadow, glow, gradient on content, or tilt — hairline elevation only.
+- No uppercase or title-case EB Garamond display; no sans headline; no serif label; no serif-set numeric unit.
+- No two coral moments in one frame; coral never sets a headline or body run.
+- Don't blow a headline past the measure — step the ramp down.
+
+## Aspect-Ratio Behavior
+
+| Treatment     | 16:9                    | 9:16                        | 1:1                    |
+| ------------- | ----------------------- | --------------------------- | ---------------------- |
+| Cover         | display left, index top | display top, index below    | display, index corner  |
+| Statement     | line left/centered      | line stacked                | centered               |
+| Code Surface  | panel framed in cream   | panel taller, fewer lines   | panel centered, square |
+| Number/Impact | figure left             | figure centered, taller     | centered               |
+| Pull-quote    | quote left              | quote stacked               | centered               |
+| Closing/CTA   | sign-off + avatar row   | sign-off top, avatars below | centered, avatars wrap |
+
+`slide-pad` holds on the short edge; re-step display above the 1.4cqw floor. The code surface keeps
+its hairline + mono chrome on every ratio; the avatar row wraps rather than shrinks below legibility.
+
+## Approved Real Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Contributor avatars come from the project's `assets/<login>.png` (staged from the PR's
+people graph); the ✱ spike, hairlines, and the code surface are CSS-only and need no external imagery.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, stats, diffs, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `+N / −M`. Number-lockups, code panels, and impact stats carry placeholders until the
+script (from the PR ingest) supplies real values. Branch names, file counts, and `+/−` totals trace
+to the diff; commit/issue numbers are chrome.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one EB Garamond display moment dominates.
+- **Trinity** — cream floor + tile step + ink voice; coral appears exactly once; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code; ≥1.4cqw floor.
+- **Depth** — 1px hairline + at most one soft warm shadow; no heavy drop / glow / gradient / tilt; 6/8/12px radii.
+- **Code** — code rendered by a `code-*` block on the warm-navy surface; syntax coral/teal/amber; figures paired with a mono unit.
+- **Fabrication** — every numeral / diff traces to the PR, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only. Claude's motion register — short cross-dissolves, no overshoot/bounce/elastic, coral the only "draw-on", numbers count up, code types on line by line — lives in the workflow's `motion-language.md` + `hyperframes-animation`, not here.
+- **EB Garamond + Inter + JetBrains Mono are all bundled in the HyperFrames renderer (`@fontsource` embedded data) — they resolve offline by name, with no Google Fonts dependency.** This is deliberate: every face here renders deterministically on a clean machine or AWS Lambda, so a frame needs no captured `.woff2` or `@font-face` for these three. The embedded set ships **weights 400 + 700 only and no true italic** — so author display at **weight 400** (700 reads as a heavy bold, off-register), and treat italic as the browser-synthesized slant (acceptable for the pull-quote register; ship a real EB Garamond italic `.woff2` + `@font-face` only if a project leans hard on it). EB Garamond is a warm old-style serif (low contrast, humanist); if it ever fails, fall to Georgia or another old-style serif — never to a sans. CJK: Noto Serif SC (display) / Noto Sans SC (body) / Noto Sans Mono CJK (code); the sentence-case warmth carries when the serif drops.
+- **Syntax colors (teal `#5DB8A6` / amber `#E8A55A` / status) are fixed decoration**, declared in §Colors — they are NOT in the remixable `colors:` block, so a brand remix never repaints them.
+- **The code itself is the `code-*` registry blocks**, not this preset — this preset owns only the surrounding warm-navy surface + mono chrome.
+- **9:16 / 1:1 are guidance**; verify the legibility floor and that the cream/tile warmth + one-coral discipline hold per ratio.