Descript

Overview

Descript embodies 'Accessible Sophistication'—a design philosophy that marries technical power with warm, intuitive interfaces. The brand serves creators, podcasters, and video professionals who demand professional-grade tools without the learning curve. The visual language combines a bold, energetic red accent (#f73b3b) against soft, cream-toned surfaces (#fff7fa), creating an approachable yet premium aesthetic. The UI evokes clarity and confidence: users feel empowered to create without friction.

Descript's voice is direct, encouraging, and human-centered. The brand speaks in active verbs and concrete benefits—never jargon-heavy. Tone examples: 'Direct your AI co-editor to do your video editing for you, or do it yourself with intuitive editing tools' and 'With Descript, video editing is as easy as typing.' The personality is optimistic, practical, and slightly playful—reflecting the joy of creative work made simple.

Colors

Descript's color system is built on a warm, inviting foundation with a vibrant red accent that commands attention. Primary (#f73b3b) is the signature action color, used exclusively on CTAs, key interactive elements, and brand moments—it's the color users click. The surface stack ranges from the warm cream base (#fff7fa) through progressively deeper container tones (#fef5f3, #fdf0ed), creating visual hierarchy without harsh contrast. Secondary (#651a39), a deep maroon, provides sophisticated support for secondary actions and dark-mode contexts. Tertiary (#0062ff), a bright blue, is reserved for links, highlights, and data visualization.

The hero section inverts this palette: a dark maroon background (#27181e) with white typography and the red accent creates dramatic focus. On-surface text

Typography

The type system pairs Gamuth Display (serif) for headlines with Booton (sans-serif) for body and UI text, creating a sophisticated yet accessible visual rhythm. Display (88px, 700 weight) commands attention on hero sections; Headline-lg (56px) anchors feature sections; Headline-md (40px) introduces subsections. Body-lg (18px, 400 weight) is the primary reading size with 28px line-height (1.56x multiplier) for comfortable scanning. Body-md (16px) handles UI labels and secondary content. Label-md (14px, 600 weight) is used for buttons and badges with 0.01em letter-spacing for crispness. All headlines use -0.02em to -0.04em letter-spacing to tighten the serif letterforms and create visual impact. On small labels over busy backgrounds or dark sections, apply text-shadow: 0 2px 4px rgba(0, 0, 0

Layout

Descript uses a flexible 12-column grid with a max-width of 1300px, centered with auto margins. The gutter is consistently 24px (md spacing), scaling down to 12px (sm) on tablets and 8px on mobile. Sections use lg spacing (40px) for vertical separation, creating breathing room between hero, feature blocks, and CTAs. The hero section spans full-width with 120px top padding and 88px bottom padding (desktop), compressing to 60px on tablet and 48px on mobile—this rhythm maintains visual momentum without overwhelming. Container max-widths vary by content type: hero uses 940px for text centering, feature grids use 1300px for 2-column layouts (collapsing to 1-column below 1200px breakpoint). White-space is generous but purposeful: 72px gaps between feature cards (desktop) compress to 56px (tablet

Elevation & Depth

Descript uses subtle, soft shadows to create depth without visual heaviness. The elevation system has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on cards and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers or expanded modals. Buttons do not use shadows at rest; on hover, primary buttons gain md elevation (0 3px 8px rgba(247, 59, 59, 0.25)) to signal interactivity. The dark hero section (#27181e) uses no shadows—the background itself provides depth. Cards on light

Shapes

Descript's shape philosophy is 'Warm Geometric'—rounded corners that feel friendly without being overly soft. Buttons and primary interactive elements use md radius (12px), creating a modern, approachable look that's neither sharp nor bubble-like. Cards and containers use lg radius (16px) for a slightly more generous curve that invites interaction. Inputs and smaller UI elements use DEFAULT radius (8px) for consistency with the button family. The full radius (9999px) is reserved for badges and avatar containers. The rationale: 12px and 16px radii are large enough to feel contemporary and warm,

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons (button-primary) use #f73b3b background with white text, 12px border-radius, and 16px vertical / 32px horizontal padding (48px height). On hover, the background shifts to #ff5340 with md elevation (0 3px 8px rgba(247, 59, 59, 0.25)) and a 200ms transition. On active/pressed, the background darkens to #e62324. Secondary buttons (button-secondary) use the maroon secondary color (#651a39) with white text, same padding and radius, and a subtle hover state (+8% lightness). Ghost buttons have transparent backgrounds with a 1px outline in outline color (#999999) and primary text; on hover, they gain a surface-container-high background. All buttons use label-md typography (14px, 600 weight) and are never smaller

Do's and Don'ts

**Do**

• Do use the primary red (#f73b3b) exclusively on CTAs and key interactive moments—it's the brand's signature accent and loses impact if overused.
• Do maintain the warm cream surface (#fff7fa) as the default background; it reduces eye strain and reinforces the approachable brand personality.
• Do apply md radius (12px) to all buttons and primary interactive elements for visual consistency and a modern, friendly feel.
• Do use Gamuth Display serif for headlines (56px+) and Booton sans-serif for body and UI text—this pairing creates sophistication without coldness.
• Do scale spacing proportionally: use lg (40px) for section separation, md (24px) for component padding, and sm (12px) for internal element gaps.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over dark backgrounds or busy imagery to ensure legibility.

**Don't**

• Don't use the primary red on non-interactive elements—it signals clickability and breaks user expectations if applied to static text or backgrounds.
• Don't mix border-radius values arbitrarily; stick to the defined scale (8px, 12px, 16px, 20px) to maintain visual cohesion.
• Don't use pure white (#ffffff) as a surface background; the warm off-white (#fff7fa) is the brand standard and feels more inviting.
• Don't apply shadows to buttons at rest—reserve elevation for hover and active states to signal interactivity without visual noise.
• Don't use the secondary maroon (#651a39) as a primary accent; it's a supporting color for secondary actions and dark contexts only.
• Don't exceed 1300px container max-width on desktop; wider layouts dilute the focused, intimate brand experience.