# Design tokens reference

> Canonical color hexes, typography ramps (reading and hero), spacing, rounded radii, motion easings, shadow recipes, and component frontmatter keys from FRAME-claude.md.

- Repository: heygen-com/hyperframes-launches
- GitHub: https://github.com/heygen-com/hyperframes-launches
- Human docs: https://grok-wiki.com/public/docs/heygen-com-hyperframes-launches-996f3eaa626b
- Complete Markdown: https://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`
- `compositions/tesla-rap.html`
- `fonts/fonts.css`

---

---
title: "Design tokens reference"
description: "Canonical color hexes, typography ramps (reading and hero), spacing, rounded radii, motion easings, shadow recipes, and component frontmatter keys from FRAME-claude.md."
---

`FRAME-claude.md` is the normative token source for the Claude Paper launch: YAML frontmatter between the opening and closing `---` fences declares every atom, and scene compositions in `compositions/*.html` resolve those values into CSS custom properties on each root element (`#ou-root`, `#ct-root`, and similar).

## Token file structure

`FRAME-claude.md` splits into two layers:

| Layer | Location | Purpose |
| --- | --- | --- |
| **Frontmatter tokens** | Lines 1–311 (YAML between `---` fences) | Machine-readable atoms: `colors`, `typography`, `rounded`, `spacing`, `motion`, `shadows`, `components` |
| **Authoring prose** | Markdown body after frontmatter | Frame-scale rules: accent rationing, legibility floor, fit-to-measure claims, plate treatments |

Reference syntax uses brace interpolation: `{colors.clay}`, `{typography.claim-l}`, `{components.card-paper}`. Component entries reference other tokens rather than repeating raw values.

```text
FRAME-claude.md (frontmatter)
├── colors          → hex atoms + semantic aliases
├── typography      → fontFamilies + reading ramp + hero ramp
├── rounded         → sm / md / lg / pill
├── spacing         → web clamps + frame-safe-area + gutters
├── motion          → easings + duration tokens
├── shadows         → shadow-soft / shadow-card
└── components      → resolved UI recipes (grounds, buttons, pills, cards, ledger, quote)
         │
         ▼
compositions/*.html  → CSS custom properties (--paper, --ink, …) + cqw sizing
```

<Note>
Generic token consumers can read only the frontmatter block. Motion grammar, frame treatments, aspect-ratio tables, and the pre-render self-audit in the markdown body are video-authoring extensions.
</Note>

## Colors

### Four brand atoms

These four hexes are the brand canon. Pure `#FFFFFF` and `#000000` are banned.

| Token | Hex | Role |
| --- | --- | --- |
| `primary` / `paper` / `canvas` | `#F0EEE6` | Warm cream ground — default full-bleed surface |
| `secondary` / `ink` | `#262624` | Warm charcoal — all load-bearing text on paper |
| `tertiary` / `muted` | `#6F6E66` | Warm grey — hairlines, quiet bands, chrome labels |
| `accent` / `clay` | `#D97757` | Signature accent — **one element per frame** at fill strength |

### Semantic aliases

| Token | Hex | Use |
| --- | --- | --- |
| `surface` | `#FAF9F5` | Lifted card background on cream |
| `surface-2` | `#F4F1E6` | Sunken / tint band (catalog ground, window chrome) |
| `accent-2` | `#CC785C` | Deeper clay — book-cloth tone |
| `clay-text` | `#A8472A` | In-line word emphasis on light grounds (~AA) |
| `hairline` | `#DCD8CC` | Warm hairline borders and ledger rules |
| `hairline-soft` | `#E7E3D6` | Softer card borders (paper-lift recipe) |
| `on-accent` | `#FBF7F0` | Text on clay fills |
| `on-ink` | `#EFEADD` | Warm cream text on ink grounds |

### Decorative palette (catalog plate only)

| Token | Hex |
| --- | --- |
| `kraft` | `#D4A27F` |
| `manila` | `#EBDBBC` |
| `sky` | `#6E94A8` |
| `sage` | `#879A6B` |

Decoratives may appear only in the palette catalog plate and must not compete with clay at fill strength.

### Accent rules

