Cobalt Grid — Frame (video / frame layer)

Overview

Cobalt Grid at frame scale is a two-color risograph trend-report — warm cream paper, electric cobalt ink, and a permanent graph-paper grid behind every frame. Cobalt is the only ink: headlines, body, rules, the grid, the pixel-glitch decoration, the QR patches. There is no accent color and no second surface.

The voice is a three-face conversation: Newsreader serif at weight 400 (size, not weight, makes hierarchy) carries every display and headline; Hanken Grotesk carries body and uppercase tracked labels; DM Mono carries all chrome — page numbers, tags, ticks, vertical stacks. Every frame is framed by top + bottom cobalt hairlines; declarative frames carry the pixel-glitch column and a QR-block patch.

Key characteristics at frame scale:

• Strictly two-color — cream paper + cobalt ink; no accent, no second surface.
• Permanent ~2cqw graph-paper grid (10% cobalt) behind every frame; cannot be disabled.
• Top + bottom 1.5px cobalt hairlines frame every composition, inset by edge.
• Newsreader 400 for all display (negative tracking); Hanken 600 uppercase 0.16em labels; DM Mono chrome.
• Pixel-glitch column + QR-block as the signature decorative patches on declarative frames.
• Pixel-stack bars render data as grid-unit cells (cobalt on / 10% off).

The Frame

Frame Craft Bar

Three eyeball tests gate every frame before any structural check:

• Squint — one Newsreader element dominates at 3–6× its nearest neighbor (display-hero/vbig-numeral); hierarchy is size, never weight.
• Silence — declarative frames (cover, chapter, quote, colophon) read 45–60% empty with the grid showing; the index ledger and data frame are the one dense exception (density via quiet repetition, not richness).
• Restraint — two-color only (cream + cobalt, never a second hue); one pixel-glitch column and at most one QR-block per declarative frame.
• Reference — aim at a WIRED Japan / Shift two-color risograph monograph; failure looks like a colorful dashboard with a second accent hue.

• 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: edge (4cqw) inset; hairlines + page chrome live on the safe line.

The container law (load-bearing). Every frame ground sets container-type: size AND carries the graph-paper background-image; ALL frame-relative units are cqw/cqh against it — never vw. The grid background-size is ~2cqw 2cqw so cell density holds at any render size.

Colors

Tokens identical to the source. {colors.paper} is the ground; {colors.ink} cobalt is the only ink (type, rules, grid lines, glitch, QR). {colors.ink-soft} is a secondary cobalt for editorial subtitles only; {colors.grid} (10%) is the permanent grid + chart "off" cells; {colors.ink-faint} (18%) is faint row dividers. Never a second hue — emphasis comes from size, from switching Hanken→Newsreader, from a mono delta arrow, or from opacity, never from color.

Typography

Two ramps. The reading ramp (Hanken body 0.83cqw, mono chrome in px) carries copy + labels; the display/hero ramp (Newsreader headline 4.6cqw → vbig-numeral 12.5cqw) carries every statement and figure.

• Legibility floor: any load-bearing line ≥ 1.4cqw; mono chrome (px) is colophon only.
• Fit-to-measure: size the headline to its line length. Cap the block at ≤ 78cqw; ≤3 words → display-hero/vbig-numeral; 4–6 → display-chapter; 7+ → headline.
• Newsreader at 400 only, in cobalt, with negative tracking (hero −0.008em, numeral −0.015em). Hanken labels uppercase, 0.16–0.18em. DM Mono 0.04–0.08em. No bold serif.

Depth & Surface

Flat. Depth is structural only:

• 1.5px cobalt rules — slide hairlines, topbar rule, chart baseline.
• 1px ink-faint dividers — dense list / ledger rows.
• The graph-paper grid — measured-plane tone behind everything.
• Pixel-glitch + QR — texture and graphic punctuation, no z-axis.

