Skills › HyperFrames › hyperframes › FRAME.md

FRAME.md

284 lines · skills/hyperframes/assets/frame-presets/capsule/FRAME.md at a595755

Open on GitHub

1---

2version: alpha

3name: Capsule — Frame (video / frame layer)

4description: >

5 Video-first companion to Capsule's design.md. The unit is the frame (1920×1080). Atoms are

6 identical and sacred — the pill geometry (9999px small / 2rem cards) with a 2px ink outline on

7 everything, the sun-bleached cream canvas, the nine-color candy palette, Bodoni Moda + Space

8 Grotesk, soft hard-offset shadows (4/6/8/12px in 8% ink), floating decorative-pill wallpaper,

9 radial accent glows, and the grain overlay. Composition + frame scale rewritten. Motion out of scope.

10unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented

11principle: atoms are sacred · composition is free · numbers come from the script

13colors:

14 cream: "#F5F5F0"

15 ink: "#1A1A1A"

16 outline: "#1E1E1E"

17 white: "#FFFFFF"

18 coral: "#E85D4E"

19 lime: "#C4D94E"

20 lavender: "#C5B5E0"

21 sky: "#8BB4F7"

22 violet: "#A06CE8"

23 yellow: "#F2D160"

24 peach: "#F5B895"

25 mint: "#A8E6CF"

26 shadow: "rgba(26,26,26,0.08)"

28typography:

29 # — reading ramp (Space Grotesk) —

30 body: { fontFamily: "Space Grotesk", cqw: 0.85, weight: 400, lineHeight: 1.6 }

31 subtitle: { fontFamily: "Space Grotesk", cqw: 0.95, weight: 400, tracking: "0.18em", upper: true }

32 pill-text: { fontFamily: "Space Grotesk", cqw: 0.75, weight: 600, tracking: "0.12em", upper: true }

33 label: { fontFamily: "Space Grotesk", px: 14, weight: 500, tracking: "0.1em", upper: true }

34 # — display / hero ramp (Bodoni Moda, ink, sentence case) —

35 card-headline:{ fontFamily: "Bodoni Moda", cqw: 1.9, weight: 700, lineHeight: 1.1 }

36 orbit-numeral:{ fontFamily: "Bodoni Moda", cqw: 2.6, weight: 700, lineHeight: 1.0 }

37 quote-display:{ fontFamily: "Bodoni Moda", cqw: 4.2, weight: 600, lineHeight: 1.3, tracking: "-0.01em" }

38 stat-number: { fontFamily: "Bodoni Moda", cqw: 3.6, weight: 800, lineHeight: 1.0, tracking: "-0.03em" }

39 section-headline:{ fontFamily: "Bodoni Moda", cqw: 4.0, weight: 700, lineHeight: 1.05, tracking: "-0.01em" }

40 headline: { fontFamily: "Bodoni Moda", cqw: 5.0, weight: 700, lineHeight: 1.05, tracking: "-0.02em" }

41 closing-display:{ fontFamily: "Bodoni Moda", cqw: 8.5, weight: 800, lineHeight: 0.95, tracking: "-0.03em" }

42 display: { fontFamily: "Bodoni Moda", cqw: 12.0, weight: 800, lineHeight: 0.88, tracking: "-0.03em" }

44spacing:

45 pad: "5cqw"

46 gap-md: "2cqw"

47 card-pad: "2cqw 1.6cqw"

49components:

50 pill:

51 rounded: "9999px (small) / 2rem (cards)"

52 border: "0.2cqw solid {colors.outline}"

53 backgroundColor: "any candy or {colors.white}"

54 description: "The universal container — every chip/button/label/stat tile/node/bar. No unstroked pill exists."

55 pill-card:

56 backgroundColor: "{colors.white}"

57 border: "0.2cqw solid {colors.outline}"

58 rounded: "2rem"

59 shadow: "0.4cqw 0.4cqw 0 {colors.shadow}"

60 typography: "{typography.card-headline} + {typography.body}"

61 description: "Holds a circular card-icon, Bodoni headline, Space Grotesk body."

62 stat-pill:

63 backgroundColor: "{colors.white}"

64 border: "0.2cqw solid {colors.outline}"

65 rounded: "2rem"

66 shadow: "0.3cqw 0.3cqw 0 {colors.shadow}"

