# Descript — Marketing Site Design Spec

> 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.

## 1. 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.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#fff7fa` | Pale pink-white page background, floating nav |
| cream | `#fff8f4` | Warm cream cards, text on plum |
| plum-block | `#390a1a` | Deep plum-maroon hero / feature blocks |
| black | `#000000` | Deepest sections |
| ink-panel | `#1a1a1a` | Neutral dark panels |
| surface | `#f1eaed` | Pale plum-tinted inset |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#26171d` | Primary plum-black text, nav links |
| ink-2 | `#110a0d` | Deepest text |
| plum | `#390a1a` | Section headings on light |
| muted | `#583f4a` / `#3f2a32` | Secondary text |
| faint | `#8b6f7a` / `#987c87` | Captions, placeholder |
| cream-text | `#fff8f4` | Text on plum/dark blocks |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| coral-red | `#f73b3b` | Signature accent — eyebrow, primary CTA |
| coral-2 | `#ff5340` | Secondary accent / hover |
| wine | `#651a39` | Deep plum secondary button |
| blue | `#0062ff` | Rare link accent |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| border | `#d1c7cb` | Hairline borders |
| border-2 | `#f1eaed` | Subtle 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.

## 3. Typography Rules

- Display: `"Gamuth Display", Georgia, serif` — high-contrast serif set very large at a calm 400.
- UI / Body: `"Booton", system-ui, sans-serif` — neutral geometric sans.
- Eyebrow / label: `"Brett", monospace` — UPPERCASE with positive tracking.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (hero) | 88 / normal | 400 | normal, Gamuth Display |
| Section heading | 56 / 61.6 | 400 | normal, Gamuth Display |
| Eyebrow (Brett mono) | 18 / 18 | 400 | +0.72px, UPPERCASE |
| Sub / lead | 18 / 27 | 400 | normal, Booton |
| Nav / UI | 16 / 24 | 600 | normal, 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).

## 4. Component Stylings

### Buttons
- **Primary (coral)**: bg `#f73b3b`, text cream `#fff8f4`, rounded rectangle (~`10px`, *not* a pill), h ~`52px`, Booton 16px 600. ("Get started for free".)
- **Secondary (wine)**: deep plum-wine `#651a39` fill, cream text, same radius, h ~`44px`. (Nav "Sign up".)
- **Nav link**: transparent, plum `#26171d`, Booton 16px 600, radius `4px`.

### Nav
- A floating rounded bar in pale cream `#fff7fa` sitting *over* the plum hero, inset from the page edges: Descript logo left, dropdown links (Features / Underlord / Solutions / Resources / Pricing), right Contact sales, Sign in, and a wine Sign-up button.

### Cards / panels
- Warm cream `#fff8f4` rounded cards (large radius) holding product UI — e.g. the "Underlord" AI-agent panel — floated over the plum block.

### Inputs
- Not prominently captured on marketing. Focus ring not captured.

## 5. Layout Principles

- Centered hero: mono eyebrow → enormous serif display → Booton sub → single coral CTA → floating cream product card.
- Full-bleed plum blocks alternate with pale pink-white sections.
- Floating inset nav rather than a full-width bar.
- Generous vertical rhythm; content centered.

## 6. Depth & Elevation

- Radii: `4px` (nav links), ~`10px` (buttons), large rounded cards/nav bar (~`16–24px`).
- Elevation: the floating nav and cream product cards read as raised over the plum block; most other surfaces are flat colour blocks. Hairlines `#d1c7cb`.

## 7. Motion

- Restrained: hover colour shifts on buttons and links; dropdown nav menus. Product video/demo plays inside cards. No heavy scroll library confirmed.

## 8. Backgrounds, Effects & WebGL

- Flat solid colour blocks — deep plum `#390a1a`, black, pale pink `#fff7fa`, cream `#fff8f4`. Depth comes from block contrast plus the floating nav and cards.
- No gradients, grain or WebGL captured; product screenshots and video supply the imagery.

## 9. Do's and Don'ts

### Do
- Set the hero as a deep plum-maroon block with an enormous cream Gamuth Display serif headline at 400.
- Pair three families deliberately: serif display, UPPERCASE Brett mono eyebrow, Booton sans for UI and body.
- Colour the eyebrow and primary button coral-red `#f73b3b`; keep it the only accent.
- Float a rounded pale-cream nav bar over the hero rather than a full-width bar.
- Float warm cream product cards over the plum block.
- Alternate plum blocks with pale pink-white sections.

### Don't
- Don't use the old bright-purple identity — the brand is plum, cream and coral.
- Don't set the display bold; it stays at 400 at every size.
- Don't make the buttons full pills — they are rounded rectangles (~10px).
- Don't drop the mono eyebrow; the serif/mono/sans trio is the signature.
- Don't introduce a second bright accent alongside the coral.

## 10. Responsive Behavior

- Centered layout scales fluidly; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fff7fa` · Plum block `#390a1a` · Cream `#fff8f4` · Ink `#26171d` · Muted `#8b6f7a` · Border `#d1c7cb` · Accent coral `#f73b3b` (wine `#651a39`)
- Fonts: Gamuth Display serif 400 (display 88px / section 56px) / Booton (UI+body, nav 600) / Brett mono (UPPERCASE eyebrow, +0.72px) · Body 18px · Radius ~10px button / 4px link / large card · Button height ~52px
- Focus: not captured · Hover: coral shifts toward `#ff5340`

<descript_design_language>
Use the Descript design language: a warm editorial AI-video brand whose hero is a deep plum-maroon block #390a1a carrying an enormous cream #fff8f4 Gamuth Display SERIF headline at 88px and a calm 400 weight, introduced by a small UPPERCASE Brett MONOSPACE eyebrow in coral-red #f73b3b with +0.72px tracking. That three-family pairing — high-contrast serif display, techy mono eyebrow, neutral Booton sans for UI and 18px/27 body — is the identity; the display never goes bold, and weight only rises to 600 for nav and UI. A floating rounded pale-cream #fff7fa nav bar hovers over the plum rather than spanning full width, and warm cream cards holding product UI float over the same block. Light sections invert to a pale pink-white canvas with plum ink #26171d, #8b6f7a muted text and #d1c7cb hairlines. Colour is rationed to one coral-red accent carrying the eyebrow and the primary button (rounded ~10px rectangles, NOT pills, ~52px tall, Booton 16/600) with a deep wine #651a39 secondary; blue #0062ff is rare. Surfaces are flat colour blocks with depth coming from block contrast and the floating nav/cards. Feels: warm, editorial, characterful, confident. Avoid: the old bright-purple identity, bold display weights, full-pill buttons, dropping the mono eyebrow, or adding a second bright accent.
</descript_design_language>