Design tokens (YAML front matter)

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

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.
A rounded geometric sans (served as booton) for body, nav and buttons. Substitute: Plus Jakarta Sans or Nunito Sans.
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.

Descript

Palette

At a glance

Design System · Descript

Design System Inspiration of Descript

Overview