Code editorial — Frame (video / frame layer)

Overview

Code editorial at frame scale is a warm-editorial brand book come to life — the register of a literary imprint or a research note. The thesis is three colors: cream is the ground, ink is the voice, coral is the voltage — and a fourth (warm navy) only where code shows itself. Every surface is warm cream (never pure white, never cool gray); content gathers on a tile surface half a step darker — the demarcation is a half-step, never a hard contrast. Elevation is a 1px hairline ink border at low alpha plus, rarely, one soft warm shadow. There are no heavy drops, no glows, no gradients on content.

Three editorial voices, each in its own face: EB Garamond carries every display moment — covers, headlines, pull-quotes, big stat numerals — at large display sizes with gentle negative tracking; its italic is the expressive register. Inter carries body, leads, card titles, buttons, and UI chrome. JetBrains Mono carries the indexical layer — kickers, technical labels, the code window, status strips. Switching a voice's face collapses the register: a sans headline or a serif label reads as a different brand.

Key characteristics at frame scale:

• Cream / ink / coral trinity + a warm-navy code surface; cream is the default ground, ink the voice, coral the scarce voltage.
• EB Garamond (sentence case, negative-tracked) for all display; Inter body/chrome; JetBrains Mono index + code.
• Hairline elevation — a 1px low-alpha ink border + at most one soft warm shadow. No heavy drop, glow, or gradient.
• Coral is rationed — at most ONE coral moment per frame (CTA, inline link, OR full-bleed band); coral never sets a headline or a body run.
• Density is free — fill the frame as the content wants; a frame may stand on a single focal or carry a dense, layered composition.
• The ✱ coral spike opens kickers; warm navy is reserved for the code/terminal surface.

The Frame

Frame Craft Bar

Eyeball tests gate every frame before any structural check:

• Squint — one EB Garamond display moment dominates at 3–6× its neighbor.
• Trinity — cream/tile ground, ink text, coral exactly once; warm navy only on the code surface; no cool gray / pure white / fourth hue.
• Type — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code.

• 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: slide-pad ~4.2cqw; the kicker/mono chrome sit inside it.

The container law (load-bearing). Every frame ground sets container-type: size; ALL frame-relative units are cqw/cqh against it — never vw. Hairlines stay 1px; card radii stay 6/8/12px; the warm-paper reading must survive every ratio.

Colors

Tokens identical to the source. Default ground {colors.cream}; content gathers on {colors.tile} / {colors.tile-strong} (half-step warm steps, never a hard contrast). Headlines & body: {colors.ink} on cream/tile; {colors.cream} on navy. Coral ({colors.coral}) is the scarce voltage — one moment per frame (CTA, inline link, or full-bleed band), never body text, never a card fill. Warm navy ({colors.navy} / navy-soft / navy-elev) is the code / terminal / dark-card surface — a structural anchor, not a fourth brand hue. No cool grays, no pure white, no pure black.

Fixed syntax colors (decoration, NOT remixable brand hues). When a code line is hand-set rather than rendered by a code-* block, keywords are coral, strings are **teal #5DB8A6, numbers are amber #E8A55A**; status reads success #5DB872 / warn #C64545. These track the code surface, not the brand trinity — keep them out of the brand palette.

Typography

Two ramps. The reading/chrome ramp (Inter body 1.5cqw / lead 2.08cqw weight 400; JetBrains Mono kicker/mono-label in px) carries copy + chrome; the display ramp (EB Garamond headline 4.6cqw → display-cover 9.9cqw, weight 400, negative-tracked) carries every headline + stat.

• Legibility floor: any load-bearing line ≥ 1.4cqw; mono px labels are chrome only.
• Fit-to-measure: size the headline to its length. Cap the block at ≤ 78cqw; ≤3 words → display-cover; 4–6 → display; 7+ → headline. Reserve the 7.3–9.9cqw tier for cover / statement / stat.
• EB Garamond display is sentence case (NOT title case, NOT uppercase), weight 400, negative-tracked (−0.012..−0.028em); reach for italic when the line is a stance or a definition. Inter body sentence case weight 400. JetBrains Mono kickers UPPERCASE 0.16em with the coral ✱. No uppercase serif, no sans headline, no serif label.

Depth & Surface

