---
version: "1.10.0"
name: "HITL style pack"
slug: "hitl-style-pack"
origin: "custom"
based_on: "creative-mode"
brand: "Human in the Loop / By VallySeed"
source: "https://podcast.vallyseed.com/"
verified_on: "2026-11-04"
description: >
  A Creative Mode inspired frame system for Human in the Loop: light cream paper,
  near-black ink, electric indigo, bold editorial display type, Space Mono labels,
  Space Grotesk explanations, square geometry, and one hard offset shadow.
  The complete supplied HITL emblem stays intact. Built for podcast-derived
  explainers, opinion cards, diagrams, caption treatments, and episode packaging.
unit: "1920x1080 at 30 fps; recompose for 1080x1920 and 1080x1080"
principle: "One idea. Visible evidence. A human point of view."
colors:
  paper: "#FAF7F2"
  ink: "#1A1515"
  indigo: "#5059FF"
  tint: "#E9E6F3"
  muted: "#645D59"
  logo_paper: "#F5F1E8"
typography:
  display_hero: { fontFamily: "Archivo Black", weight: 400, px: 176, lineHeight: 0.96, tracking: "-0.035em", case: "uppercase" }
  display_title: { fontFamily: "Archivo Black", weight: 400, px: 120, lineHeight: 0.96, tracking: "-0.035em", case: "uppercase" }
  display_quote: { fontFamily: "Archivo Black", weight: 400, px: 126, lineHeight: 0.96, tracking: "-0.035em", case: "uppercase" }
  identity: { fontFamily: "Space Mono", weight: 700, px: 112, lineHeight: 1.05, tracking: "-0.02em" }
  label: { fontFamily: "Space Mono", weight: 700, px: 24, lineHeight: 1.4, tracking: "0.07em", case: "uppercase" }
  source: { fontFamily: "Space Mono", weight: 400, px: 24, lineHeight: 1.4 }
  body: { fontFamily: "Space Grotesk", weight: 400, px: 40, lineHeight: 1.35 }
  body_emphasis: { fontFamily: "Space Grotesk", weight: 600, px: 48, lineHeight: 1.2 }
  captions: { fontFamily: "Space Grotesk", weight: 700, px: 72, lineHeight: 1.2 }
spacing:
  landscape_gutter_px: 96
  landscape_text_gutter_px: 154
  base_unit_px: 8
  structural_border_px: 6
  structural_border_cqw: 0.3125
  hard_shadow_offset_px: 16
  hard_shadow_offset_cqw: 0.8333
  portrait_critical_left_percent: 8
  portrait_critical_right_percent: 12
  portrait_critical_top_percent: 12
  portrait_critical_bottom_percent: 16
components:
  label_chip:
    font: "Space Mono 700"
    shape: "square"
    border: "3px currentColor at 1920 width"
    fill: "transparent or ink"
  featured_panel:
    fill: "indigo"
    text: "paper"
    border: "6px ink at 1920 width"
    shadow: "16px 16px 0 ink; one featured shadow per frame"
  diagram_node:
    fill: "tint; indigo for the decision point"
    border: "6px ink at 1920 width"
    typography: "Archivo Black title; Space Grotesk description"
  comparison_ledger:
    shape: "two square columns; stacked in portrait"
    headings: "ink/paper; highlighted column indigo/paper"
    body: "paper or tint / ink"
  caption_highlight:
    type: "Space Grotesk 700"
    base: "paper on ink or an opaque ink backing over footage"
    active: "paper on indigo, square background, 0.24em horizontal padding"
  logo_plate:
    file: "assets/hitl-logo.png"
    fit: "contain"
    aspect_ratio: "1:1"
    treatment: "complete original artwork on its supplied light ground"
---

# HITL style pack

## Design direction

Creative Mode supplies the composition: poster-scale headlines, square panels, visible rules, and one hard offset shadow. Human in the Loop supplies the identity: cream, ink, indigo, the complete human-and-loop emblem, Space Mono, and Space Grotesk.

The tone is direct, curious, and human. The frame should make an explanation easier to follow or an argument easier to examine. The question, evidence, and human judgment determine the graphic.

`frame-showcase.html` contains fourteen editorial/character treatments in 16:9, 9:16, and 1:1, two live-footage host-overlay examples, and four landscape multicam views. `multicam.html` shows the two-, three-, and four-person layouts, including both three-person arrangements, at full size. Use the ratio buttons for the editorial/character frames; the live-footage references stay 16:9. `assets/hitl-style.css` contains the local fonts, color tokens, and example layout classes.

## Podcast video production

