---
version: alpha
name: Descript-Inspired-design-analysis
description: An inspired interpretation of Descript's design language — a text-based video editor marketed on a deep wine-and-maroon dark canvas, with a big expressive display serif, a friendly rounded sans for UI, a hot coral-red CTA and 12px rounded buttons.

colors:
  primary: "#f73b3b"
  on-primary: "#fff7fd"
  canvas: "#390a1a"
  canvas-deep: "#190308"
  canvas-black: "#180101"
  surface-plum: "#772a4d"
  surface-wine: "#5b142e"
  surface-berry: "#651a39"
  light: "#fff7fa"
  ink-on-light: "#26171d"
  on-dark: "#fff7fa"
  on-dark-soft: "#d1c7cb"
  on-dark-mute: "#b8a5ad"
  pink-accent: "#d597bf"

typography:
  display:
    fontFamily: gamuthDisplay, "Fraunces", "Recoleta", Georgia, serif
    fontSize: 88px
    fontWeight: 400
    lineHeight: 92px
    letterSpacing: -1px
  heading:
    fontFamily: gamuthDisplay, "Fraunces", Georgia, serif
    fontSize: 40px
    fontWeight: 700
    lineHeight: 44px
    letterSpacing: 0px
  eyebrow:
    fontFamily: brett, "Space Grotesk", system-ui, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0.72px
    textTransform: uppercase
  body:
    fontFamily: booton, "Plus Jakarta Sans", system-ui, Roboto, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
  label:
    fontFamily: booton, "Plus Jakarta Sans", system-ui, sans-serif
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: 0px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

spacing:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  section: 128px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: "16px 32px"
  button-plum:
    backgroundColor: "{colors.surface-plum}"
    textColor: "#ffffff"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: "16px 24px"
  feature-tab:
    backgroundColor: "{colors.surface-wine}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "14px 24px 14px 16px"
---

# Design System Inspiration of Descript

## Overview

Descript is the AI video and audio editor "that makes editing as easy as editing text", and its marketing site is unusually moody for a productivity tool. Most of the page is a deep wine (`{colors.canvas}` `#390a1a`, about 63% of painted area) shading into near-black maroon (`{colors.canvas-deep}` `#190308`). On that, a big expressive display serif sets headlines ("AI-editing for every kind of video") in warm off-white, and a hot coral-red button (`{colors.primary}` `#f73b3b`) repeats on every section: "Get started for free", "Edit video now", "Make clips now".

UI chrome uses a rounded, friendly geometric sans; small uppercase eyebrows ("AI VIDEO EDITOR") in coral sit above headlines. The AI agent, "Underlord", gets its own nav item.

**Key Characteristics:**
- Dark wine / maroon canvas with plum and berry surfaces — a single warm hue family.
- One coral-red CTA color used for every primary action.
- Big display serif (88px) for section headlines; bold serif for feature titles.
- Uppercase coral eyebrows in a separate grotesk.
- 12px rounded buttons; 8px tabs; very soft shadows.

## Colors

### Surface
- **Canvas** (`{colors.canvas}` — `#390a1a`): Main background.
- **Canvas Deep** (`{colors.canvas-deep}` `#190308`) / **Black** (`{colors.canvas-black}` `#180101`): Lower sections and footer.
- **Plum** (`{colors.surface-plum}` `#772a4d`), **Wine** (`{colors.surface-wine}` `#5b142e`), **Berry** (`{colors.surface-berry}` `#651a39`): Cards, tabs and the Sign up button.
- **Light** (`{colors.light}` — `#fff7fa`): Occasional light panels (FAQ, nav dropdowns) with `{colors.ink-on-light}` `#26171d` text.

### Text on dark
- **On Dark** (`#fff7fa`): Headlines and body.
- **On Dark Soft** (`#d1c7cb`) and **Mute** (`#b8a5ad`): Secondary text and captions.

### Accent
- **Coral Red** (`{colors.primary}` — `#f73b3b`): Primary buttons and eyebrows.
- **Pink** (`{colors.pink-accent}` — `#d597bf`): Small highlights and illustration details.

## Typography

### Font Family
1. **An expressive display serif** (served as `gamuthDisplay`) at 400 for hero and section headlines, 700 for feature titles. Substitute: *Fraunces* (soft, high optical size) or *Recoleta*.
2. **A rounded geometric sans** (served as `booton`) for body, nav and buttons. Substitute: *Plus Jakarta Sans* or *Nunito Sans*.
3. **A grotesk for eyebrows** (served as `brett`), uppercase with `0.04em` tracking. Substitute: *Space Grotesk*.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display}` | 88px | 400 | ~92px | Section headlines. |
| `{typography.heading}` | 40px | 700 | 44px | Feature titles ("Record", "Edit", "Publish"). |
| `{typography.eyebrow}` | 18px | 400 | 18px | Uppercase coral eyebrow above the hero. |
| `{typography.label}` | 16px | 600 | 24px | Nav and secondary buttons. |
| `{typography.body}` | 16px | 400 | 24px | Paragraphs and primary button label. |

## Layout
- Wide frame (1400–1608px) with centered 680–940px text columns.
- Hero: eyebrow, huge serif headline, short line, coral CTA, then a large product video.
- Workflow section uses vertical tabs (Record, Edit, Publish…) beside a product preview.
- About 9,600px of page, with long vertical spacing between sections.
- 102px-tall nav including an announcement row.

## Elevation & Depth
Mostly flat. A soft `0 2px 4px rgba(0,0,0,0.16)` appears on buttons and floating product UI. Depth otherwise comes from stepping between wine, plum and near-black.

## Shapes
- `{rounded.lg}` 12px — primary and plum buttons.
- `{rounded.md}` 8px — tabs and cards (most common).
- `{rounded.sm}` 4px — small chips.
- `{rounded.xl}` 16px — product video frames.

## Components
- **`button-primary`** — coral fill, light label, `{rounded.lg}`, padding `16px 32px`.
- **`button-plum`** — "Sign up" in the nav: plum fill, white weight-600 label.
- **`feature-tab`** — wine pill-rectangle with icon and label; active tab brightens and drives the preview.
- **Testimonials** — light-on-dark quote cards with avatar and company logo.
- **FAQ** — accordion rows on a light panel.

## Do's and Don'ts

### Do
- Stay inside the wine / maroon / plum family for surfaces.
- Use coral red for every primary CTA, and only for CTAs and eyebrows.
- Pair a big display serif with a rounded sans.
- Show the real editor UI in large video frames.

### Don't
- Don't use pure black or cool grays; every dark tone is warm.
- Don't add a second accent color (blue, green) to buttons.
- Don't set body or buttons in the serif.
- Don't use pill-shaped buttons; the system uses 12px corners.

## Responsive Behavior
- Display headline drops to about 48px on mobile.
- Workflow tabs become a horizontal scroller above the preview.
- The nav collapses to logo, Sign up and a menu button.

## Known Gaps
- Measured on the marketing homepage at 1440px; the Descript app has its own light interface not covered here.
- Font names are internal; substitutes are approximate.