Skill 22 · Hyperframes Creative
Subchapter 22.36
frame-presets/broadside/FRAME.mdMarkdown16 KBView on GitHub
Broadside at frame scale is a protest-poster system where type is so large it stops reading as
text and becomes graphic primitive. Barlow display at 13cqw puts a single lowercase word
nearly across the frame. The system runs in two registers: a dark ink-black ground with cream
text for documentation, and a fire-orange ground with dark ink for declaration. Fire-orange is the
only color — accent on dark, environment on orange. The plane is flat; hierarchy is weight, size,
and 1px hairlines.
Barlow carries every text role from display to body — expressive range from weight (400–900)
and size, not face contrast. IBM Plex Mono is chrome only (numbers, kickers, tags, axis labels,
the / bullet marker), always uppercase and tracked. Display is lowercase — the system’s most
distinctive single decision, a deliberate inversion of the brutalist norm.
Key characteristics at frame scale:
/ bullet marker; mono catalogue numbers.Three eyeball tests gate every frame before any structural check:
Squint — exactly one display moment dominates at 3–6× everything else; nothing competes.
Silence — declarative frames read 45–55% empty; the stat grid is the one dense exception.
Restraint — one register per frame; fire-orange is the only color (accent on dark, environment on orange); one display moment; bullets capped at three.
Reference — aim at broadside printing / a SPACE10 report / a Wim Crouwel grid with one loud color; failure looks like a multi-accent corporate slide deck.
Primary: 1920×1080 (16:9). Type authored in cqw (px ÷ 1920 × 100 = cqw; or carry the source’s vw 1:1).
Vertical: 1080×1920 (9:16). Square: 1080×1080 (1:1).
Safe area: pad-x/pad-y 5.5cqw — deliberately tight so the massive type crowds the frame edge.
The container law (load-bearing). Every frame ground sets container-type: size; ALL
frame-relative units are cqw/cqh against it — never vw (a vw-sized frame inflates when not
full-screen). 1px hairlines stay 1px.
Tokens identical to the source, in two registers. Dark: {colors.ink-black} ground,
{colors.cream} text, {colors.fire-orange} accent (kickers, accent stat, bullet /, lead bar,
quote mark, rule stub). Orange: {colors.fire-orange} ground, {colors.ink-black} headlines +
body, with the dark-ink overlays (75/55/40/20%) as the muted tones. Choose one register per frame
and commit. No second accent color — on orange, emphasis is weight/opacity on the ink, never a
new hue. Cream text on orange does not exist (ink-on-fire is absolute).
Two ramps. The reading ramp (Barlow body 1.2cqw, mono label 0.72cqw) carries copy + chrome; the
display ramp (Barlow h2 4.5cqw → display 13cqw, weight 700–900) carries every statement.
display; 3–4 → h1; 5+ → h2. Broadside packs only ONE display moment per frame.Flat plane, the only technique. Hierarchy from:
Ceiling: no box-shadow, no elevation, no rounded surface (save nav dots), no gradient ground.
/, max 3) / bar-track (one accent bar) / compare-panel (orange payoff) / fadelist (1.0/0.5/0.22 stack).Recipe: ground · register · composes · focal · chrome · accent · silence · Fixed/Free · density. One statement per frame; chrome suppressed on declarative frames.
Ground fire-orange. Composes broadside-num, rule, kicker, display, lead. Focal a 1–2 word
Barlow display (13cqw) lowercase in ink, left-anchored, over a small ink rule stub + mono kicker; a
Barlow lead line beneath in 75% ink. Chrome mono catalogue number top-left, mono meta top-right
(no chrome bars). Accent the ink itself is the pop on orange. Silence ~45%. Fixed ink-on-fire,
lowercase 900, flat. Free the word, kicker, lead. Density low.
Ground ink-black. Composes kicker, display. Focal a 2–4 word Barlow display/h1
lowercase in cream, with ONE clause inked {colors.fire-orange}. Chrome mono kicker; no bars.
Accent the orange clause. Silence ~55%. Fixed lowercase 900, one orange clause, flat.
Free the statement, which clause is orange. Density low.
Ground ink-black, chrome bars present. Composes slide-chrome, kicker, 3× stat-card. Focal a
row of three top-border-only stat-cards — big Barlow-900 numeral in {colors.fire-orange}, Barlow
label, mono note. Chrome top + bottom hairline bars (label + number). Accent the orange
numerals. Silence moderate — the density exception. Fixed top-border-only cards, orange
numerals, 1px hairlines. Free figures (from script), labels. Density dense-exception.
Ground ink-black. Composes fadelist (3 stacked Barlow-900 words at 1.0/0.5/0.22), fadelist-title.
Focal the three-stage word stack opposite an oversized display title in {colors.fire-orange}
(before/during/after). Accent the orange title. Silence moderate. Fixed the opacity
ladder, lowercase 900. Free the three words, the title. Density low-moderate.
Ground ink-black, chrome suppressed. Composes quote-mark, quote-text, attribution. Focal a
Barlow quote-text (700, lowercase) at ≤78cqw under an oversized fire-orange quote-mark (10cqw,
line-height 0.6). Chrome mono attribution (name + role). Accent the orange quote mark. Silence
~50%. Fixed orange mark, lowercase quote. Free quote, attribution. Density low.
Ground ink-black left panel + fire-orange right (payoff) panel, 1px divider. Composes compare-panel pair, kicker, h3. Focal two panels — left documents (cream on dark), right declares (ink on orange). Chrome mono panel labels. Accent the orange payoff panel. Silence moderate. Fixed ink-on-fire right panel, 1px divider, flat. Free the before/after content. Density standard.
/ mono bullet marker.| Treatment | 16:9 | 9:16 | 1:1 |
|---|---|---|---|
| Cover | word left, lead below | word top, lead below | centered word |
| Statement | display left | display stacked taller | display centered |
| Stat Grid | 3 across | 3 stacked | 2+1 |
| Fadelist | stack + title side-by-side | stack over title | stack over title |
| Pull Quote | mark + quote left | mark top, quote below | centered |
| Compare | side-by-side panels | stacked (dark over orange) | stacked |
pad-x holds tight on the short edge; re-step display so the one big line stays ≤78cqw and above the
1.4cqw floor. Mono chrome stays Latin/digit-only.
No real customers, logos, or vendors are defined in the source — render any such mark as a
placeholder (the dashed img-placeholder at 55cqh). The system supplies type and one color, not brands.
Never invent figures, percentages, dates, or counts at frame scale. Render slots as — figure —,
{metric}, NN%. Stat-card numerals and bar heights carry placeholders until the script supplies
them. Catalogue numbers (No. 01) are decorative chrome and may be sequential.
/ marker.