**Approved by Oscar on 2026-10-30:** use the EP29 B-roll edition as the production reference for new HITL podcast excerpts, Unpopular Opinions, and explainers. In Thinking-Vault it is `10 Content Engine/Hyperframes/projects/ep29-oscar-unpopular-opinion-broll/`; read its `SPEC.md`, `STORYBOARD.md`, and `REVIEW.md` for the actual decisions and validation. This approval establishes a visual direction, not a fixed shot count, duration, or stock-footage quota.

- **Real host footage is the home frame.** When usable footage exists, return to the actual speaker for the thesis, personal qualifications, and conclusion. Keep the recorded voice and natural delivery as the pacing clock and default soundtrack; add music or sound effects when the brief calls for them. Preserve speech, pauses, and speed unless the current brief requests a cut or pacing change; re-align captions whenever audio timing changes.
- **B-roll makes a spoken idea concrete.** Use relevant stock footage, owned recordings, or sourced screenshots at the phrase they illustrate. A named product or announcement calls for its actual source imagery. Generic stock remains illustrative and does not establish what a particular company or person did. Reuse suitable vault assets before searching again.
- **Editorial animation explains or emphasizes.** Use short diagrams, comparisons, stamps, reveals, or a large takeaway at an earned beat. Keep one message dominant and settled copy still. Avoid making successive headline cards the main visual treatment of an otherwise human podcast passage.
- **Characters have a specific role.** Use Oscar's thinking portrait for illustrated reflective openings or explanation beats, or when usable host footage is unavailable. It complements the camera footage. The approved EP29 opening uses it to exclude an old burned-in source title before returning to the live speaker. The character selection rules below still apply within illustrated scenes.
- **Cut on meaning.** Tie each shot to a spoken phrase and vary between camera, relevant cutaway, and explanation when that helps comprehension. A B-roll starting range is roughly 2–6 seconds; a short phrase may need a shorter insert. Adjust to the footage and speech rather than forcing a change on every caption group.
- **Keep captions and subjects separate.** Apply **Caption emphasis** unchanged: bottom placement, one active audio-aligned word, readable backing, and stable geometry across camera, stock, and graphics. Headings must be fully visible above or beside the image; inspect the final word of every long heading. Source credits support the image without entering the caption band.
- **Preserve the HITL identity across media.** Use the pack's paper, ink, indigo, typography, square borders, and controlled hard shadow for framing and labels. Keep footage in its natural colors unless the brief calls for a deliberate treatment. For portrait camera geometry, use **Portrait camera layouts** below. It supersedes the older EP29 camera spacing; EP29 remains the reference for the mix of footage, cutaways and editorial animation.
- **Retain reusable local media and provenance.** Keep original assets in the vault library and self-contained copies in the video's assets. Record source, creator, license, checksum, measured dimensions/duration, scene in/out points, and crop. In Thinking-Vault, `10 Content Engine/Hyperframes/BROLL.md` owns the Pixabay/API workflow and credential handling.
- **Review the actual result.** Inspect faces, subjects, headings, word changes, and cuts at phone scale, then check the encoded MP4 as well as the editable preview. Use Codex's internal browser for agent-run previews and suppress the CLI's automatic system-browser launch. Distinguish measured audio checks from a full listening review.

A brief requesting a fully animated explainer, an audio-only source, or a different visual treatment can override the camera-first default. Record that choice in the video's specification and retain these caption, source, and brand rules where applicable.

## Multi-person conversation layouts

Use these 1920×1080 layouts when two or more people should remain on screen together. Their editable reference is `10 Content Engine/Hyperframes/projects/hitl-multicam-layouts/`; `multicam.html` and `frame-showcase.html#multicam-layouts` provide saved previews. The templates extend the HITL square geometry, paper ground, ink framing and indigo accents to live cameras.

| People | Component | Composition and use |
| --- | --- | --- |
| 2 | `components/multicam-2.html` | Matt left, Oscar right, equal panels. Use for openings, exchanges, reactions and shared conclusions. |
| 3 | `components/multicam-3-horizontal.html` | Three equal cameras in one horizontal row, with both hosts and a guest. Use for balanced three-way exchanges. |
| 3 | `components/multicam-3.html` | Featured guest left, hosts stacked right. Use for guest introductions and guest-led answers; switch to an equal or solo view when the conversation calls for it. |
| 4 | `components/multicam-4.html` | Equal 2×2 grid; hosts above, guests below. Use for panel openings, group exchanges and reactions. |

