Descript design specAI Products

Warm editorial AI-video brand (refreshed away from the old purple): a deep plum-maroon hero carrying an enormous cream Gamuth Display serif headline at a calm 400, introduced by an uppercase Brett monospace eyebrow in coral-red, with Booton sans for UI, a floating rounded cream nav bar over the plum, cream product cards, and one coral accent on rounded-rectangle buttons.

Browse Descript in the interactive gallery

Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.

Marketing site

Source: descript.com (live DOM, computed styles), 2026-07-18 (desktop 1512px). Coverage: home / marketing. App/editor: pending login (needs-dashboard). Responsive: breakpoints from tokens only; mobile rendering not verified. Note: the brand has been refreshed away from the older bright-purple identity — it is now a warm plum/cream editorial system.

Visual Theme & Atmosphere

Warm editorial AI-video brand: the hero is a deep plum-maroon block (#390a1a) carrying an enormous cream Gamuth Display *serif* headline at a calm 400 weight — closer to a literary magazine cover than a video tool. Above it sits a small uppercase Brett monospace eyebrow in coral-red, a pairing (high-contrast serif + techy mono + neutral Booton sans) that gives the brand its character. A floating rounded nav bar in pale pink-cream hovers over the plum. Light sections invert to a warm pink-white canvas with plum ink and cream product cards. Colour is rationed to one coral-red used for the eyebrow and the primary button, with a deep wine for secondary. Feels: warm, editorial, characterful, confident.

Color Palette & Roles

Surfaces

TokenHexRole / usage
canvas#fff7faPale pink-white page background, floating nav
cream#fff8f4Warm cream cards, text on plum
plum-block#390a1aDeep plum-maroon hero / feature blocks
black#000000Deepest sections
ink-panel#1a1a1aNeutral dark panels
surface#f1eaedPale plum-tinted inset

Text

TokenHexRole / usage
ink#26171dPrimary plum-black text, nav links
ink-2#110a0dDeepest text
plum#390a1aSection headings on light
muted#583f4a / #3f2a32Secondary text
faint#8b6f7a / #987c87Captions, placeholder
cream-text#fff8f4Text on plum/dark blocks

Accent & semantic

TokenHexRole / usage
coral-red#f73b3bSignature accent — eyebrow, primary CTA
coral-2#ff5340Secondary accent / hover
wine#651a39Deep plum secondary button
blue#0062ffRare link accent

Borders

TokenHexRole / usage
border#d1c7cbHairline borders
border-2#f1eaedSubtle dividers

Rule: plum and cream do the structural work; coral-red #f73b3b is the single accent, reserved for the mono eyebrow and the primary button. Blue is rare.

Typography Rules

RoleSize/LineWeightTracking
Display (hero)88 / normal400normal, Gamuth Display
Section heading56 / 61.6400normal, Gamuth Display
Eyebrow (Brett mono)18 / 18400+0.72px, UPPERCASE
Sub / lead18 / 27400normal, Booton
Nav / UI16 / 24600normal, Booton

Patterns: the three-family pairing is the identity — serif display, mono eyebrow, sans UI. The display stays at 400 no matter the size; weight only rises for nav/UI (600).

Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.