/hyperframes-creative

Creative Mode — Frame (video / frame layer)

Overview

Creative Mode at frame scale is a neo-brutalist editorial poster in motion's clothing — warm cream paper, near-black ink, and four accents that collide at full saturation. Every frame is one flat color-blocked composition: no gradients, no blurred shadows, no rounded cards (save the one pill chip). Depth is hard offset shadow (a solid same-direction duplicate) or color-block contrast, never light.

The display voice is Archivo Black in strict uppercase at 0.92 line-height — letters overlap their own cap height; that tightness is the brand. JetBrains Mono carries every label, kicker, counter, and axis as a "technical artifact" register. Space Grotesk carries the few body lines. The frame is loud by construction and calm by restraint: two or three accents per frame, the green ground reserved for a single closing plate, the hard shadow spent on one featured element only.

Key characteristics at frame scale:

• Cream ground ({colors.cream}) on nearly every frame; {colors.green} reserved for the closing plate.
• 0.4cqw (4px @1920) ink borders on every structural element; 0.3cqw internal rules.
• Hard offset shadow (≈1.25cqw, orange+ink) on one featured block per frame — never blurred.
• Archivo Black uppercase, 0.92 line-height, always; sentence-case Archivo Black does not exist.
• Two or three accents per frame, never all four; collisions are the design.
• One pill chip (999px) per frame as the sole rounded element.

Frame Craft Bar

Three eyeball tests gate every frame before any structural check:

• Squint — exactly one element dominates, at 3–6× its nearest neighbor (a chasm, not a ramp): the display-hero/display-xl claim or the stat-num figure, never two rival headlines.
• Silence — sparse frames (cover, claim, closer) read 45–60% empty; the stat grid and comparison ledger are the one dense exception. Never fill a sparse frame to look complete.
• Restraint — the scarce gestures fire once per frame: at most one hard-offset shadow, two-to-three accents (never all four), the green ground reserved for the single closing plate.
• Reference — aim at a Risograph editorial poster / punk-zine spread (flat ink-bordered blocks, one big claim, vast cream); failure looks like a rounded, soft-shadowed SaaS feature grid.

The Frame

• Primary: 1920×1080 (16:9). All display sizes authored in cqw (px ÷ 1920 × 100 = cqw).
• Vertical: 1080×1920 (9:16). Square: 1080×1080 (1:1).
• Safe area: chrome at 3.3cqw (64px) inset; content at 5cqw (96px) gutter. No load-bearing element crosses the 3.3cqw line.