- **Camera-only presentation:** conversation grids have no persistent host/guest nameplates or role bars, per Oscar’s 2 November 2026 direction. Use the separate introduction overlay when a person first needs introducing; return to the clean camera view afterward. Names retained in the layout data are accessibility/source metadata, not visible labels.
- **Geometry:** use the exact coordinates in `assets/multicam/layouts.json`. Two-person panels are 852×780; the horizontal three-person layout has three 560×780 panels; guest-focus has one 1044×780 panel and two 660×378 host panels; four-person panels are 852×378. Keep 24px gaps, 6px square borders, and one 12px hard shadow on the featured guest only. Pictures fill the entire panel. Cameras end at y=992, only 16px above the footer divider at y=1008.
- **Identity:** a complete 136px logo plate and the show name remain in the header. Keep camera space dominant and retain the footer website. Long biographies belong in the separate introduction overlay.
- **Captions:** when speech captions are needed, overlay the audio-aligned word treatment at x=192, y=906, w=1536, h=84 on opaque ink backing over the lower camera area. The camera grid does not reserve an empty strip. Verify that faces and chins remain clear; reposition/recompose for two-line captions. The muted layout demo has no speech captions.
- **Camera crops:** inspect every participant's complete face, hair and chin at the actual crop. Use source-specific `object-position` rather than sharing a vertical center across all people. The small host windows use Matt at 50% 14% and Oscar at 51% 34%; verify movement when substituting footage. Keep the source colors natural.
- **Guest media:** the supplied abstract graphics are explicitly labeled placeholders. Replace them with real guest cameras and accurate accessibility/source metadata before release. They do not depict a real guest or establish participation in Episode 29.
- **Media and timing:** portable components contain editable image slots so the ZIP works without large recordings. For a live episode, replace an image with a muted timed `<video>` using the project's camera asset; keep the panel wrapper untimed. Put the synchronized microphone mix on its own audio track and set clip lengths and source in-points for that passage. The reference project demonstrates this replacement with the original Oscar/Matt camera footage.
- **Motion and switching:** panels settle over 0.36s with a 14px rise and 0.06s stagger. Keep the layout still while people speak. Select solo shots and group views on meaningful speaker turns; an indigo guest border indicates the featured position, not automatic active-speaker detection. Extend the demonstrated 3.5-second slots to the real passage.
- **Review and portability:** inspect all four stills and the live preview for headroom, logo clarity, caption placement and camera-to-divider spacing. Run the workspace checks, then `npm run characters:install` to refresh the ZIP and showcase component library. The pack's stills, graphics and layout sources remain in the vault; local MP4 preview clips are Git-ignored and can be recreated with the reference project's `prepare-media.mjs` after restoring the originals.

## Portrait camera layouts

For 1080×1920 shorts with one or two cameras, use `assets/portrait-camera.css`, `assets/multicam/portrait-layouts.json`, `components/camera-portrait.html`, and `components/multicam-2-portrait.html`. The editable reference is `projects/hitl-portrait-camera-layouts/`; saved previews appear in `frame-showcase.html#portrait-cameras`. This 4 November 2026 revision carries the larger-picture, logo and footer treatment from the landscape conversation layouts into vertical shorts.

- **Solo camera:** x=54, y=432, w=972, h=1344. Keep a compact two-line heading above it, around 72px. Inspect each source-specific crop for full hair, face and chin throughout motion.
- **Two cameras:** stack two 972×756 panels at x=54, y=240 and y=1020, with a 24px gap. Use the compact brand header without a large editorial headline. Each person gets equal picture space; keep persistent names and role bars absent.
- **Brand and footer:** keep the complete 128px logo at x=60,y=60 beside the show name and VallySeed byline. Pictures end at y=1776, 16px above the footer divider at y=1792. Center `podcast.vallyseed.com` below it at 32px. These are supporting identifiers; speech captions retain the established caption band. Record a raised footer if a verified delivery platform's controls require it.
- **Caption overlay:** retain x=108,w=816,bottom=160,72px and two lines maximum. Overlay it on the lower picture area, clear of faces, rather than reserving a blank lower strip. Camera space remains dominant even during pauses when captions disappear.
- **Editorial purpose:** use both cameras when an exchange or reaction adds information. For a simple excerpt handoff, carry the preceding useful visual to the speaker change and cut directly. Remove a redundant visual scene without deleting the recorded speech or pauses; record any audio cut separately when authorized.
- **Review:** inspect solo and duo layouts at phone size, the first and last picture in every changed shot, and the speaker-change seam. The complete logo, footer line and website must be visible; heading, caption and face must remain separate. Use the existing portrait caption verifier and Hyperframes checks.

## Host introductions over live footage

