Cartesian — Frame (video / frame layer)

Overview

Cartesian at frame scale is a quiet museum-catalog editorial system — restraint through 1px lines. Every structural separator is a single 1px taupe hairline; there are no thick borders, no fills (save the faint white-overlay card), no shadows, no rounded rectangles. Hierarchy comes from type contrast and negative space, and atmosphere from compass-drafted geometric rings drifting behind content.

The voice is a literary pairing: Playfair Display at weight 400 (the thin-stroke didone, never bold, always sentence case) carries every headline, numeral, and quote mark in ink; Inter carries body in warm gray and labels in uppercase taupe with 2–3px tracking. The palette is five warm stones plus ink — no populist accent color exists. The correct density is sparse and breathing: one clear idea, well-framed, on stone paper.

Key characteristics at frame scale:

• 1px taupe hairline as the universal structural device — every separator is this one line.
• Playfair Display 400 (ink, sentence case) for display; Inter body (gray) + labels (taupe, tracked).
• Five warm stones + ink — no red/blue/green; the only "color" is type contrast.
• Compass-drafted geometric rings (solid + dashed, 20–50% opacity) behind content for mood.
• Flat — zero shadow, zero rounded rectangle (circles only); the lone ink line is the horizontal-accent.
• Sparse and breathing — generous negative space; crowding reads as broken.

The Frame

Frame Craft Bar

Three eyeball tests gate every frame before any structural check:

• Squint — one Playfair element dominates at 3–6× its nearest neighbor; the serif/sans + size contrast carries hierarchy, not weight.
• Silence — declarative frames read 55–60% empty; Cartesian has no dense frame — even the agenda/index breathes (the system breaks when crowded).
• Restraint — at most two geo rings per frame; the single INK-BLACK horizontal-accent rule used sparingly; no populist accent color ever.
• Reference — aim at a Vignelli editorial / Cooper Hewitt catalogue / pencil-and-tracing-paper plan; failure looks like a shadowed, rounded-card SaaS deck.

• 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: pad-x (7cqw) generous gutters; geometry may bleed off an edge.

The container law (load-bearing). Every frame ground sets container-type: size; ALL frame-relative units are cqw/cqh against it — never vw. The 1px hairlines and geo rings hold their proportion against the frame at any render size.

Colors

Tokens identical to the source. {colors.bg-primary} is the ground; {colors.text-primary} ink is headlines and the one black accent rule; {colors.text-secondary} gray is body; {colors.accent} taupe is labels, numerals, small text; {colors.line} taupe is every 1px structural border. {colors.bg-secondary} is the only secondary fill (placeholders, photo frames). No populist accent — when emphasis is needed, grow the type, switch sans→serif, or add a single horizontal-accent ink line. Headlines are never taupe; small text is never ink.

Typography

Two ramps. The reading ramp (Inter body 1.0cqw gray, labels in px taupe) carries copy + chrome; the display ramp (Playfair h3 1.8cqw → display 8.0cqw, all weight 400) carries every headline.

• Legibility floor: any load-bearing line ≥ 1.4cqw; px labels are chrome only.
• Fit-to-measure: size the headline to its length. Cap the block at ≤ 78cqw; ≤3 words → display/h1; 4–6 → h2; 7+ → h3. Cartesian has no hero-stat numeral — stats stay modest (stat-figure 3cqw).
• Playfair at 400, ink, sentence case — never bold, never uppercase, never taupe. Inter labels uppercase, 2–3px tracked, taupe. Italic via Playfair italic for emphasis only.

Depth & Surface

The flat plane is the only technique. Hierarchy from:

• Type contrast — Playfair serif vs Inter sans; the 8cqw→0.7cqw scale.
• 1px taupe hairlines — every divider, card outline, timeline rule, photo ring.
• Tone — ink vs gray vs taupe.
• Negative space — generous padding.
• Geometric atmosphere — compass rings that suggest depth without creating it.

Ceiling: no box-shadow, no elevated card, no gradient, no rounded rectangle. The single ink line (horizontal-accent) is the only non-taupe rule.

Shapes

• 50% (circle) — card-icon, team-photo, nav-dot, every geo ring.
• 0 — everything else; soft-rounded corners do not exist.

Components

• hairline — the universal 1px taupe separator (the identity).
• card (1px taupe + white-overlay) / card-icon (ringed circle) / agenda-row / timeline (line, no nodes) / stats-cluster — all built on the hairline.
• geo-ring — compass decoration (solid + dashed), 1–2 per frame. horizontal-accent — the one ink line, sparingly. vertical-line — drafting guide.
• image-placeholder (crossed-X) / team-photo (ringed initial) — the stone-fill placeholders.

Frame Treatments

Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density. Every frame is sparse and breathing; 1–2 geo decorations max.

1 · Cover (identity · move: serif + compass ring · left)

Ground {colors.bg-primary}, pad-x. Composes geo-ring (right, ~34cqw, solid+dashed), vertical-line (left), label, display/h1. Focal a 2–3 line Playfair display/h1 headline in ink (italic on the key word), left-anchored, with a taupe label above and an Inter subtitle below. Chrome optional bottom meta row (Playfair value + taupe label). Accent the geo ring; optionally one horizontal-accent ink line (if it clears the meta). Silence ~55% empty. Fixed Playfair 400 ink sentence-case, ≤2 geo elements, 1px lines. Free title, ring placement, meta. Density sparse.

