What is Descript's primary brand color?

Descript's brand voltage is Maroon (#651a39) — a deep wine red at OKLCH lightness 0.35, mapped to `--Maroon-750` in the live CSS variables. It appears five times on the captured page, exclusively on the primary Sign-up CTA background (3 occurrences) and a small set of text contrasts (2 occurrences). The hover ladder steps into Maroon-800 #2a0711 and Maroon-900 #390a1a, with #190308 Maroon-950 reserved for the deepest pressed state. The maroon is paired only with cream and white — Descript does not introduce a second chromatic accent on the same viewport.

What typography does Descript use across the three families?

Descript runs three custom families on different roles. Gamuth Display — a serif — handles the hero h2 at 56px / 61.6px line-height at weight 400, and large display blockquotes at 40px / 44px. Booton — a geometric sans — covers everything else at 24px h3s at weight 600, 18px paragraphs at weight 400 with 25.2px line-height, 16px body at weight 600 for nav links, 18px span labels. Brett — an uppercase sans — is scoped strictly to the eyebrow label above the hero (the AI Video Agent tag) at 18px weight 400 with 0.72px positive tracking. Each family does one job and never crosses into another tier.

Why is the page floor cream (#fff8f4) instead of pure white?

The canvas is mapped to `--Core-Canvas-White` at #fff8f4 — a warm off-white that clusters with #fffafc Core-White and #faf8f7 in the extraction. Pure white #ffffff also appears in the cluster but the dominant rendered surface is the cream variant. The choice signals editorial rather than application-shell — paired with the serif Gamuth Display hero, the warm cream reads as magazine paper, not the cold #fafafa surfaces a Mac-native video tool would use. Where most editing products commit to a neutral application canvas, Descript treats the page as a content layout.

Why are there no pill (9999px) buttons on the page?

The radius scale is bimodal — 60 captured 4px values against 30 captured 12px values, with 9 captured 8px values and only 4 occurrences of either 9999px or 100px. The primary CTA itself is `{rounded.lg}` 12px — a rounded rectangle, not a pill. The 4px tier covers content chrome (cards, code badges, image masks), the 8px tier handles secondary interior surfaces, and 12px is reserved for the primary CTA plus a small set of feature cards. Pills (9999px) and circles (100%) exist in the scale but are scoped to chip indicators and avatar dots — never to the primary action.

What's the role of the #ff5340 red eyebrow text?

The Red-400 token (#ff5340) surfaces only on the section eyebrow — small uppercase labels above each h2 like the AI Video Agent tag — set in Brett at 18px weight 400, letter-spacing 0.72px. It is the only chromatic accent on the first viewport apart from the maroon CTA, and it appears 8 times on the page exclusively as text. The Red-450 #f73b3b also exists in the scale (9 occurrences) and handles a related semantic role, but the marketing surface uses #ff5340 for the eyebrow and reserves the deeper #b81b1e Red-600 for error states that do not appear on the public surface.

How do I use this DESIGN.md to build a React project?

Feed the file to Claude, Cursor, or any agent that reads structured tokens, and the model will reproduce Descript's editorial posture rather than a generic dark video-tool theme — cream canvas, serif hero, single maroon CTA, 12px rounded rectangle controls. You can also reference the 23 color tokens, 11 type styles, and 19 components directly — every value is a quoted hex or size you can paste into Tailwind config or CSS variables. Pair the maroon ladder with Booton (or Inter as a substitute), a serif like Fraunces or Source Serif for the hero, and a shadcn/ui Button variant whose `borderRadius` is 12px to match the CTA discipline.

Descript Design System

Descript's design system as a DESIGN.md file.

About Descript DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source descript.com

Music, Video & Streaming
AI & LLM Platforms

Descript's marketing surface is a warm-cream canvas (#fff8f4, mapped to `--Core-Canvas-White`) anchored on a single brand voltage — Descript Maroon (#651a39) — that carries the primary CTA and nothing else. Headings step to a deeper maroon ink (#390a1a, the Maroon-900 token) while body copy holds at #1a1a1a near-black and #26171d Neutral-900. The page is editorial in posture, not application-shell: a serif display family does the heavy hero lifting, the canvas is intentionally off-white, and the primary CTA is a 12px-rounded rectangle rather than the pill most video-editing competitors reach for. The eyebrow tag — "AI Video Agent" sitting above the hero — is set in Brett, a third typeface used exclusively for uppercase 18px micro-labels, and rendered in #ff5340 Red-400 for the only chromatic accent on the first viewport.

The DESIGN.md file packages 23 color tokens, 11 typography roles, 6 corner radii, 9 spacing values, and 19 components. The 93 CSS custom properties on the live `:root` resolve to a much smaller perceptual palette: a Maroon ladder (50 → 950), a Neutral warm-gray ladder, plus a wider scaffold of Red, Lilac, and Green ladders that exist as declared tokens but never surface on the marketing page. Three custom families are declared — `--font-gamuth-display` (serif), `--font-booton` (sans), `--font-brett` (a third sans used uppercase) — and the format itself is the Google Labs DESIGN.md spec, with token references like `{colors.maroon}` and `{typography.display-hero}` that designers and AI agents can both parse.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Descript's editorial restraint — serif headlines on warm cream, a single deep brand voltage, rectangles where the category defaults to pills — rather than a generic dark-theme video tool. Reference the tokens in Tailwind config, paste the component recipes into a design audit, or use the Maroon ladder directly as a CSS-variable scale. The discipline worth studying is the choice to look like a magazine spread for a category whose competitors look like editing software: Descript reads as content-first, the tool itself stays in the margin.

What makes it distinct

Serif display in a video-editor categoryGamuth Display at weight 400 carries the 56px hero against the sans-default everyone else picks
Three-family typographic stackBooton (sans body/UI), Gamuth Display (serif hero), Brett (uppercase eyebrow) each scoped to one role
Warm cream canvas (#fff8f4) instead of pure whitethe page floor reads editorial, not application-shell
Single brand voltageDescript Maroon (#651a39) reserved for the primary CTA, paired with deep maroon ink (#390a1a) on headings
Bimodal radius scale60 occurrences of 4px chrome against 30 occurrences of 12px for primary controls, with zero 9999px pills

Live at descript.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

descript.com

Explore Descript

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Descript design system FAQ

Common questions about Descript's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Descript — official site

Descript's marketing site — AI video and podcast editing where text edits the timeline, with the design surface this file extracts.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Descript in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→