---
title: "Descript design system"
variant: extended
source: https://www.descript.com/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/descript-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Descript · Design System

> Editorial typography meets a cinematic editing workspace

**Theme:** dark · **Industry:** ai · **Source:** https://www.descript.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Descript’s homepage pairs a deep burgundy canvas with oversized editorial serif headlines and bright coral calls to action. Product footage and interface previews make the editing workflow tangible, while pale enterprise and FAQ sections create a clear contrast break.

## North star

Use the burgundy canvas and oversized editorial serif headlines as the frame, letting real product media demonstrate the workflow.

## Overview

The page is built around a deep burgundy canvas (#390a1a), with nearly white type and compact coral calls to action. Alternating dark section bands—especially #190308 and #180101—give the long page structure without introducing a new visual theme. Large display headlines use the measured gamuthDisplay serif, creating a refined editorial contrast with booton’s clean sans-serif body copy and navigation. Centered hero copy sits above a product interface composition; later sections alternate centered statements, split layouts, carousels, and card groups. Real product screenshots and video frames provide evidence of the editor, while customer and enterprise proof uses logos, testimonials, and metric cards. A broad pale section at #fff7fa resets the rhythm for security, reviews, and FAQs. Keep spacing deliberate and compact, preserve generous breathing room around headline clusters, and use borders or shallow shadows sparingly so media and color bands—not ornament—define hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Burgundy | `#390a1a` | `--color-deep-burgundy` | brand | Primary page canvas and recurring dark hero, proof, and closing CTA background. |
| Gallery Blush | `#fff7fa` | `--color-gallery-blush` | surface | Light section canvas and high-contrast headline, body, and inverse button text. |
| Signal Coral | `#f73b3b` | `--color-signal-coral` | accent | Primary Get started for free CTA and small emphasis details. |
| Pale Divider | `#e4dde0` | `--color-pale-divider` | semantic | Fine card and FAQ borders on light surfaces. |
| Berry Button | `#772a4d` | `--color-berry-button` | accent | Secondary Sign up button fill against the pale navigation bar. |
| Media Black | `#000000` | `--color-media-black` | surface | Dark media regions and embedded product visuals; not a main brand canvas. |
| Black Cherry | `#190308` | `--color-black-cherry` | surface | Alternating dark workflow and feature section bands. |
| Muted Blush | `#d1c7cb` | `--color-muted-blush` | neutral | Secondary copy and subdued footer text on dark backgrounds. |
| Dusty Mauve | `#a28993` | `--color-dusty-mauve` | neutral | Muted outlines and minor interface details, not a defining canvas color. |
| Footer Charcoal | `#110a0d` | `--color-footer-charcoal` | surface | Deep footer background separating dense navigation links from the page. |
| Soft Black | `#1a1a1a` | `--color-soft-black` | semantic | Dark text on pale cards and light-surface content. |
| Dark Berry | `#5b142e` | `--color-dark-berry` | accent | Record button fill within product or workflow interface examples. |
| Mulberry | `#651a39` | `--color-mulberry` | accent | Minor button-state color; secondary to the coral primary action. |
| Muted Plum | `#4c343e` | `--color-muted-plum` | neutral | Low-emphasis text and button details within darker interface states. |
| Near Black Cherry | `#180101` | `--color-near-black-cherry` | surface | Very dark feature-section band behind AI tools content. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product cards, FAQ panels, and occasional interface highlights. |

### Semantic aliases

`--color-canvas` → `#390a1a` (Deep Burgundy) · `--color-surface` → `#fff7fa` (Gallery Blush) · `--color-surface-2` → `#000000` (Media Black) · `--color-surface-3` → `#190308` (Black Cherry) · `--color-surface-4` → `#110a0d` (Footer Charcoal) · `--color-text` → `#fff7fa` (Gallery Blush) · `--color-text-muted` → `#390a1a` (Deep Burgundy) · `--color-text-subtle` → `#d1c7cb` (Muted Blush) · `--color-border` → `#e4dde0` (Pale Divider) · `--color-accent` → `#f73b3b` (Signal Coral) · `--color-accent-2` → `#772a4d` (Berry Button) · `--color-accent-3` → `#5b142e` (Dark Berry) · `--color-on-accent` → `#fff7fd`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fff7fa` | `#390a1a` | 16.18:1 | AAA |
| `#fff7fa` | `#000000` | 19.94:1 | AAA |
| `#fff7fa` | `#190308` | 18.85:1 | AAA |
| `#390a1a` | `#fff7fa` | 16.18:1 | AAA |
| `#390a1a` | `#000000` | 1.23:1 | fail |
| `#390a1a` | `#190308` | 1.16:1 | fail |
| `#d1c7cb` | `#390a1a` | 10.34:1 | AAA |
| `#d1c7cb` | `#fff7fa` | 1.56:1 | fail |
| `#d1c7cb` | `#000000` | 12.74:1 | AAA |
| `#d1c7cb` | `#190308` | 12.05:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| booton | `--font-body` | webfont | 400, 600 | Primary sans-serif for body copy, navigation, buttons, and captions. | Inter |
| Arial | `--font-arial` | system | 400 | System fallback for small portions of text. | Arial |
| gamuthDisplay | `--font-display` | webfont | 700, 400, 600 | Display serif for hero and section headlines. | DM Serif Display |
| brett | `--font-brett` | webfont | 400 | Uppercase eyebrow labels above major headings. | Space Mono |

- **booton:** Regular body copy with measured semibold navigation; keep case natural and tracking restrained.
- **Arial:** Fallback only; preserve the page’s sans-serif role if the webfont is unavailable.
- **gamuthDisplay:** Large, high-contrast headlines; bold measured heading roles, with no added tracking.
- **brett:** Compact uppercase labels with subtly expanded tracking and regular weight.

### Type scale — Augmented Fourth (ratio ≈ 1.374, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 400 | normal | 0 | — | gamuthDisplay | Oversized hero display headline. |
| h1 | 72px | 700 | 1.1 | 0 | — | gamuthDisplay | Primary hero headline and dominant page statement. |
| h2 | 56px | 700 | 1.1 | 0 | — | gamuthDisplay | Major workflow, feature, enterprise, and CTA headings. |
| h3 | 40px | 700 | 1.1 | 0 | — | gamuthDisplay | Subsection headings and product-use-case titles. |
| h4 | 28px | 700 | 1.2 | 0 | — | gamuthDisplay | Card and smaller content headings. |
| body | 18px | 400 | 1.4 | 0 | — | booton | Introductory copy, descriptions, and testimonial text. |
| caption | 16px | 400 | 1.4 | 0 | — | booton | Small card, attribution, and supporting interface labels. |
| nav | 16px | 600 | 1.5 | 0 | — | booton | Top navigation items and prominent navigation controls. |
| eyebrow | 18px | 400 | 1 | 0.04em | uppercase | brett | Uppercase category labels above large headings. |

OpenType features in use: `"calt", "liga"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 12, 14, 16, 20, 24, 30, 32, 40, 48, 64, 72, 80, 96 px.
- Section rhythm 32px · element gap 12px · card padding 24px · max content width 1112px.

The desktop page uses a centered content frame with a measured maximum width of 1112px, while hero and media compositions can run full bleed. The compact spacing system is based on an 8px unit, with measured section and element gaps guiding a dense but breathable rhythm. Center hero and feature headlines; use split columns for FAQ, enterprise, and workflow content. Long dark and light section bands alternate to organize the scroll, with card groups and carousels breaking up text-heavy stretches.

## Shape & elevation

- Radius: button `12px` · card `4px` · media `5px` · nav `4px` · xs `4px` · sm `5px` · md `8px` · lg `12px` · xl `16px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.16) 0px 3px 3px 0px`
- Shadow `sm-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px`
- Shadow `sm-3` (button): `rgba(0, 0, 0, 0.16) 0px 2px 4px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: large color bands and media panels establish depth. Cards use subtle measured shadows, while pale cards and FAQ rows can use fine borders. Reserve layering for overlapping product previews and hero media; avoid broad, dramatic shadows or ornamental borders.