Use `components/host-intro-oscar.html` and `components/host-intro-matt.html` for name-and-biography overlays during spoken introductions. Their transparent scene roots keep the camera footage visible. They supplement the illustrated **Host intro** frame; select the treatment that matches the brief. `projects/hitl-host-introductions/` is the editable 16:9 reference, with Oscar followed by Matt over muted preview footage.

- **Copy:** Oscar Gallo / Software engineer / At the intersection of business and engineering. Oscar approved this wording on 1 November 2026; it takes precedence over earlier episode planning copy. Matt Wozniak / Serial builder · Relentless executor / What works. What doesn’t. Matt’s wording is condensed from his Episode 29 introduction at 00:00:46. Replace the three fields with the actual speaker’s approved introduction; preserve qualifications and avoid invented credentials.
- **Appearance:** cream panel, ink text and 4px square border, indigo 12px accent rule and role line, one 8px hard ink shadow. Archivo Black 52px name, Space Mono 28px role, Space Grotesk 32px biography. The scene root stays transparent; backgrounds, video and captions belong on separate tracks.
- **Landscape geometry:** at 1920×1080, card size 680×236 at y=602, with the shadow ending at y=846. Oscar defaults to x=108 and Matt to x=1132, based on the demonstrated camera framing. Inspect actual head movement and place the card in the available negative space, clear of the face. Reserve y=870 downward for the caption band; if two-line captions need more room, raise the card or shorten the bio while preserving the meaning. Recompose and verify other aspect ratios rather than stretching this landscape template.
- **Motion:** eight-second reference slot; the panel wipes in from 0.25s, text settles by 0.95s, and the panel exits over 0.30s starting at 7.55s. Keep the text still while reading. For a different slot, adjust the source exit timing to finish just before the host’s `data-duration`, then inspect the result under forward and backward seeks. Keep name, role and biography editable through the supplied variables.
- **Reuse:** a new HITL project receives the components in `compositions/library/`. Mount the chosen component on a graphics track above real host footage, matching its `data-composition-id` (`hitl-intro-oscar` or `hitl-intro-matt`). `source/introduction-sources.json` in the reference records copy provenance and preview media sources. The muted opinion excerpts demonstrate placement; they are not recordings of new introductions.

## Instagram carousels

For podcast-derived carousel image sets, use the illustrated treatment established by Matt’s Episode 29 carousel on 2026-10-30. This format gives readers control over pacing and uses the host’s clean portraits instead of making camera footage the home frame. The reusable vault workflow is `.agents/skills/create-hitl-instagram-carousel/SKILL.md`; `10 Content Engine/Hyperframes/projects/ep29-matt-unpopular-opinion-carousel/` contains the working implementation, copy/source map, and review.

- **Square output:** use 1080×1080 PNGs for a 1:1 brief. Recompose when a different ratio is requested. Export individually numbered images in reading order and an image-only ZIP; the editable Hyperframes timeline is a navigation aid.
- **One idea per slide:** build a cover question, a sequence of concise supporting ideas, and a closing listening/response invitation. Choose the slide count for the passage; the EP29 example’s eight slides are not a fixed template. Keep qualifications that change the argument in the main slide copy.
- **Source-based copy:** attribute opinions to the speaker. Identify paraphrases in the source map and verify direct quotes against transcript spans. A conceptual diagram illustrates an argument; it does not create product evidence or a fabricated conversation.
- **Host illustrations:** select clean catalog portraits of the actual speaker using `CHARACTERS.md`. Thinking supports reflection, explaining a distinction, skeptical a stated challenge, worried a stated risk, and neutral an invitation. Keep the complete face and shoulders contained beside the text. Select an expression for the meaning rather than alternating reactions mechanically.
- **Square geometry:** begin with 72px left/right margins, headlines around 82–108px, explanations 38–42px, and supporting readable text at least 28px. In the reference, the footer rule sits around y=971 and artwork ends by y=968. Adjust to the copy while keeping clear separation among text, portrait, complete logo, and footer. Preserve the pack’s paper/ink/indigo palette, type roles, square borders, and controlled hard shadow.
- **Carousel emphasis:** use static indigo highlights for selected words or ideas. Spoken-word caption timing belongs to videos with audio; carousel text remains settled for reading. The complete supplied logo appears on the cover and closing slide, with breathing space from the heading and CTA.
- **Verify both paths:** inspect every PNG at phone size, load local fonts and images before capture, and check actual dimensions, clipping, collisions, logo/portrait containment, and file order. Compare the editable Hyperframes snapshots with the exported PNGs, including inline highlighted quotes. Retain a hash receipt for the project images, episode copies, and ZIP entries.

## Brand decisions and provenance