67 typography: "{typography.stat-number} (COLORED) + {typography.pill-text}"

68 description: "The one place color touches a numeral; + a 40px accent bar."

69 title-pill:

70 backgroundColor: "{colors.yellow}"

71 border: "0.2cqw solid {colors.outline}"

72 rounded: "9999px"

73 shadow: "0.3cqw 0.3cqw 0 {colors.shadow}"

74 typography: "{typography.pill-text}"

75 description: "Sits above the display headline on cover/closing."

76 card-icon:

77 backgroundColor: "any candy"

78 border: "0.2cqw solid {colors.outline}"

79 rounded: "50%"

80 size: "60px"

81 typography: "Bodoni numeral/letter in {colors.ink}"

82 description: "Card mark."

83 floating-pill:

84 backgroundColor: "any candy"

85 border: "0.2cqw solid {colors.outline}"

86 rounded: "9999px / 50%"

87 transform: "rotate(−20°..+25°)"

88 shadow: "none"

89 typography: "{typography.pill-text}"

90 description: "Decorative wallpaper confetti, 5–8 per declarative frame. Flat — no shadow."

91 quote-highlight:

92 backgroundColor: "{colors.lime} / {colors.sky}"

93 border: "0.2cqw solid {colors.outline}"

94 rounded: "9999px"

95 description: "Inline candy pill wrapping a phrase inside a Bodoni quote — the emphasis mechanism, replacing bold/italic."

96 bar-track:

97 backgroundColor: "{colors.cream}"

98 border: "0.2cqw solid {colors.outline}"

99 rounded: "9999px"

100 fill: "child candy pill, value at right edge"

101 description: "36px pill chart track."

102 accent-line:

103 backgroundColor: "{colors.coral}"

104 rounded: "9999px"

105 size: "60×4 (80×4 closing)"

106 description: "Coral pill rule."

107 atmosphere:

108 background: "1–3 radial candy glows (6–15% opacity) over {colors.cream} + 4% grain overlay"

109 description: "Baseline canvas layers on every frame. Never absent."

110---

111

112# Capsule — Frame (video / frame layer)

113

Capsule — Frame (video / frame layer)

Raw lines 1 to 113

114## Overview

115

116Capsule at frame scale is a **playful editorial system where every container is a pill.** The

117`border-radius: 9999px` (small) / `2rem` (cards) rule plus a 2px ink outline wraps every chip,

118card, icon, bar, and node — inflated, friendly, graphically distinct. The canvas is sun-bleached

119cream warmed by soft radial candy glows and a permanent 4% grain overlay.

120

121The voice is a two-face conversation: **Bodoni Moda** (didone serif, weight 700–800, always ink,

122always sentence case) carries every headline, stat, and quote; **Space Grotesk** carries body and

123all uppercase tracked pill/label text. Nine candy accents fill pills interchangeably with no

124semantic meaning. Depth is a **soft hard-offset shadow** (4/6/8/12px in 8% ink) — lifted, not

125stamped — reserved for content-bearing containers; decorative floating pills are flat.

126

127**Key characteristics at frame scale:**

128

129- **Pill geometry everywhere** — 9999px small, 2rem cards — each wrapped in a 2px `{colors.outline}` stroke.

130- **Bodoni Moda** display (ink, sentence case) + **Space Grotesk** body/pills (uppercase, tracked).

131- **Nine candy accents**, interchangeable; color touches stat numerals + pill fills, never headlines.

132- **Soft offset shadows** (4/6/8/12px, 8% ink) on content containers only; floating pills are flat.

133- **Floating decorative-pill wallpaper** (5–8, tilted) + radial glows + 4% grain on declarative frames.

134- **Cream canvas** warmed by atmosphere — bare corners read as broken.

135

Overview

Capsule at frame scale is a playful editorial system where every container is a pill. The border-radius: 9999px (small) / 2rem (cards) rule plus a 2px ink outline wraps every chip, card, icon, bar, and node — inflated, friendly, graphically distinct. The canvas is sun-bleached cream warmed by soft radial candy glows and a permanent 4% grain overlay.

