# Motion graphics brand system

When to use it: Drop it into a Remotion project, a Claude Code folder or an After Effects MCP session so every title, lower third and transition shares the same type, color, easing and timing.

Works with: [Remotion Agent Skills (official)](https://agentcut.dev/tools/remotion-agent-skills-official/), [After Effects MCP (Engine Room)](https://agentcut.dev/tools/after-effects-mcp-engine-room/), [AE MCP Bridge](https://agentcut.dev/tools/ae-mcp-bridge/), [HyperFrames (HeyGen)](https://agentcut.dev/tools/hyperframes-heygen/), [Motion Graphics Skill Pack](https://agentcut.dev/tools/motion-graphics-skills-charlie947/)

Save as: brand/DESIGN.md

Download: https://agentcut.dev/prompts/md/ds-motion-brand.md

~~~~markdown
# DESIGN.md: Motion graphics brand system

Read this before creating any graphic, title, caption or transition. Fill in the brackets once, then never improvise outside these rules.

## 0. Dials
| Dial | Value | Meaning |
|---|---|---|
| Energy | [4] | 1 calm documentary, 5 clean YouTube, 10 hype trailer |
| Density | [3] | 1 one idea on screen, 10 dashboard |
| Motion | [5] | 1 cuts and fades only, 10 everything animates |

## 1. Canvas
- Masters: 1920x1080 (16:9) and 1080x1920 (9:16), [30] fps. Never mix frame rates in one project.
- Graphics safe area: keep text inside the central 90% of width and height (5% margin each side, following EBU R 95 graphics safe). Action safe: 93%.
- 9:16 extra rule: no text in the bottom 20% or the right 12% (app buttons and captions sit there).
- Grid: 12 columns, gutter 24 px at 1920 wide. Left align titles to column 1 by default.

## 2. Color
| Role | Token | Hex |
|---|---|---|
| Background dark | bg-dark | [#111111] |
| Background light | bg-light | [#F5F3EE] |
| Text on dark | ink-on-dark | [#F5F3EE] |
| Text on light | ink-on-light | [#141413] |
| Accent | accent | [#E5484D] |
| Muted | muted | [#8A877F] |
- One accent per frame. Accent marks the single most important word, number or shape.
- Text contrast at least 4.5:1 against what is behind it. Over footage, add a 25% black shadow or a box.
- No neon gradients, no rainbow palettes.

## 3. Type
- Display: [typeface], weight 700, tracking -2%, line height 1.0.
- Text: [typeface], weight 400 to 500, tracking 0, line height 1.25.
- Scale at 1080 tall (multiply by 1.0 for 9:16 width 1080):
| Token | px | Use |
|---|---|---|
| t-hero | 120 | One word or short title |
| t-title | 72 | Section titles |
| t-sub | 44 | Subtitles, lower third name |
| t-body | 32 | Lower third role, labels |
| t-small | 24 | Credits, sources. Never smaller |
- Max 7 words per line on screen. Max 2 lines per graphic.

## 4. Easing
| Token | Use | CSS / Remotion | After Effects |
|---|---|---|---|
| ease-out | Anything entering | cubic-bezier(0.16, 1, 0.3, 1) | outgoing influence 0%, incoming 85% |
| ease-in | Anything leaving | cubic-bezier(0.7, 0, 0.84, 0) | outgoing 85%, incoming 0% |
| ease-in-out | Moves on screen | cubic-bezier(0.65, 0, 0.35, 1) | 60% / 60% |
| spring | Playful pops (Energy 6+) | spring({damping: 200}) for no bounce, damping 12 for a small bounce | Overshoot expression, max 4% |
- Never linear for position or scale. Linear is only for constant drifts and tickers.

## 5. Durations (frames at 30 fps)
| Token | Frames | Use |
|---|---|---|
| d-xs | 6 | Pops, small UI |
| d-s | 10 | Text entrances, wipes |
| d-m | 15 | Panels, lower thirds in |
| d-l | 24 | Big title moves, transitions |
| d-hold-min | 45 | Minimum time any text stays fully visible |
- Exits are about 30% faster than entrances.
- Stagger related items by 3 to 4 frames.
- Reading time: hold text at least 0.3 s per word, never under 1.5 s.

## 6. Components
- Title card: t-hero or t-title, centered or column 1, accent underline optional.
- Lower third: name t-sub, role t-body at 70% opacity, 4 px accent bar, bottom left inside safe area.
- Caption: see the AgentCut caption system.
- Transition: hard cut first. Allowed extras: 10 frame wipe in accent color, 15 frame crossfade for time jumps.

## 7. Never
- Drop shadows heavier than 30% opacity, bevels, lens flares, 3D extrusions.
- More than two typefaces.
- Text touching the frame edge.
- Animating every element at once.
~~~~

Sources and credit:

* [EBU R 95, Safe areas for 16:9 production](https://tech.ebu.ch/publications/r095): Action safe and graphics safe percentages

---
AgentCut: https://agentcut.dev/ · All tools as JSON: https://agentcut.dev/tools.json · Overview for agents: https://agentcut.dev/llms.txt