Recorded from the podcast website before its adoption of this pack on 2026-10-28:

- Light surface `#FAF7F2`, primary text `#1A1515`, and link/accent indigo `#5059FF`.
- Space Mono 700 for the website's display/headings and technical labels; Space Grotesk 400 for body copy.
- A complete engraved human-and-loop emblem and the show identity Human in the Loop / By VallySeed.

The style pack adds these rules for video and the podcast website:

- Archivo Black 400 as the Creative Mode display face. It is the display face for the pack and the aligned podcast website. Use Space Mono 700 for an exact brand wordmark or quieter identity treatment.
- Stronger borders, one hard offset shadow, and the supporting tint `#E9E6F3`.
- Film-scale type, semantic diagrams, and separate portrait/square compositions.

The supplied high-resolution logo is copied unchanged from the vault's `10 Content Engine/Human in the Loop/Brand/hitl-logo-vallyseed-shorts.png`. Its raster colors and paper texture are part of the original artwork, not new flat-color tokens. The small VallySeed mark on the shorts remains intact.

`BRAND-ANALYSIS.md` records the comparison of all twelve upstream packs and source references. `assets/SOURCES.json` records font/logo sources and checksums.

This pack is the visual source of truth for Hyperframes content and the Human in the Loop website. Full-episode Descript editing continues to follow the show's Descript Editing Guidelines and its selected Helsinki blueberry layouts.

## Palette and surfaces

Use paper for explanation, ink for an opinion or a pause, and indigo for a clear emphasis or segment change. Indigo is the single chromatic accent. Tint and muted text are supporting tonal values.

Pairings:

| Surface | Main text | Emphasis |
| --- | --- | --- |
| Paper or tint | Ink | Indigo |
| Ink | Paper | Indigo block with paper text |
| Indigo | Paper | Paper block with ink text |

Use the supplied logo's own cream plate. Place the complete plate on paper, or contain it inside a square light inset on ink/indigo. Keep at least 8% breathing space around the emblem's visible artwork. The image is never a texture, background crop, outline tracing, or substitute watermark.

Flat color carries depth. A square rule or one hard offset shadow supplies separation. Keep photographic footage in its natural palette; apply any footage grade through Hyperframes media treatment rather than CSS filters. Color alone never expresses a verdict: add a written label or a clear structural change.

## Type and hierarchy

Archivo Black is a single weight: **400**. Its heavy appearance comes from the face, not synthetic bold. Set hero headlines uppercase with `line-height: 0.96` and `letter-spacing: -0.035em`. Use two or three short lines, one dominant phrase, and generous surrounding paper.

Space Mono 700 carries the show identity, episode/segment labels, and technical taxonomy. Space Mono 400 carries source lines and secondary metadata. Use Space Grotesk for explanations, bylines, and captions; sentence case improves reading at small sizes.

At 1920x1080, begin at 176px for a short cover title, 120px for an explainer heading, 40px for reading text, and 72px for captions. The treatment can adjust scale to actual copy. Wrap or edit long titles before decreasing critical body below 36px. Source metadata can be 24px when it is supporting information, never the sole place a caveat appears.

At 1080x1920, recompose: short display at approximately 88–185px and critical body at least 42px. Use 8–12% horizontal margins and keep main graphics out of the top 12%, bottom 16%, and rightmost 12%. Spoken captions use the separate bottom-band geometry in **Caption emphasis** below, as requested on 2026-10-28. Check the actual destination's player controls before publishing and raise the complete caption band only when needed to clear them.

A rule of `0.3125cqw` is 6px at 1920 width; `0.8333cqw` is approximately 16px. Scale from these explicit values. The upstream Creative Mode prose and its `cqw` examples contain differing pixel equivalents; this pack's stated conversion is authoritative here.

## Composition grammar

1. Give each frame one primary message. A squint should reveal a single headline, diagram, quote, or comparison.
2. Keep sparse editorial frames roughly 40–60% open. Camera layouts prioritize picture area and follow their measured geometry; a dense ledger allows no more than two compared ideas per frame.
3. Spend the hard shadow once, on the human decision node, cover plate, or featured takeaway. Other panels remain flat.
4. Set the grid before the decoration. Structural lines represent grouping or sequence; ornamental marks have a small, fixed role.
5. Keep body copy left aligned. A short closing CTA or caption may be centered.
6. Use the complete logo on the cover and closing card. A text label can carry the identity on information frames so diagrams have room.
7. Real statistics, charts, quotations, and verdicts come from the script and cited source. Layout counters and diagram step numbers are navigational, not evidence.

## The eight frame treatments

