---
name: Descript
description: "This site is a prime example of a modern, professional SaaS design that uses classic typography and a restrained color palette to build trust and clarity."
version: alpha

colors:
  background: "#F1EAED"
  primary: "#1A1A1A"
  neutral: "#D1C7CB"
  line: "rgba(229,231,235,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, warm, and highly functional design for a leading AI video editing platform.

*A modern studio that feels both powerful and accessible.*

## Colors

A warm, off-white canvas with high-contrast dark ink for readability, using a deep burgundy for emphasis in the hero section.

- **Background (`#F1EAED`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Muted (`#D1C7CB`)** — uses `muted` token
- **Borders (`rgba(229,231,235,1.0)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

A full-width hero section with a centered layout for key messaging, followed by a multi-column grid for feature cards.

*Rhythm:* Standard 4px base with a clear 8px/16px/24px progression for padding and gaps.

## Elevation & Depth

- rgba(0,0,0,0.16) 0px 2px 4px 0px
- Borders: 1px solid #E5E7EB

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Clean, rectangular buttons with 4px radius and 16px vertical padding.
- **card:** Cards with 12px radius, featuring large background images and overlay text.
- **chip:** Simple text-based labels for categories.
- **input:** Standard form inputs with subtle borders.
- **hero:** A large, centered hero section with a deep burgundy background and bold serif typography.

## Do's and Don'ts

**Don't:**
- Don't use a dark mode interface — the screenshot shows a light, warm off-white background as the primary canvas.
- Don't use a highly geometric sans-serif for headlines — the screenshot shows a classic transitional serif for display text.
- Don't use a neon or electric blue as a primary accent — the screenshot uses a deep burgundy and soft coral-red for emphasis.
- Don't use heavily rounded or 'pill' shapes for primary buttons — the screenshot shows buttons with a 4px border-radius.
- Don't use excessive drop shadows or 3D effects — the screenshot shows a flat, clean surface with only a subtle, single box-shadow for elevation.
- Don't use a crowded, multi-sidebar navigation — the screenshot shows a clean, horizontal top navigation bar with ample whitespace.

---

## System Prompt (paste into AI agent)

```
Descript's design is a clean, professional SaaS aesthetic that balances warmth with authority. It uses a light, off-white background (#F1EAED) with high-contrast dark ink (#1A1A1A) for readability. The typography features a classic transitional-serif for bold headlines and a humanist-sans for body text, creating a sophisticated yet approachable feel. Key design elements include a 4px-based spacing scale, subtle 1px borders (#E5E7EB), and a restrained use of a deep burgundy for hero sections. Critical design rules include: 1) Avoid dark mode as the default; 2) Do not use overly rounded or bubbly UI components; 3) Never use neon or high-chroma accent colors; 4) Maintain generous whitespace and a structured 12-column grid layout.
```