Descript
A podcast and video editing platform built on a medium-dark canvas (#1C1C1E) with Descript's signature blue-violet primary (#5B5FC7 / #4F52B2) and white content panels for the transcript-based editing surface. The signature Descript insight is that audio/video editing should work like a document editor: the transcript is the timeline, and editing text edits the media. The UI reflects this: a clean document surface center-stage, media tracks below, and a dark chrome sidebar for project organization. Typography uses Inter for UI and a comfortable serif or sans for the transcript body to signal that this is a reading/writing environment as much as an editing one.
Color Tokens
1. Visual Theme & Atmosphere
Descript invented text-based video editing and the product design makes the metaphor real: you see a document, and the document IS the edit. Delete a sentence and the video skips that clip. The transcript surface is white and reading-comfortable, set at generous line-height because users need to read hours of content quickly. The purple-violet brand color appears on the waveform, playhead, and primary CTAs — providing the one chromatic thread in an otherwise neutral editing environment. Filler words (um, uh, like) are highlighted in amber for one-click removal.
2. Color System
Editor (dark chrome + white document):
- Editor background: #1C1C1E — macOS dark system tone
- Document surface: white — the transcript needs to feel like paper
- Purple/violet: #5B5FC7 — waveform color, playhead, speaker label highlights
- Filler word highlight: #FFB800 — amber, immediately scannable for um/uh removal
- Deleted text: #FF453A — strikethrough red for removed segments
Marketing/Web: Standard light white canvas with purple primary
3. Typography
Georgia serif for transcript body — the document metaphor is reinforced typographically; serifs feel like reading, which is the right context for audio/video transcripts. Inter for all UI chrome (sidebar, toolbar, timeline). The separation is functional and meaningful.
4. Components & Patterns
- Transcript editor: Full-width document, speaker labels in color, filler words highlighted, playback cursor underlines current word
- Timeline: Below transcript, waveform tracks in purple, video thumbnail track, chapter markers
- Screen recorder: Floating HUD for capture (similar to Loom)
- Overdub (AI voice): Underline styling on AI-generated text segments
- Clip view: Stacked word-by-word visual timeline for detailed trimming
- Export panel: Format picker, quality settings, upload destination options
5. Spacing & Layout
Transcript editor: 680px max content width, 24px horizontal padding. Timeline: full-width, ~120px fixed bottom. Project sidebar: 240px left. Right properties panel: 280px optional.
6. Motion & Interaction
Transcript playback underlines current word as audio plays — the core interaction. Filler word removal strikes through with animation. Timeline scrubbing is frame-perfect. AI regeneration shows a brief loading shimmer on the affected text.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for