hyperframes/skills/hyperframes-creative/frame-presets/cobalt-grid/FRAME.md

---

version: alpha name: Cobalt Grid — Frame (video / frame layer) description: > Video-first companion to Cobalt Grid's design.md. The unit is the frame (1920×1080). Atoms are identical and sacred — warm cream paper, electric cobalt ink (the only ink), the permanent graph-paper grid, Newsreader serif 400 + Hanken Grotesk + DM Mono, the top/bottom cobalt hairlines, and the pixel-glitch + QR-block signatures. Composition, frame scale, and aspect-ratio behavior are rewritten for the frame. Motion is 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: paper: "#F0EBDE" paper-2: "#E6E0CE" ink: "#1F2BE0" ink-soft: "#5560E5" grid: "rgba(31,43,224,0.10)" ink-faint: "rgba(31,43,224,0.18)"

typography:

— reading ramp —

body: { fontFamily: "Hanken Grotesk", cqw: 0.83, weight: 400, lineHeight: 1.5 } body-lede: { fontFamily: "Hanken Grotesk", cqw: 0.95, weight: 400, lineHeight: 1.5 } micro: { fontFamily: "Hanken Grotesk", px: 13, weight: 600, tracking: "0.16em", upper: true } micro-strong:{ fontFamily: "Hanken Grotesk", px: 16, weight: 600, tracking: "0.18em", upper: true } mono-tag: { fontFamily: "DM Mono", cqw: 0.78, weight: 400, tracking: "0.05em" } mono-chrome: { fontFamily: "DM Mono", px: 13, weight: 400, tracking: "0.06em" }

— display / hero ramp (Newsreader 400, negative tracking) —

table-name: { fontFamily: "Newsreader", cqw: 1.5, weight: 400, lineHeight: 1.15 } row-headline:{ fontFamily: "Newsreader", cqw: 2.1, weight: 400, lineHeight: 1.05 } ed-callout: { fontFamily: "Newsreader", cqw: 2.6, weight: 400, lineHeight: 1.1, italic: true } headline: { fontFamily: "Newsreader", cqw: 4.6, weight: 400, lineHeight: 0.95 } headline-index:{ fontFamily: "Newsreader", cqw: 5.0, weight: 400, lineHeight: 0.95 } display-quote:{ fontFamily: "Newsreader", cqw: 5.7, weight: 400, lineHeight: 1.05, tracking: "-0.005em" } display-chapter:{ fontFamily: "Newsreader", cqw: 6.8, weight: 400, lineHeight: 1.0, tracking: "-0.005em" } display-closing:{ fontFamily: "Newsreader", cqw: 9.4, weight: 400, lineHeight: 0.96, tracking: "-0.005em" } display-hero:{ fontFamily: "Newsreader", cqw: 10.4, weight: 400, lineHeight: 0.9, tracking: "-0.008em" } vbig-numeral:{ fontFamily: "Newsreader", cqw: 12.5, weight: 400, lineHeight: 0.9, tracking: "-0.015em" }

spacing: edge: "4cqw" # standard frame edge inset (~80px@1920) pad-top: "7cqw" pad-bottom: "6cqw" gap-md: "2cqw"

components: graph-grid: backgroundImage: "linear-gradient grid, ~2cqw cells, 10% {colors.ink} ({colors.grid})" placement: "behind EVERY frame on the ground" description: "Permanent graph-paper grid — never disabled; the canvas tone." hairlines: rule: "0.12cqw solid {colors.ink}" placement: "≈3cqw from top + bottom, inset {spacing.edge}" description: "Two persistent cobalt rules framing every composition." page-chrome: typography: "{typography.pagenum}" color: "{colors.ink}" placement: "page number bottom-right, nav/meta hint bottom-left, above the bottom hairline" description: "The only persistent chrome." pixel-glitch: backgroundColor: "{colors.paper}" fill: "repeating-linear-gradient(90deg, {colors.ink} 0 2px, transparent 2px 8px)" size: "14–30cqw wide, full height, stair-stepped" placement: "right on cover/data, left on chapter/colophon; z above grid, below headline" description: "Stair-stepped scanline column. Decorative." qr-block: backgroundColor: "{colors.paper}" cells: "8×8, {colors.ink} on / {colors.grid} off" size: "3–9cqw square" shadow: "0 0 0 0.12cqw {colors.paper} (anti-shadow for readability, not elevation)" description: "QR mosaic patch — corner punctuation." topbar-rule: typography: "{typography.headline-index} + {typography.mono-tag}" borderBottom: "0.12cqw solid {colors.ink}" description: "Section header on index/data/table frames." ledger-row: layout: "grid: mono num · Newsreader name · Hanken desc · mono delta" borderBottom: "0.06cqw solid {colors.ink-faint} (header 0.12cqw solid {colors.ink})" typography: "{typography.mono-tag} + {typography.table-name} + {typography.body}" description: "Dense matrix row with ↑/↓/— delta." pixel-stack-bar: cells: "column-reverse, {colors.grid} off / {colors.ink} on" baseline: "0.12cqw solid {colors.ink} + {typography.mono-tick} ticks" description: "Data as grid-unit cells; echoes the glitch." vstack-label: typography: "{typography.mono-tick}" transform: "writing-mode: vertical-rl" description: "Catalogue chrome along a frame edge."

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

Treatment	16:9	9:16	1:1
Hero Cover	headline left, glitch right	headline top, glitch full-width band	headline upper, glitch lower
Index Ledger	topbar + rows	topbar + fewer rows	2-col compresses to 1
Chapter Opener	title left, glitch left	title top, glitch side	centered title
Data Frame	6–8 bars	4–5 bars taller	square chart
Manifesto / Quote	centered pull	centered, taller	centered
Colophon	right-aligned, glitch left	stacked, glitch top	centered close

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.