--- version: alpha name: Descript description: Deep maroon-canvas AI video editor with custom display serif headlines, a warm neutral system, and a lilac secondary accent — editorial warmth in a tool that edits video like a doc. colors: # Core canvas — named in CSS as --Core-Canvas-White and --Maroon-900 (dark mode) background: "#fff7f2" # --Core-Canvas-White: warm cream canvas background-dark: "#390a1a" # --Maroon-900: the rich maroon dark canvas surface: "#fff7fa" # --Neutral-0: card and panel surface surface-raised: "#f1eaed" # --Neutral-50: slightly lifted surface # Ink ink: "#390a1a" # --Maroon-900: primary text on light ink-inverted: "#fff7fa" # --Neutral-0: text on dark/maroon backgrounds ink-secondary: "#583f4a" # --Neutral-700: body text, secondary labels ink-muted: "#715661" # --Neutral-600: captions, metadata on-color: "#fffafc" # --Core-White: text on colored fills # Brand accent — maroon red primary CTA primary: "#390a1a" # --Maroon-900: the brand's deep maroon on-primary: "#fff7fa" primary-mid: "#651a39" # --Maroon-750: midrange hover maroon primary-container: "#ffe5f7" # --Maroon-50: light maroon tint # Secondary accent — lilac / periwinkle secondary: "#8787e0" # --Lilac-400: the signature lilac accent secondary-bright: "#5050be" # --Lilac-600: deeper lilac for text links secondary-container: "#ebebff" # --Lilac-50: pale lilac backgrounds # CTA red — used on hero buttons cta: "#ff5340" # --Red-400: the action orange-red cta-strong: "#e62324" # --Red-500: hover/pressed CTA cta-container: "#ffe8db" # --Red-50: light red tint # Borders border: "#d1c7cb" # --Neutral-200: standard card borders border-subtle: "#e4dde0" # --Neutral-100: hairline dividers # Shadows (opaque approximations) shadow-soft: "#4c343e" # was rgba(88,63,74,0.14) — warm maroon shadow shadow-deep: "#583f4a" # was rgba(88,63,74,0.12) at 120px spread # State / interactive focus-ring: "#8787e0" # Lilac-400 ring on keyboard focus overlay: "#390a1a" # was rgba(57,10,26,0.16) — warm maroon overlay typography: display-hero: fontFamily: "Gamuth Display, Georgia, serif" fontSize: 88px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px fontFeature: '"calt", "liga"' display: fontFamily: "Gamuth Display, Georgia, serif" fontSize: 56px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0px fontFeature: '"calt", "liga"' heading-section: fontFamily: "Gamuth Display, Georgia, serif" fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0px fontFeature: '"calt", "liga"' heading-sub: fontFamily: "Booton, system-ui, Roboto, Arial, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.33 letterSpacing: -0.48px fontFeature: '"calt", "liga"' eyebrow: fontFamily: "Brett, system-ui, Roboto, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.72px fontFeature: '"calt", "liga"' body-large: fontFamily: "Booton, system-ui, Roboto, Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0px fontFeature: '"calt", "liga"' body: fontFamily: "Booton, system-ui, Roboto, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: -0.36px fontFeature: '"calt", "liga"' body-strong: fontFamily: "Booton, system-ui, Roboto, Arial, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.56 letterSpacing: 0px fontFeature: '"calt", "liga"' button-ui: fontFamily: "Booton, system-ui, Roboto, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0px fontFeature: '"calt", "liga"' caption: fontFamily: "Booton, system-ui, Roboto, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px fontFeature: '"calt", "liga"' label-uppercase: fontFamily: "Brett, system-ui, Roboto, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0.72px fontFeature: '"calt", "liga"' spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 88px 6xl: 104px rounded: none: 0px sm: 4px md: 8px lg: 12px pill: 9999px circle: 9999px # 50% in source — Google format requires px; use pill value for circular elements components: button-primary: backgroundColor: "{colors.cta}" textColor: "{colors.on-color}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.cta-strong}" textColor: "{colors.on-color}" button-dark: backgroundColor: "{colors.primary}" textColor: "{colors.ink-inverted}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-dark-hover: backgroundColor: "{colors.primary-mid}" textColor: "{colors.ink-inverted}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-ghost-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" rounded: "{rounded.lg}" padding: 24px card-hover: backgroundColor: "{colors.surface}" card-dark: backgroundColor: "{colors.primary}" textColor: "{colors.ink-inverted}" rounded: "{rounded.lg}" padding: 32px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 16px 24px badge: backgroundColor: "{colors.secondary-container}" textColor: "{colors.secondary-bright}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-red: backgroundColor: "{colors.cta-container}" textColor: "{colors.cta-strong}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px eyebrow-label: textColor: "{colors.ink-muted}" typography: "{typography.eyebrow}" padding: 0px --- # Descript Design System ## Overview Descript's marketing site carries the warmth of a print magazine into the browser — and unlike most AI-tool brands that lean on clinical white and electric blue, Descript is built on a deep maroon (`{colors.background-dark}`, `{colors.primary}`) and a creamy warm canvas (`{colors.background}`). The result feels more like a premium creative studio than a SaaS dashboard. Dark maroon sections alternate with soft cream panels in a pattern that creates visual drama without resorting to dark-mode gymnastics — the brand can go full `{colors.primary}` and back to `{colors.background}` within a single scroll, maintaining a thread of warmth throughout. The typography is the brand's most distinctive decision. Gamuth Display (`{typography.display-hero}`) is a custom serif at weight 400 — not a contemporary grotesque, not a geometric sans, but a proper display serif with editorial gravitas. At 88px it reads like a magazine cover headline. Booton handles all functional text and body copy, a clean sans-serif with tight negative tracking (`{typography.body}` at -0.36px) that keeps reading compact and efficient. Brett — an uppercase-only display variant with wide letter-spacing — appears as a recurring eyebrow style (`{typography.eyebrow}`, `{typography.label-uppercase}`), stamping section labels with a confident all-caps identity that signals chapter breaks between visual panels. The color system is surprisingly sophisticated beneath its maroon-and-cream surface. Descript maintains a full palette of named scales — Maroon, Lilac, Red, Neutral, Green — with semantic CSS variables rooted in actual design intent. The lilac accent (`{colors.secondary}`) shows up in secondary badges, links, and one-off highlights; the red-orange CTA (`{colors.cta}`) is a warmer action color than pure red, creating urgency without alarm. This three-hue accent strategy (maroon / lilac / red-orange) gives the system expressive range while staying tonally consistent with the warm-dark brand identity. **Key Characteristics:** - Deep maroon (`{colors.primary}`) as the dominant dark canvas and ink — editorial, premium, dramatically un-SaaS - Warm cream canvas (`{colors.background}`) with pink undertones, never cold white - Gamuth Display serif at weight 400 for hero and section headings — the defining typographic choice - Brett uppercase-only eyebrow style (`{typography.eyebrow}`) with wide 0.72px tracking — marks every chapter transition - Booton body sans with slight negative tracking (-0.36px) — compact but readable - Three-accent strategy: maroon primary, lilac secondary (`{colors.secondary}`), red-orange CTA (`{colors.cta}`) - 8px spacing base with a generous section rhythm (88px–104px between major panels) - Radius system that favors tight values (4–12px) on components, with pill for CTAs only - Warm maroon-tinted shadows (`{colors.shadow-soft}`) at 14px/120px spreads — depth with color, not grey - Named CSS design token scales (Maroon-0 through -950, Lilac-0 through -950, Neutral-0 through -950) - Card layout pattern: alternating cream and maroon section bands with rounded cards inside ## Colors ### Surface & Canvas - **Warm Cream** (`{colors.background}`): The primary canvas — a pinkish off-white (`--Core-Canvas-White`) that reads warm without being yellow. - **Deep Maroon** (`{colors.background-dark}`): The dark canvas used for full-bleed feature sections — the brand's boldest statement. - **Near White** (`{colors.surface}`): Card and panel backgrounds; white with a barely-perceptible warm blush. - **Lifted Surface** (`{colors.surface-raised}`): Elevated surfaces and hover states on light cards. ### Ink / Text - **Deep Maroon** (`{colors.ink}`): Primary text on cream — rich, warm, and distinctly non-black. - **Inverted White** (`{colors.ink-inverted}`): Text on dark maroon sections. - **Secondary Brown** (`{colors.ink-secondary}`): Body text and supporting labels. - **Muted Mauve** (`{colors.ink-muted}`): Captions, metadata, eyebrow labels. ### Brand Accent - **Maroon Primary** (`{colors.primary}`): The anchor dark color — hero fills, dark buttons, section backgrounds. - **Maroon Mid** (`{colors.primary-mid}`): Hover state for dark buttons. - **Maroon Container** (`{colors.primary-container}`): Light-pink fill for maroon-themed badges. ### Secondary Accent — Lilac - **Lilac** (`{colors.secondary}`): The periwinkle secondary accent — links, secondary badges, the AI "Underlord" chat callout. - **Deep Lilac** (`{colors.secondary-bright}`): Text links on light backgrounds. - **Lilac Container** (`{colors.secondary-container}`): Pale badge and tag backgrounds. ### CTA Red-Orange - **Action Red** (`{colors.cta}`): The hero primary CTA — an orange-leaning red that reads energetic against cream or maroon backgrounds. - **Strong Red** (`{colors.cta-strong}`): Hover/pressed CTA state. - **CTA Container** (`{colors.cta-container}`): Light-red surface for alert badges. ### Borders & Shadows - **Border** (`{colors.border}`): Card outlines and dividers — a warm greige. - **Border Subtle** (`{colors.border-subtle}`): Hairline dividers and subtle panel edges. - **Shadow Soft** (`{colors.shadow-soft}`): Warm maroon-tinted shadow at 14px spread. - **Shadow Deep** (`{colors.shadow-deep}`): Wide 120px spread shadow for floating panels. ## Typography ### Font Families - **Display**: Gamuth Display — a custom serif, fallback `Georgia, serif`. Used at weight 400 exclusively for all large headings. - **Body / UI**: Booton — a clean custom sans-serif, fallback `system-ui, Roboto, Arial, sans-serif`. Covers body, subheadings, and all UI text. - **Uppercase Label**: Brett — an uppercase-only companion, fallback `system-ui, Roboto, Arial, sans-serif`. Appears only in eyebrow/label contexts with wide letter-spacing. - **OpenType Features**: `"calt", "liga"` enabled across all three families. ### Hierarchy The full type scale is declared in the `typography:` token block above. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | Gamuth Display 88px / weight 400 — hero section marquee | | `display` | Gamuth Display 56px / weight 400 — feature section headers | | `heading-section` | Gamuth Display 40px / weight 400 — content section titles | | `heading-sub` | Booton 24px / 600 / -0.48px — feature card subheadings | | `eyebrow` | Brett 18px / uppercase / 0.72px tracking — section chapter labels | | `body-large` | Booton 20px / 500 — intro and lead paragraphs | | `body` | Booton 18px / 400 / -0.36px — standard body copy | | `body-strong` | Booton 18px / 600 — emphasized body, feature captions | | `button-ui` | Booton 16px / 600 — all button and nav labels | | `caption` | Booton 16px / 400 — supporting UI text | | `label-uppercase` | Brett 18px / uppercase / 0.72px — alternate eyebrow size | ### Principles - **Serif for scale, sans for function**: Gamuth Display handles everything above 32px; Booton handles everything below. There is no overlap. - **Brett for ceremony**: the uppercase Brett eyebrow style appears before every major section heading — it signals transition and creates visual hierarchy without a size change. - **Weight restraint**: the display serif stays at weight 400 regardless of size. Booton caps at 600 for headings. Nothing is heavy. - **Negative tracking on body**: Booton body (-0.36px) is tighter than neutral — it keeps long-form copy compact and editorial rather than airy. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: **8px**, with a 4px micro-step. Section separation uses the large end of the scale (`{spacing.5xl}` at 88px, `{spacing.6xl}` at 104px). Component internals use `{spacing.xs}`–`{spacing.xl}`. ### Grid & Container - Max content width: ~1280px, centered - Alternating full-bleed section bands: cream → maroon → cream → maroon, each with their own background color - Feature sections: left copy column + right product screenshot or UI demo, switching sides across sections - Card grids: 2–3 column on desktop, single column on mobile ### Whitespace Philosophy - **Magazine editorial rhythm**: generous vertical spacing between sections creates a publication-like pace — each section is its own spread. - **Warmth through density**: body copy is tightly tracked (-0.36px), creating compact text columns that feel considered and space-efficient within the generous layout. - **Full-bleed drama**: the alternating cream/maroon bands create strong visual chapters, making the page feel longer and more intentional than a typical scrolling SaaS site. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, `{colors.border}` hairline only | Inline cards, most content sections | | Subtle (Level 1) | `rgba(0,0,0,0.16) 0px 2px 4px` | Floating nav, dropdowns | | Card (Level 2) | Inset 2px `{colors.surface}` ring | Focus indicators, card borders | | Elevated (Level 3) | `{colors.shadow-soft}` 0px 16px 38px + `{colors.shadow-deep}` 0px 120px 136px | Product demo panels, hero floating cards | | Focus Ring | `{colors.focus-ring}` (lilac) 2px ring | Keyboard focus across all interactive elements | **Shadow Philosophy**: Descript's shadows are warm-tinted — both shadow layers reference the brand's own maroon pigment rather than neutral black, giving floating panels a grounded, editorial quality. The wide 120px spread shadow creates an ambient glow beneath the demo cards that suggests physical depth on a warm surface. The inset 2px white ring (the most common shadow) serves as a card-within-card border treatment rather than elevation. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed section backgrounds | | `sm` | 4px | Inline tags, code snippets | | `md` | 8px | Inputs, dropdowns, secondary cards | | `lg` | 12px | Primary feature cards, nav elements | | `pill` | 9999px | All CTA buttons, badges | | `circle` | 9999px | Avatar images, play buttons (50% in source — uses pill value per Google spec) | Descript's shape language is pragmatic and polarized: components are either gently rounded (4–12px for cards and inputs) or fully pill-shaped (CTAs, badges). The mid-range is sparse. The notable large radius of 60px appears on media controls (muted/unmuted icon buttons), suggesting that interactive media elements follow a more circular logic than content elements. ## Components The complete component spec lives in the `components:` token block. Reference tokens directly. ### Button Variants - **`button-primary`** — Red-orange (`{colors.cta}`) fill, white text, pill shape. The hero CTA — used for "Get started for free" on cream backgrounds. - **`button-dark`** — Deep maroon (`{colors.primary}`) fill, inverted white text, pill. Used as secondary CTA on cream sections or primary CTA on maroon sections. - **`button-secondary`** — White surface, maroon text, pill. The "Contact sales" / "Learn more" companion to the primary CTA. - **`button-ghost`** — Transparent fill, maroon ink, pill. Nav-level tertiary actions. ### Cards - **`card`** — Cream surface, `{rounded.lg}` (12px), 24px padding. Standard feature tile. - **`card-dark`** — Deep maroon fill, inverted text, 12px radius. Used for dark alternate feature tiles. ### Inputs - **`input`** — Near-white surface, `{rounded.md}` (8px), `{typography.body}` text. Focus ring in lilac `{colors.focus-ring}`. ### Navigation - **`nav-bar`** — Cream background, maroon text. Booton 16px weight 600 for links. CTA pinned right as a red-orange pill button. ### Badges / Labels - **`badge`** — Lilac container (`{colors.secondary-container}`) fill, deep lilac text, pill. Feature tags and AI-feature callouts. - **`badge-red`** — Red container fill, strong-red text. Alert-type or "new" indicators. - **`eyebrow-label`** — Brett uppercase text, muted color, no background. Chapter/section transition labels. ## Do's and Don'ts ### Do - Use Gamuth Display weight 400 for all headings above 32px — the serif at this weight IS the Descript brand voice - Precede every major section heading with a Brett uppercase eyebrow label (`{typography.eyebrow}`) in `{colors.ink-muted}` — it's the system's transition grammar - Alternate cream (`{colors.background}`) and maroon (`{colors.background-dark}`) section bands to create the editorial-magazine chapter structure - Use `{colors.cta}` (red-orange) for the primary CTA on cream sections; switch to `button-dark` (`{colors.primary}`) on maroon sections - Apply the warm maroon shadow stack (`{colors.shadow-soft}` + `{colors.shadow-deep}`) to floating demo cards and hero product panels - Use `{colors.secondary}` lilac for AI-feature badges, secondary links, and the conversational UI elements (the Underlord chat) - Keep the body tracking negative (`{typography.body}` at -0.36px) — tighter than neutral is part of the editorial quality - Reference the named CSS token scales (Maroon-*, Lilac-*, Neutral-*) when extending the system — they have full 0–950 ramps ### Don't - Don't use Gamuth Display below 32px — it's a display face, not a text face; use Booton for UI and body - Don't apply heavy weight (700+) to Gamuth Display — the brand's display type stays at weight 400 - Don't introduce a pure white (`#ffffff`) background — Descript's lightest surface is `{colors.background}` (warm cream) or `{colors.surface}` (blush near-white) - Don't use the red-orange CTA (`{colors.cta}`) on maroon backgrounds — contrast fails; switch to `button-secondary` or `button-dark` - Don't put sharp corners (0px radius) on interactive components — minimum is `{rounded.sm}` (4px) - Don't use Brett (`{typography.eyebrow}`) for body text or headings — it's uppercase-only and sparse; overuse kills its ceremony - Don't use `{colors.secondary}` (lilac) as a primary action color — it's an accent reserved for AI features and secondary labels - Don't use neutral grey shadows — Descript's shadow system is warm and maroon-tinted throughout --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <768px | Single column; hero text scales down; nav collapses to hamburger; CTA buttons go full-width | | Tablet | 768–1199px | Two-column heroes; feature grids collapse to two columns | | Desktop | 1200px+ | Full layout with alternating two-column feature sections | ### Touch Targets - Pill buttons with 12px top/bottom padding maintain comfortable touch height (min 44px effective) - Media control circles (60px radius) are thumb-sized by design - Nav links use generous 16–24px padding for easy taps ### Collapsing Strategy - **Navigation**: full horizontal nav with dropdowns → hamburger menu at mobile; red-orange CTA persists as a persistent button - **Feature sections**: side-by-side copy + screenshot → stacked with screenshot below copy - **Section bands**: full-bleed cream/maroon alternation maintained at all widths - **Display type**: Gamuth Display scales proportionally; large hero (88px) reduces toward 40–48px on mobile while preserving the serif identity - **Spacing**: section padding compresses from 88–104px to 48px on mobile ### Image Behavior - Product screenshots and UI demos are constrained within rounded cards and scale as flex children - Demo panel shadows (`{colors.shadow-soft}`) reduce on mobile to avoid visual noise - Logos and brand marks (wordmark) maintain their aspect ratio; no mobile-specific cropping --- ## Agent Prompt Guide ### Quick Color Reference - Background: Warm Cream (`{colors.background}`) — or Deep Maroon (`{colors.background-dark}`) for dark sections - Text: Deep Maroon (`{colors.ink}`) on light; Inverted White (`{colors.ink-inverted}`) on dark - Body text: Secondary Brown (`{colors.ink-secondary}`) - Primary CTA: Red-Orange (`{colors.cta}`) - Brand dark fill: Deep Maroon (`{colors.primary}`) - Accent: Lilac (`{colors.secondary}`) - Border: Warm Greige (`{colors.border}`) ### Example Component Prompts - "Build a hero section on warm cream (`{colors.background}`). Headline in Gamuth Display 88px weight 400, deep maroon (`{colors.ink}`). Precede it with a Brett uppercase eyebrow label (`{typography.eyebrow}`, `{colors.ink-muted}`). Subtitle in Booton 20px weight 500 (`{typography.body-large}`, `{colors.ink-secondary}`). Two pill CTAs: red-orange fill (`{colors.cta}`, white text) and white fill (`{colors.surface}`, maroon text). Both at `{rounded.pill}`, 12px 24px padding." - "Create a dark feature section: full-bleed maroon background (`{colors.background-dark}`). Headline in Gamuth Display 56px (`{typography.display}`) in inverted white (`{colors.ink-inverted}`). Feature cards inside as `card-dark` with `{rounded.lg}` radius and `{colors.ink-inverted}` text. Apply warm shadow stack (`{colors.shadow-soft}` 16px spread + `{colors.shadow-deep}` 120px spread) to a floating demo panel." - "Design a feature card in the cream section: `{colors.surface}` background, `{rounded.lg}` radius, 24px padding. Brett uppercase eyebrow in `{colors.ink-muted}`. Subheading in Booton 24px weight 600 (`{typography.heading-sub}`, -0.48px tracking). Body copy in Booton 18px weight 400 (`{typography.body}`, -0.36px tracking, `{colors.ink-secondary}`). Lilac badge (`{components.badge}`) in the top-right corner." - "Build a nav bar: cream (`{colors.background}`) background, Descript wordmark left, center links in Booton 16px weight 600 (`{typography.button-ui}`, `{colors.ink}`). Right side: 'Sign in' ghost button + 'Get started for free' red-orange pill CTA (`{colors.cta}`, `{rounded.pill}`, 12px 24px)." - "Create an AI feature badge: `{colors.secondary-container}` fill, `{colors.secondary-bright}` text, Booton 16px weight 400, `{rounded.pill}`, 4px 10px padding. Pair it with a Brett eyebrow label above a Gamuth Display section heading." ### Iteration Guide 1. Start on warm cream (`{colors.background}`) — never pure white. If the canvas looks clinical, warm it up. 2. Place a Brett uppercase eyebrow label (`{typography.eyebrow}`, `{colors.ink-muted}`) before every Gamuth Display heading — the ceremony is the structure. 3. Alternate section bands: cream → maroon → cream. Each flip creates a new chapter; maintain this even at feature-card level. 4. The CTA is red-orange (`{colors.cta}`) on cream, dark maroon (`{colors.primary}`) or inverted white on maroon. Never red on red. 5. Gamuth Display weight 400 for headings; Booton for everything functional. Mixing fonts across this line breaks the voice. 6. Lilac (`{colors.secondary}`) is reserved for AI/Underlord features and secondary metadata — don't promote it to a primary action color. 7. Shadows carry the brand color: use the warm maroon shadow stack for any floating panel or product card, not neutral grey. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Descript. Brand names and trademarks belong to their respective owners.