The container law (load-bearing). Every frame ground sets container-type: size. ALL frame-relative units are cqw/cqh (1cqw = 1% of the frame's width), resolved against that ground — never vw. vw measures the page viewport, so a frame inflates whenever it isn't rendered full-screen; cqw resolves against the frame at any render size. This is why every size in the display ramp is cqw.

Colors

Tokens identical to the source. At frame scale: {colors.cream} is the ground, {colors.ink} is borders + type, and the four accents (green / pink / orange / yellow) are flat fills rationed two-to-three per frame. {colors.orange} is also the hard-shadow color. {colors.green} doubles as the single closing-plate ground — its rarity is the impact. Never introduce a fifth accent; never use pure white; never gradient.

Typography

Two ramps. The reading ramp (body, mono labels, table heads) holds px+cqw for chrome and copy. The display/hero ramp is frame-native and authored in cqw — from display-head (4.2cqw) up to display-hero (15.5cqw) for a wordmark cover.

• Legibility floor: any load-bearing line ≥ 1.4cqw (≈27px@1920). Mono chrome at 1.15cqw is colophon only.
• Fit-to-measure: a headline's size tracks its line length. Cap the headline block at ≤ 78cqw and never touch the safe margin. ≤3 words → display-hero/display-xl; 4–6 words → display-lg; 7+ words → display-head. Short lines go big; long lines step down.
• Uppercase + 0.92 line-height on all Archivo Black, always. Mono carries 0.06–0.14em tracking. Never letter-space Archivo Black beyond the encoded −0.01em; never set body centered.

Depth & Surface

Zero blur. Two depth devices only:

• Hard offset shadow — a solid duplicate offset ≈1.25cqw in X and Y (box-shadow: 1.25cqw 1.25cqw 0 {colors.orange}, 1.25cqw 1.25cqw 0 0.2cqw {colors.ink}). One featured block per frame (marker, stamp). Diagram stacks may use a 0.95cqw ink-only offset.
• Color-block contrast — cream on cream-2, ink on cream, accent on cream. No shadow needed when contrast carries.

Ceiling: no blurred shadow, no gradient, no glow, anywhere.

Shapes

• 0 radius on every structural element — stat cells, step cards, table cells, markers, panels.
• 50% on decorative circles, stamp inner ring, the meta dot.
• 999px on the topbar pill chip only — the single rounded exception.
• Rotation only at the fixed brand angles: badge −4deg, stamp −6deg.

Components

• frame-chrome — the mono topbar + meta footer. Present on most frames; dropped only on a pure full-bleed wordmark beat if it competes.
• stat-cell / step-card — ink-bordered flat-fill blocks; step sequences end on green.
• marker-block — the one hard-shadow featured callout per frame.
• kicker-block — inverted ink eyebrow chip; badge-rotated — −4deg yellow annotation; pill-badge — the lone rounded chip.
• stamp — the −6deg closing seal. comparison-table — cream-2 ledger with ink head row.
• decorative-circle — yellow disc for shape contrast against a green panel.

Frame Treatments

Recipe per plate: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density. Authored at 1920×1080. Lean centered; vary the anchor; one idea per frame.

1 · Wordmark Cover (identity · move: full-frame lockup · centered)

Ground {colors.cream}, frame-pad. Container grid, chrome top/bottom, focal centered. Composes frame-chrome, the wordmark. Focal the two-line wordmark at display-hero (15.5cqw), centered, second line in an accent ({colors.pink}/orange). Chrome mono topbar (section label + pill) and meta footer (descriptor + 01•NN). Accent the second-line color only; optionally one corner decorative-circle bleeding off an edge. Silence ~55% empty cream. Fixed Archivo Black uppercase 0.84 lh, one accent on the wordmark, square corners. Free which accent, line break, whether a circle bleeds a corner. Density sparse.

2 · Big Claim (oversized statement · move: scale · left)

Ground one full-bleed accent ({colors.pink}/green/orange), content-gutter. Container flex, claim left-anchored and vertically centered. Composes kicker-block, the claim. Focal a 2–3 line claim at display-xl/display-lg, ink on the accent (ink-on-fire — never white). Chrome small ink kicker-block above the claim; mono meta footer. Accent the ground IS the accent; no second accent competes. Silence ~45% of the colored field empty. Fixed ink type on accent, fit-to-measure sizing, no shadow on type. Free the claim, which accent ground, which word breaks. Density sparse — one idea.

3 · Stat Grid (catalog · move: density — the one dense frame · centered)

Ground {colors.cream}, content-gutter. Container grid: a centered display-head over a 3-up row of stat-cells. Composes frame-chrome, 3× stat-cell. Focal the row of three ink-bordered cells (green / pink / orange), each a stat-num + mono label. Chrome mono topbar + meta. Accent the three cell fills (the named density exception — three accents allowed here). Silence ~25% — tight by design. Fixed 0.4cqw borders, square corners, no per-cell shadow, mono labels. Free the three figures+labels, head copy, which three accents. Density dense-exception.

4 · Closing Plate (closer · move: ground-swap · centered)

Ground {colors.green} (the single green frame of the run), frame-pad. Focal a 2-line sign-off at display-lg in {colors.cream}, centered. Composes frame-chrome (cream variant), stamp. Chrome cream mono topbar + meta. Accent one {colors.pink} stamp rotated −6deg in a corner, cream ring + stamp-num. Silence ~55% empty green. Fixed green ground reserved to this beat, cream-on-green type, one stamp. Free sign-off copy, stamp text, stamp corner. Density sparse.

5 · Featured Marker (callout · move: hard-shadow focal · left/asymmetric)

Ground {colors.cream}. Composes frame-chrome, marker-block, optional body-md support line. Focal the pink marker-block with the signature orange+ink hard offset shadow, set asymmetrically. Accent pink block + orange shadow (two accents). Silence ~50%. Fixed exactly one hard shadow on the frame, 0.4cqw borders. Free marker copy, block position, optional support line. Density sparse.

6 · Comparison Ledger (data · move: matrix · left)

Ground {colors.cream}, content-gutter. Composes frame-chrome, comparison-table. Focal the cream-2 table with ink head row; one column fill (pink or green) marks the winner. Accent the single column fill. Silence tight — the second density exception. Fixed cream-2 fill, 0.3cqw internal rules, ink head row with cream Archivo labels. Free rows, which column fills, copy. Density dense-exception.

Composition Rules

Do

• Compose around one idea per frame, focal element 3–5× its neighbors (squint test).
• Lean centered — cover, claim, stat grid, and closer all center their focal element; reserve left/asymmetric for the marker and ledger.
• Keep sparse frames 45–60% empty; only the stat grid and ledger run dense.
• Use two or three accents per frame; reserve {colors.green} ground for the closing plate.
• Spend the hard offset shadow on one featured block per frame.
• Size headlines fit-to-measure; render Archivo Black uppercase at 0.92 lh.

Don't

• Don't round corners (except the pill chip); don't gradient, blur, or glow.
• Don't set Archivo Black in sentence case or letter-space it beyond −0.01em.
• Don't use all four accents on one frame, a fifth accent, or pure white.
• Don't center body copy or set labels in anything but JetBrains Mono.
• Don't blow a headline edge-to-edge — step the ramp down for long lines.
• Don't put two hard shadows on one frame.

Aspect-Ratio Behavior

Safe area holds the 3.3cqw chrome inset on the short edge for every ratio; re-step display per ratio so no load-bearing line drops below the 1.4cqw floor.

Approved Entities

No real customers, logos, or vendors are defined in the source — render any such mark as a placeholder. Products/sections are content-agnostic; the system supplies geometry, not brands.

Numerals & Claims (hard rule)

Never invent figures, percentages, counts, or dates at frame scale. Render data slots as — figure —, {metric}, N×. Real numerals appear only when the script supplies them — the stat grid and ledger especially carry placeholders, not fabricated values.

Pre-Render Self-Audit

• Squint — one element dominates at 3–5× its neighbor, else rescale.
• Silence — sparse frames 45–60% empty; only stat grid / ledger run dense.
• Accents — two or three per frame, never all four; green ground only on the closer.
• Depth — 0 blur; at most one hard offset shadow; color-block contrast otherwise.
• Geometry — square corners except the pill; rotation only at −4/−6deg.
• Type — Archivo Black uppercase 0.92 lh, fit-to-measure, ≥1.4cqw on load-bearing lines.
• Anchor — centered default; left/asymmetric only on marker + ledger; no 3 consecutive frames share an anchor.
• Fabrication — every numeral traces to the script, else placeholder.

Known Gaps

• Motion intentionally out of scope. frame.md specifies composition only; timing and transitions are a later stage. The closing green is described as a plate, not a transition.
• Archivo Black requires Google Fonts; fallback is sans-serif. CJK pairing (Noto Serif SC 900 / NSC 400) carries over from the source's CJK section.
• 9:16 / 1:1 are guidance, not pixel-locked; verify the legibility floor per ratio.
• Decorative geometry (circle, stamp, stacked blocks) is CSS-only; no external imagery is required.