# Frame treatments > Seven normative frame plates—Paper Identity, Oversized Claim, Karaoke Stage, Focal Artifact, Quiet Ledger, Palette Catalog, Pull-Quote Closer—and their density, accent, and anchor constraints. - Repository: heygen-com/hyperframes-launches - GitHub: https://github.com/heygen-com/hyperframes-launches - Human docs: https://www.grok-wiki.com/public/docs/heygen-com-hyperframes-launches-996f3eaa626b - Complete Markdown: https://www.grok-wiki.com/public/docs/heygen-com-hyperframes-launches-996f3eaa626b/llms-full.txt ## Source Files - `FRAME-claude.md` - `compositions/thinking-big.html` - `compositions/sure-response.html` - `compositions/compose-tasklist.html` - `compositions/tesla-rap.html` --- --- title: "Frame treatments" description: "Seven normative frame plates—Paper Identity, Oversized Claim, Karaoke Stage, Focal Artifact, Quiet Ledger, Palette Catalog, Pull-Quote Closer—and their density, accent, and anchor constraints." --- `FRAME-claude.md` defines seven normative frame plates for the Claude Paper launch. Each plate is a 1920×1080 composition pattern with fixed structural moves, a target silence percentage, a single rationed clay accent, and anchor rules. The frontmatter `components:` block supplies the atoms; the **Frame Treatments** section places them. Scene compositions under `compositions/` borrow these patterns for narrative beats but the spec in `FRAME-claude.md` is the authoritative reference for density, accent, and anchor constraints. ## Global constraints Every plate obeys three craft tests before any element is placed. | Test | Rule | Failure signal | |------|------|----------------| | Squint | One element dominates at 3–6× the next | Two elements tie for attention | | Silence | Sparse plates read 55–75% empty cream | Frame filled to look "complete" | | Restraint | `{colors.clay}` at full strength once per frame | Two clay fills in the same plate | Accent and anchor rules apply across all seven treatments. One rationed element per frame at full `{colors.clay}` (`#D97757`). Inline word emphasis may use `{colors.clay-text}` (`#A8472A`) instead of a second fill. Decorative hues (`kraft`, `manila`, `sky`, `sage`) appear only in Palette Catalog and never compete with clay. Centered for Paper Identity, Oversized Claim, Focal Artifact, and Pull-Quote Closer. Left for Quiet Ledger and Palette Catalog. Right or asymmetric is an occasional tension beat. No more than ~2 consecutive frames share the same anchor. Load-bearing copy is ≥ 1.4vw (~27px at 1920). Sizes below the floor (`eyebrow`, `label`) are chrome only. Safe area uses `{spacing.frame-pad}` (5vw long edge) and `{spacing.frame-pad-y}` (5.5vw short edge). Authoring sizes are frame-relative `vw`; composition roots set `container-type: size` so `cqw` maps 1:1 to `vw` at review scale. ```text FRAME-claude.md ├── colors / typography / spacing / motion ← brand atoms ├── components: ← reusable plate atoms │ ground-paper, ground-ink, card-paper, │ caption-pill, ledger-row, swatch-tile, … └── Frame Treatments (§7 plates) ← placement + constraints │ ▼ compositions/*.html ← narrative scenes (borrow patterns) ``` ## Treatment inventory | # | Plate | Archetype | Silence | Anchor | Accent | Pace | |---|-------|-----------|---------|--------|--------|------| | 1 | Paper Identity | identity/cover | ~70% | center | none (withholds clay) | low | | 2 | Oversized Claim | editorial/oversized-claim | ~60% | center | optional `clay-text` word | moderate | | 3 | Karaoke Stage | brand-signature | ~70% | top + caption band | active caption pill | moderate | | 4 | Focal Artifact | focal-artifact | ~58% | center | clay button | moderate | | 5 | Quiet Ledger | data/ledger | tight (density exception) | left | optional `clay-text` numeral | low | | 6 | Palette Catalog | chrome/catalog | ~40% | left | clay swatch tile | moderate | | 7 | Pull-Quote Closer | closer | ~65% | center | clay quote mark at hero size | low | ## 1 · Paper Identity **Move:** wordmark centered, breathing. **Ground:** `{components.ground-paper}` with `{spacing.frame-pad}`. **Container:** single centered column; `flex-direction: column`, `align: center`, `justify: center`. **Composes:** `ground-paper`, `chip-mono`, `colophon`. | Role | Element | Token | |------|---------|-------| | Focal | Wordmark | `{typography.wordmark-mega}` (30vw), ink on cream | | Chrome | Kicker tag | `{components.chip-mono}` 4vw above wordmark | | Chrome | Metadata | `{components.colophon}` pinned to bottom safe area | **Accent:** none — the cover earns calm by withholding clay (brand-signature exception). **Fixed:** wordmark size, font, weight; cream ground; ink color; no shadow. **Free:** kicker copy, colophon index, sequence number. ## 2 · Oversized Claim **Move:** fit-to-measure centered claim. **Ground:** `{components.ground-paper}`. **Container:** centered single column, max width 78vw. **Composes:** `ground-paper`, `eyebrow-rail`. | Role | Element | Token | |------|---------|-------| | Focal | Claim line | Size by word count (see fit-to-measure table) | | Chrome | Top label | `{components.eyebrow-rail}` 6vw above claim | **Fit-to-measure headline sizing:** | Word count | Typography token | Size | |------------|------------------|------| | ≤ 3 | `claim-l` | 9vw | | 4–6 | `claim-m` | 6.2vw | | 7+ | `section-head` | 4.2vw | One word may take `color: {colors.clay-text}` as the single in-line emphasis allowance. Otherwise the frame runs clay-free. Launch scenes `thinking-big`, `thinking-big-2`, `sure-response`, and `outro` adapt Oversized Claim grammar: centered paper ground, hero-scale type, and fit-to-measure sizing — but they use narrative copy (serif response lines, Lottie bursts) rather than the canonical `wordmark-mega` + `chip-mono` + `colophon` stack. ## 3 · Karaoke Stage **Move:** ink stage with rationed clay caption. **Ground:** `{components.ground-ink}` — warm charcoal negative voice. **Container:** flex column; content top-anchored 16vw from top; caption band reserved bottom 12vw. **Composes:** `ground-ink`, `chip-mono-ink`, `caption-pill`, `caption-pill-active`. | Role | Element | Constraint | |------|---------|------------| | Focal | Active word | `{components.caption-pill-active}`, centered in caption band | | Chrome | Beat label | `{components.chip-mono-ink}` top-left of safe area | | Chrome | Flanking words | `{components.caption-pill}` at 0.82 (past) / 0.5 (upcoming) opacity | **Accent:** the clay active pill — the rationed element and squint winner. **Caption band:** reserved horizontal strip at bottom 9–12vw; pill vertically centered within it. The Karaoke Stage is the brand signature treatment. Caption pill swap is one of the few permitted animations alongside stat count-ups and optional clay underlines. ## 4 · Focal Artifact **Move:** lifted paper card on cream. **Ground:** `{components.ground-paper}`. **Container:** centered; single artifact ~62vw × 50vw. **Composes:** `ground-paper`, `card-paper`, `eyebrow-rail`, `button-primary`. | Role | Element | Constraint | |------|---------|------------| | Focal | Lifted card | `{components.card-paper}` — squint winner via lift, not size | | Inside card | Label, heading, CTA | `label`, `section-head`, `button-primary` bottom-right | | Chrome | Top label | `{components.eyebrow-rail}` top-left safe corner | **Paper-lift recipe:** `{shadows.shadow-card}` + `1px solid {colors.hairline-soft}` together — never one without the other. At most one lifted plane per frame. `compose-ui` and `compose-tasklist` implement Focal Artifact grammar: a centered window card on cream paper with hairline border and diffuse shadow. `compose-tasklist` nests a generated explainer inside the player viewport. ## 5 · Quiet Ledger **Move:** hairline-ruled rows, one numeral per row. **Ground:** `{components.ground-paper}`. **Container:** two-column grid (label / numeral), 4 rows, gap `{spacing.gap-tight}`. Section headline `{typography.section-head}` top-left with `margin-bottom: 2.4vw`. **Composes:** `ground-paper`, `eyebrow-rail`, `ledger-row`, `ledger-numeral`, `hairline-rule`. | Role | Element | Constraint | |------|---------|------------| | Focal | Numeral column | `{components.ledger-numeral}` on right edge — vertical run | | Chrome | Row separators | `{components.hairline-rule}` via `ledger-row` border-bottom | | Accent | One numeral | optional `color: {colors.clay-text}` on the figure that matters | **Silence:** tight by design — the sole density exception. Numerals come from the script; the spec never invents figures. The embedded TSLA explainer inside `compose-tasklist` borrows ledger patterns: `x-stat` count-up numerals, `x-ledger` labels, and a clay `x-delta` emphasis on the base-case figure. ## 6 · Palette Catalog **Move:** ruled swatch grid. **Ground:** `{components.ground-sunken}` on `{colors.surface-2}`. **Container:** 4-column grid of `{components.swatch-tile}`, gap `{spacing.gutter}`. **Composes:** `ground-sunken`, `swatch-tile`, `eyebrow-rail`, `colophon`. | Role | Element | Constraint | |------|---------|------------| | Focal | Grid field | no single tile dominates | | Chrome | Per-tile label | `{typography.label}` with hex inside each tile | | Chrome | Bottom metadata | `{components.colophon}` at bottom safe edge | | Accent | Clay tile | `{colors.clay}` swatch is the rationed accent | Decorative hues (`kraft`, `manila`, `sky`, `sage`) may appear here and nowhere else at fill strength alongside clay. ## 7 · Pull-Quote Closer **Move:** giant clay quote mark, ink line below. **Ground:** `{components.ground-paper}`. **Container:** centered single column, vertical stack. **Composes:** `ground-paper`, `quote-mark-clay`, `colophon`. | Role | Element | Token | |------|---------|-------| | Focal | Opening quote | `{components.quote-mark-clay}` at 22vw — hero-size clay allowed only here | | Body | Quoted line | `{typography.claim-m}`, ink, max width 64vw | | Chrome | Attribution | `{typography.eyebrow}` below line | | Chrome | Metadata | `{components.colophon}` at bottom safe edge | **Accent:** the clay quote mark is both the rationed accent and the squint winner. The quoted line itself stays ink. ## Launch-cut mapping The master cut in `index.html` stacks ten narrative scenes. None are pure showcase plates; they adapt treatment grammar for product storytelling. | Scene | Primary treatment grammar | Notes | |-------|---------------------------|-------| | `connector-morph` | Custom morph | Connector transition, not a canonical plate | | `chat-response` / `response-scroll` / `followup-type` | UI narrative | Chat surface, not a spec plate | | `thinking-big` / `thinking-big-2` | Oversized Claim | Centered hero type + Lottie on paper | | `compose-ui` / `compose-tasklist` | Focal Artifact | Lifted compose window; tasklist embeds ledger beats | | `sure-response` | Oversized Claim | Centered serif "Sure." at 15cqw | | `outro` | Oversized Claim | Sequential centered claims + logo reveal | | `tesla-rap` | Standalone explainer | Not a Claude Paper plate — red kinetic rap style, separate from the seven treatments | `tesla-rap.html` uses a high-contrast red editorial aesthetic (`#E31937`, kinetic uppercase captions). Do not treat it as a Palette Catalog or Karaoke Stage reference when authoring Claude Paper plates. ## Aspect-ratio reflow Treatments reflow across 16:9, 9:16, and 1:1 while holding the legibility floor against the new short edge. | Treatment | 16:9 (1920×1080) | 9:16 (1080×1920) | 1:1 (1080×1080) | |-----------|------------------|------------------|-----------------| | Paper Identity | Wordmark 30vw centered | Wordmark ~22vw of short edge | Wordmark ~20vw; colophon single bottom line | | Oversized Claim | Fit-to-measure, max 78vw | Wrap 2–3 lines; step one ramp down | Step one ramp down; max 80vw | | Karaoke Stage | Caption band bottom 12vw | Band bottom 14vw; pills may stack | Flanking pills may drop; active only | | Focal Artifact | Card 62×50vw centered | Card 80vw × 56vw | Card 78vw square; CTA own row | | Quiet Ledger | 2-column, 4 rows | Single column per row | 2-column, 3 rows | | Palette Catalog | 4-column grid | 2-column, 8 tiles | 3-column, 9 tiles | | Pull-Quote Closer | Quote 22vw; line `claim-m` | Quote ~26vw; line wraps | Quote ~22vw; line max 78vw | Aspect re-scales are guidance, not strict numerics — a 9:16 plate may need a half-step adjustment per script word count. ## Pre-render self-audit Run every check before finalizing a frame plate. Confirm one element dominates at 3–6× the next. Sparse plates read 55–75% empty; Quiet Ledger is the only density exception. Count `{colors.clay}` at full strength — exactly once. No second accent hue; decoratives stay in Palette Catalog. At most one lifted plane with the full paper-lift recipe. Every load-bearing corner uses `sm` / `md` / `lg` / `pill` radius. Centered by default for identity, claim, artifact, closer. Vary anchor across consecutive frames (≤ 2 share one). Every load-bearing line ≥ 1.4vw. Karaoke: only the active word wears the clay pill; flanking pills at 0.82 / 0.5 opacity. Ledger numerals come from the script — no invented figures. ## Authoring a new plate When creating or editing a scene composition, select the treatment that matches the beat's structural move, then wire the HyperFrames composition shell. Match the beat to one of the seven plates by move (cover, claim, caption stage, lifted card, ledger, swatch grid, closer). Pull ground, typography, and component values from `FRAME-claude.md` frontmatter. Use `vw` / `cqw` for frame-scale type; keep atomic chrome in `px`. Wrap in a `