Ceiling: no drop shadow (the QR's 1.5px paper outset is an anti-shadow for readability, not elevation), no gradient, no rounded corner, no second color.

Shapes

• 0 radius everywhere — frames, ledger rows, QR cells, glitch blocks, charts. Zero circular elements; this squareness is part of the identity.

Components

• graph-grid / hairlines / page-chrome — the permanent frame furniture, inherited by every composition.
• pixel-glitch (edge column) + qr-block (corner patch) — the signature decoration on declarative frames.
• topbar-rule — the index/data/table section header. ledger-row — dense matrix row with delta arrows.
• pixel-stack-bar — data as grid-unit cells. vstack-label — vertical mono catalogue chrome.

Frame Treatments

Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density. The grid + hairlines are present on every frame. Choose density by type: declarative = sparse, index/data = dense.

1 · Hero Cover (identity · move: serif + glitch · left)

Ground paper + grid, hairlines. Composes pixel-glitch (right, ~26cqw), qr-block (top-right), display-hero, ed-callout. Focal a 1–2 line display-hero Newsreader headline in cobalt, left-anchored, with an italic ed-callout subtitle in {colors.ink-soft}. Chrome Hanken kicker; mono meta top + page number. Accent none (cobalt is the only ink). Silence ~45% paper. Fixed Newsreader 400, glitch + QR present, grid + hairlines. Free title, glitch step pattern, QR placement. Density sparse.

2 · Index Ledger (catalog · move: dense matrix · left — the dense frame)

Ground paper + grid, hairlines, pad-top/pad-bottom. Composes topbar-rule, ledger-rows. Focal a topbar (headline-index + mono lab-tag, 1.5px rule) over 4–6 ledger rows (mono num · Newsreader name · Hanken desc), ink-faint dividers. Chrome page number. Accent mono delta arrows. Silence tight — the density exception (the grid wants filling). Fixed 1.5px topbar rule, 1px ink-faint dividers, Newsreader names. Free rows, lab-tag, deltas. Density dense-exception.

3 · Chapter Opener (section · move: scale · sparse · left)

Ground paper + grid, hairlines. Composes pixel-glitch (left, ~14cqw, low opacity), mono index, display-chapter, body-lede. Focal a display-chapter Newsreader title, with a small mono CHAPTER NN index above and an optional Hanken lede ≤42cqw. Accent none. Silence ~60% — let the grid breathe. Fixed Newsreader 400, glitch low-opacity, grid showing. Free title, lede, glitch side. Density sparse.

4 · Data Frame (chart · move: pixel-stack · left)

Ground paper + grid, hairlines, pad-top. Composes topbar-rule, pixel-stack-bar row. Focal a row of 6–8 pixel-stack bars (cobalt on / 10% off) over a 1.5px cobalt baseline with mono ticks. Chrome topbar headline + mono fig-tag; page number. Accent none — data is cobalt cells. Silence moderate. Fixed grid-unit cells, cobalt baseline, mono ticks. Free bar values (from script), tick labels. Density standard/dense.

5 · Manifesto / Quote (quote · move: centered statement · sparse)

Ground paper + grid, hairlines. Composes display-quote (or display-manifesto), attribution rule, optional compact glitch. Focal a 2–3 line Newsreader pull in cobalt, with a Hanken kicker above and a 1px cobalt attribution rule + mono byline beneath. Accent none. Silence ~55% — deliberately open. Fixed Newsreader 400, attribution rule, grid showing. Free quote, byline. Density sparse.

6 · Colophon (closer · move: right-aligned close · sparse)

Ground paper + grid, hairlines. Composes pixel-glitch (left edge, mirroring the cover), display-closing, mono credit columns. Focal a right-aligned display-closing Newsreader title with a Hanken kicker above. Chrome 3–4 column mono credit grid at the foot; page number. Accent none. Silence ~50%. Fixed glitch on left, Newsreader 400. Free closing line, credits. Density sparse.

Composition Rules

Do

• Keep the graph-paper grid + top/bottom hairlines on every frame — they are the system.
• Set Newsreader at 400 in cobalt; make hierarchy with size, not weight; negative-track display.
• Track Hanken labels uppercase 0.16em; DM Mono chrome 0.04–0.08em.
• Render data as pixel-stack cells (cobalt on / 10% off); echo the glitch language.
• Use the pixel-glitch column + QR patch on declarative frames (cover, chapter, quote, colophon).
• Lean: declarative frames sparse and breathing; index/data dense. Vary anchor (left for index/chapter, centered for quote/closer).

Don't

• Don't introduce a second ink color — cream + cobalt only.
• Don't bold Newsreader, round any corner, or add a drop shadow (QR outset is an anti-shadow only).
• Don't disable the grid or suppress the hairlines.
• Don't crowd chapter / quote / colophon — those let the grid show.
• Don't blow a serif headline edge-to-edge — fit to measure.

Aspect-Ratio Behavior

Grid + hairlines hold on the short edge for every ratio; re-step display so no load-bearing line drops below 1.4cqw. 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. Trend names, signals, and figures are content; the system supplies the grid and chrome.

Numerals & Claims (hard rule)

Never invent figures, deltas, dates, or signal counts at frame scale. Render slots as — figure —, {metric}, ↑ —. Pixel-stack bar heights and ledger deltas especially carry placeholders until the script supplies values. Mono catalogue ordinals (001, 002…) are decorative and may be sequential.

Pre-Render Self-Audit

• Squint — one Newsreader element dominates at 3–5× its neighbor.
• Silence — declarative frames 45–60% empty; only index/data run dense.
• Two-color — cream + cobalt only; no second hue anywhere.
• Furniture — grid present, top/bottom hairlines present, page chrome above the hairline.
• Type — Newsreader 400 negative-tracked, fit-to-measure; Hanken labels 0.16em; ≥1.4cqw floor.
• Depth — 0 shadow (QR outset excepted), 0 rounded corner.
• Anchor — left on index/chapter/cover, centered on quote/closer; no 3 consecutive frames share an anchor.
• Fabrication — every numeral/delta traces to the script, else placeholder.

Known Gaps

• Motion intentionally out of scope. frame.md specifies composition only; the 280ms cross-fade in the source is a deck mechanic.
• Pixel-glitch is rendered in CSS here (stacked scanline blocks) rather than the source's inline SVG, to keep the showcase SVG-free; fidelity is preserved.
• Three Google Fonts (Newsreader, Hanken Grotesk, DM Mono); CJK pairing (Noto Serif SC 700/400) carries over from the source.
• 9:16 / 1:1 are guidance; verify the legibility floor and grid density per ratio.
• The QR mosaic and glitch step patterns are hand-authored; there is no generative layer.