### 01 — Episode cover

Paper ground. Archivo Black headline on the left with `THE LOOP` or one key phrase in indigo. Complete logo plate on the right. A Space Mono show/episode label sits at the top; host names or a short episode descriptor sit beneath the headline.

In portrait, put the title above the complete logo and the host/episode line below it. Keep the logo square. A square cover gives the title the upper half and splits the lower half between byline and logo.

### 02 — Signal or Noise

Indigo ground and paper headline. The question is the focal point. A four-part editorial rail can track claim, source, context, and judgment. Replace that rail when the story needs a different explanation; it is not an assertion that every editorial process follows those steps.

For a verdict, use an explicit text label grounded in the discussion. The screenshot's unselected/selected rail is a visual demonstration, not a verdict about a news item. Reflow to a two-by-two rail in portrait.

### 03 — Explain the mechanism

Paper ground, short question above a three-node diagram. Ink rules and arrows carry the relationship; the human check/decision point gets the indigo fill and single shadow. Each node has one title and one brief description.

The sample input → agent → human sequence is illustrative. Draw the actual workflow in the source material, including loops or failure paths when relevant. In portrait, stack the nodes vertically and change the connectors to match.

### 04 — Make the comparison

A short statement above a two-column ledger. Give both columns the same area. An indigo heading/tint body identifies the emphasized comparison; it does not establish that the column is better. State the basis for the contrast in the script.

Keep a pair to one clear dimension. In portrait, stack the two rows; never create a horizontally scrolling video table.

### 05 — Give the opinion room

Ink ground, paper quote, one small indigo rule. Attribution is a separate readable Space Mono line. One viewpoint fills the frame.

The showcase uses the verified excerpt “A polished demo does not prove value.” attributed to Matt Wozniak in the Episode 27 section of the podcast website. For a new quote, verify wording, attribution, and the source/timestamp before using quotation marks. A paraphrase is labeled as a summary and does not become a fabricated direct quote.

### 06 — Stack Check

Large segment title beside one indigo workbench card. Its three rows can hold the job, what was tested, and the host's conclusion. Replace sample prompts with the actual content; a tool logo or screenshot can accompany the comparison when sourced.

In portrait/square, place the card beneath the heading. Keep the takeaway readable without requiring the viewer to inspect tiny UI text.

### 07 — Caption emphasis

**HITL speech default, updated by Oscar on 2026-10-28:** bottom-anchored karaoke captions, with exactly the currently spoken word highlighted. The reference reads “Keep the **human** in the conversation,” with only “human” on an indigo rectangle.

- Use Space Grotesk 700, sentence case, paper `#FAF7F2` text on a stable ink `#1A1515` backing. The active word keeps paper text and gains an indigo `#5059FF` square background; inactive words have transparent backgrounds over the ink plate. Reserve the same padding for every word so the highlight does not move or reflow the line.
- At **1080 × 1920**, start at **72px**, `line-height: 1.2`, with a fixed caption band **160px above the bottom edge**. Keep it horizontally centered in `left:108px; width:816px`, above the bottom margin rather than in the middle of the film. The plate grows upward to two lines maximum, with 12px vertical and 20px horizontal padding. Group approximately 3–5 words; split a long group instead of reducing below 64px. Center the caption text. A platform-specific delivery may raise the whole band to clear verified UI controls; record that offset.
- At **1920 × 1080**, use a bottom offset of approximately 86–108px and the same one-word treatment, scaled to the landscape layout. Square videos also use a fixed lower caption band. Scene changes must not make captions jump between positions.
- Align **each word to the recorded audio** and save its stable ID, text, start, end, alignment method, and any corrections. Native word timestamps, forced alignment, or acoustic token alignment can supply timing. SRT/VTT paragraph windows alone do not establish word timing: obtain or align words before building karaoke. Preserve the downloaded transcript separately and review ASR substitutions against it and the recording.
- Show one short group at a time. The highlight is active only during that word’s interval; clear it over meaningful pauses, reset it at group changes, and end the group after its last word’s reading hold. Match words by ordered occurrence so repeated words receive their own timings. Use a seekable paused timeline and predeclared word spans.
- Verify every word is accounted for, timing intervals are positive and ordered, only one word is active, groups fit two lines, the bottom offset is constant, faces are unobscured, and the first/final spoken words remain in sync. Inspect snapshots immediately before and after several word changes, including repeated words, fast speech, pauses, scene boundaries, and the final sentence. A static showcase demonstrates appearance only; it does not prove synchronization.

Use the pack’s `components/word-captions.html` as the editable visual/timing pattern and replace its illustrative words/times with the real alignment. The original recording is the clock; these caption rules do not authorize cutting pauses or changing speech speed.