- Clay fires **once per frame** at full strength (caption active pill, CTA, stat underline, quote mark).
- A second clay need demotes one element to `clay-text` (inline color only) or removes it.
- Ink grounds use `on-ink` for text; paper grounds use `ink`.

<Warning>
`compositions/tesla-rap.html` is a deliberate stylistic departure: it uses `--red:#E31937`, dark `#0A0E14` backgrounds, and kinetic white/red type — not the Claude Paper atom set. The embedded explainer inside `compose-tasklist.html` follows frame.md default tokens.
</Warning>

## Typography

### Font families

Declared in `typography.fontFamilies` and mirrored in `fonts/fonts.css`:

| Token | Stack |
| --- | --- |
| `display` | `"Hanken Grotesk", "Inter", system-ui, sans-serif` |
| `body` | `"Hanken Grotesk", "Inter", system-ui, sans-serif` |
| `mono` | `"Spline Sans Mono", "IBM Plex Mono", monospace` |

Compositions also load **Galaxie Copernicus** and **Newsreader** for serif editorial beats (`thinking-big.html`, `response-scroll.html`). Those faces are not in the frontmatter `fontFamilies` block but ship as self-hosted woff2 under `fonts/`.

Weight carries hierarchy — italics are not used. Emphasis is **700/800** weight or `clay-text` color.

### Reading ramp (product/UI scale, px @ 1920)

For UI-scale hierarchy. `body` sits exactly on the **1.4vw legibility floor** (27px = 1.4vw at 1920).

| Token | Size | Weight | Letter-spacing | 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 sizes authored in `vw` against the 1920 long edge (`px ÷ 1920 × 100`). In compositions, roots set `container-type: size` and map `vw` → `cqw` 1:1 for reviewable plates.

| Token | Size | Weight | Letter-spacing | Line-height | Typical use |
| --- | --- | --- | --- | --- | --- |
| `wordmark-mega` | 30vw | 800 | -0.04em | 0.84 | Paper Identity cover |
| `display-hero` | 14vw | 800 | -0.035em | 0.88 | |
| `claim-l` | 9vw | 800 | -0.03em | 0.94 | ≤3-word claims |
| `claim-m` | 6.2vw | 700 | -0.025em | 1.02 | 4–6-word claims |
| `section-head` | 4.2vw | 700 | -0.02em | 1.05 | 7+ word claims, card headings |
| `stat-numeral` | 18vw | 800 | -0.04em | 0.84 | Hero numerals |
| `stat-ledger` | 4.8vw | 700 | -0.02em | 1.0 | Ledger column |
| `lead-frame` | 1.9vw (~36px) | 500 | -0.01em | 1.45 | Above floor |
| `body-frame` | 1.5vw (~29px) | 400 | -0.01em | 1.55 | Running copy |
| `eyebrow` | 0.85vw | 500 | 0.18em | 1.0 | UPPERCASE chrome — below floor by design |
| `caption-pill` | 3.6vw | 700 | -0.02em | 1.0 | Karaoke caption words |
| `quote-mark` | 22vw | 800 | -0.04em | 0.7 | Pull-quote closer |

### Fit-to-measure claims

Cap text blocks at **≤ 78vw** wide. Select hero ramp by word count:

| Words | Token | Size |
| --- | --- | --- |
| ≤ 3 | `claim-l` | 9vw |
| 4–6 | `claim-m` | 6.2vw |
| 7+ | `section-head` | 4.2vw |

### Legibility floor

Any line carrying a beat's meaning must be **≥ 1.4vw** (~27px @ 1920). Sizes under the floor (`eyebrow`, `label`) are chrome only — kicker tags, indices, colophon.

## Spacing

| Token | Value | Context |
| --- | --- | --- |
| `pad-x` | `clamp(28px, 5vw, 88px)` | Web context horizontal padding |
| `pad-y` | `clamp(64px, 9vh, 116px)` | Web context vertical padding |
| `content-max` | `1280px` | Max content width |
| `frame-pad` | `5vw` | Safe area on long edge (1920×1080) |
| `frame-pad-y` | `5.5vw` | Safe area on short edge of 16:9 |
| `gutter` | `2vw` | Grid gap (catalog swatches) |
| `gap-tight` | `1.2vw` | Tight vertical rhythm (ledger rows) |
| `gap-loose` | `3.4vw` | Loose section spacing |

