Descript DESIGN.md

AI video and podcast editing design with warm green identity, timeline-first surfaces, word-based editing clarity, and creator-friendly UX.

1. Visual Theme & Atmosphere

Descript should feel creative, approachable, and magically simple. The design language communicates video editing through a text transcript, AI voice cloning, screen recording, and podcast production in a single tool.

• Mood: creative, approachable, modern, magically simple
• Density: medium, with transcript editor, timeline scrubber, media library, and AI-tool panels
• Character: warm green brand, off-white editor canvas, dark timeline surface, transcript-first editing

2. Color Palette & Roles

Green is the primary action color. Purple is strictly for AI-powered features (Overdub, AI voices). Red signals active recording — use it prominently when the mic is live.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-transcript: "Georgia", "Palatino", serif;
--font-mono: "JetBrains Mono", Menlo, monospace;

Transcript text uses a slightly larger size and generous line-height — it is the primary editing surface and must be supremely readable.

4. Component Stylings

css.button-primary {
  min-height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: #1DB954;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.transcript-word {
  cursor: text;
  border-radius: 3px;
  transition: background 0.1s;
}

.transcript-word:hover    { background: #F3F4F6; }
.transcript-word.selected { background: #DCFCE7; }
.transcript-word.deleted  { text-decoration: line-through; color: #9CA3AF; }

.timeline-clip {
  border-radius: 6px;
  background: #3B82F6;
  color: #FFFFFF;
  padding: 4px 8px;
  font: 500 11px/1.3 Inter, sans-serif;
  overflow: hidden;
  white-space: nowrap;
}

.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EF4444;
  animation: pulse 1.2s ease-in-out infinite;
}

5. Layout Principles

Transcript editor occupies the main canvas. Timeline is pinned to the bottom (collapsible). Media library and AI tools are in side panels. The word-click-to-seek behavior must be instantly responsive.

6. Depth & Elevation

css.shadow-card     { box-shadow: 0 1px 4px rgba(17, 24, 39, 0.06); }
.shadow-timeline { box-shadow: 0 -4px 20px rgba(26, 26, 46, 0.24); }
.shadow-modal    { box-shadow: 0 20px 50px rgba(17, 24, 39, 0.16); }

The timeline panel at the bottom uses an upward shadow to separate it from the transcript editor above.

7. Do's and Don'ts

Do make word-level transcript selection the primary editing interaction. Do highlight deleted words with strikethrough rather than removal. Do make the recording button impossible to miss when live. Do not use green for AI-feature accents — that dilutes the brand. Do not let the timeline compete visually with the transcript editor.

8. Responsive Behavior

Editing is a desktop workflow. Mobile supports review and approval.

9. Agent Prompt Guide

Design like Descript: warm green CTAs, word-level transcript editing surface, dark timeline panel, purple AI-voice accents, generous line-height for transcript readability, red recording indicator, and creator-friendly media editing hierarchy.