Hairline elevation:

• 1px hairline ink border at ~12% alpha is the primary lift (cream@14% on navy).
• One soft warm shadow (0 1px 3px ink@8%, 0 4px 16px ink@4%) — used rarely, never heavy.
• Half-step surface — a {colors.tile} block on cream reads elevated by the warm step, not by a cast shadow.

Ceiling: no heavy drop shadow, no glow, no gradient on content, no tilt. The system has no light to emit; it reads by warmth and hairline.

Shapes

• 6px small chrome, 8px cards / code surface, 12px large cards / quote frames, 9999px true pills only. No square corners, no heavy rounding; the editorial register is gently rounded, never hard.

Components

• card-hairline — the editorial content card (hairline + one soft shadow). section-rule — the only separator (1px, coral may draw on).
• kicker-spike — the ✱ coral eyebrow. coral-callout — the one voltage moment (CTA / inline link / full-bleed band).
• number-lockup — EB Garamond figure + mono unit (the PR +N / −M, 200K, file counts). pull-quote — EB Garamond italic + cite (a commit message / reviewer line).
• code-surface — the warm-navy code / terminal surface; the code itself comes from the **code-* registry blocks**, this owns the surface + mono chrome.
• spike-mark — the ✱ brand glyph, always coral.

Frame Treatments

Recipe: ground · container · composes · focal · chrome · accent · Fixed/Free · density. One coral moment per frame; open with a kicker-spike.

1 · Cover (identity · move: oversized EB Garamond · cream)

Ground {colors.cream}, slide-pad. Composes kicker-spike, display-cover, lead, mono-label index. Focal a 2–3 line EB Garamond display-cover (sentence case, ink) under a coral ✱ kicker. Chrome mono index strip (repo · branch). Accent the single coral ✱. Fixed EB Garamond 400 sentence case, hairline, cream ground. Free title, the mono index, layout + how full the frame runs. Density free.

2 · Statement (statement · move: single EB Garamond line · cream or navy)

Ground {colors.cream} (or {colors.navy} for gravity). Composes kicker-spike, display, optional lead. Focal one 2-line EB Garamond display carrying the change in a sentence — reach for italic if it's a stance. Chrome mono kicker. Accent none — the serif carries it (or one coral word). Fixed sentence-case serif. Free the line, ground, layout + density. Density free.

3 · Code Surface (code · move: warm-navy code window · the PR-critical frame)

Ground {colors.cream} framing a {colors.navy} code-surface (8px, cream@14% hairline, navy-elev title bar + filename in mono). Composes mono-label filename, the **code-* block** (code-diff / code-typing / code-snippet-_), optional section-rule. Focal the code panel — the diff / before→after / typed-on snippet. Chrome mono filename + status strip. Accent syntax coral/teal/amber inside the panel; one coral marker outside (e.g. a +/− gutter cue). Fixed warm-navy surface, mono code, hairline. Free which code-_ block, the code (from the diff), how large the panel runs. Density dense.

4 · Number / Impact (data · move: oversized figure · cream)

Ground {colors.cream}, slide-pad. Composes kicker-spike, number-lockup, lead/caption, optional section-rule. Focal a EB Garamond number-hero figure with a mono unit over a 1px rule — the PR impact (+1,204 / −318, 17 files, 2.1× faster). Chrome mono tag. Accent the figure in ink; at most one coral unit. Fixed serif figure + mono unit, hairline rule. Free the figures (from the script), tag, layout + density. Density free.

5 · Pull-quote (quote · move: EB Garamond italic · cream)

Ground {colors.cream}. Composes kicker-spike, pull-quote, tag-upper cite. Focal a EB Garamond italic quote-pull — a commit message, a reviewer line, or the thesis — with a small Inter uppercase cite (author · role) beneath. Chrome mono kicker. Accent none, or one coral mark. Fixed EB Garamond italic quote + uppercase cite. Free quote, attribution, layout + density. Density free.

6 · Closing / CTA (closer · move: coral voltage · cream or navy)

Ground {colors.cream} (or {colors.navy}). Composes display sign-off, coral-callout, optional contributor row (assets/<login>.png avatars + mono names). Focal a short EB Garamond sign-off with the one coral-callout (the CTA or full-bleed band) and, for a "shipped-by" close, a row of hairline-ringed avatar chips. Chrome mono index. Accent the single coral voltage. Fixed one coral moment, hairline avatar rings, sentence-case serif. Free sign-off, who ships, layout + density. Density free.

