# Cutaway — Design Brief
**Working title:** Cutaway *(placeholder codename — to be finalised)*
**Owner:** B2B Better (internal-first, product-ready architecture)
**Surfaces:** macOS desktop app (Tauri) + Web companion (Next.js)
**Theming:** Dark mode default, full Light mode parity, system-aware toggle
**Brand:** B2B Better house brand applied (see §11 for inputs required)
**Version:** v1 design brief — for handoff to Claude Code first-pass UI
---
## 1. Product Summary
Cutaway is an AI-powered post-production tool for two-person (and eventually multi-person) podcasts. It ingests synced multicam footage + multi-track audio, analyses speaker activity, head pose, gaze and conversational energy, then produces a Premiere-ready FCPXML with intelligently placed camera cuts.
It does **not** record. It does **not** replace Premiere. It sits between "raw multicam project" and "polished edit," automating the 80% of cuts that follow predictable editorial rules and giving editors a fast review-and-tweak surface for the remaining 20%.
The tool is being designed for B2B Better's internal agency use first, but with a product-ready architecture so it can later be spun out, licensed, or extended for client self-service.
### Why it exists
Current options (Riverside Magic Editor, Descript multicam, Captions, Opus Clip) either over-cut, under-cut, run server-side without editor control, or only handle social clips. None offer:
- Live re-cutting as the editor adjusts rule sliders
- House-style profiles tuned per show
- Producer collaboration with timestamped comments and social clip marking
- Native Premiere FCPXML export
### Positioning
"The podcast editor's co-pilot. Frame.io-grade collaboration meets Riverside-grade automation, owned by you."
---
## 2. Users & Core Workflows
### Primary user — Editor (desktop)
A working video editor at B2B Better. Lives in Premiere all day. Wants to skip the tedious first cut on multicam podcasts and jump straight to polish. Cares about: cut quality, keyboard speed, trust in the tool's decisions, clean Premiere handoff. Will reject anything that disrupts their NLE muscle memory.
### Secondary user — Producer (web)
Producer/AE who reviews episodes before final delivery. Leaves notes for the editor, identifies social clip moments, picks aspect ratios. Less technical. Cares about: ease of leaving comments, scrubbing video fast, marking moments without thinking about software.
### Tertiary — Agency lead / client (later)
Reviews final cuts, approves. Read-only in v1. Mentioned here only so we don't paint ourselves into a corner.
### Core workflows
**A. Editor — first cut pass (desktop, ~10 min per episode)**
1. Open Cutaway → New Project → drop synced multicam files + multi-track audio
2. Analysis runs in background (15–25 min for a typical episode at 720p proxies)
3. Editor reviews auto-generated timeline, adjusts rule sliders to taste
4. Optional: load a saved Profile ("Show A — punchy") to apply house style
5. Scrub, tweak individual cuts manually where needed
6. Export FCPXML → open in Premiere → continue with normal finishing workflow
**B. Producer — review pass (web, ~20 min per episode)**
1. Open project in browser
2. Scrub through editor's current cut
3. Drop timestamped comments at any point ("Alex's mic muddy 12:00–12:30")
4. Mark social clip candidates: drag in/out, choose aspect ratio, tag platform, add note
5. Submit → editor sees comments and clip queue in desktop
**C. Editor — incorporate producer feedback (desktop, ~5 min)**
1. Comments appear inline on the timeline
2. Social clip queue appears in sidebar
3. Editor resolves comments, finalises clip selections, exports
4. Final export: main FCPXML + social clip MP4s (vertical/square/widescreen as marked)
---
## 3. Information Architecture
### Desktop app (editor)
```
Cutaway
├── Projects (home)
│ ├── Recent projects grid/list
│ ├── New Project button
│ └── Search/filter
├── Project workspace (the main editor)
│ ├── Timeline pane (bottom)
│ ├── Preview pane (top-left, dominant)
│ ├── Camera tile rail (top-right)
│ ├── Rule panel (right sidebar, collapsible)
│ ├── Inspector (left sidebar, contextual, collapsible)
│ └── Top bar (project name, profile selector, export)
├── Profiles
│ ├── Library of saved rule presets
│ └── Editor for creating/tuning
├── Settings
│ ├── Account
│ ├── Theme (dark/light/system)
│ ├── Premiere export preferences
│ ├── Performance (proxy resolution, GPU)
│ └── Team (later)
└── Activity / Analysis queue
└── Background jobs status
```
### Web app (producer)
```
Cutaway Web
├── Projects (home)
│ └── List of projects shared with this producer
├── Project review
│ ├── Preview pane (centre)
│ ├── Timeline (bottom)
│ ├── Comments panel (right)
│ └── Social clip marker panel (right, tabbed with comments)
└── Account
```
The two surfaces share project state via a thin backend. The producer never sees rule sliders or export controls — their surface is purely review-and-mark.
---
## 4. Design Principles
These are non-negotiable. Every screen must honour them.
**1. Editors trust tools they can see inside of.** Every AI decision must be explainable. Hover any cut and you see *why* it was placed there. "Cut to Alex at 04:23 — speaker active 1.2s, head up, energy +14%." No black boxes.
**2. Density is a feature, not a bug.** Editors are power users. They want maximum signal per pixel. We aim closer to Resolve/Linear than Notion. But density without clarity is hostile — use type hierarchy and whitespace to make density legible.
**3. Live response beats deep menus.** Anything that *could* respond live, should. Move a slider → cuts update on the timeline immediately. Click an alternative edit → preview switches in under 200ms. No "apply" buttons where they're avoidable.
**4. Keyboard-first.** Every common action has a shortcut. J/K/L scrub. Space to play. I/O for in/out. , and . to nudge by frame. Cmd+E to export. Editors should be able to drive 90% of the tool without touching the mouse.
**5. Premium without being precious.** This is a tool that gets used 6 hours a day. It should feel polished but never get in the way. No animations longer than 200ms. No decorative elements that don't carry information. No "delight" that costs attention.
**6. Producer surface is friendlier, not dumber.** The web app is for less technical users but should never feel like a stripped-down version. It's its own product — focused, calm, easier to onboard.
---
## 5. Visual Language
### Colour system
Cutaway uses a 2-mode token system. All colours are defined as semantic tokens; never use raw hex in components.
**Tokens (apply in both modes, values differ):**
- `surface.canvas` — app background
- `surface.panel` — panel background
- `surface.elevated` — modal/popover background
- `surface.inset` — timeline track wells, input fields
- `border.subtle` / `border.default` / `border.strong`
- `text.primary` / `text.secondary` / `text.tertiary` / `text.disabled`
- `accent.primary` — B2B Better brand colour, used for active states, primary CTAs, playhead
- `accent.primary.muted` — for backgrounds tinted with brand
- `signal.speaker.a` / `signal.speaker.b` / `signal.speaker.c` — per-speaker colour assignments (timeline waveforms, cut markers, camera tile borders)
- `state.success` / `state.warning` / `state.danger` / `state.info`
**Dark mode reference palette (suggested starting values — designer to tune):**
- `surface.canvas`: #0B0C0E
- `surface.panel`: #14161A
- `surface.elevated`: #1C1F25
- `surface.inset`: #0F1115
- `border.subtle`: #1F2329
- `border.default`: #2A2F36
- `text.primary`: #F2F4F8
- `text.secondary`: #A8B0BC
- `text.tertiary`: #6B7280
- `accent.primary`: *[B2B Better brand colour — see §11]*
- `signal.speaker.a`: #6EE7C7 (mint)
- `signal.speaker.b`: #F5A65B (amber)
**Light mode reference palette:**
- `surface.canvas`: #FBFBFC
- `surface.panel`: #FFFFFF
- `surface.elevated`: #FFFFFF (with subtle shadow)
- `surface.inset`: #F4F5F7
- `border.subtle`: #ECEEF1
- `border.default`: #D9DDE2
- `text.primary`: #0E1116
- `text.secondary`: #4A5260
- `text.tertiary`: #8A93A0
- `signal.speaker.a`: #0FA47F (deeper mint)
- `signal.speaker.b`: #D17716 (deeper amber)
Speaker colours stay perceptually equivalent across modes. The brand accent must be tested for legibility in both.
### Typography
**Primary typeface:** *B2B Better house typeface if available; otherwise default to Inter for UI and JetBrains Mono for timecode/numerical readouts.*
**Type scale (px, 1.25 ratio):**
- `display`: 32 / 40, semibold — used sparingly, e.g. empty states
- `h1`: 24 / 32, semibold — page titles
- `h2`: 20 / 28, semibold — section headers
- `h3`: 16 / 24, semibold — panel titles
- `body`: 14 / 20, regular — default
- `body-sm`: 13 / 18, regular — secondary info, table cells
- `caption`: 12 / 16, regular — metadata, helper text
- `micro`: 11 / 14, medium uppercase, tracked — labels above controls
- `mono-tc`: 13 / 18, mono — timecodes, frame counts, numerical values
### Spacing & layout
8px base unit. Allowed spacing values: 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64.
Panels separated by 1px `border.default`. No drop shadows in dark mode except on elevated popovers/modals. Light mode uses subtle shadows (`0 1px 2px rgba(0,0,0,0.05)`, `0 4px 16px rgba(0,0,0,0.08)`).
Corner radius: 4px (small controls), 6px (buttons, inputs), 8px (panels/cards), 12px (modals).
### Motion
- Hover transitions: 120ms ease-out
- Panel open/close: 180ms cubic-bezier(0.4, 0, 0.2, 1)
- Cut marker drag: no transition (must feel direct)
- Slider → timeline re-cut: target <100ms perceived; cuts fade in/out at 80ms
### Iconography
24×24 grid, 1.5px stroke, rounded caps and joins. Use Lucide as the base set; custom icons for: multicam camera, speaker waveform, cut marker, aspect-ratio frames (9:16, 1:1, 16:9), split-screen.
---
## 6. Desktop App — Screen Specifications
### 6.1 Projects (home)
**Purpose:** Land here on app launch. Pick up an existing project or start a new one.
**Layout:**
- Left sidebar (240px): Cutaway logo at top, primary nav (Projects, Profiles, Settings, Activity), team avatar at bottom.
- Main area: Top bar with "Projects" title, search field (right-aligned), New Project CTA (primary button, right).
- Below: Tabs (Recent / All / Shared with me) → grid of project cards (3 or 4 columns depending on width).
**Project card:**
- Thumbnail (auto-generated from first frame of camera 1)
- Project title
- Last edited timestamp + status pill (Analyzing / Ready / Exported / Has Comments)
- Hover reveals: Open, Duplicate, Archive, Reveal in Finder
- Right-click for context menu
**Empty state:** Friendly illustration (line-art camera + waveform), "Start your first project" CTA, 3 quick tips below.
### 6.2 New Project flow (modal, 3 steps)
**Step 1 — Sources.** Drag-drop zones for: video files (one per camera angle, accepts MP4/MOV/MXF), audio files (one per speaker, accepts WAV/AIF, optional if audio is on video). Auto-detects camera and speaker count; user can rename ("Host cam," "Guest cam," "Wide").
**Step 2 — Sync.** Show detected sync offsets per source. Visual confirmation: waveforms aligned. User can nudge if auto-sync looks off. Big "Looks good" button.
**Step 3 — Profile & options.** Pick a starting profile from dropdown (or "Default — Balanced"). Choose proxy resolution (480p / 720p / 1080p — default 720p). Toggle "Generate social clips on export" (off by default). Toggle "Allow producer access" (creates a web link). Start Analysis button.
After clicking Start: modal closes, project workspace opens with timeline empty and a top-banner showing "Analysing — ~18 min remaining" with progress.
### 6.3 Project workspace (the main editor) — **the hero screen**
This is the screen Claude Code should build first and best. Spec is exhaustive.
**Top bar (height 48px):**
- Left: Back arrow → Projects. Project title (editable on click).
- Centre: Profile selector pill ("Show A — Punchy ▾"). Click opens a popover with profile list and "Save current as new profile."
- Right: Producer share button (icon, shows badge dot if there are unresolved comments). Export button (primary, opens export modal). Settings icon.
**Main grid below top bar (fills viewport):**
```
┌────────────┬──────────────────────────────────┬────────────┐
│ │ │ │
│ │ PREVIEW PANE │ RULES │
│ INSPECTOR │ (16:9 video) │ PANEL │
│ (240px, │ │ (320px, │
│ collapsi- │ │ collapsi- │
│ ble) │ │ ble) │
│ ├──────────────────────────────────┤ │
│ │ CAMERA TILE RAIL │ │
│ │ (horizontal, 96px high) │ │
├────────────┴──────────────────────────────────┴────────────┤
│ │
│ TIMELINE PANE (resizable, 240–400px) │
│ │
└────────────────────────────────────────────────────────────┘
```
**Preview pane:**
- 16:9 video, centred, with subtle border.
- Below the video: transport controls (skip back 10s / step back / play-pause / step forward / skip forward 10s), large timecode display (mono, mode `mono-tc`), playback speed selector.
- Top-right corner of video: "Live edit" indicator pill (green dot + label) showing what camera is currently visible at the playhead, and *why*: e.g., "Cam 1 — Alex speaking, head up."
- Top-left corner: "Compare" toggle button → splits the preview into 2 sub-views (current edit vs. alternative edit).
**Camera tile rail:**
- Horizontal strip below preview, 96px tall.
- Each camera angle is a live thumbnail playing in sync with the playhead, labelled (e.g. "Cam 1 — Alex" / "Cam 2 — Sam" / "Wide").
- The currently active camera at the playhead is outlined in `accent.primary`. Inactive cameras dimmed to 60%.
- Click any tile to manually override the cut at the current playhead position (creates a manual cut marker).
- Right-click a tile to "Lock this camera from [in] to [out]."
**Timeline pane (the most important component):**
Vertical structure, top-to-bottom:
1. **Ruler** (16px tall) — timecode markers, minor/major ticks. Playhead line extends down through all tracks.
2. **Cut track** (24px tall) — colored blocks, one per shot, color = active camera's `signal.speaker.*` colour. Block label shows camera name. Block edges are draggable to adjust cut timing. Tiny "lock" icon on manually-locked shots.
3. **Speaker waveform stack** (48px per speaker, 2–4 speakers) — one row per audio track. Waveform rendered in that speaker's signal colour. Background tinted darker when speaker is detected active.
4. **Energy track** (24px) — single normalised waveform showing combined conversational energy (RMS over a 500ms window). Useful for spotting laugh moments and intensity peaks.
5. **Annotations track** (24px) — comment pins from producer, social clip marker pills (with aspect-ratio badges).
**Timeline interactions:**
- Scroll horizontally to scrub time. Pinch / Cmd+scroll to zoom (zoom levels: 30s view, 2min, 10min, full episode).
- Drag the playhead anywhere.
- J/K/L to scrub (J reverse, K pause, L forward; double-tap for 2x, triple for 4x).
- Click cut block to select; drag its edges to retime; press Delete to remove the cut (the adjacent shot extends).
- Cmd+click anywhere on cut track to insert a manual cut at that timecode.
- Hover a cut → tooltip with the "why" explanation and confidence score.
- Right-click timeline → context menu (Insert cut here, Mark social clip from here, Drop comment here, Zoom to fit).
**Inspector (left sidebar, contextual):**
What it shows depends on what's selected:
- **Nothing selected** → episode overview: duration, speaker talk-time pie, energy heatmap, suggested social clip moments (rank-sorted), analysis stats.
- **A cut selected** → why this cut was made (rule that triggered, signal values, confidence), manual override controls, "Lock this cut" toggle, "Suggest alternatives" button (shows 3 alternative cut points within ±2s).
- **A comment pin selected** → comment thread, author, timecode, "Mark resolved" button, "Jump to next unresolved."
- **A social clip marker selected** → in/out timecodes, aspect ratio chips (9:16, 1:1, 16:9, custom), platform tag, caption style preview, "Preview clip" button.
**Rules panel (right sidebar):**
The signature feature. Sliders and toggles that re-cut the timeline in real time. Grouped into collapsible sections:
- **Pacing**
- *Minimum shot duration* (slider, 1–10s, default 3s)
- *Maximum shot duration* (slider, 5–60s, default 20s)
- *Cooldown between cuts* (slider, 0–5s, default 1.5s)
- *Cut pace* (slider with semantic labels: Cinematic ←→ Punchy)
- **Speaker logic**
- *Speaker confidence threshold* (slider, 0–100%, default 70%)
- *Cut to non-speaker for reactions* (toggle + frequency slider)
- *Hold on speaker minimum* (slider, 0–8s)
- **Visual sensitivity**
- *Avoid cuts to "looking down"* (toggle + sensitivity slider)
- *Avoid cuts during animation* (toggle — prevents cutting away mid-gesture)
- *Prefer engaged listener* (toggle)
- **Split-screen behaviour**
- *Split-screen mode* (radio: Never / Banter only / Frequent / Always with host left)
- *Host camera* (dropdown — defaults to detected host)
- *Split ratio* (slider, only if mode ≠ Never: 40/60 ←→ 50/50 ←→ 60/40)
- **Energy matching**
- *Match cut pace to energy* (toggle + tightness slider)
At the bottom of the panel: **"Save as Profile"** button, **"Reset to Profile defaults"** link, and **"Generate alternative edits"** button (creates 3 variant edits with different rule weightings — appear as tabs above the preview pane to flip between).
### 6.4 Profile management
Standalone page. Library of saved rule presets. Each profile card shows: name, description, last used, used by N projects. Click → edit profile (same rule sliders as in workspace, plus name/description fields). Profiles can be duplicated, exported as JSON, shared with team.
### 6.5 Export modal
Three sections:
1. **Main edit** — Format dropdown (FCPXML 1.10 default, EDL, Resolve XML), checkbox "Include manual cut overrides," "Include split-screen as nested sequence." Destination folder picker.
2. **Social clips** (only visible if clips were marked) — list of clips with aspect ratio, platform, in/out times. "Render now" or "Save queue for later." Caption style picker per clip.
3. **Project handoff** — checkbox "Generate Premiere project README" (creates a text file alongside the XML explaining the cut logic, in case the editor opening it isn't the same person), "Email producer when ready" toggle.
Big primary "Export" button. Progress shown in a top banner while export runs; non-blocking, you can keep working.
### 6.6 Analysis state
When a new project is analysing, the workspace opens but the timeline is in a special state: ghosted, with a centred loading card showing stage-by-stage progress:
- ✓ Syncing sources (1 min)
- ⟳ Transcribing audio... (5 min remaining)
- ◌ Diarising speakers
- ◌ Analysing facial signals per camera
- ◌ Computing energy and engagement
- ◌ Generating first-pass cuts
User can navigate away (the analysis continues in background and shows in the Activity nav item). When done, the timeline populates with a subtle fade-in.
### 6.7 Settings
Standard settings shell — left rail with sections, right pane with controls:
- **Account** — name, email, sign out
- **Appearance** — theme (System / Light / Dark), accent override (advanced)
- **Performance** — proxy resolution default, GPU acceleration toggle, max parallel analysis jobs, cache location
- **Premiere integration** — default export path, FCPXML version, "Open Premiere on export" toggle
- **Team** *(v2)* — invite producers, manage roles
- **Shortcuts** — full keyboard map, customisable
---
## 7. Web App — Producer Companion
The web app is **calmer, lighter, more focused**. Producers don't need power tools; they need to scrub, comment, and mark.
### 7.1 Projects (web home)
Simple list of projects shared with the producer. Each row: thumbnail, title, episode duration, "Last updated by [editor name]," status pill (Awaiting review / In progress / Approved). Click → review screen.
### 7.2 Review screen
Single-page layout, optimised for a 1440px-wide browser window:
```
┌──────────────────────────────────────┬────────────┐
│ │ Comments │
│ PREVIEW (16:9, large) │ / │
│ │ Social │
│ │ Clips │
│ │ (tabs) │
├──────────────────────────────────────┤ │
│ TIMELINE │ │
│ (simpler than desktop) │ │
└──────────────────────────────────────┴────────────┘
```
**Preview:** same controls as desktop minus camera tile rail. Just play / scrub / timecode.
**Timeline:** simplified — ruler, single combined waveform, cut markers (read-only blocks), annotations track (comments + clip markers). No rule panel, no manual cut editing.
**Right sidebar — Comments tab:**
- List of comments, newest first or sorted by timecode (toggle).
- Each comment: author avatar, timecode (clickable → jumps playhead), comment text, replies, "Resolve" button.
- New comment: type in the bottom-pinned input or press C anywhere to drop a comment at the current playhead.
- @mention an editor → notification (email + in-app).
**Right sidebar — Social clips tab:**
- "+ Mark clip" button (or press M to mark from current position).
- Marking flow: press I to set in, O to set out (same as editor), then a card appears.
- Each clip card:
- In/out timecodes (editable)
- Aspect-ratio chip selector: 9:16 / 1:1 / 16:9 / custom (with mini visual frame previews)
- Platform chip selector: TikTok / Reels / LinkedIn / YouTube Shorts / Twitter / None
- Caption style preview (3 templates to choose from)
- Optional note ("lead with Sam's reaction")
- Hook score (auto-computed from transcript + energy, 0–100)
- Delete clip (trash icon)
- Bottom of tab: "X clips marked · Send to editor" CTA.
### 7.3 Mobile (later)
Mobile producer view is out of scope for v1 but the web layout should degrade gracefully to tablet width (≥768px). Phone view in v2.
---
## 8. Key Interactions — Detailed
These are the moments the design lives or dies on. Each must feel exceptional.
### 8.1 Live re-cut as sliders move
When the editor drags any rule slider:
1. Visual feedback on the slider (handle highlights in accent colour).
2. Within 100ms, cut blocks on the timeline fade out / fade in / shift to reflect the new ruleset.
3. The preview keeps playing if it was playing; the camera being shown updates seamlessly if the cut at the playhead changed.
4. A tiny "edit history" indicator in the top-right of the rules panel shows how many cuts were added/removed by the last adjustment.
5. Undo (Cmd+Z) reverts the slider change *and* the cut changes atomically.
### 8.2 Drag a cut
Editor grabs the edge of a cut block on the timeline:
1. Cursor changes to horizontal resize.
2. As they drag, the cut block resizes and the adjacent shot grows/shrinks to compensate.
3. A floating timecode badge follows the cursor.
4. Snap to nearest beat (energy peak), word boundary (transcript), or 1-frame grid — Shift to disable snapping.
5. Release → cut is now manually locked at the new position; a tiny lock icon appears on the block.
### 8.3 Drop a comment (web)
Producer presses C anywhere:
1. Comment input appears anchored to the timeline at current playhead, with timecode prefilled.
2. Producer types, hits Enter (or Cmd+Enter for multiline).
3. Pin appears on the annotations track. Sidebar comment list updates.
4. Editor desktop receives a real-time update (badge dot on share button increments).
### 8.4 Mark a social clip (web)
Producer presses M:
1. Playhead becomes the "in" point; a transient pill appears showing "Marking clip… press O to set out."
2. Producer scrubs forward, presses O.
3. Clip card appears in the sidebar, prefilled with selected range. Aspect ratio defaults to 9:16. Hook score is computed in <500ms.
4. Producer adjusts aspect ratio, adds note, done. Card persists.
### 8.5 Compare alternative edits
Editor clicks "Compare" in preview:
1. Preview pane splits into two sub-views, each labelled (e.g. "Current" / "Alt A — Cinematic").
2. They play in sync.
3. Click either sub-view to make it the active edit.
### 8.6 Onboarding (first launch)
Show a 3-step coachmark overlay introducing: (1) where to load files, (2) the rule sliders, (3) the export button. Skippable. Once dismissed, never shown again. A "?" button in top bar reopens it.
---
## 9. Component Inventory
The Claude Code first pass should produce these components as a design system. List is not exhaustive but covers the meaningful set.
**Primitives:** Button (primary, secondary, ghost, danger, icon), Input (text, search, numeric), Slider (single, with semantic labels), Toggle, Radio group, Dropdown, Checkbox, Pill / Badge / Chip, Tooltip, Popover, Modal, Toast, Tab bar, Avatar.
**Composed components:** Timeline ruler, Timeline waveform row, Timeline cut block, Timeline annotation pin, Camera tile, Preview player with transport, Rule slider group, Profile card, Project card, Comment thread, Social clip card, Aspect ratio chip selector, Hook score gauge, Empty state illustration container, Loading stages list, Export progress banner, Analysis progress card, Coachmark.
**Layout components:** App shell (top bar + nav rail + content), Workspace grid (3-pane with collapsible sides + bottom panel), Settings shell (rail + pane).
---
## 10. Empty States, Errors, Edge Cases
Every screen needs designed empty/error states. Notable ones:
- **No projects yet** — illustration + welcoming CTA.
- **Analysis failed** — banner with reason, "Retry" CTA, "Contact support" link.
- **Source files moved/missing** — relink modal showing which files are unresolved.
- **No microphone separation detected** — warning before analysis with link to docs on best recording practice (single-track diarisation still works, but quality is lower).
- **Producer offline / can't reach backend** — local-first comment drafts queued, banner shown.
- **Conflict: editor changed cuts after producer commented** — comments still anchor by timecode and stay visible, but a small "edit changed since comment" indicator appears on affected pins.
- **Export to Premiere failed** — explain why, offer alternative format, log download.
- **Project too long for analysis quota** *(v2 — when SaaS)* — gentle upsell.
---
## 11. Brand Inputs Required From B2B Better
To complete the visual design, the designer needs:
1. **Primary brand colour** (hex) + any secondary brand colours
2. **Logo files** (SVG preferred, with mark and wordmark variants)
3. **Brand typography** (if any — typeface files or names; otherwise we default to Inter + JetBrains Mono)
4. **Voice/tone notes** (existing brand guidelines if you have them — for empty states, error messages, onboarding copy)
5. **Any visual references** the agency feels strongly about (apps you love the design of)
Until these are supplied, the design uses the placeholder palette in §5 with a neutral accent. The system tokens are structured so brand colours can be swapped in without redesigning components.
---
## 12. Tech / Implementation Notes for Claude Code
This is a design brief — but a few constraints worth knowing so the UI is buildable:
- **Desktop:** Tauri + React + TypeScript. Use Tauri's native window chrome where possible. Tailwind for utility styling, but tokens defined as CSS custom properties so dark/light can swap at the root.
- **Web:** Next.js + React + TypeScript, shared component library with desktop (publish as a workspace package).
- **Charting/waveforms:** WaveSurfer.js for waveform rendering; custom Canvas/WebGL for the cut/annotation tracks.
- **Video:** HTML5 `<video>` with multiple sources stacked, visibility toggled per current cut. ffmpeg.wasm fallback for preview rendering where needed.
- **State:** Zustand or Redux Toolkit for the project workspace state. The cut list is a derived value from (signals + rules); recomputed in a Web Worker so slider drags don't block the main thread.
- **Theming:** Class-based dark/light (`html[data-theme="dark"]`), all colours via CSS variables.
- **Accessibility:** Keyboard navigation throughout. Focus rings visible in both modes. Colour contrast WCAG AA minimum. Hook scores and signal indicators have non-colour cues (icons, text).
---
## 13. Out of Scope for v1
To keep the brief honest and bounded, the following are explicitly **not** in the v1 design:
- Full NLE features (multi-track audio mixing, transitions other than cut, colour grading, effects). Polish happens in Premiere.
- Recording / capture. We assume footage exists.
- AI-generated b-roll or stock footage insertion.
- Automatic music bed selection.
- Direct upload/scheduling to TikTok, Reels, LinkedIn. Social clips export as files only.
- Real-time collaborative editing (Figma-style multi-cursor). Producer & editor are async.
- Mobile producer app (web only at v1; mobile web works at tablet width and up).
- White-label theming for clients.
- Billing / subscription flows (internal-first means no paywall yet, but architecture should allow it later).
---
## 14. Success Criteria
The design is successful if, on first run:
1. An editor can load a sample episode, hit "Analyse," wait, and produce an exportable FCPXML in under 30 minutes total with **zero training**.
2. Adjusting any rule slider visibly re-cuts the timeline in **under 200ms perceived latency**.
3. A producer with no prior exposure can open the web app, scrub, leave 5 comments, and mark 3 social clips in **under 10 minutes**, again with zero training.
4. The exported FCPXML opens in Premiere and produces a sequence with cuts visibly placed at the right moments at least **80% of the time** by an editor's judgment.
5. The interface looks and feels like a tool a B2B Better client would believe came from a $50M product team — not an internal hack.
If those five are true, the design is doing its job.
---
## 15. Deliverables for Claude Code first pass
For the first build pass, prioritise (in order):
1. **App shell & design system** — tokens, theme switching, primitives (Button, Slider, Input, Tab, Modal, Tooltip).
2. **Projects home (desktop)** — list/grid, New Project modal flow.
3. **Project workspace (desktop)** — the hero screen. Build the grid, preview, camera rail, timeline (with mock data initially), and rules panel. Make sliders re-cut against mocked cut data so the live response can be demonstrated.
4. **Export modal**.
5. **Profile library**.
6. **Web app — review screen** with comments + social clip marking.
7. **Settings, onboarding, empty states**.
Each delivered as a routable, navigable React app — no real backend yet, fixtures for project/episode data. Once this skeleton looks right visually, we plug in the actual analysis pipeline.
---
*End of brief. Questions, gaps, or things this brief should commit to that it doesn't yet: flag in review before Claude Code consumes this.*