2 · Agenda / Index (index · move: hairline list · left)

Ground {colors.bg-primary}, pad-x. Composes label, h2, agenda-rows. Focal a Playfair h2 over 4–6 agenda rows (Playfair numeral in taupe + Playfair label in ink), each on a 1px taupe rule. Chrome taupe label eyebrow. Accent none — taupe numerals carry it. Silence moderate; rows generously spaced. Fixed 1px taupe rules, Playfair 400. Free items, count. Density standard (sparse rows).

3 · Pull Quote (quote · move: centered statement · compass ring)

Ground {colors.bg-primary}, centered. Composes geo-ring (centered dashed, ~26cqw), quote-mark, h2/display-quote, attribution. Focal a 2-line Playfair quote in ink, centered, under a 50%-taupe Playfair quote-mark; a taupe uppercase attribution beneath. Accent the faint centered ring. Silence ~60% — deliberately open. Fixed Playfair 400, one ring, centered. Free quote, attribution. Density sparse.

4 · Closing Plate (closer · move: centered ring · centered)

Ground {colors.bg-primary}, centered. Composes geo-ring (centered, ~40cqw, solid+dashed), label, h1/display, horizontal-accent. Focal a 1–2 line Playfair sign-off in ink (italic key word), centered inside the largest compass ring; a short ink horizontal-accent beneath. Accent the ring + the one ink line. Silence ~60%. Fixed Playfair 400, centered, ≤2 geo. Free sign-off, ring scale. Density sparse.

5 · Two-Column Editorial (content · move: asymmetric split · left)

Ground {colors.bg-primary}, pad-x, two columns with gap-xl. Composes label, h2, body, image-placeholder (crossed-X) or card. Focal a Playfair h2 + Inter body in the text column; an image-placeholder or card in the other. Accent none. Silence generous gutter. Fixed 1px taupe card/placeholder borders, white-overlay fill. Free which side is text, body copy. Density standard.

6 · Stats / Timeline (data · move: hairline rail · left)

Ground {colors.bg-primary}, pad-x. Composes label, h3, stats-cluster or timeline. Focal a modest Playfair stat row (or a 1px-rule timeline with year + headline + body, no nodes), framed by a 1px taupe top rule. Accent none. Silence moderate. Fixed modest stat scale, hairline rule, no nodes. Free figures, phases. Density standard.

Composition Rules

Do

• Use a single 1px taupe line for every separator — the hairline is the identity.
• Set every Playfair headline at 400, ink, sentence case; render labels taupe, uppercase, 2–3px tracked.
• Layer one or two compass rings (solid + dashed, 20–50% opacity) behind content for atmosphere.
• Let frames breathe — sparse, generous negative space; 55–60% empty on declarative frames.
• Lean centered on quote/closer; asymmetric/left on cover/agenda/editorial. Use bg-secondary for placeholder fills.

Don't

• Don't introduce a populist accent color — stone and ink only.
• Don't bold Playfair, render headlines in taupe, or use thick (2px+) borders.
• Don't add shadows, elevated cards, or rounded rectangles (circles only).
• Don't crowd the frame — packed layouts read as broken.
• Never more than two geo decorations per frame; don't blow a headline edge-to-edge.

Aspect-Ratio Behavior

Generous pad-x holds on the short edge; re-step display per ratio above the 1.4cqw floor. On 9:16, the timeline rule loses meaning when stacked — switch to a vertical list (per source).

Approved Entities

No real customers, logos, or vendors are defined in the source — render any such mark as a placeholder (the crossed-X image-placeholder, or a ringed initial for portraits).

Numerals & Claims (hard rule)

Never invent figures, dates, or counts at frame scale. Render slots as — figure —, {metric}. Stats and timeline years carry placeholders until the script supplies them. Agenda ordinals (01, 02…) are decorative and may be sequential.

Pre-Render Self-Audit

• Squint — one Playfair element dominates; the serif/sans contrast carries hierarchy.
• Silence — declarative frames 55–60% empty; nothing is crowded.
• Palette — five stones + ink only; no populist accent; headlines ink, labels taupe.
• Lines — every separator is a 1px taupe hairline; the only ink line is horizontal-accent.
• Type — Playfair 400 sentence-case, fit-to-measure; labels uppercase 2–3px; ≥1.4cqw floor.
• Depth — 0 shadow, 0 rounded rectangle; ≤2 geo rings per frame.
• Anchor — centered on quote/closer, left/asymmetric on cover/agenda/editorial; no 3 in a row alike.
• Fabrication — every numeral traces to the script, else placeholder.

Known Gaps

• Motion intentionally out of scope. frame.md specifies composition only; the 0.6s fade in the source is a deck mechanic.
• Playfair Display + Inter via Google Fonts. CJK pairing (Noto Serif SC 700/400) carries over; Playfair has no Hanzi italic — substitute weight/taupe for emphasis.
• 9:16 / 1:1 are guidance; verify the legibility floor and that the timeline collapses to a vertical list.
• Geo rings, the crossed-X placeholder, and the dashed inner ring are CSS-only; no external imagery is required.