Media framework

Video Assets

Foundation source: use `contexts/design-foundations-system.html` for baseline

Foundation source: use contexts/design-foundations-system.html for baseline rhythm, type roles, surface use, motion restraint, and editorial image/text placement before adapting to frame size.

System Waterfall

Apply in order: foundation context, tokens and brand systems, media framework, channel data, this video sheet, motion/storyboard template when present, render/export checks. Frame pixels are output geometry; type hierarchy, caption attachment, overlays, motion restraint, and safe areas inherit from the cascade.

Media

Default formats:

16:9: 1920 x 1080.
9:16: 1080 x 1920.
1:1: 1080 x 1080.

Surface: Blueprint Dark for title cards and technical motion; Cool Light for documentary/explainer cards.

Margins And Safe Areas

16:9: 120px safe margin.
9:16: 120px sides, 160px top, 260px bottom.
1:1: 96px safe margin.
4:5 feed film: 90px sides, 120px top, 220px bottom (see Social Film).
Keep bottom-right free of critical content for platform controls.

Typography Scaling

Title: Newsreader 72-120px.
Subtitle: Lexend 34-48px.
Caption/lower third: IBM Plex Mono or Lexend 24-32px.
Minimum readable video text: 32px at 1080p.

Spacing

Title systems: 2-4rem source equivalent.
Lower thirds: 1-1.5rem internal padding source equivalent.
Sequence spacing: 3-5rem source equivalent.
Snap title, subtitle, lower-third, caption, and source-note spacing to the same baseline-derived rhythm used by still media.

Grid

16:9: 12 columns x 6 rows.
9:16: 6 columns x 10 rows.
1:1: 6 columns x 6 rows.
Gap: 24px.

Layout System

Title card: mark, label, title.
Chapter card: section marker, one sentence.
Data card: one number, one sentence, one source.
Lower third: name, role, context.
End card: one CTA and URL.
Use Z-pattern for sparse title and end cards. Use vertical/layer-cake scanning for narrated explainers and 9:16 social cuts.
Bento groupings are allowed only for a small set of peer metrics or proof modules. Avoid dashboard-like title cards.

Motion

Motion should clarify sequence.

Fade/slide: 300-600ms.
No kinetic type storms.
No glowing AI node loops.
Honor platform compression: avoid thin low-contrast lines in motion.
Text over footage requires a controlled overlay or negative-space placement. Captions, lower thirds, and source notes stay attached to the subject or evidence they identify.

Recorded from the October 2026 company-page launch film, the first social film built end to end on this system. The rules below are what review kept; the “Learned” notes say what failed first. The procedure lives in ai/skills/into-social-film/SKILL.md.

Format

Feed portrait: 1080 x 1350 (4:5), 30 fps, H.264 MP4, AAC audio.
15 seconds, four beats: hook, the problem, the turn, end card. Learned: a 23-second cut with a 10-second list scene lost the viewer. Lists, numbered commitments and anything that must be read go in the post copy.
Sound-off first. Every word that carries meaning is on screen. Music is a bed, not a carrier.
First frame is the thumbnail: the hook line is fully set at frame 0, over the hook image, with the footer present.

Safe Areas And Identity

Text: 90px sides, 120px top, keep body text 220px clear of the bottom edge. Jeremy confirmed 90 / 120 / 220 as the 4:5 film safe area on 2026-10-30. It applies to moving 4:5 work only: static 4:5 posts keep the 96 / 96 / 140 in media/social.md.
Persistent footer: monochrome INTO mark bottom left, WEAREINTO.CONSULTING in IBM Plex Mono bottom right, both 90px from the bottom and side edges (Jeremy, 2026-10-28: the footer read too high at the 220px line).
Monochrome logo only. The gradient wordmark variant is not used.
One identity per frame: on the end card the corner mark fades out as the full wordmark arrives; the address stays bottom right.
Never animate the mark or wordmark beyond an entrance fade and 12px rise.

Register And Type

The live site (weareinto.consulting) is the reference for social film, not the document templates. Learned: document rules (flat Cool Light surfaces, textures only) produced a film the operator called bland.
Surface: Blueprint Dark ground #0d1212 with documentary-style scenes of real work in warm practical light, lifted so they read in a bright feed. Petrol-bright #4fb5b8 for the call-to-action button and the particle layer. Saffron stays a milestone signal, never decoration.
Headlines: Newsreader at 96px on the 1080 frame, weight about 320, line height 0.98. Body Lexend 300. Mono labels and the address in IBM Plex Mono.
Display tracking (Jeremy, 2026-10-30): Newsreader at 72px and up tracks at -0.035em, matching the live site. Lexend and mono text stay at the typography default. The rule and its split by medium live in brand/typography-spacing-system.md: on-screen display (site, film, social) is negative; documents and body text stay at 0.
Text sits in negative space or over a gradient scrim that matches the light, never over faces or the focal object. Move the line low when the subjects fill the top of the frame.

Imagery

Use purpose-made scenes for each beat, framed for 4:5 with the headline third left empty. Generated scenes are allowed when the operator generates or approves them; record the prompt and source next to the project.
Website scenes in into-consulting-site/art/ are publication-held until the owner clears them for a new channel. Do not ship them by default.
A matched pair (the same set, disordered then ordered, generated from one reference) makes the turn literal and is the strongest proof shot.
No stock, no staged handshakes, no glowing AI node loops, no readable screen content.
People (Jeremy, 2026-10-30): generated people are allowed in stills, and in subtle video motion (a hand turning a page, typing, a glance, breathing) after an uncanny-motion check. Never speech or lip-sync, walking or full-body action, or a moving close-up face. No generated person may imply a real client, employee or event.
The uncanny-motion check, as the production skill runs it: watch the take at full size in real time, then step through every frame where a hand or face moves. Reject it if fingers change or merge, a hand slides through what it touches, the face drifts, or texture boils. A rejected take falls back to the still with a camera move in code.

Motion Recipes That Worked

Hook: slow push (1.4% per second) toward the work; the line is static at frame 0 and exits with a 12px rise.
Problem: words rise 12px word by word on --into-ease-editorial, 55-80ms stagger; the camera drifts sideways.
Turn: the disordered scene is replaced by the ordered one behind a diagonal sweep carrying a sparse petrol-bright particle band built from the ordered image’s edges. The sweep takes about 2.5 seconds on an ease-in-out curve.
Cuts: 0.35-0.45 second dips through the ground colour; no wipes.
End card: still by 1.7 seconds and held at least 2 seconds; one line, the call as a petrol-bright button, the address in the footer.

Sound

Use the supplied INTO track. Align a musical hit to the end-card entrance (shift the bed for the longer French cut), fade in 0.3 seconds, fade out over the final hold, normalise to -16 LUFS integrated, -1.5 dBTP.
Players that cannot import audio export silent; render the MP4 and add the bed in assembly.

Checks Before Delivery

Sweep every 0.2 seconds: all text inside the safe area and clear of the footer.
Copy matches the approved script exactly, in both languages; French typography per media/social.md.
Inspect representative frames from the final MP4, then watch and listen with sound on before publishing.