wehub-resource-sync
85453da49f
16 KiB
version: alpha name: Broadside — Frame (video / frame layer) description: > Video-first companion to Broadside's design.md. The unit is the frame (1920×1080). Atoms are identical and sacred — the two-register surface system (dark ink-black / fire-orange), massive Barlow in lowercase weight 900 treated as graphic primitive, IBM Plex Mono chrome (uppercase, 0.14em), the single fire-orange accent, the flat plane, and 1px hairline dividers. Composition + frame scale rewritten for the frame. Motion out of scope. unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented principle: atoms are sacred · composition is free · numbers come from the script
colors: ink-black: "#111111" ink-black-alt: "#1A1A18" fire-orange: "#E85D26" cream: "#F0ECE5" cream-muted: "#888880" cream-hint: "#505048" border-dark: "#282826" ink-on-orange-muted: "rgba(17,17,17,0.75)" ink-on-orange-hint: "rgba(17,17,17,0.55)" ink-on-orange-faint: "rgba(17,17,17,0.40)" ink-on-orange-border: "rgba(17,17,17,0.20)"
typography:
— reading ramp —
body: { fontFamily: "Barlow", cqw: 1.2, weight: 400, lineHeight: 1.6 } lead: { fontFamily: "Barlow", cqw: 1.6, weight: 400, lineHeight: 1.5 } caption: { fontFamily: "Barlow", cqw: 0.9, weight: 400, lineHeight: 1.5 } label: { fontFamily: "IBM Plex Mono", cqw: 0.72, weight: 500, tracking: "0.14em", upper: true }
— display / hero ramp (Barlow, lowercase, negative tracking) —
h3: { fontFamily: "Barlow", cqw: 2.8, weight: 600, lineHeight: 1.2, lower: true } quote-text:{ fontFamily: "Barlow", cqw: 3.8, weight: 700, lineHeight: 1.15, tracking: "-0.02em", lower: true } h2: { fontFamily: "Barlow", cqw: 4.5, weight: 700, lineHeight: 1.1, tracking: "-0.02em", lower: true } stat-value:{ fontFamily: "Barlow", cqw: 5.5, weight: 900, lineHeight: 1.0, tracking: "-0.04em" } h1: { fontFamily: "Barlow", cqw: 7.5, weight: 800, lineHeight: 0.9, tracking: "-0.03em", lower: true } fadelist-item:{ fontFamily: "Barlow", cqw: 7.5, weight: 900, lineHeight: 1.0, tracking: "-0.03em", lower: true } quote-mark:{ fontFamily: "Barlow", cqw: 10.0, weight: 900, lineHeight: 0.6 } fadelist-title:{ fontFamily: "Barlow", cqw: 10.5, weight: 900, lineHeight: 0.9, tracking: "-0.04em", lower: true } display: { fontFamily: "Barlow", cqw: 13.0, weight: 900, lineHeight: 0.88, tracking: "-0.04em", lower: true }
spacing: pad-x: "5.5cqw" pad-y: "5.5cqw" gap-lg: "3.5cqw" gap-md: "2cqw" gap-sm: "1cqw"
components:
registers:
dark: "ground {colors.ink-black}, text {colors.cream}, accent {colors.fire-orange}"
orange: "ground {colors.fire-orange}, text {colors.ink-black}"
description: "Two surfaces only — no cream/paper register. One register per frame."
slide-chrome:
rule: "1px solid {colors.border-dark} (dark) / 20% ink (orange)"
placement: "top + bottom bars (label left, number right)"
description: "SUPPRESSED on cover/chapter/statement/quote/end — declarative frames let type fill the field."
kicker:
typography: "{typography.label}"
color: "{colors.fire-orange} (dark) / 55% ink (orange)"
description: "Uppercase mono eyebrow."
rule:
backgroundColor: "{colors.fire-orange} (dark) / {colors.ink-black} (orange)"
size: "36×2px"
description: "Stub accent bar — the system's only ornament."
broadside-num:
typography: "{typography.label}"
placement: "top-left of orange cover/chapter, low opacity"
description: "Mono catalogue numeral."
stat-card:
borderTop: "1px solid {colors.border-dark}"
typography: "{typography.stat-value} (orange on dark / ink on orange) + {typography.body} + {typography.label}"
description: "Top-border-only block, no other borders."
bullet:
marker: "orange / mono via ::before"
typography: "{typography.lead}"
description: "Capped at THREE items."
bar-track:
borderLeft: "1px solid {colors.border-dark}"
bars: "{colors.cream-hint}, one .accent {colors.fire-orange}"
typography: "{typography.label} axis"
description: "Vertical bar chart, left axis only."
compare-panel:
layout: "two equal panels split by a 1px vertical rule"
payoff: "right panel may fill {colors.fire-orange}"
description: "Before/after."
fadelist:
typography: "{typography.fadelist-item} ×3 at opacity 1.0/0.5/0.22 + {typography.fadelist-title}"
description: "Three stacked words + one oversized title opposite."
Broadside — Frame (video / frame layer)
Overview
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:
- Two registers — dark (cream text) / orange (ink text). No cream/paper register.
- Massive lowercase Barlow 900, negative-tracked, as graphic primitive (display 13cqw).
- Fire-orange is the only color — accent on dark, full environment on orange.
- IBM Plex Mono chrome — uppercase, 0.14em; the
/bullet marker; mono catalogue numbers. - Flat plane — no shadow, no radius (save nav dots), no gradient; 1px hairlines carry structure.
- Low density — one statement per frame, bullets capped at three, chrome suppressed on declarative frames.
The Frame
Frame Craft Bar
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'svw1:1). -
Vertical: 1080×1920 (9:16). Square: 1080×1080 (1:1).
-
Safe area:
pad-x/pad-y5.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.
Colors
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).
Typography
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.
- Legibility floor: any load-bearing line ≥ 1.4cqw; mono labels are chrome only.
- Fit-to-measure: size the headline to its length. Cap the block at ≤ 78cqw; ≤2 words →
display; 3–4 →h1; 5+ →h2. Broadside packs only ONE display moment per frame. - Barlow display is lowercase, weight 700–900, negative-tracked (−0.04em largest, −0.02em h2). Mono chrome is uppercase, 0.1em+. No italic, no underline, no uppercase display.
Depth & Surface
Flat plane, the only technique. Hierarchy from:
- Weight + size contrast — the dominant signal (900 lowercase display).
- 1px hairlines — chrome bars, stat-card top, compare divider, bar-track left, chart baseline.
- Color shift — orange on ink, ink on cream, cream-muted on cream.
- Negative space — generous, intentional empty regions.
Ceiling: no box-shadow, no elevation, no rounded surface (save nav dots), no gradient ground.
Shapes
- 0 radius everywhere except nav dots (50%). Cards, panels, tags, stat blocks, bars — sharp rectangles.
Components
- registers — the two-surface system. slide-chrome — optional hairline bars, suppressed on declarative frames.
- kicker (mono eyebrow) / rule (36×2 stub) / broadside-num (catalogue mark) — the chrome ornament set.
- stat-card (top-border only) / bullet (orange
/, max 3) / bar-track (one accent bar) / compare-panel (orange payoff) / fadelist (1.0/0.5/0.22 stack).
Frame Treatments
Recipe: ground · register · composes · focal · chrome · accent · silence · Fixed/Free · density. One statement per frame; chrome suppressed on declarative frames.
1 · Cover (identity · move: massive type · ORANGE register · left)
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.
2 · Statement (declarative · move: type IS composition · DARK register · left)
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.
3 · Stat Grid (data · move: top-border cards · DARK · the dense frame)
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.
4 · Fadelist (narrative · move: opacity stack · DARK)
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.
5 · Pull Quote (quote · move: oversized mark · DARK · left)
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.
6 · Compare (argument · move: split + orange payoff · DARK→ORANGE)
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.
Composition Rules
Do
- Set every Barlow display in lowercase weight 900, negative-tracked — the system's signature.
- Use fire-orange as full environment on declarative frames, the lone accent on dark.
- Keep chrome in IBM Plex Mono uppercase, 0.14em; use the
/mono bullet marker. - Cap bullets at three; one statement per frame; build hierarchy from weight, size, 1px hairlines.
- Suppress chrome bars on cover/chapter/statement/quote/end; let type fill the field.
- Lean left on most frames; the type IS the composition.
Don't
- Never uppercase Barlow display; never add a second accent color.
- Never put cream text on orange (ink-on-fire is absolute); never a cream/paper register.
- No drop shadow, no rounded surface (save nav dots), no gradient ground.
- No serif companion; chrome is never Barlow.
- Don't pack two display moments into one frame; don't blow a long line edge-to-edge — step down.
Aspect-Ratio Behavior
| 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.
Approved Entities
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.
Numerals & Claims (hard rule)
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.
Pre-Render Self-Audit
- Squint — exactly one display moment dominates; nothing competes.
- Silence — declarative frames ~45–55% empty; only the stat grid runs dense.
- Register — one register per frame; ink-on-fire on orange, cream on dark; no second hue.
- Type — Barlow lowercase 900 negative-tracked, fit-to-measure; mono chrome uppercase 0.14em; ≥1.4cqw floor.
- Depth — 0 shadow, 0 radius (save nav dots); 1px hairlines only.
- Bullets — capped at three, orange
/marker. - Fabrication — every numeral traces to the script, else placeholder.
Known Gaps
- Motion intentionally out of scope. frame.md specifies composition only; the source's 0.8s deck slide + per-element entry animations are deck mechanics.
- Barlow + IBM Plex Mono via Google Fonts; Noto Sans SC is the CJK fallback (the lowercase-display signal has no CJK equivalent — the two-register color system carries the identity, per the source).
- 9:16 / 1:1 are guidance; verify the one big line stays ≤78cqw and above the floor per ratio.
- Bars, compare panels, and the dashed image placeholder are CSS-only; no external imagery is required.