# Stable Audio — Design System
> Generative AI platform for music and sound effect creation.
- **Canonical:** https://uiuxskills.com/library/stable-audio
- **Source:** https://www.stableaudio.com
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:11.693Z

---

---
version: alpha
name: Stable Audio
description: Generative AI platform for music and sound effect creation.
tone: Professional, creative, and accessible.
color-scheme: light
colors:
  primary: "#FFB81C"
  surface: "#E6E1D8"
  surface-bright: "#FFFFFF"
  on-surface: "#000000"
  on-primary: "#000000"
  outline: "#000000"
  error: "#D32F2F"
  success: "#388E3C"
  warning: "#F57C00"
  info: "#1976D2"
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 700
  headline-lg:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 700
  headline-md:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 600
  headline-sm:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#D4A618"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEBEE"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Stable Audio presents a professional, clean interface designed for generative music creation. The visual language is grounded in a neutral, earthy palette that prioritizes utility and accessibility, ensuring the focus remains squarely on the creative tools and audio output.

## Colors

The color strategy relies on a high-contrast, neutral foundation to let the generative content stand out.

*   Primary (#FFB81C): Used for primary CTAs and key highlights.
*   Surface (#E6E1D8): Main background color for hero and section containers.
*   Surface-bright (#FFFFFF): Background for cards and interactive components.
*   On-surface (#000000): Primary text color for high contrast.
*   On-primary (inferred) (#000000): Text color for primary buttons.
*   Outline (#000000): Borders and dividers.
*   Error (inferred) (#D32F2F): Semantic error states.
*   Success (inferred) (#388E3C): Semantic success states.
*   Warning (inferred) (#F57C00): Semantic warning states.
*   Info (inferred) (#1976D2): Semantic info states.

## Typography

The typography uses the Inter font family exclusively to maintain a clean, readable, and professional aesthetic across all UI elements.

*   Display-lg (inferred): Hero headlines.
*   Headline-lg: Section titles.
*   Headline-md (inferred): Secondary section headers.
*   Headline-sm (inferred): Card titles.
*   Body-md: Standard body text.
*   Label-md (inferred): UI labels and button text.
*   Label-sm (inferred): Small captions and badges.

## Layout

The layout utilizes a responsive grid system with a maximum-width container and a 4px base spacing unit to ensure consistent rhythm. The page structure follows a logical flow: nav, hero, features, user-guide, and footer. The hero pattern is centered, featuring a prominent primary CTA. On smaller viewports, the layout is mobile-first, with sections stacking vertically and navigation collapsing into a hamburger menu.

## Elevation & Depth

Depth is conveyed through subtle, single-layer shadows that provide clear separation for interactive elements.

*   `elevation.sm` (inferred): Subtle lift for small UI elements.
*   `elevation.md` (inferred): Standard card lift.
*   `elevation.lg` (inferred): Modal or drawer overlays.

## Shapes

The corner radius strategy balances structure with approachability. Buttons and input fields utilize `rounded.sm` or `rounded.full` for a soft, interactive feel, while content cards are consistently set to `rounded.md` to maintain a structured, professional appearance.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
Used for main actions, featuring `{colors.primary}` background and `{typography.label-md}` text. Ensure these have a minimum height of 40px for accessibility.

### Card
Standard container for content, using `{colors.surface-bright}` background, `{rounded.md}` corners, and `{colors.outline}` borders.

### Input Field
Used for text entry, featuring `{colors.surface-bright}` background and `{rounded.sm}` corners. Apply `{colors.primary}` border on focus.

### Badge
Small status indicators using `{colors.surface}` background and `{typography.label-sm}`. Use semantic variants (error, success, warning, info) for state-specific messaging.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs. | Do not use `{colors.primary}` for text. |
| Apply `{typography.headline-lg}` for main titles. | Never use `{typography.body-md}` for headings. |
| Use `{rounded.md}` for all content cards. | Avoid mixing corner radii in component groups. |
| Maintain `{spacing.md}` between UI elements. | Do not use `{colors.surface}` for button backgrounds. |
| Use `{colors.outline}` for all borders. | Do not use shadows on flat, static elements. |
| Ensure buttons have min-height 40px. | Avoid using more than two font weights per page. |
| Use `{typography.label-sm}` for badges. | Do not use decorative borders on cards. |
| Use `{rounded.sm}` for input fields. | Do not use `{colors.primary}` for dividers. |

## Content Style

CTA style: Imperative verbs, sentence case (e.g., "Try now").

Heading tone: Direct, benefit-oriented, and concise.

Copy density: Short, scannable paragraphs with clear headings.

## Imagery & Icons

The visual style is mixed, combining clean UI screenshots with abstract, soft-gradient illustrations. Icons are simple, line-based, and rounded to match the overall minimalist design language.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Stable Audio, a minimal generative AI platform for music and sound creation. Match its professional, utility-first tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or font weights.
2. Use only the component shapes defined under `components:`. Do not invent variants (e.g., a filled secondary button) that the spec does not list.
3. Follow the Shapes narrative: `{rounded.sm}` for inputs, `{rounded.md}` for cards, `{rounded.sm}` or `{rounded.full}` for buttons. Never mix radii within a component group.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radii, elevation, and motion values.
- Include hover, focus, and disabled states for every interactive component the spec defines them for.
- Apply `{spacing.md}` as the default gap between UI elements; use the full `{spacing.xs}`–`{spacing.2xl}` scale for all paddings.
- Set a minimum height of 40px on all buttons per the accessibility note.
- Use imperative, sentence-case copy for CTAs (e.g., "Try now") per the Content Style section.

**Must NOT:**
- Invent colors, fonts, radii, or elevation values absent from the spec.
- Use generic utility defaults (e.g., `text-gray-500`, `rounded-md`) when a brand token exists.
- Apply `{colors.primary}` to text, dividers, or button backgrounds other than `button-primary`.
- Add emoji, filler text, or marketing copy.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}` for page containers and `{colors.surface-bright}` for cards and inputs.
- If breakpoints are unspecified, use mobile-first layout with one breakpoint at 768px, stacking sections vertically below it.
- Surface any conflict with the Do's and Don'ts table explicitly rather than silently overriding it.