Load-bearing content must not cross the safe margin. Full-bleed grounds and edge crops may extend past it. The karaoke caption band reserves the bottom **9–12vw** of the frame.

## 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. CTAs are always pill or 14px-radius buttons.

## Motion

Global motion tokens — per-element durations live here, not inside plate definitions.

| 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) with `ease-out`. No overshoot, spring, or kinetic typography. Animatable: caption pill swaps, stat count-ups, optional clay underline. Not animatable: paper ground slides, hairline draws, card flips, clay pulses.

## Shadows

Depth ceiling is **paper lift** — soft, diffuse offsets only. At most one lifted plane per frame.

| 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)` |

**Paper-lift recipe** (required together on lifted cards): `shadow-card` + `1px solid {colors.hairline-soft}`. Shadow alone is insufficient.

## Component frontmatter keys

The `components:` block defines resolved UI recipes. Each entry lists properties that reference other tokens.

### Grounds

| Key | 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

| Key | Background | Text | Typography | Rounded | Padding | Border |
| --- | --- | --- | --- | --- | --- | --- |
| `button-primary` | `clay` | `on-accent` | `label` | `md` | `14px 22px` | — |
| `button-primary-giant` | `clay` | `on-accent` | `section-head` | `lg` | `1.6vw 3.2vw` | — |
| `button-secondary` | `paper` | `ink` | `label` | `md` | `14px 22px` | `1px solid hairline` |

### Pills, chips, eyebrows

| Key | Background | Text | Typography | Rounded | Padding | Border | Shadow |
| --- | --- | --- | --- | --- | --- | --- | --- |
| `chip-mono` | `surface` | `muted` | `eyebrow` | `pill` | `0.55vw 1.1vw` | `1px solid hairline-soft` | — |
| `chip-mono-ink` | transparent | `on-ink` | `eyebrow` | `pill` | `0.55vw 1.1vw` | `1px solid rgba(239,234,221,0.32)` | — |
| `eyebrow-rail` | transparent | `muted` | `eyebrow` | — | `0` | — | — |
| `caption-pill` | `surface` | `ink` | `caption-pill` | `pill` | `1.1vw 2.2vw` | — | `shadow-soft` |
| `caption-pill-active` | `clay` | `on-accent` | `caption-pill` | `pill` | `1.1vw 2.2vw` | — | `shadow-soft` |

Karaoke pair: past/upcoming words use `caption-pill` at **0.82 / 0.5 opacity**; only the active word wears `caption-pill-active`.

### Cards and surfaces

| Key | Background | Text | Rounded | Padding | Shadow | Border |
| --- | --- | --- | --- | --- | --- | --- |
| `card-paper` | `surface` | `ink` | `lg` | `2.4vw` | `shadow-card` | `1px solid hairline-soft` |
| `card-sunken` | `surface-2` | `ink` | `lg` | `2.4vw` | — | `1px solid hairline-soft` |

### Ledger and data

| Key | Background | Text | Typography | Padding | Border |
| --- | --- | --- | --- | --- | --- |
| `ledger-row` | transparent | `ink` | `body-frame` | `1.1vw 0` | `border-bottom: hairline` |
| `ledger-numeral` | transparent | `ink` | `stat-ledger` | `0` | — |
| `hairline-rule` | `hairline` | — | — | — | `height: 1px; width: 100%` |

### Editorial and chrome

| Key | Background | Text | Typography | Notes |
| --- | --- | --- | --- | --- |
| `swatch-tile` | `surface` | `muted` | `label` | Palette plate atom; `rounded: md`, `padding: 1.4vw` |
| `quote-mark-clay` | transparent | `clay` | `quote-mark` | Hero-size clay — closer plate only |
| `colophon` | transparent | `muted` | `eyebrow` | Bottom-edge metadata strip |

## Applying tokens in compositions

Scene plates do not import `FRAME-claude.md` at runtime. Authors copy canonical hexes into CSS custom properties on the composition root:

```css
#ou-root {
  --paper: #F0EEE6;
  --ink: #262624;
  --muted: #6F6E66;
  --clay: #D97757;
  --f-body: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  background: var(--paper);
  container-type: size;
}
```

Common patterns across `outro.html`, `compose-tasklist.html`, `thinking-big.html`, and `response-scroll.html`:

- **Frame envelope:** `width: 1920px; height: 1080px; overflow: hidden`
- **Container queries:** `container-type: size` on root; sizes expressed in `cqw` (equivalent to spec `vw`)
- **Paper texture:** radial dot grid at ~50% opacity (`rgba(38,36,30,.025)` on 30–34px spacing)
- **Font loading:** embedded `@font-face` blocks with `font-display: block`; scripts await `document.fonts.ready` before timeline registration

### Composition token mapping examples

| Composition | CSS vars | Typography applied |
| --- | --- | --- |
| `outro.html` | `--paper`, `--ink`, `--muted`, `--clay` | `.mcp` at 9.5cqw / 800 (near `claim-l`); `.supp` at 4.6cqw / 600 |
| `compose-tasklist.html` | full atom set + `--on-accent`, `--surface-2`, `--hairline` | `.x-eyebrow` → mono/eyebrow; `.x-h1` → 7cqw/800; `.x-stat` → 13.5cqw/800 (stat-numeral); `.x-chip` → clay pill |
| `thinking-big.html` | `--paper`, `--ink`, `--muted`, `--clay` | Serif wordmark at 9.5cqw via Galaxie Copernicus (composition-specific) |
| `response-scroll.html` | adds `--clay-text`, `--hairline-soft`, `--on-accent` | Newsreader body; clay send button with `on-accent` stroke |

## Token resolution reference

Use brace syntax when authoring from spec; use CSS custom properties when implementing plates.

<ParamField body="colors.{name}" type="hex string">
Canonical or semantic color. Only declared hexes may appear in frames.
</ParamField>

<ParamField body="typography.{ramp}" type="object">
Resolves to `fontFamily`, `fontSize`, `fontWeight`, `letterSpacing`, `lineHeight`, and optional `textTransform`.
</ParamField>

<ParamField body="rounded.{size}" type="px string">
One of `sm`, `md`, `lg`, `pill`.
</ParamField>

<ParamField body="spacing.{name}" type="vw | clamp | px">
Frame-safe-area uses `frame-pad` / `frame-pad-y`; layout gaps use `gutter`, `gap-tight`, `gap-loose`.
</ParamField>

<ParamField body="motion.{name}" type="cubic-bezier | duration">
Global easings and durations — not per-plate.
</ParamField>

<ParamField body="shadows.{name}" type="box-shadow string">
`shadow-soft` for pills; `shadow-card` for lifted cards (always pair with `hairline-soft` border).
</ParamField>

<ParamField body="components.{name}" type="object">
Resolved component recipe referencing colors, typography, rounded, spacing, shadows, and borders.
</ParamField>

## Pre-render checks (token-level)

Before finalizing any frame, verify token usage against these constraints:

- Clay at full strength appears **once** per frame
- Load-bearing copy ≥ **1.4vw** (~27px @ 1920)
- Lifted cards use the full **paper-lift** recipe
- Only `sm` / `md` / `lg` / `pill` radii on load-bearing chrome
- No `#FFFFFF`, `#000000`, or undeclared hex values
- Decorative colors (`kraft`, `manila`, `sky`, `sage`) stay in the catalog plate only

## Related pages

<CardGroup>
<Card title="Claude Paper design system" href="/claude-paper-design-system">
Brand atoms, typography philosophy, frame-scale authoring rules, and the squint/silence/restraint craft bar.
</Card>
<Card title="Frame treatments" href="/frame-treatments">
Seven normative plates that compose frontmatter components into identity, claim, karaoke, artifact, ledger, catalog, and closer frames.
</Card>
<Card title="Author a scene composition" href="/author-scene-composition">
Embed fonts, set CSS custom properties, and register paused GSAP timelines on `window.__timelines`.
</Card>
<Card title="Fonts and assets" href="/fonts-and-assets">
Self-hosted Hanken Grotesk, Spline Sans Mono, Newsreader, and Galaxie Copernicus woff2 files with `fonts.css` @font-face blocks.
</Card>
</CardGroup>