Narrated walkthrough

Where it is used

How an AI agent uses this page

Read /design/v/001/tokens.json first. It has every number on this page. Use those values, not close guesses, so episodes match. To brief another AI, paste style.md and add the new request at the end. The checklist is at For AI agents.

This page is the standard for walkthrough videos. DESIGN_DNA.md still wins on brand marks such as the shield and the wordmark. If a skill or an older note disagrees on anything video, follow this page and report the difference.

Reference episode

The first video in this style. Watch it before you make the next one. Everything on this page comes from it.

The frame

Every demo frame has the same four zones. The window never moves. The camera zooms inside it.

Colors

Navy stage, light app, gold for what to look at. The app colors match the app at the time of recording.

Stage

App and highlights

Typography

DM Sans for everything working. Source Serif 4 for the closing lines and the tagline. Sizes are at 1080p; samples are shown at 60%.

Labels on the stage are 19 px. The tagline is Source Serif 4 600 at 52 px. The end address is DM Sans 500 at 30 px.

Interface

Rebuild the app faithfully, with its real menu and labels at the time of recording. These are the parts the reference episode used, at app size.

The reference episode's menu was Chat, Inbox, Find Work, Grants, Get Certified, then Rooms, Your codes and Following. If the app's menu has changed, use the app's current menu.

Overlays and captions

Everything on the stage outside the window. Shown at 60%.

Motion

Someone is using the product. Every click shows its result before the next line starts.

Voice and music

Say it right

Words

Speak to one person. Short sentences. A verb first when something happens on screen. Each feature is one useful action, then its benefit.

• Narrate about half the runtime. Let the demo breathe between lines.
• No hype, jargon, exclamation marks, em dashes or technical architecture.
• Close with three short parallel lines: "Understand the opportunity. Ask your people. Keep the conversation moving."
• Name the matching AI Match-M8 and the room host FedM8 AI. The post button says Post.

Scenes and pacing

Open on the problem in the real world, then the app. One feature per scene. Close on a phone and three lines.

1. Each scene runs 18 to 23 seconds.
2. Write each scene as: title and time, on-screen actions step by step, 1 to 4 short narration sentences with the word each action lands on, an optional Why it helps line, and the labels shown.
3. Open: scattered tabs, notes and messages, then the FedM8 wordmark, then the app.
4. Close: the desktop shrinks into a phone, three closing lines appear one per spoken line, then the end card for 6 seconds and a fade.
5. End card: "FedM8", "Federal work. Connected people.", "fedm8.com".

Honesty

The people watching are making real decisions about federal work. A polished demo must not mislead them.

Sample cast

Reuse these so the series feels connected. They are made up and always labeled.

Build it

The skill holds a toolkit that renders the finished MP4. Every frame is drawn from a timeline, so text stays sharp and frames render in parallel.

1. Write the narration, one sentence per line.
2. Make the voice clips and check every word.
3. Build the scenes in the app recreation and time them to the clips.
4. Look at preview stills before rendering everything.
5. Render, mix the music under the voice, master to -16 LUFS.
6. Export SRT and VTT captions and a shot list.

• Download the skill
• tokens.json
• style.md

For AI agents

If you write, storyboard or render a FedM8 walkthrough video, follow this list. The values are in /design/v/001/tokens.json. All video styles are in /design/v/catalog.json.

1. Confirm this is the right style: one narrator, the app on a navy stage. If not, pick another style from the video index.
2. Read tokens.json. Use its numbers exactly. Don't invent colors, sizes or timings.
3. Watch or read the reference episode's scene list above. Match its pacing.
4. Write the script first: one sentence per clip, a verb first, one action and one benefit per feature.
5. Put "Upcoming FedM8 update · Preview" on every demo frame of an unreleased feature and the sample label for the whole demo. A released feature gets only the sample label.
6. Use made-up places in samples: Example Base, Example Agency. Show fedm8.com in the address bar and on the end card.
7. Label and source every AI note. Show honest empty states. Keep drafts in error states.
8. No unconfirmed prices, plans, limits or dates. No promise of a win.
9. Voice af_heart at 0.94 with "Fed Mate" and "nakes". Music in D under the voice. Master at -16 LUFS.
10. Deliver the MP4, SRT, VTT and a shot list.

Brief another AI

Copy this, paste it into the other chat, and add your request. The full text is in style.md.

Make a FedM8 walkthrough video (or its script and shot list) in video style 001, Narrated walkthrough.
Read the standard first: https://fedm8.com/design/v/001/style.md
Exact values: https://fedm8.com/design/v/001/tokens.json
Reference episode: https://fedm8.com/design/v/001/media/reference-episode-720p.mp4
Rules: one warm narrator, short sentences, a verb first, one action and one benefit per feature.
Label every preview and sample. Samples use made-up places (Example Base). End card: fedm8.com. Label and source AI notes. No unconfirmed prices, limits or dates. No promise of a win.
Deliver: MP4 1080p30 with burned-in captions, SRT, VTT, and a shot list (time, scene, on screen, narration).

NEW REQUEST:
[topic, features, audience, length, any exact narration]

CSS variables

:root {
  --v1-stage:#0b1626; --v1-stage-glow:#183252; --v1-stage-text:#f2f5f9; --v1-stage-muted:#b9c6d6; --v1-stage-gold:#d6b56c; --v1-stage-line:#3a5070;
  --v1-page:#f5f6f8; --v1-surface:#ffffff; --v1-ink:#182231; --v1-ink-2:#526071; --v1-muted:#626f80; --v1-line:#e4e8ee;
  --v1-navy:#193b5d; --v1-gold:#c4a35a; --v1-gold-ink:#8b6c28; --v1-gold-tint:#f5efe1; --v1-gold-edge:#e8dbbb;
  --v1-blue-tint:#e8edf5; --v1-blue:#1f6fb5; --v1-blue-ink:#183b61;
  --v1-green:#1f7a3a; --v1-green-tint:#e6f3ea; --v1-red:#b42318; --v1-red-tint:#fdecea;
  --v1-ai-ground:#fbf8f0; --v1-ai-edge:#eadfc4; --v1-cursor-edge:#142033;
}

Decisions

Settled on 2026-10-23. Design 001's video summary now matches them.

Comments and questions

Want something changed, or not sure which rule applies? Ask here. A plain question helps the next person too.