### 08 — Close the loop

Complete logo, `STAY IN THE LOOP`, a single short invitation, and `podcast.vallyseed.com`. Keep the exact lowercase `vallyseed.com` as the partner/site credit on branded opening/closing plates. The website remains its own text element, separate from the logo.

For portrait closing cards, keep a visibly separate lower logo/website group beneath the show title, per Oscar’s 2026-10-28 direction. At 1080 × 1920, leave at least 180px of clear vertical space between the title’s bottom and the logo’s top; the EP 29 pattern uses a 420px square logo at y=780 and the separate website at y=1270. Preserve that breathing room when recomposing other ratios.

For a landscape explainer, the logo and message sit side by side. Stack them in portrait/square. Move the closing credit ribbon inside the destination's platform-safe area. Suggested final hold: three seconds after the closing elements have settled.

## Line animation budget and spring motion

**Hard rule — approved by Oscar on 4 November 2026: at most 3 line-animation sequences in the entire delivered video.** This is a ceiling, not a quota, and does not increase with duration, scene count, speaker changes or chapters. Use fewer when the content does not need them.

- Count each continuous drawn-line thought connection, animated connector, underline or trail as one sequence, including its staged text reveals. A continuous chain connecting several labels is one sequence. Restarting or replaying the treatment counts again; changing its color, shape, name or scene does not create a separate allowance. Static borders, static diagram connectors and static footer rules do not consume the budget.
- Select the strongest spoken connections in the storyboard before building. Record every sequence's start/end, source-word anchors and purpose, then total them across the whole video. Spread them across distinct ideas; do not add this treatment to every host shot or caption group. A long camera hold is a prompt to review the edit, not a requirement to add a line or a visual change every five seconds. Use meaningful camera emphasis, other purposeful explanations or a calm hold where appropriate.
- **Spring motion is the required default for authored movement:** position, scale, camera reframes, masks and line growth use deterministic damped springs. Use roughly 0.7–0.85 damping for a restrained arrival and critical damping (1.0) for monotonic line growth, tip travel and edge-safe pullbacks. Opacity/color changes stay bounded and never bounce; cuts and caption-word highlight switches can remain instantaneous. Avoid looping decoration and keep settled reading text still.
- Lines visibly grow through smooth curves. A moving point, when used, follows the growing tip with the same spring progress. Keep joins tangent-continuous and strokes free of integer snapping; the verified SVG implementation uses `pathLength="1000"`, a 1000→0 dash offset and `autoRound:false`. Check intermediate frames, not just the before/after states. Keep all callouts clear of faces and the caption band.
- **Review gate:** tag each timed treatment wrapper `data-motion-treatment="line-animation"`, verify the total across all mounted scene instances with the workspace’s `scripts/verify-hitl-motion-budget.mjs` (also bundled as `tools/verify-hitl-motion-budget.mjs` for portable use), and record a count of 0–3 in `REVIEW.md` and the delivery receipt. Replayed scene instances count again. The checker counts declared treatments; visual review must also catch untagged or disguised repeats. A fourth use fails review and must be removed. Verify spring growth and forward/backward seeks on the retained sequences.

`assets/motion-policy.json` carries the portable numeric limit and spring requirements. This section supersedes older easing or repetition guidance in copied project briefs and reference examples. Existing videos adopt it when their motion is revised; this rule does not authorize unrelated timeline or dialogue edits.

## Motion guidance

These are production defaults for a future animation, not a claim that this static pack is animated:

- Headline or panel entrances: begin around 0.35–0.65 seconds and 16–32px travel at 1080p with a damped spring; tune to the spoken beat and verify the settle. Use a clear cut when the editorial beat calls for it.
- At most a 0.06-second stagger between meaningful diagram steps. Highlight the human decision after the system step, with a short hold for reading.
- Keep the logo's artwork intact. Fade/translate its whole plate; the loop and human are never animated as separately invented parts.
- Keep settled text stationary. Add music/voice/sound when the video brief calls for them, following the source and the Hyperframes media skill.
- The first frame already contains a useful title or image. Hold long enough for the actual copy to be read. No endless looping decoration.
- Build one paused seekable timeline per scene and register it on `window.__timelines`. Timed elements, audio, and paths follow the installed Hyperframes contract.

## Host characters and expressions

The character module integrates Oscar and Matt from the vault's Character Library. It contains **42 individually regenerated expression PNGs**, 21 per host: 15 front-facing emotions and six three-quarter-right variants. The user chose regenerated clean cutouts instead of lossless sheet crops. Original sheets remain unchanged.

