explainx.ainewsletter3.4k
Back to designs

DESIGN.md · explainx registry

Descript

Descript's design system is "Media Editing for the Post-Text World." It is a high-contrast, energetic environment that combines the precision of a video editor with the clarity of a modern text processor.

Design System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
name
Descript
colors
background: "#ffffff" foreground: "#1a1a1a" # Woodsmoke brand: "#0062ff" # Descript Blue muted: "#888888" border: "#e5e5e5" card: "#f4f4f4" accent: "#0062ff" dark: background: "#121212" foreground: "#ffffff" muted: "#666666" border: "#262626" card: "#1a1a1a" accent: "#0062ff"
typography
fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" mono: "JetBrains Mono, Courier New, monospace" body: fontSize: "15px" lineHeight: "1.5" heading: fontWeight: "700" letterSpacing: "-0.01em"
rounded
default: "4px" md: "8px" lg: "12px" full: "9999px"

Design System: Descript

Overview

Descript's design system is "Media Editing for the Post-Text World." It is a high-contrast, energetic environment that combines the precision of a video editor with the clarity of a modern text processor.

Design Philosophy

  1. Text-First Editing: The UI is anchored on a transcript-style view, where editing text edits the video/audio. This requires a typography-centric layout.
  2. Vibrant Precision: Uses a "Vibrant Blue" (#0062FF) to represent the "active" state of creation and the brand's digital energy.
  3. High Signal Grays: Uses a meticulously defined scale of light and dark greys to manage the complexity of layers, timelines, and tools.
  4. Seamless Transition: Designed to move the user effortlessly between the script (Text) and the scene (Visual).

Colors

  • Descript Blue (#0062FF): The primary identifier, used for playback controls, primary buttons, and the brand's digital identity.
  • Woodsmoke (#1A1A1A): A professional, deep grey used for text and secondary headers to ensure high legibility.
  • The "Tool" Palette: Uses subtle greens and purples for different media tracks (Audio vs. Video).

Typography

  • Inter: The workhorse of the interface, providing exceptional clarity for the transcript-based editor.
  • Monospace for Time: Uses Mono fonts for timestamps, frame counts, and technical metadata.

Components

  • The Script Editor: A clean, white vertical space with integrated speaker labels and word-level selection.
  • The Timeline: A horizontal, multi-track container with 1px markers and colorful "clip" pills.
  • Scene Rail: A vertical or horizontal list of thumbnails representing the visual structure of the project.

Visual Effects

  • Word-level Highlighting: Uses a subtle blue background to indicate the currently playing word in the script.
  • Spring-based Scrubbing: The playhead and timeline movements feature high-fidelity, spring-based motion.
  • Translucent Overlays: Uses subtle rgba backgrounds for toolbars to maintain context with the media preview.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Descript on explainx.ai?
Descript's design system is "Media Editing for the Post-Text World." It is a high-contrast, energetic environment that combines the precision of a video editor with the clarity of a modern text processor. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →