/hyperframes-creative

Editorial Forest — Frame (video / frame layer)

Overview

Editorial Forest at frame scale is a serif-led literary-editorial system — the register of a Penguin classic or a quiet annual report. One confident voice, Source Serif 4 at weight 500 (optical-size axis engaged), carries every headline and stat up to ~12cqw; JetBrains Mono at weight 500 uppercase is the editorial chrome (labels, captions, axis ticks, footlines). Three surfaces — forest green, dusty rose, oat cream — and nothing else. Depth is flat and paper-based: no shadows, no gradients; elevation is color-block contrast + 2px hairlines + border-vs-fill.

The unmistakable signature is weight 500 (never 400 display, never 700) and the mono/serif role inversion (mono for chrome, serif for body and display). Body text drops to serif weight 400 — that 500→400 step is the reading rhythm. Every frame carries a mono topbar; the monogram circle is the identity stamp.

Key characteristics at frame scale:

• Green / pink / cream triad — two surface tones per frame is typical, three is loud.
• Source Serif 4 weight 500 (opsz, negative tracking) for all display; serif 400 body; JetBrains Mono 500 uppercase chrome.
• Flat — no shadows, no gradients; elevation is color-block + 2px hairline + border-vs-fill.
• 2px hairline rules are the only separator (2.5px on step tiles); 6/8px card radii; the monogram circle is the only full round.
• Topbar on every frame (mono label + monogram/counter); footline on data/cover frames.
• Spacious & committed — one subject per frame in deep negative space; fewer elements at larger sizes.

The Frame

Frame Craft Bar

Three eyeball tests gate every frame before any structural check:

• Squint — one Source Serif 4 moment dominates at 3–6× its neighbor; the surface block centers the eye.

• Silence — one subject per frame in deep negative space; the topic-tile and step grids are the one dense exception.

• Restraint — two surface tones max per frame (three is loud); serif weight 500 display / 400 body; green ground reserved for gravity moments.

• Reference — aim at a Penguin classic / quiet annual report / art-book spread; failure looks like a shadowed, multi-color web dashboard.

• 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 5cqw (the source's generous 96–140px); the topbar/footline 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 (the source is a fixed 1920 canvas, so its px map cleanly: px ÷ 1920 × 100). Hairlines stay 2px; card radii stay 6/8px.

Colors

Tokens identical to the source. Default ground {colors.cream} for content; {colors.green} for cover/statement/summary gravity. Headlines: green on cream, cream (or pink at hero scale) on green, green-deep on pink. Body: ink on cream, cream on green, green-deep on pink. Labels/rules take the region's accent (pink on green, green on cream, green-deep on pink). Tile fills rotate green / pink / green-lite / cream-2-with-green-border. No fourth color family — the triad + near-duplicates is the whole palette; never rgba transparency on a surface.

Typography

Two ramps. The reading/chrome ramp (Source Serif 4 400 body 1.56cqw; JetBrains Mono labels in px) carries copy + chrome; the display ramp (Source Serif 4 500 title-card-sm 2.9cqw → display-hero/stat-figure 11.5cqw, opsz, negative-tracked) carries every headline + figure.

• 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-hero; 4–6 → headline-xl; 7+ → headline. Reserve the 7.3–11.5cqw tier for statement/stat/cover.
• Serif is weight 500 for display, 400 for body (the rhythm), 600 only for an attribution name. Negative tracking (−0.01..−0.03em), tight line-height (0.92–1.02). Mono uppercase, 0.08–0.18em. No italic, no underline, no third face, no serif body at 500.

Depth & Surface

Flat, paper-based. Elevation from:

• Color-block contrast — a green tile on cream reads elevated by ink-block separation.
• 2px hairline rules — section separators in the region's accent.
• Border vs fill — a cream-2 tile + 2px green border reads a different elevation than a solid tile.

Ceiling: zero shadow (none — adding box-shadow shatters the paper feel), no gradient, no glow; surfaces are solid ink-on-paper.

Shapes

• 6px topic tiles, 8px step tiles, 2px legend swatch, 3px 3px 0 0 bar tops, 50% monogram circle. No square corners, no heavy rounding.

Components

• topbar (the spine) + footline + monogram-circle (identity stamp) — the chrome set.
• topic-tile (6px, rotating fills) / step-tile (8px, 2.5px border) — the catalog + framework patterns.
• kpi-block (oversized serif figure) / meta-dl (3-col, 2px rule) / bar / rule-thin — data + structure.

Frame Treatments

Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density. Topbar on every frame; one subject per frame in deep negative space.

1 · Cover (identity · move: oversized serif · green · left)

Ground {colors.green}, slide-pad. Composes topbar (mono label + monogram-circle), display-hero, body lede, footline. Focal a 2-line Source Serif 4 display-hero in pink (one word in cream), left. Chrome mono topbar; mono footline. Accent pink display + the monogram circle. Silence ~50%. Fixed serif 500, flat, monogram 2px pink. Free title, which word is cream. Density low.

2 · Topic Tiles (catalog · move: rotating-fill grid · cream · the dense frame)

Ground {colors.cream}, slide-pad. Composes topbar, headline-xl, 3–4× topic-tile. Focal a row of 6px tiles, fills rotating green / pink / cream-2-with-border, each a mono ordinal + serif title. Chrome mono topbar. Accent the tile fills (mix 3 of 4, never repeat one). Silence tight — the density exception. Fixed 6px radius, rotating fills, no shadow. Free tile titles, which fills. Density dense-exception.

3 · KPI Stat (data · move: oversized figure · green)

Ground {colors.green}, slide-pad. Composes topbar, kpi-block (mono tag + 220px stat-figure + serif description), footline. Focal a Source Serif 4 stat-figure (~11.5cqw, +unit) in pink over a 2px pink rule. Chrome mono topbar + footline. Accent the pink figure. Silence ~55%. Fixed serif 500 figure, 2px accent rule, flat. Free the figure (from script), tag, description. Density low.

4 · Statement (quote · move: display serif · cream · left)

Ground {colors.cream}, generous pad. Composes topbar, display, name (600), caption-mono role. Focal a 2-line Source Serif 4 display (~7.3cqw) in green; a 600-weight attribution name + mono role beneath. Chrome mono topbar. Accent none — the serif carries it. Silence ~55%. Fixed serif 500 display + 600 name only, no italic. Free quote, name, role. Density low.

5 · Step Framework (process · move: 8px step tiles · cream/green)

Ground {colors.cream} (or green), slide-pad. Composes topbar, headline, 3–4× step-tile. Focal a row of 8px step tiles (2.5px border) — mono ordinal + serif 68px title + body + mono marker over a top rule; fills rotate cream-with-green-border / green / pink. Accent the tile fills. Silence moderate. Fixed 8px radius, 2.5px border, mono markers. Free steps, fills. Density standard.

6 · Chart (data · move: bars + meta · green)

Ground {colors.green}, slide-pad. Composes topbar, headline, bars + 2px axis rules, meta-dl. Focal 56px pink/cream/green bars on inner-edge 2px rules with mono ticks; an optional 3-col meta-dl beneath. Chrome mono topbar. Accent the bar fills. Silence moderate. Fixed 56px bars, 3px tops, 2px axes, mono ticks. Free values (from script), labels. Density standard.

Composition Rules

Do

• Run every display in Source Serif 4 weight 500, opsz, negative-tracked, tight line-height; body at 400.
• Set every label/caption/axis/footline in JetBrains Mono 500 uppercase, 0.08–0.18em.
• Give every frame a topbar (mono label + monogram or counter); footline on data/cover.
• Pick one dominant surface per frame (max two tones); rotate tile fills, never repeat one across a grid.
• Separate sections with 2px hairlines in the region's accent; reserve the monogram circle for cover/summary.
• Scale display aggressively (7.3–11.5cqw) for statement/stat/cover; lean left/editorial, one subject per frame.

Don't

• No box-shadow, gradient, or glow — flat, paper-based depth only.
• No third typeface; no italic/underline; no serif body at 500; no mono at headline scale.
• No fourth color family; no rgba surfaces; no 1px or 4px+ rules (2px / 2.5px only).
• No two competing content blocks; don't omit the topbar.
• Don't blow a headline edge-to-edge — step the ramp down.

Aspect-Ratio Behavior

slide-pad holds on the short edge; re-step display above the 1.4cqw floor. Topbar spans the top on every ratio; the monogram may drop to a corner.

Approved Real Entities

No real customers, logos, or vendors are defined in the source — render any such mark as a placeholder. The monogram, footline strings, and tile counters carry per-deck identity; figures are content.

Numerals & Claims (hard rule)

Never invent figures, KPIs, dates, or counts at frame scale. Render slots as — figure —, {metric}, — %. KPI blocks, bars, and meta values especially carry placeholders until the script supplies them. Issue numbers / counters are decorative chrome.

Pre-Render Self-Audit

• Squint — one serif moment dominates; the surface block centers the eye.
• Silence — one subject per frame in deep negative space; only the topic-tile/step grids run dense.
• Triad — two surface tones max; headlines/body/labels use the correct per-surface color; no fourth family.
• Type — Source Serif 4 500 display (opsz, negative-tracked) / 400 body; mono uppercase 0.08–0.18em; ≥1.4cqw floor.
• Depth — 0 shadow, 0 gradient; 2px hairlines; 6/8px radii; monogram the only full round.
• Chrome — topbar present on every frame; footline on data/cover.
• Fabrication — every numeral traces to the script, else placeholder.

Known Gaps

• Motion intentionally out of scope. frame.md specifies composition only; the source relies on deck-stage.js for scaling/nav, no transition spec.
• Source Serif 4 (opsz 8..60) + JetBrains Mono via Google Fonts — the optical-size axis is critical; a non-opsz fallback flattens the size-aware letterforms. CJK: LXGW WenKai (display) / Noto Serif SC (body) / Noto Sans Mono CJK (chrome).
• 9:16 / 1:1 are guidance; verify the floor and that two-tone discipline holds per ratio.
• Bars, hairlines, tiles, and the monogram circle are CSS-only; no external imagery is required.
• Contrast: green-on-pink / pink-on-green only at display scale (84px+); keep small text cream-on-green or ink-on-cream.