# Claude Paper design system
> The four brand atoms (paper, ink, muted, clay), typography ramps, component tokens, and frame-scale authoring rules defined in FRAME-claude.md.
- 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/outro.html`
- `compositions/compose-tasklist.html`
- `compositions/thinking-big.html`
- `fonts/fonts.css`
---
---
title: "Claude Paper design system"
description: "The four brand atoms (paper, ink, muted, clay), typography ramps, component tokens, and frame-scale authoring rules defined in FRAME-claude.md."
---
`FRAME-claude.md` is the normative design contract for the Claude Paper launch cut: YAML frontmatter holds canonical colors, typography, spacing, motion, shadows, and component tokens; the markdown body defines frame-scale authoring rules, seven plate treatments, and pre-render audits. Scene compositions in `compositions/*.html` implement the system as CSS custom properties on 1920×1080 roots with `container-type: size`, mapping spec `vw` values to `cqw` at render time.
> **Atoms are sacred · composition is free · numbers come from the script.**
## Design principles
Claude Paper is a warm editorial system tuned for video. Cream paper grounds, warm charcoal ink, muted grey chrome, and a single rationed clay accent stage each 1920×1080 frame as a printed page given motion. Hanken Grotesk carries every word; Spline Sans Mono carries every label. Weight—not italics—carries hierarchy.
Three craft tests govern every frame:
| Test | Rule |
|------|------|
| Squint | One element dominates at 3–6× the next (wordmark, claim, stat numeral, or caption pill—never two at once). |
| Silence | Sparse plates read 55–75% empty; cream paper is the brand. Quiet Ledger is the sole density exception. |
| Restraint | Clay fires once per frame at full strength. A second clay element demotes to `clay-text` or is removed. |
Pure `#FFFFFF` and `#000000` are banned. Decoratives (`kraft`, `manila`, `sky`, `sage`) appear only on the palette catalog plate and never compete with clay at fill strength.
## Brand atoms
Four canonical colors anchor the brand. All other hues are semantic aliases or palette-plate decoratives.
| Atom | Token | Hex | Role |
|------|-------|-----|------|
| Paper | `paper`, `canvas`, `primary` | `#F0EEE6` | Default full-bleed ground—warm cream, never white |
| Ink | `ink`, `secondary` | `#262624` | Load-bearing text on paper; warm charcoal, never pure black |
| Muted | `muted`, `tertiary` | `#6F6E66` | Hairlines, quiet bands, chrome labels—never carries a beat's meaning alone |
| Clay | `clay`, `accent` | `#D97757` | Single rationed accent per frame—CTA, active caption pill, stat underline, quote mark |
### Semantic extensions
| Token | Hex | Use |
|-------|-----|-----|
| `surface` | `#FAF9F5` | Lifted card ground on cream |
| `surface-2` | `#F4F1E6` | Sunken tint band; catalog plate ground |
| `accent-2` | `#CC785C` | Deeper clay (book-cloth) |
| `clay-text` | `#A8472A` | In-line word emphasis on light grounds (~AA contrast) |
| `hairline` | `#DCD8CC` | Warm hairline—replaces hard borders |
| `hairline-soft` | `#E7E3D6` | Card borders in the paper-lift recipe |
| `on-accent` | `#FBF7F0` | Text on clay fills |
| `on-ink` | `#EFEADD` | Warm cream text on ink grounds |
### Accent allocation
- **Grounds:** `paper` is the default full-bleed ground. `ink` is reserved for one or two frames per sequence (karaoke stage, closer). `surface` and `surface-2` lift cards on cream—never the reverse.
- **Clay rule:** One element per frame at full `#D97757` fill strength. Inline emphasis uses `clay-text` only—never as a fill.
- **Ink pairing:** Words land in `ink` on paper, `on-ink` on ink grounds.
```text
paper (#F0EEE6) ──default ground──► ink (#262624) text
│ │
└── surface / surface-2 cards ──────┘
ink ground (#262624) ──► on-ink (#EFEADD) text
clay (#D97757) ──once per frame──► on-accent (#FBF7F0) text
```
## Typography
Two ramps share Hanken Grotesk for display and body; Spline Sans Mono handles chrome only.
### Font families
| Role | Family | Fallbacks |
|------|--------|-----------|
| Display / body | Hanken Grotesk | Inter, system-ui, sans-serif |
| Mono / chrome | Spline Sans Mono | IBM Plex Mono, monospace |
Compositions embed subset `@font-face` blocks with `font-display: block` and map tokens to CSS variables (`--f-body`, `--f-mono`). Some scenes add Galaxie Copernicus or Newsreader for serif display beats outside the core spec.
### Reading ramp (product/UI scale, px)
Fixed-pixel hierarchy for UI-scale elements. At 1920px wide, `body` sits exactly on the legibility floor.
| Token | Size | Weight | Tracking | Line height | Notes |
|-------|------|--------|----------|-------------|-------|
| `display` | 124px (~6.45vw) | 800 | −0.03em | 0.92 | |
| `h1` | 84px (~4.4vw) | 800 | −0.025em | 0.96 | |
| `h2` | 52px (~2.7vw) | 700 | −0.02em | 1.05 | |
| `lead` | 26px (~1.35vw) | 500 | −0.01em | 1.45 | |
| `body` | 27px (1.4vw) | 400 | −0.01em | 1.65 | Load-bearing floor |
| `label` | 13px | 500 | 0.14em | 1.0 | UPPERCASE chrome only |
### Hero / display ramp (frame-native, vw)
Frame-scale type uses `vw` against the 1920 long edge. In compositions, equivalent sizes appear as `cqw` on `container-type: size` roots.
| Token | Size | Weight | Use |
|-------|------|--------|-----|
| `wordmark-mega` | 30vw | 800 | Paper Identity cover |
| `display-hero` | 14vw | 800 | |
| `claim-l` | 9vw | 800 | ≤3-word claims |
| `claim-m` | 6.2vw | 700 | 4–6-word claims |
| `section-head` | 4.2vw | 700 | 7+ word claims |
| `stat-numeral` | 18vw | 800 | Hero numerals |
| `stat-ledger` | 4.8vw | 700 | Ledger column |
| `lead-frame` | 1.9vw (~36px) | 500 | Above floor |
| `body-frame` | 1.5vw (~29px) | 400 | Above floor |
| `eyebrow` | 0.85vw | 500 | UPPERCASE chrome—below floor by design |
| `caption-pill` | 3.6vw | 700 | Karaoke pills |
| `quote-mark` | 22vw | 800 | Pull-quote closer |
### Legibility floor and fit-to-measure
Any load-bearing line—anything carrying a beat's meaning—must be **≥ 1.4vw** (~27px at 1920). Sizes under the floor (`eyebrow`, `label`) are chrome: kicker tags, indices, colophon.
Claims cap at **≤ 78vw** wide and step by word count:
| Word count | Token | Size |
|------------|-------|------|
| ≤ 3 | `claim-l` | 9vw |
| 4–6 | `claim-m` | 6.2vw |
| 7+ | `section-head` | 4.2vw |
Emphasis uses weight (700/800) or `clay-text` color—never italic.
## Layout and the vw law
| Constraint | Value |
|------------|-------|
| Primary aspect | 1920×1080 (16:9) |
| Secondary aspects | 1080×1920 (9:16), 1080×1080 (1:1) |
| Safe area (long edge) | `frame-pad` = 5vw |
| Safe area (short edge) | `frame-pad-y` = 5.5vw |
| Gutter | 2vw |
| Gap tight / loose | 1.2vw / 3.4vw |
**The vw law:** Author frame-relative sizes in `vw` against the 1920 long edge (`px ÷ 1920 × 100`). Atomic chrome—button radius, hairline, label px, shadow specs—stays in `px`. The frame, not the viewport, is the reference.
In scene compositions, each root sets `container-type: size` and uses `cqw` 1:1 for spec `vw`, so review plates at any size preserve true frame proportions. Portrait reflow measures `vw` against the **short** edge per the aspect-ratio table in `FRAME-claude.md`.
### Anchor defaults
Frames lean **centered** for identity, claim, focal-artifact, and closer. Editorial, ledger, and catalog plates may run **left**. No more than ~2 consecutive frames share one anchor.
## Spacing, shape, elevation, motion
### Spacing tokens
| Token | Value | Context |
|-------|-------|---------|
| `pad-x` | `clamp(28px, 5vw, 88px)` | Web context |
| `pad-y` | `clamp(64px, 9vh, 116px)` | Web context |
| `content-max` | 1280px | Web context |
| `frame-pad` | 5vw | Frame safe area (long edge) |
| `frame-pad-y` | 5.5vw | Frame safe area (short edge) |
### Rounded radii
| Token | Value | Use |
|-------|-------|-----|
| `sm` | 8px | Chips, small elements |
| `md` | 14px | Buttons, inputs, cards |
| `lg` | 22px | Large cards, panels |
| `pill` | 9999px | Pills, rails, tags, karaoke captions |
No square corners on load-bearing chrome. CTA geometry is always pill or 14px-radius button.
### Elevation
Depth ceiling is **paper lift**. At most one lifted plane per frame. The paper-lift recipe pairs `shadow-card` with a `1px solid hairline-soft` border—the shadow alone is insufficient. Hard-offset shadows, neumorphism, and inner shadows are banned.
| Token | Value |
|-------|-------|
| `shadow-soft` | `0 1px 2px rgba(38,38,36,.04), 0 12px 32px -18px rgba(38,38,36,.16)` |
| `shadow-card` | `0 1px 3px rgba(38,38,36,.05), 0 22px 50px -26px rgba(38,38,36,.20)` |
### Motion tokens
| Token | Value |
|-------|-------|
| `ease-out` | `cubic-bezier(.16, 1, .3, 1)` |
| `ease-in` | `cubic-bezier(.5, 0, .75, 0)` |
| `ease-in-out` | `cubic-bezier(.65, 0, .35, 1)` |
| `dur-slide` | 0.8s |
| `dur-enter` | 0.5s |
Entrances settle (fade + 0.4vw rise)—no slide-from-edge, scale-from-zero, or kinetic typography. Caption words, stat count-ups, and optional clay underlines may animate; paper grounds, hairlines, and clay fills must not pulse.
## Component tokens
The `components:` frontmatter block is the normative source. Resolved values reference color, typography, spacing, rounded, and shadow tokens via `{token}` interpolation.
```text
grounds buttons & chips cards & data editorial
───────── ─────────────── ───────────── ─────────
ground-paper button-primary card-paper quote-mark-clay
ground-ink button-primary-giant card-sunken colophon
ground-surface button-secondary ledger-row
ground-sunken chip-mono ledger-numeral
chip-mono-ink hairline-rule
eyebrow-rail swatch-tile
caption-pill
caption-pill-active
```
### Grounds
| Component | Background | Text | Padding |
|-----------|------------|------|---------|
| `ground-paper` | `paper` | `ink` | `frame-pad` |
| `ground-ink` | `ink` | `on-ink` | `frame-pad` |
| `ground-surface` | `surface` | `ink` | `frame-pad` |
| `ground-sunken` | `surface-2` | `ink` | `frame-pad` |
### Buttons
| Component | Background | Typography | Rounded | Notes |
|-----------|------------|------------|---------|-------|
| `button-primary` | `clay` | `label` | `md` | Chrome-scale CTA; `on-accent` text |
| `button-primary-giant` | `clay` | `section-head` | `lg` | Frame-scale CTA; padding `1.6vw 3.2vw` |
| `button-secondary` | `paper` | `label` | `md` | `1px solid hairline`; never carries clay |
### Chips, eyebrows, captions
| Component | Role |
|-----------|------|
| `chip-mono` | Uppercase mono tag on surface ground with `hairline-soft` border |
| `chip-mono-ink` | Inverted variant for ink grounds |
| `eyebrow-rail` | Top-edge label strip in `eyebrow` typography—use on a minority of frames |
| `caption-pill` | Karaoke past/upcoming word; surface ground, reduced opacity (0.82 / 0.5) |
| `caption-pill-active` | Active karaoke word; clay fill—the brand signature |
The **caption band** is a reserved horizontal strip at the bottom **9–12vw** of the frame; the pill centers vertically within it.
### Cards and ledger
| Component | Role |
|-----------|------|
| `card-paper` | Lifted editorial card: `surface` + `shadow-card` + `hairline-soft` border |
| `card-sunken` | Un-lifted variant on `surface-2` for ledger and aside content |
| `ledger-row` | Hairline-separated row with `body-frame` typography |
| `ledger-numeral` | Right-column figures in `stat-ledger` |
| `hairline-rule` | 1px `hairline` separator |
| `swatch-tile` | Palette plate atom with color band and mono label/hex |
### Editorial chrome
| Component | Role |
|-----------|------|
| `quote-mark-clay` | Giant clay opening quote at `quote-mark` size—hero clay allowed only here |
| `colophon` | Bottom-edge metadata in `eyebrow`: index, run-date, frame number |
## Implementation in compositions
Scene plates wire the design system through CSS custom properties on composition roots:
```css
#root {
--paper: #F0EEE6;
--ink: #262624;
--muted: #6F6E66;
--clay: #D97757;
--on-accent: #FBF7F0;
--f-body: "Hanken Grotesk", "Inter", system-ui, sans-serif;
--f-mono: "Spline Sans Mono", "IBM Plex Mono", monospace;
position: relative;
width: 1920px;
height: 1080px;
background: var(--paper);
container-type: size;
font-family: var(--f-body);
color: var(--ink);
}
```
Common patterns across `compositions/*.html`:
- **Paper texture:** Radial-dot overlay at ~50% opacity on cream grounds (`outro`, `thinking-big`, `compose-tasklist` explainer beats).
- **Frame-scale claims:** `outro` uses `9.5cqw` weight-800 type for "HyperFrames MCP"; `compose-tasklist` nests a 6s explainer with `7cqw` h1, `13.5cqw` stat numerals, and clay chips at `1.45cqw` mono.
- **Clay rationing:** `followup-type` and `response-scroll` place clay on the send button and caret only; `compose-tasklist` limits clay to the ticker chip and caption emphasis span.
- **Local fonts:** Each composition embeds captured woff2 subsets rather than linking `fonts/fonts.css` globally.
Set `--paper`, `--ink`, `--muted`, `--clay`, and derived tokens as CSS variables matching `FRAME-claude.md` hex values.
Apply `width: 1920px; height: 1080px; container-type: size` on the `data-composition-id` root.
Translate hero-ramp `vw` tokens to `cqw` (1:1 swap). Keep px values for `rounded`, hairlines, and `label` chrome.
Use paper-lift (`shadow-card` + `hairline-soft`), caption-band placement, and single-clay restraint per frame.
Verify squint, silence, restraint, floor, anchor variation, and numerals-from-script before finalizing.
## Frame treatments overview
Seven normative plates compose the frontmatter components. Each carries a structural move, density target, and Fixed/Free split. Plates place components—they do not restate construction.
| # | Plate | Ground | Density | Accent |
|---|-------|--------|---------|--------|
| 1 | Paper Identity | `ground-paper` | ~70% empty | None (withholds clay) |
| 2 | Oversized Claim | `ground-paper` | ~60% empty | Optional `clay-text` word |
| 3 | Karaoke Stage | `ground-ink` | ~70% empty | `caption-pill-active` |
| 4 | Focal Artifact | `ground-paper` | ~58% empty | `button-primary` |
| 5 | Quiet Ledger | `ground-paper` | Tight (exception) | Optional `clay-text` numeral |
| 6 | Palette Catalog | `ground-sunken` | ~40% empty | Clay swatch tile |
| 7 | Pull-Quote Closer | `ground-paper` | ~65% empty | `quote-mark-clay` at hero size |
## Pre-render self-audit
Run every check before finalizing a frame:
- **Squint** — one element at 3–6× dominance; demote ties.
- **Silence** — sparse plates 55–75% empty; ledger is the exception.
- **Restraint** — count clay at full strength; maximum one.
- **Floor** — load-bearing lines ≥ 1.4vw (~27px@1920).
- **Depth** — at most one lifted plane with full paper-lift recipe.
- **Geometry** — load-bearing corners use `sm`/`md`/`lg`/`pill`.
- **Anchor** — vary across consecutive frames (≤ 2 share one).
- **Element count** — ≤ 2–3 distinct elements on sparse frames.
- **Caption fidelity** — only the active word wears clay pill.
- **Numerals** — every figure comes from the script; no invented data.
A frame that passes all audits reads as a finished still at 30fps export—every plate must stand alone without motion.
## Related pages
Canonical hex values, full typography ramps, spacing, radii, motion easings, and shadow recipes from the `FRAME-claude.md` frontmatter.
Seven normative plates—Paper Identity through Pull-Quote Closer—with density, accent, and anchor constraints.
Self-hosted Hanken Grotesk, Spline Sans Mono, Newsreader, and Galaxie Copernicus woff2 files plus `fonts.css` loading behavior.
Wrap plates in templates, set `data-composition-id`, embed local fonts, and register paused GSAP timelines on `window.__timelines`.