## Imagery

Use authentic video stills, faces, and product-interface screenshots as the main visual proof. The hero layers editor windows and video fragments over the burgundy field; lower sections use contained interface previews, testimonial cards, logos, and a horizontal strip of video thumbnails. Keep media rectangular and readable, with restrained rounding rather than decorative illustration or heavy effects.

## Components

### Floating navigation bar

Wide pale rounded bar set against the burgundy canvas, with logo and links on the left and sales, sign-in, and berry Sign up actions on the right.

### Hero CTA

Centered coral Get started for free button with white text and a measured 12px radius, placed beneath the serif headline and concise intro.

### Product preview composition

Overlapping editor and video panels demonstrate the text-based workflow; keep the surrounding dark field uncluttered.

### Workflow feature panel

Dark band with centered serif heading, compact step navigation, and a prominent product card with supporting copy.

### Proof cards

Testimonial and enterprise proof use grouped cards, logos, certification marks, and metrics; separate content with restrained borders and pale surfaces.

### FAQ rows

White question panels with fine #e4dde0 dividers and dark text, paired with a left-aligned serif section heading.

### Footer link columns

Dense multi-column navigation on #110a0d, with subdued text and a contained secondary guides-and-tools panel.

### Measured component styles

- **Primary button** (“Get started for free”): background #f73b3b · text #fff7fd · radius 12px · padding 16px 32px · 400 16px booton
- **Secondary button** (“Sign up”): background #772a4d · text #ffffff · radius 12px · padding 16px 24px · 600 16px booton · shadow rgba(0, 0, 0, 0.16) 0px 2px 4px 0px
- **Link** (“Underlord AI editor”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px booton
- **Card** (“SOC 2 Type II certified Audited annually”): background #f1eaed · text #1a1a1a · radius 4px · padding 24px · 400 16px booton
- **Navigation item** (“Features Underlord Solutions Resources P”): transparent background · text #26171d · radius 0px · padding 0px · 600 16px booton

## Do

- Anchor dark sections in Deep Burgundy (#390a1a).
- Use Gallery Blush (#fff7fa) for high-contrast resets and inverse text.
- Set major headlines in an expressive display serif.
- Keep body copy and navigation in a clean sans-serif.
- Make product screenshots and video the primary proof.
- Use Signal Coral (#f73b3b) for the principal action.
- Alternate section bands to pace the long page.

## Don't

- Do not replace the burgundy palette with generic black.
- Do not make every section the same background color.
- Do not use oversized gradients or decorative textures.
- Do not crowd the hero headline with extra copy.
- Do not use illustrations in place of product media.
- Do not add heavy shadows to flat cards.
- Do not style secondary actions as primary coral CTAs.

## Agent prompt

Build a new SaaS page in Descript’s visual language. Use Deep Burgundy (#390a1a) as the primary canvas, with near-white Gallery Blush (#fff7fa) typography and occasional light section resets. Set large statements in an editorial display serif; use a clean sans-serif for navigation, body copy, and controls, with small uppercase eyebrow labels. Make Signal Coral (#f73b3b) the unmistakable primary CTA and use berry tones only for secondary actions. Organize content into alternating dark bands and pale proof or FAQ sections within a centered content frame. Pair concise copy with real product-interface screenshots, video stills, faces, and customer evidence. Keep cards mostly flat, borders subtle, corners restrained, and spacing deliberate. Preserve clear hierarchy and avoid decorative gradients, excess ornament, or generic stock-style layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy and CTA above a layered, full-bleed product and video composition. | Primary signup CTA, Product preview, Concise value proposition | Dark burgundy canvas, Serif display headline, Floating pale navigation |
| 2 | logo-cloud | Centered trust statement followed by a horizontal row of customer logos. | Social proof, Recognizable customer brands | Dark background, Evenly distributed logos |
| 3 | testimonials | Three testimonial cards arranged side by side. | Customer quotes, Role attribution | Dark card surfaces, Compact text blocks, Brand marks |
| 4 | how-it-works | Centered heading and step tabs above a wide split workflow panel. | Step navigation, Workflow explanation, Carousel controls | Near-black cherry band, Serif heading, Product screenshot panel |
| 5 | product-showcase | Centered heading above a horizontally browsable feature-card carousel. | Feature browsing, Carousel controls, Feature CTA | Very dark band, Product interface imagery, Coral action button |
| 6 | feature-split | Centered introduction above a two-column use-case list and media panel. | Use-case selection, Selected content detail, Start-podcast CTA | Dark band, Numbered list, Video still and serif subheading |
| 7 | feature-grid | Centered enterprise heading and CTA above a three-column grid of proof cards. | Book-demo action, Security proof, Customer outcome metrics | Pale canvas, Certification badges, Metric tiles |
| 8 | stats | Left-aligned heading and explanatory copy balanced by a rating summary. | Review score, Reputation summary | Light background, Serif heading, Rating badge |
| 9 | reviews | Three testimonial cards aligned horizontally across the light section. | Product-specific quotes, Reviewer attribution | Pale cards, Decorative purple frames, Compact captions |
| 10 | faq | Left-aligned section title beside a vertical stack of question rows. | Expandable questions, Answer discovery | White FAQ panel, Fine dividers, Dark text |
| 11 | cta | Left-aligned headline and copy with paired actions on a dark band. | Primary signup, Book-demo alternative | Burgundy canvas, Large serif headline, Paired buttons |
| 12 | gallery | Horizontal strip of video and creator thumbnails across the page. | Visual browsing, Creator and use-case discovery | Edge-spanning media row, Mixed video thumbnails |
| 13 | footer | Dark footer with multiple link columns and a contained guides-and-tools panel. | Deep site navigation, Resource discovery, Social links | Near-black footer canvas, Muted link text, Dense columns |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/descript-com