The voice is a two-face conversation: Bodoni Moda (didone serif, weight 700–800, always ink, always sentence case) carries every headline, stat, and quote; Space Grotesk carries body and all uppercase tracked pill/label text. Nine candy accents fill pills interchangeably with no semantic meaning. Depth is a soft hard-offset shadow (4/6/8/12px in 8% ink) — lifted, not stamped — reserved for content-bearing containers; decorative floating pills are flat.

Key characteristics at frame scale:

Pill geometry everywhere — 9999px small, 2rem cards — each wrapped in a 2px {colors.outline} stroke.
Bodoni Moda display (ink, sentence case) + Space Grotesk body/pills (uppercase, tracked).
Nine candy accents, interchangeable; color touches stat numerals + pill fills, never headlines.
Soft offset shadows (4/6/8/12px, 8% ink) on content containers only; floating pills are flat.
Floating decorative-pill wallpaper (5–8, tilted) + radial glows + 4% grain on declarative frames.
Cream canvas warmed by atmosphere — bare corners read as broken.

Raw lines 114 to 135

136## The Frame

137

The Frame

Raw lines 136 to 137

138### Frame Craft Bar

139

140Three eyeball tests gate every frame before any structural check:

141

142- **Squint** — one Bodoni headline or stat dominates at **3–6× its nearest neighbor**.

143- **Silence** — declarative frames carry **atmosphere, not clutter** (pills as wallpaper, not content); the **pillar-cards and stat grid are the dense exception**.

144- **Restraint** — every pill carries the 2px outline; color touches **fills + stat numerals only** (never a headline); soft shadow on content-bearing pills only (floating pills are flat); no tenth accent.

145- **Reference** — aim at a **Memphis / ice-cream-parlor editorial spread**; failure looks like a **flat, sticker-less SaaS card grid**.

146

147- **Primary:** 1920×1080 (16:9). Display authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).

148- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).

149- **Safe area:** `pad` (5cqw); floating pills may bleed off edges as wallpaper.

150

151**The container law (load-bearing).** Every frame ground sets `container-type: size` AND carries

152the radial-glow + grain atmosphere; ALL frame-relative units are `cqw`/`cqh` against it — never

153`vw`. Pill radii stay `9999px`/`2rem` (shape, not scale); shadow offsets scale in `cqw`.

154

Frame Craft Bar

Three eyeball tests gate every frame before any structural check:

Squint — one Bodoni headline or stat dominates at 3–6× its nearest neighbor.
Silence — declarative frames carry atmosphere, not clutter (pills as wallpaper, not content); the pillar-cards and stat grid are the dense exception.
Restraint — every pill carries the 2px outline; color touches fills + stat numerals only (never a headline); soft shadow on content-bearing pills only (floating pills are flat); no tenth accent.
Reference — aim at a Memphis / ice-cream-parlor editorial spread; failure looks like a flat, sticker-less SaaS card grid.

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: pad (5cqw); floating pills may bleed off edges as wallpaper.

The container law (load-bearing). Every frame ground sets container-type: size AND carries the radial-glow + grain atmosphere; ALL frame-relative units are cqw/cqh against it — never vw. Pill radii stay 9999px/2rem (shape, not scale); shadow offsets scale in cqw.

Raw lines 138 to 154

155## Colors

156

157Tokens identical to the source. `{colors.cream}` is the ground; `{colors.ink}`/`{colors.outline}`

158is type + the universal 2px stroke; the nine candy accents fill pills with **no semantic mapping**

159— pair a warm (coral/yellow/peach) with a cool (sky/lavender/violet/mint) with a neutral-bright

160(lime); never two same-family adjacent. Color appears on **stat numerals and pill fills only** —

161never on a Bodoni headline. Shadow is always `{colors.shadow}` (8% ink). No tenth color.

162

Colors

Tokens identical to the source. {colors.cream} is the ground; {colors.ink}/{colors.outline} is type + the universal 2px stroke; the nine candy accents fill pills with no semantic mapping — pair a warm (coral/yellow/peach) with a cool (sky/lavender/violet/mint) with a neutral-bright (lime); never two same-family adjacent. Color appears on stat numerals and pill fills only — never on a Bodoni headline. Shadow is always {colors.shadow} (8% ink). No tenth color.

Raw lines 155 to 162

163## Typography

164

165Two ramps. The **reading ramp** (Space Grotesk body 0.85cqw, uppercase tracked pill/label text)

