---
title: "Stable Audio design system"
variant: extended
source: https://stableaudio.com/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/stableaudio-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Stable Audio · Design System

> A stark dark canvas, punctuated by sound and signal.

**Theme:** dark · **Industry:** ai · **Source:** https://stableaudio.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Stable Audio pairs a near-black canvas with restrained white typography and one vivid amber action color. A hands-on audio prompt interface leads into product pathways, partner proof, community examples, and a compact newsletter footer.

## North star

Keep the interface almost entirely monochrome and let the working audio experience—not decoration—earn the single amber accent.

## Overview

The page is built on a near-black canvas, with white headings and controls carrying the strongest contrast. Muted grays keep supporting copy, borders, and card details legible without competing with the content; amber is reserved for the primary START action. Inter is used throughout, with bold, tightly tracked display text and compact navigation and button labels. The opening experience layers a large, blurred monochrome sound-wave visual behind a centered generation interface and a horizontal strip of audio examples. Below, broad black section bands and generous vertical gaps separate product cards, partner proof, workflow content, and community posts. Cards stay dark and restrained, relying on thin gray outlines and subtle inset highlights rather than heavy shadows. The final newsletter area shifts slightly warmer and lighter than the main canvas, while retaining the same compact, understated visual language.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Dominant page canvas and the uninterrupted background across the hero and most content sections. |
| Soft White | `#e6e6e6` | `--color-soft-white` | neutral | Primary muted copy and footer text, softer than headings while remaining clear on black. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Headings, navigation, controls, and prominent text; also used in thin outlines and example-card details. |
| Panel Black | `#111111` | `--color-panel-black` | surface | Dark button, card, and footer surfaces that separate content subtly from the canvas. |
| Graphite Line | `#3f3f3f` | `--color-graphite-line` | semantic | Low-contrast interface and input edging; measured within gradient and control details. |
| Slate Blend | `#494949` | `--color-slate-blend` | semantic | A gradient-only gray seen in secondary visual treatments, not a defining brand surface. |
| Quiet Silver | `#b3b3b3` | `--color-quiet-silver` | neutral | Secondary descriptive copy and low-emphasis interface text. |
| Divider Charcoal | `#333333` | `--color-divider-charcoal` | semantic | Hairline borders around badges and footer regions. |
| Muted Graphite | `#2f2f2f` | `--color-muted-graphite` | semantic | Subtle text or interface details that sit below the main gray copy in emphasis. |
| Signal Amber | `#f8a815` | `--color-signal-amber` | accent | The primary START action and the slider handle in the hero audio-generation interface. |
| Cool Ash | `#a9a8b2` | `--color-cool-ash` | neutral | Minor muted text details, including footer and supporting interface content. |
| Control Gray | `#808080` | `--color-control-gray` | semantic | Outlines on audio controls and quiet links or card details. |
| Pale Silver | `#cccccc` | `--color-pale-silver` | neutral | Limited supporting copy and badge text. |
| Carbon Gray | `#262626` | `--color-carbon-gray` | surface | Secondary dark interface and media detail; also a prominent tone in the hero artwork. |
| Near Black | `#050505` | `--color-near-black` | surface | Near-black secondary surface, close to the main canvas and used for supporting visual areas. |
| Blue Charcoal | `#1b1b1e` | `--color-blue-charcoal` | semantic | A minor gradient-only dark tone, not a primary page color. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-surface` → `#111111` (Panel Black) · `--color-surface-2` → `#050505` (Near Black) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#e6e6e6` (Soft White) · `--color-text-subtle` → `#b3b3b3` (Quiet Silver) · `--color-border` → `#333333` (Divider Charcoal) · `--color-accent` → `#f8a815` (Signal Amber) · `--color-on-accent` → `#27262b`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#050505` | 20.38:1 | AAA |
| `#e6e6e6` | `#000000` | 16.83:1 | AAA |
| `#e6e6e6` | `#111111` | 15.13:1 | AAA |
| `#e6e6e6` | `#050505` | 16.33:1 | AAA |
| `#b3b3b3` | `#000000` | 10.02:1 | AAA |
| `#b3b3b3` | `#111111` | 9.01:1 | AAA |
| `#b3b3b3` | `#050505` | 9.72:1 | AAA |
| `#f8a815` | `#000000` | 10.6:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgba(96, 96, 96, 0.6), rgba(136, 136, 136, 0.5))`
- `linear-gradient(to top, rgba(39, 38, 43, 0.7), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700, 600 | Headings, body copy, navigation, buttons, links, and labels across the page. | Inter |
| ui-monospace | `--font-mono` | system | 400, 700 | Small technical-style hero action label. | IBM Plex Mono |

- **Inter:** Bold headings and navigation; compact labels and buttons; measured display and body styles use slightly tight tracking.
- **ui-monospace:** Restrict to concise uppercase control text such as START; measured at regular weight.

### Type scale — Perfect Fifth (ratio ≈ 1.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 1.56 | -0.024em | — | Inter | Large hero message, set bold with close tracking. |
| h2 | 20px | 700 | 1.6 | -0.017em | — | Inter | Section headings and card-level feature titles. |
| body | 16px | 500 | 1.38 | -0.011em | — | Inter | Main explanatory copy and product-card descriptions. |
| caption | 11px | 400 | 1.5 | 0 | — | Inter | Fine print, helper text, and supporting labels. |
| button | 11px | 700 | 1.27 | 0 | — | Inter | Compact bold calls to action and prompt controls. |
| nav | 14px | 700 | 1.71 | -0.006em | — | Inter | Bold primary navigation links. |
| link | 12px | 400 | 1.33 | -0.015em | — | Inter | Small secondary links, including footer links. |
| code | 10px | 400 | 1.5 | 0 | — | ui-monospace | Compact monospace technical labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 6, 8, 12, 16, 20, 24 px.
- Section rhythm 96px · element gap 4px · card padding — · max content width 915px.

Use a spacious, section-led vertical flow on a centered page with a measured maximum width of 915px. The hero is centered around the prompt tool and horizontal example rail; later content mixes centered introductions with three-column product cards and narrower partner or community groupings. Keep the main content density low and give sections generous separation. The newsletter and footer form a distinct closing band. The measured section rhythm is spacious, with a 96px section gap and a 4px base spacing unit.

## Shape & elevation

- Radius: button `4px` · input `4px` · badge `9999px` · link `12px` · xs `4px` · sm `12px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset` (link, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.28) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px 6px 22px 0px`
- Motion: standard transition `0.42s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The design is mostly flat: black canvas, dark panels, and fine gray borders create separation without prominent drop shadows. Cards and links show subtle inset white highlights, while some media controls use a restrained layered shadow. Use thin outlines and contrast, not raised glossy surfaces, to establish hierarchy.

## Imagery

The hero uses a full-width, blurred monochrome waveform-like visual behind the interface; treat it as atmospheric media rather than a color source. Small rectangular audio-example thumbnails sit in a horizontal strip. Lower sections favor compact dark cards, partner marks, and social posts. Keep imagery predominantly grayscale and contained in its card or rail, with no invented colorful illustration style.

## Components

### Primary navigation

Compact white wordmark and bold links across the top, with distinct sign-up and login controls.

### Audio prompt composer

Wide dark prompt field with fine gray outline, a length slider, time readout, and amber START button.

### Audio example rail

Horizontal row of monochrome rectangular example thumbnails with small play and track details.

### Product pathway cards

Three dark browser, DAW, and app cards with iconography, compact bullet lists, and restrained action links.

### Partner and community cards

Dark social proof cards with thin outlines, small attribution text, short content, and compact outbound links.

### Pill badges

Small rounded genre labels using white text and a fine #333333 border.

### Newsletter footer

Slightly lifted dark footer band with an email field, light subscribe button, and grouped utility links.

### Measured component styles

- **Primary button** (“START”): background #f8a815 · text #27262b · border 1px solid · radius 0px · padding 0px 24px · 700 12px ui-monospace
- **Secondary button** (“Try this prompt”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 4px 12px · 700 11px Inter
- **Link** (“@cocktailpeanut Ringtone salsa --- gener”): transparent background · text #ffffff · radius 12px · padding 20px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 25
- **Input**: transparent background · text #ffffff · border 1px solid #424241 · radius 4px · padding 8px 12px · 400 14px Inter
- **Card** (“Your browser Stable Audio web app Create”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 25
- **Badge** (“Synth-wave”): transparent background · text #ffffff · border 1px solid #333333 · radius 9999px · padding 2px 8px · 400 10px Inter
- **Navigation item** (“Open Stable Audio”): transparent background · text #ffffff · border 1px solid · radius 0px · padding 0px · 700 14px Inter

## Do

- Use #000000 as the dominant page canvas.
- Reserve #f8a815 for the primary action and small control emphasis.
- Keep supporting text gray and lower contrast than headings.
- Use thin borders to define cards and controls.
- Keep the hero interface centered over atmospheric monochrome media.
- Allow generous vertical separation between major sections.

## Don't

- Do not introduce additional saturated accent colors.
- Do not make cards bright or heavily elevated.
- Do not let hero artwork obscure readable interface controls.
- Do not use oversized decorative gradients as section backgrounds.
- Do not crowd the page with dense layouts or excessive copy.
- Do not apply the amber accent to ordinary links and body text.

## Agent prompt

Build a new page in Stable Audio’s visual style: use Studio Black (#000000) as the main canvas, Signal White (#ffffff) for headings and controls, and Soft White (#e6e6e6) or Quiet Silver (#b3b3b3) for secondary copy. Reserve Signal Amber (#f8a815) for one primary action. Use Inter throughout, with compact bold navigation and button labels; use a restrained monospace face only for technical control labels. Organize content into spacious, clearly separated sections inside a centered content area. Favor thin Divider Charcoal (#333333) or Control Gray (#808080) outlines, dark panels, and subtle inset highlights over prominent shadows. If the page includes audio media, use grayscale thumbnails or atmospheric monochrome imagery and keep the controls legible. Maintain a clean, product-led hierarchy and avoid decorative color noise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width monochrome media behind a centered headline, prompt composer, and horizontal audio-example rail. | Text prompt entry, Length slider, Primary generate action, Clickable audio examples | Blurred waveform backdrop, Thin-outlined composer, Amber action button, Grayscale thumbnail rail |
| 2 | feature-grid | Centered introduction above three side-by-side cards for browser, DAW, and app workflows. | Choose a workflow, Feature bullets, Card-level actions | Three dark cards, Large product icons, Compact lists, Small text buttons |
| 3 | testimonials | Centered section heading and copy, partner marks, then a compact row of social proof cards. | Partner recognition, Social proof, Outbound links | Monochrome partner logos, Dark outlined cards, Small attributions |
| 4 | feature-split | Two-column content section with explanatory heading and supporting product media. | Explain iterative workflow, Show process stages, Explore action | Bold section heading, Compact bullet list, Embedded video |
| 5 | content-feed | Centered introduction above a horizontally arranged feed of compact social cards. | Browse artist examples, Scroll community feed, Open source posts | Centered heading, Dark social cards, Small metadata and links |
| 6 | newsletter | Full-width, slightly lighter footer band with a newsletter form and grouped site links. | Email signup, Subscribe action, Navigate utility links | Email input, Light subscribe button, Grouped footer columns |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/stableaudio-com