Kage Design logo kage
descript.com
descript.com · Landing page · Editorial · Dark screenshot

Design analysis

Descript's homepage is a long editorial marketing page that alternates deep-maroon and near-black bands with cream trust bands. A floating white pill nav sits over a hero set in an oversized cream serif headline, with red letter-spaced eyebrow labels and a single red CTA; proof comes from large editor mockups including a floating AI-chat card. Down the page the rhythm shifts through a logo marquee, three dark testimonial cards, a tabbed numbered workflow slide (01 Record) with prev/next arrows, an AI-tools carousel, a 01–06 use-case switcher, then cream bands holding compliance badges, oversized stat numerals, lavender review cards, a split FAQ accordion, and a dense four-column footer with a secondary guides/tools panel. The high-contrast serif paired with a neutral grotesque and a strictly reserved red accent hold all thirteen sections together.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/descript-com/c210b18a-1678-4bef-91b5-c444a8589f04-1789146857587-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/descript-com/c210b18a-1678-4bef-91b5-c444a8589f04-1789146847529.webp
- Design on Kage: https://kage.design/designs/descript-landing-page

## Before you start
Ask the user what product they are building, who it is for, and what brand assets they already have (name, colours, typeface, logo). Wait for their answers, then apply everything below to their product — not to the reference site.

## Page structure
Build a single long marketing landing page with these sections, top to bottom:

1. **Floating pill nav** — a white, fully-rounded bar pinned near the top over the dark hero: wordmark left, 3–4 dropdown items plus one text link, then text links ("Contact sales"-style) and a filled primary button on the right.
2. **Hero** — centred on a deep-maroon band: a small red letter-spaced uppercase eyebrow, a two-line serif display headline in cream, one short sans paragraph, and one filled red CTA button.
3. **Product proof visual** — a large light editor-style UI mockup: a text/script panel, media preview, a floating AI-assistant chat card overlapping on the right, and a clip timeline strip along the bottom, with soft shadows so it lifts off the dark band.
4. **Logo marquee** — a one-line trust statement, then a horizontal row of white customer logos on the maroon background.
5. **Testimonials** — three equal dark cards, each with a short quote, a role line, and a customer wordmark.
6. **Workflow section** — near-black band with a centred serif headline, five pill tab buttons (first active), then one wide card: a red index number ("01"), serif slide title, body copy, and four icon-labelled sub-features on the left, a UI mockup on the right, with circular prev/next arrows at the card edges.
7. **AI-tools carousel** — very dark band with a centred serif headline, then one wide card with text plus a red CTA on the left and a screenshot mockup on the right, and a pair of circular arrows centred below.
8. **Use-case switcher** — dark band with a centred serif headline and subcopy; the left column is a numbered list (01–06) with thin dividers where the active row is highlighted, and the right side shows a photo, a serif card title, body copy and a red CTA.
9. **Business band** — cream section: red eyebrow, two-line serif headline, subcopy, and a dark secondary button; below, three compliance cards (circular badge, bold label, small copy) and three stat cells with oversized numerals and customer wordmarks.
10. **Reviews** — cream band: serif headline plus copy on the left, a third-party rating block (stars, score, review count) on the right; underneath, three lavender review cards, each with a red category label, a quote, and a name with role.
11. **FAQ** — cream band in a split layout: a big serif headline pinned left, an accordion list on the right with thin dividers and chevrons.
12. **Final CTA** — deep-maroon band: serif headline, paragraph, one filled red and one outlined button; below, a row of three rounded media thumbnails.
13. **Footer** — near-black: wordmark, social icons and copyright on the left with four link columns; then a slightly lighter sub-panel containing two more link groups ("Guides", "Tools") and two enterprise links.

## Design language
- **Type pairing:** an editorial high-contrast serif with tight leading for every section headline, paired with a neutral grotesque sans for body, nav, buttons and UI labels. Headlines run very large (72–120px desktop, ~1.05 line-height); body is 15–16px at 1.5–1.6 line-height.
- **Eyebrows:** red letter-spaced uppercase micro-labels (11–12px, ~0.1em tracking, `#E5483D`) open each major section and preview the accent colour.
- **Section rhythm:** alternate full-bleed bands — deep maroon `#33111E`, near-black maroon `#1C090F`, cream `#F4EFE7` — so the page visibly changes temperature. Dark bands carry product proof and workflow storytelling; cream bands carry trust (business, reviews, FAQ); keep the footer near-black.
- **Colour discipline:** reserve red `#E5483D` for primary CTAs, eyebrows, active tabs, index numerals and category labels — nothing else. Secondary buttons are solid near-black on light bands or outlined cream on dark bands.
- **One accent exception:** introduce lavender `#C9CCF4` only for social-proof cards on cream, with near-black text, so reviews feel physically different from marketing content.
- **Cards and surfaces:** 12–16px radius, 1px subtle borders (white at ~10% alpha on dark, black at ~8% on light), flat or very soft shadows. Large UI mockups get bigger soft shadows to float above dark bands; the floating chat card overlaps its mockup to add depth.
- **Numbering as wayfinding:** red index numerals ("01", "02"…) precede slide titles and use-case rows; the active item is marked with a highlight bar or divider weight, not a colour fill.
- **Controls:** nav, tabs and buttons are all fully-rounded pills; carousel arrows are thin-stroke circles; accordion rows are separated by hairlines with chevrons.
- **Motion:** restrained — tab and slide swaps, accordion expands, a slow logo marquee scroll; no decorative animation or gradients.
- **Density taper:** airy centred hero at the top, medium card grids mid-page, compact badge/stat rows in the trust bands, then the densest layout in the multi-column footer, ending with a raised sub-panel of secondary links.

## Never
Do not reuse Descript's name, wordmark, logo, the "Underlord" assistant name, testimonial quotes, customer logos, marketing copy, photography, or its editor interface. Apply the layout language, type pairing and colour discipline to the user's own product, copy and brand assets, and never present the result as Descript.

Components from this page

All components

Related designs