Composition Rules

Do

• Stand every frame on the warm cream floor; gather content on a half-step tile surface.
• Set all display in EB Garamond, sentence case, negative-tracked; Inter 400 body; JetBrains Mono kickers (uppercase, 0.16em, coral ✱) + code.
• Ration coral to one moment per frame — CTA, inline link, OR full-bleed band.
• Elevate with a 1px hairline + at most one soft warm shadow; reserve warm navy for the code/terminal surface.
• Lead with one clear focal; open regions with a kicker-spike. Fill the frame as the content wants.
• Pair a EB Garamond figure with a mono unit for every stat; render code via the **code-* blocks** on the navy surface.

Don't

• No pure white, no cool gray, no pure black; no fourth brand hue (navy is structural, syntax colors are decoration).
• No heavy drop shadow, glow, gradient on content, or tilt — hairline elevation only.
• No uppercase or title-case EB Garamond display; no sans headline; no serif label; no serif-set numeric unit.
• No two coral moments in one frame; coral never sets a headline or body run.
• Don't blow a headline past the measure — step the ramp down.

Aspect-Ratio Behavior

slide-pad holds on the short edge; re-step display above the 1.4cqw floor. The code surface keeps its hairline + mono chrome on every ratio; the avatar row wraps rather than shrinks below legibility.

Approved Real Entities

No real customers, logos, or vendors are defined in the source — render any such mark as a placeholder. Contributor avatars come from the project's assets/<login>.png (staged from the PR's people graph); the ✱ spike, hairlines, and the code surface are CSS-only and need no external imagery.

Numerals & Claims (hard rule)

Never invent figures, stats, diffs, or counts at frame scale. Render slots as — figure —, {metric}, +N / −M. Number-lockups, code panels, and impact stats carry placeholders until the script (from the PR ingest) supplies real values. Branch names, file counts, and +/− totals trace to the diff; commit/issue numbers are chrome.

Pre-Render Self-Audit

• Squint — one EB Garamond display moment dominates.
• Trinity — cream floor + tile step + ink voice; coral appears exactly once; warm navy only on the code surface; no cool gray / pure white / fourth hue.
• Type — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code; ≥1.4cqw floor.
• Depth — 1px hairline + at most one soft warm shadow; no heavy drop / glow / gradient / tilt; 6/8/12px radii.
• Code — code rendered by a code-* block on the warm-navy surface; syntax coral/teal/amber; figures paired with a mono unit.
• Fabrication — every numeral / diff traces to the PR, else placeholder.

Known Gaps

• Motion intentionally out of scope. frame.md specifies composition only. Code editorial's motion register — short cross-dissolves, no overshoot/bounce/elastic, coral the only "draw-on", numbers count up, code types on line by line — lives in the skill's references/motion.md, not here.
• EB Garamond + Inter + JetBrains Mono ship as licensed local WOFF2 assets with this preset. Copy the six files in this preset's fonts/ folder (weights 400 + 700) into the project's assets/fonts/ and add one @font-face per file, so Studio, snapshots, and renders resolve them offline without a first-run Google Fonts fetch. Nothing stages them for you. Author display at weight 400 (700 reads as a heavy bold, off-register), and treat italic as the browser-synthesized slant (acceptable for the pull-quote register; add a real italic face only if a project leans hard on it). EB Garamond is a warm old-style serif (low contrast, humanist); if it ever fails, fall to Georgia or another old-style serif — never to a sans. CJK: Noto Serif SC (display) / Noto Sans SC (body) / Noto Sans Mono CJK (code); the sentence-case warmth carries when the serif drops.
• **Syntax colors (teal #5DB8A6 / amber #E8A55A / status) are fixed decoration**, declared in §Colors — they are NOT in the remixable colors: block, so a brand remix never repaints them.
• **The code itself is the code-* registry blocks**, not this preset — this preset owns only the surrounding warm-navy surface + mono chrome.
• 9:16 / 1:1 are guidance; verify the legibility floor and that the cream/tile warmth + one-coral discipline hold per ratio.