166carries copy + chips; the **display ramp** (Bodoni `card-headline` 1.9cqw → `display` 12cqw, all

167700–800) carries every headline, stat, and quote.

168

169- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; px labels are chrome only.

170- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display`/`closing-display`; 4–6 → `headline`; 7+ → `section-headline`.

171- **Bodoni 700+ in ink, sentence case** (italic via `<em>` only, color allowed on the italic key word as a candy hue); **Space Grotesk pills/labels uppercase, 0.08em+ tracked**; negative-track Bodoni display.

172

Typography

Two ramps. The reading ramp (Space Grotesk body 0.85cqw, uppercase tracked pill/label text) carries copy + chips; the display ramp (Bodoni card-headline 1.9cqw → display 12cqw, all 700–800) carries every headline, stat, and quote.

Legibility floor: any load-bearing line ≥ 1.4cqw; px labels are chrome only.
Fit-to-measure: size the headline to its length. Cap the block at ≤ 78cqw; ≤3 words → display/closing-display; 4–6 → headline; 7+ → section-headline.
Bodoni 700+ in ink, sentence case (italic via <em> only, color allowed on the italic key word as a candy hue); Space Grotesk pills/labels uppercase, 0.08em+ tracked; negative-track Bodoni display.

Raw lines 163 to 172

173## Depth & Surface

174

175Soft hard-offset shadow is the only depth, in `{colors.shadow}` (8% ink), bottom-right:

176

177- **0.2cqw (4px)** small nodes; **0.3cqw (6px)** stat-pills, orbit pills, diagram nodes; **0.4cqw (8px)** pillar-cards; **0.6cqw (12px)** the visual frame.

178- The **2px outline** does most of the lift against cream; the shadow adds the float.

179- **Decorative floating pills cast no shadow** — this separates content from atmosphere at a glance.

180

181**Ceiling:** no blurred shadow, no re-colored shadow, no gradient depth.

182

Depth & Surface

Soft hard-offset shadow is the only depth, in {colors.shadow} (8% ink), bottom-right:

0.2cqw (4px) small nodes; 0.3cqw (6px) stat-pills, orbit pills, diagram nodes; 0.4cqw (8px) pillar-cards; 0.6cqw (12px) the visual frame.
The 2px outline does most of the lift against cream; the shadow adds the float.
Decorative floating pills cast no shadow — this separates content from atmosphere at a glance.

Ceiling: no blurred shadow, no re-colored shadow, no gradient depth.

Raw lines 173 to 182

183## Shapes

184

185- **9999px** — all small pills (chips, buttons, bars, nodes, floating pills, quote highlights, accent lines).

186- **2rem** — larger cards (pillar-card, stat-pill, chart container, visual frame).

187- **50%** — circular pills (card-icon 60px, step-node 56px, orbit-center 160px, nav dots).

188- **0** — only the grain overlay and the gradient region inside a visual frame. No sharp-cornered text container exists.

189

Shapes

9999px — all small pills (chips, buttons, bars, nodes, floating pills, quote highlights, accent lines).
2rem — larger cards (pillar-card, stat-pill, chart container, visual frame).
50% — circular pills (card-icon 60px, step-node 56px, orbit-center 160px, nav dots).
0 — only the grain overlay and the gradient region inside a visual frame. No sharp-cornered text container exists.

Raw lines 183 to 189

190## Components

191

192- **pill** — the universal 2px-outlined container. **pill-card / stat-pill / title-pill** — the white/yellow content pills with soft shadows.

193- **card-icon** — circular candy mark; **floating-pill** — flat tilted wallpaper confetti; **quote-highlight** — inline candy emphasis pill.

194- **bar-track** — pill-shaped chart bar; **accent-line** — coral pill rule; **atmosphere** — the baseline glow + grain on every frame.

195

Components

pill — the universal 2px-outlined container. pill-card / stat-pill / title-pill — the white/yellow content pills with soft shadows.
card-icon — circular candy mark; floating-pill — flat tilted wallpaper confetti; quote-highlight — inline candy emphasis pill.
bar-track — pill-shaped chart bar; accent-line — coral pill rule; atmosphere — the baseline glow + grain on every frame.

Raw lines 190 to 195

196## Frame Treatments

197

198> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.

199> Atmosphere (glow + grain) on every frame; declarative frames carry floating-pill wallpaper.

200

Frame Treatments

Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density. Atmosphere (glow + grain) on every frame; declarative frames carry floating-pill wallpaper.

Raw lines 196 to 200

201### 1 · Cover (identity · move: title pill + display · centered)

202

203**Ground** cream + atmosphere, floating-pill wallpaper. **Composes** title-pill, display, accent-line, floating-pills (5–8). **Focal** a 1–2 line Bodoni `display` headline in ink (italic key word in a candy hue), centered, under a yellow title-pill; a coral accent-line below. **Chrome** uppercase Space Grotesk sub. **Accent** the italic word + candy floating pills. **Silence** content centered; pills fill the edges. **Fixed** pill outlines, Bodoni ink, flat floating pills. **Free** title, which candy hues, pill words/positions. **Density** medium-atmospheric.

204

1 · Cover (identity · move: title pill + display · centered)

Ground cream + atmosphere, floating-pill wallpaper. Composes title-pill, display, accent-line, floating-pills (5–8). Focal a 1–2 line Bodoni display headline in ink (italic key word in a candy hue), centered, under a yellow title-pill; a coral accent-line below. Chrome uppercase Space Grotesk sub. Accent the italic word + candy floating pills. Silence content centered; pills fill the edges. Fixed pill outlines, Bodoni ink, flat floating pills. Free title, which candy hues, pill words/positions. Density medium-atmospheric.

Raw lines 201 to 204

205### 2 · Pillar Cards (catalog · move: 3-up grid · left — the dense frame)

206

207**Ground** cream + atmosphere. **Composes** title-pill (lavender), section-headline, 3× pill-card. **Focal** three white 2rem pill-cards (circular candy card-icon, Bodoni card-headline, Space Grotesk body) with 0.4cqw shadows, under a Bodoni section-headline. **Chrome** a lavender header tag-pill. **Accent** the three card-icon fills (coral/sky/lime sequence). **Silence** tight — the density exception (no floating pills here). **Fixed** 2px outlines, soft shadows, ink headlines. **Free** card content, icon hues. **Density** dense-exception.

208

2 · Pillar Cards (catalog · move: 3-up grid · left — the dense frame)

Ground cream + atmosphere. Composes title-pill (lavender), section-headline, 3× pill-card. Focal three white 2rem pill-cards (circular candy card-icon, Bodoni card-headline, Space Grotesk body) with 0.4cqw shadows, under a Bodoni section-headline. Chrome a lavender header tag-pill. Accent the three card-icon fills (coral/sky/lime sequence). Silence tight — the density exception (no floating pills here). Fixed 2px outlines, soft shadows, ink headlines. Free card content, icon hues. Density dense-exception.

Raw lines 205 to 208

209### 3 · Stat Grid (data · move: stat pills · centered head)

210

211**Ground** cream + atmosphere. **Composes** section-headline, 3–4× stat-pill. **Focal** a row of white stat-pills, each a COLORED Bodoni stat-number + uppercase label + accent bar. **Accent** the colored numerals + bars (the one place color meets type). **Silence** moderate. **Fixed** 2rem pills, colored numerals only, soft shadow. **Free** figures (from script), hues. **Density** standard.

212

3 · Stat Grid (data · move: stat pills · centered head)

Ground cream + atmosphere. Composes section-headline, 3–4× stat-pill. Focal a row of white stat-pills, each a COLORED Bodoni stat-number + uppercase label + accent bar. Accent the colored numerals + bars (the one place color meets type). Silence moderate. Fixed 2rem pills, colored numerals only, soft shadow. Free figures (from script), hues. Density standard.

Raw lines 209 to 212

213### 4 · Pull Quote (quote · move: highlight pill · left)

214

215**Ground** cream + atmosphere, a few floating pills. **Composes** quote-display, quote-highlight, accent-line. **Focal** a Bodoni quote in ink with one phrase wrapped in a lime/sky `quote-highlight` pill (the emphasis mechanism — never bold). **Chrome** uppercase attribution. **Accent** the highlight pill. **Silence** ~50%. **Fixed** Bodoni 600, highlight-pill emphasis. **Free** quote, highlight color/phrase. **Density** sparse.

216

4 · Pull Quote (quote · move: highlight pill · left)

Ground cream + atmosphere, a few floating pills. Composes quote-display, quote-highlight, accent-line. Focal a Bodoni quote in ink with one phrase wrapped in a lime/sky quote-highlight pill (the emphasis mechanism — never bold). Chrome uppercase attribution. Accent the highlight pill. Silence ~50%. Fixed Bodoni 600, highlight-pill emphasis. Free quote, highlight color/phrase. Density sparse.

Raw lines 213 to 216

217### 5 · Orbit (concept · move: gravitational pills · centered)

218

219**Ground** cream + atmosphere. **Composes** orbit-center (160px lime circle, Bodoni ordinal), 4–6 orbit-pill satellites (candy, tilted, soft shadow). **Focal** the lime center anchored by orbiting candy pills. **Accent** the satellite hues. **Silence** moderate. **Fixed** circular center, outlined satellites with shadow. **Free** ordinal, satellite words/positions. **Density** medium.

220

5 · Orbit (concept · move: gravitational pills · centered)

Ground cream + atmosphere. Composes orbit-center (160px lime circle, Bodoni ordinal), 4–6 orbit-pill satellites (candy, tilted, soft shadow). Focal the lime center anchored by orbiting candy pills. Accent the satellite hues. Silence moderate. Fixed circular center, outlined satellites with shadow. Free ordinal, satellite words/positions. Density medium.

Raw lines 217 to 220

221### 6 · Closing Plate (closer · move: title pill + display · centered)

222

223**Ground** cream + atmosphere, floating-pill wallpaper. **Composes** title-pill (yellow), closing-display, accent-line, floating-pills. **Focal** a Bodoni `closing-display` sign-off in ink (italic word in violet/candy), centered. **Accent** the italic word + pills. **Silence** content centered. **Fixed** Bodoni ink, flat pills. **Free** sign-off, pill words. **Density** medium-atmospheric.

224

6 · Closing Plate (closer · move: title pill + display · centered)

Ground cream + atmosphere, floating-pill wallpaper. Composes title-pill (yellow), closing-display, accent-line, floating-pills. Focal a Bodoni closing-display sign-off in ink (italic word in violet/candy), centered. Accent the italic word + pills. Silence content centered. Fixed Bodoni ink, flat pills. Free sign-off, pill words. Density medium-atmospheric.

Raw lines 221 to 224

225## Composition Rules

226

Composition Rules

Raw lines 225 to 226

227### Do

228

229- Make every text container a **pill** (9999px / 2rem) with the **2px ink outline**.

230- Set **Bodoni headlines in ink, sentence case**; color lives on stat numerals + pill fills.

231- Use **soft offset shadows** (4/6/8/12px, 8% ink) on content containers; keep floating pills flat.

232- Float **5–8 candy pills** + radial glows + grain on declarative frames; bare corners read as broken.

233- Wrap inline emphasis in a **candy quote-highlight pill**, never bold/italic-alone.

234- Pair warm+cool+neutral-bright accents; lean centered on cover/closer, left on cards/quote.

235

Do

Make every text container a pill (9999px / 2rem) with the 2px ink outline.
Set Bodoni headlines in ink, sentence case; color lives on stat numerals + pill fills.
Use soft offset shadows (4/6/8/12px, 8% ink) on content containers; keep floating pills flat.
Float 5–8 candy pills + radial glows + grain on declarative frames; bare corners read as broken.
Wrap inline emphasis in a candy quote-highlight pill, never bold/italic-alone.
Pair warm+cool+neutral-bright accents; lean centered on cover/closer, left on cards/quote.

Raw lines 227 to 235

236### Don't

237

238- No sharp-cornered text container; no unstroked pill.

239- No colored Bodoni headline; no uppercase Bodoni.

240- No blurred or re-colored shadow; no tenth accent color.

241- No shadow on decorative floating pills.

242- Don't blow a headline edge-to-edge — fit to measure.

243

Don't

No sharp-cornered text container; no unstroked pill.
No colored Bodoni headline; no uppercase Bodoni.
No blurred or re-colored shadow; no tenth accent color.
No shadow on decorative floating pills.
Don't blow a headline edge-to-edge — fit to measure.

Raw lines 236 to 243

244## Aspect-Ratio Behavior

245

246| Treatment | 16:9 | 9:16 | 1:1 |

247| ------------ | ------------------------------ | --------------------------- | --------------------- |

250| Stat Grid | 3–4 across | 2×2 | 2×2 |

254

255`pad` holds on the short edge; re-step display above the 1.4cqw floor. Floating-pill count drops

256on tighter ratios so they stay wallpaper, not clutter.

257

Aspect-Ratio Behavior

Treatment	16:9	9:16	1:1
Cover	display centered, pills around	display top, pills band	centered, fewer pills
Pillar Cards	head + 3-up	head + 3 stacked	head + 2+1
Stat Grid	3–4 across	2×2	2×2
Pull Quote	quote left	quote top, highlight inline	centered
Orbit	center + 4–6 satellites	center + 3 satellites	center + 4
Closing	centered + pills	centered, pills band	centered

pad holds on the short edge; re-step display above the 1.4cqw floor. Floating-pill count drops on tighter ratios so they stay wallpaper, not clutter.

Raw lines 244 to 257

258## Approved Entities

259

260No real customers, logos, or vendors are defined in the source — render any such mark as a

261placeholder. Floating-pill words are neutral atmospheres ("VISION", "FUTURE", "NEXT"), never content-specific.

262

Approved Entities

No real customers, logos, or vendors are defined in the source — render any such mark as a placeholder. Floating-pill words are neutral atmospheres ("VISION", "FUTURE", "NEXT"), never content-specific.

Raw lines 258 to 262

263## Numerals & Claims (hard rule)

264

265Never invent figures, stats, or counts at frame scale. Render slots as `— figure —`, `{metric}`,

266`N%`. Stat-pill numbers and bar-track widths carry placeholders until the script supplies values.

267

Numerals & Claims (hard rule)

Never invent figures, stats, or counts at frame scale. Render slots as — figure —, {metric}, N%. Stat-pill numbers and bar-track widths carry placeholders until the script supplies values.

Raw lines 263 to 267

268## Pre-Render Self-Audit

269

270- **Squint** — one Bodoni element dominates at 3–5× its neighbor.

271- **Silence** — declarative frames carry atmosphere not clutter; only pillar/stat grids run dense.

272- **Pills** — every container is a pill with a 2px outline; no sharp text container.

273- **Color** — candy on fills + stat numerals only; headlines ink; no tenth hue.

274- **Depth** — soft offset shadow on content only; floating pills flat; no blur.

275- **Type** — Bodoni ink sentence-case, fit-to-measure; pills uppercase tracked; ≥1.4cqw floor.

276- **Anchor** — centered on cover/closer/orbit, left on cards/quote; no 3 consecutive alike.

277- **Fabrication** — every numeral traces to the script, else placeholder.

278

Pre-Render Self-Audit

Squint — one Bodoni element dominates at 3–5× its neighbor.
Silence — declarative frames carry atmosphere not clutter; only pillar/stat grids run dense.
Pills — every container is a pill with a 2px outline; no sharp text container.
Color — candy on fills + stat numerals only; headlines ink; no tenth hue.
Depth — soft offset shadow on content only; floating pills flat; no blur.
Type — Bodoni ink sentence-case, fit-to-measure; pills uppercase tracked; ≥1.4cqw floor.
Anchor — centered on cover/closer/orbit, left on cards/quote; no 3 consecutive alike.
Fabrication — every numeral traces to the script, else placeholder.

Raw lines 268 to 278

279## Known Gaps

280

281- **Motion intentionally out of scope.** frame.md specifies composition only; the 0.6s fade in the source is a deck mechanic.

282- **Bodoni Moda + Space Grotesk via Google Fonts.** CJK pairing (ZCOOL XiaoWei / Yozai) carries over from the source.

283- **9:16 / 1:1 are guidance**; verify the floor and that floating-pill count scales down.

284- The grain overlay, radial glows, floating pills, and bar fills are CSS-only; no external imagery is required.

Known Gaps

Motion intentionally out of scope. frame.md specifies composition only; the 0.6s fade in the source is a deck mechanic.
Bodoni Moda + Space Grotesk via Google Fonts. CJK pairing (ZCOOL XiaoWei / Yozai) carries over from the source.
9:16 / 1:1 are guidance; verify the floor and that floating-pill count scales down.
The grain overlay, radial glows, floating pills, and bar fills are CSS-only; no external imagery is required.

Raw lines 279 to 284