Read [CHARACTERS.md](CHARACTERS.md) for the complete expression-to-situation guide, placement rules, and PNG index. [characters.html](characters.html) is the browsable gallery, with host, expression, view, and background controls. `assets/characters/catalog.json` maps stable IDs such as `oscar.front.skeptical` to actual local files and their use cases.

For **illustrated Oscar reflective opinion/explainer scenes**, use `assets/characters/expressions/oscar/front/thinking.png` by default, per his 2026-10-28 preference. It is an illustrative thinking pose, not a measured emotion label on the live recording. Keep another expression when the user’s brief or the specific scene calls for it. Neutral/listening remains suitable for speaker identification and ordinary listening; explaining for a teaching step; thinking/confused for an open question; skeptical for checking a claim; and stronger reactions only when supported by the source. Keep the complete head, glasses, beard, and shoulders clear of headlines and the bottom caption band. Full guidance lives in `CHARACTERS.md`.

The module also includes 36 original full-body pose references, copied unchanged and labeled as source drafts. Matt's marker/computer assets are flagged for cleanup. Starter scene components use reviewed presenter poses or the regenerated expressions; they do not promote the experimental mouth or rig atlases into an animation system.

Keep each complete portrait inside a fixed square image box with `object-fit: contain`. Three-quarter-right portraits face viewer-right: put them left of the diagram they address. Use a front view on the right instead of silently mirroring the artwork. Expressions are whole-image states, not a mouth rig. Clear the old portrait briefly and settle the new one; reset unrelated reactions to a listening pose, while retaining Oscar’s thinking pose through a reflective opinion/explainer beat. Predeclare image elements so seeking remains deterministic.

New projects created with `hitl-style-pack` receive the character files with the pack assets and portable starter scenes in `compositions/library/`. The main Frames gallery starts with six character examples: a two-host introduction, Oscar checking a claim, Matt guiding an explanation, a two-host discussion prompt, an Unpopular Opinions segment opener, and a sourced Matt opinion card. Each is recomposed for landscape, portrait, and square in `assets/character-frames.css`. The editable Hyperframes timeline also includes four character examples after the original eight design frames.

## Website adaptation

The podcast homepage, episode pages, navigation, and `/frame-specs` library follow this pack. When an older website treatment differs, use the pack's direction.

- Use Archivo Black 400 for short display headings: uppercase, tight tracking, and a line height near 0.96. Scale it to the responsive viewport rather than using the film's fixed pixel sizes.
- Use Space Mono 700 for identity, labels, metadata, and controls. Use Space Grotesk for explanations and longer reading text. A long opinion quotation remains readable sentence-case body text, with separate attribution.
- Use paper, ink, indigo, and tint from the pack. Give opinion blocks an ink ground and paper text; a square indigo author label provides the accent.
- Use square cards, tags, menus, and buttons, with ink borders. Reserve a hard offset shadow for the featured action; keep supporting cards flat.
- Preserve the complete supplied logo with `object-fit: contain`. The host character portraits use their original transparent padding, without circular crops.
- Keep navigation, podcast platform links, episode content, and source attribution functional. Reflow layouts for small screens and respect reduced motion.

The website keeps a checked-in copy of this pack. Its `sync:frame-specs` command copies the package and generates scoped preview CSS, native page data, and shared podcast brand tokens. Future visual changes start here and are synced into the site.

## Install and use

From the shared Hyperframes workspace:

```bash
npm run new -- <video-slug> hitl-style-pack
```

The project helper copies this `FRAME.md` and the pack's `assets/` into the new video's assets. Include `assets/hitl-style.css` for the supplied local fonts/tokens. Implement the chosen scene treatment in the video's `index.html` and `compositions/`; the blank starter is not automatically restyled.

Manual use: copy this file to the project root, copy `assets/` alongside the project's existing assets, and read this specification before composing. Keep `frame-showcase.html`, `README.html`, and `BRAND-ANALYSIS.md` outside the rendered composition. Read the bundled font licenses before redistributing those files.

## Review before delivery

- Match the chosen treatment, preserve the exact colors/type roles, and keep the complete logo visible.
- Verify sources for every quote, number, comparison, and host verdict. Put material limitations in the content, not solely in tiny footer text.
- Inspect the beginning, middle, and end of every scene at phone scale and in the requested aspect ratio. Check the actual platform UI safe areas.
- Run the video's full Hyperframes check, inspect snapshots, and verify the exported video when a render is requested.
- Treat this pack as a creative proposal for review. A future revision can tune the display voice while keeping the measured brand assets intact.