# Descript · Design system migration spec

> Source: https://www.descript.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, professional SaaS design that uses classic typography and a restrained color palette to build trust and clarity.

## 1. Identity DNA

Descript's design system is built as a modern studio: a workspace that is both powerful in its capabilities and accessible in its presentation. It establishes a professional, warm environment where the complexity of AI video editing is made clear and approachable through deliberate visual restraint.

**One-liner:** A clean, warm, and highly functional design for a leading AI video editing platform.
**Keywords:** AI video editor · collaborative · intuitive · professional
**Analogy:** A modern studio that feels both powerful and accessible.

## 2. Color

The color system is built on a foundation of a warm, off-white canvas and high-contrast dark ink for optimal readability. A deep burgundy is reserved as a potent accent for key moments like the hero section.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F1EAED` | main background |
| `--ink` | `#1A1A1A` | body text |
| `--muted` | `#D1C7CB` | placeholder |
| `--line` | `rgba(229,231,235,1.0)` | divider |

**Color principle:** A warm, off-white canvas with high-contrast dark ink for readability, using a deep burgundy for emphasis in the hero section.

The underlying principle is one of warmth and authority, using contrast and a single, resonant accent to guide focus.

## 3. Typography

The typographic voice pairs a classic transitional serif for bold, authoritative headlines with a humanist sans-serif for clear body text. This combination establishes a sophisticated yet approachable character, suitable for a professional tool.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 400 | -0.5px | Hero headlines |
| body | 18px | 1.33 | 400 | 0px | Paragraphs and descriptive text |

## 4. Spacing

Layout rhythm is governed by a standard 4px base unit, creating a clear progression for padding and gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base with a clear 8px/16px/24px progression for padding and gaps.

## 5. Surfaces

Surfaces are rendered with a flat, clean aesthetic, using a single, subtle box-shadow for gentle elevation. Borders are defined by a light, 1px solid line to maintain structure without visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.16) 0px 2px 4px 0px
- **Borders:** 1px solid #E5E7EB

## 6. Layout

The layout skeleton begins with a full-width hero section to center key messaging before transitioning into a structured, multi-column grid for feature exploration. This creates a clear visual hierarchy from primary announcement to detailed breakdown.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A full-width hero section with a centered layout for key messaging, followed by a multi-column grid for feature cards.

## 7. Motion & Interaction

Motion philosophy is minimal and strictly functional, designed to enhance usability rather than decorate. Fast transitions for opacity and color provide immediate feedback on user interaction without delaying the experience.

- **Durations:** micro 100ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade-in transitions on hover and focus
  - Smooth background-color changes

- **Hover:** Subtle background color change or opacity shift on interactive elements.
- **Click:** Immediate visual feedback with no delayed animation.
- **Transition:** Fast, 0.1s to 0.3s transitions for opacity and color.
- **Keyboard:** Standard focus states with visible outlines.

## 8. Voice & Don'ts

The editorial voice is professional, clear, and empowering, using bold serif headlines to convey authority and direct, action-oriented calls-to-action. This tone aligns with a tool designed for creative professionals.

- **Tone:** Professional, clear, and empowering.
- **Headline style:** Bold, large serif fonts that convey authority and clarity.
- **CTA style:** Direct and action-oriented (e.g., 'Get started for free').
- **Avoid:** Overly technical jargon / Cluttered layouts / Aggressive neon colors / Rounded, bubbly UI elements / Excessive decorative animations / Dark mode as the primary theme

### Don'ts
- ❌ Don't use a dark mode interface — the screenshot shows a light, warm off-white background as the primary canvas.
- ❌ Don't use a highly geometric sans-serif for headlines — the screenshot shows a classic transitional serif for display text.
- ❌ Don't use a neon or electric blue as a primary accent — the screenshot uses a deep burgundy and soft coral-red for emphasis.
- ❌ Don't use heavily rounded or 'pill' shapes for primary buttons — the screenshot shows buttons with a 4px border-radius.
- ❌ Don't use excessive drop shadows or 3D effects — the screenshot shows a flat, clean surface with only a subtle, single box-shadow for elevation.
- ❌ Don't use a crowded, multi-sidebar navigation — the screenshot shows a clean, horizontal top navigation bar with ample whitespace.

The system deliberately avoids dark mode as a default, neon accents, bubbly UI shapes, and crowded navigation.

## System Prompt (paste into AI tool)

```
Descript's design is a clean, professional SaaS aesthetic that balances warmth with authority. It uses a light, off-white background (#F1EAED) with high-contrast dark ink (#1A1A1A) for readability. The typography features a classic transitional-serif for bold headlines and a humanist-sans for body text, creating a sophisticated yet approachable feel. Key design elements include a 4px-based spacing scale, subtle 1px borders (#E5E7EB), and a restrained use of a deep burgundy for hero sections. Critical design rules include: 1) Avoid dark mode as the default; 2) Do not use overly rounded or bubbly UI components; 3) Never use neon or high-chroma accent colors; 4) Maintain generous whitespace and a structured 12-column grid layout.
```