# Suno — Design System
> AI-powered music generation platform for creating, editing, and sharing original songs.
- **Canonical:** https://uiuxskills.com/library/suno
- **Source:** https://suno.com/home
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:27.441Z

---

---
version: alpha
name: Suno
description: AI-powered music generation platform for creating, editing, and sharing original songs.
tone: >-
  Empowering, creative, modern, and accessible. The tone is direct and inspiring, focusing on the
  ease of turning ideas into high-quality audio.
color-scheme: dark
colors:
  primary: "#FFFFFF"
  surface: "#0A0A0A"
  surface-container: "#1A1A1A"
  surface-bright: "#262626"
  on-surface: "#A3A3A3"
  outline: "#333333"
  accent-green: "#22C55E"
  error: "#EF4444"
  on-primary: "#000000"
  focus-ring: "#3B82F6"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  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-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.accent-green}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.accent-green}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Suno is a high-energy, creative-focused platform that blends professional DAW capabilities with accessible AI generation. The visual identity is dark-mode centric, emphasizing high-contrast elements and a modern, sleek aesthetic that appeals to both casual creators and professional musicians.

## Colors

The color strategy relies on a deep, immersive dark palette designed to minimize eye strain and keep the focus on generated music content. High-contrast white text ensures readability against dark backgrounds, while a vibrant accent green provides clear visual cues for success and primary actions.

*   Primary (#FFFFFF): Primary text and action color for high contrast against dark surfaces.
*   Surface (inferred) (#0A0A0A): Deep black background for a premium, immersive music app experience.
*   Surface-container (inferred) (#1A1A1A): Slightly lighter surface for cards and UI containers.
*   Surface-bright (inferred) (#262626): Used for hover states and interactive elements.
*   On-surface (inferred) (#A3A3A3): Secondary text color for labels and descriptions.
*   Outline (#333333): Border color for inputs and card dividers.
*   Accent-green (#22C55E): Accent color for success states and primary call-to-action highlights.
*   Error (inferred) (#EF4444): Semantic color for errors and destructive actions.
*   On-primary (inferred) (#000000): Text color for elements on light/white backgrounds.
*   Focus-ring (inferred) (#3B82F6): Standard focus ring for accessibility.

## Typography

The typography uses the Inter font family to maintain a clean, professional, and highly legible interface across all device sizes. Hierarchy is established through size and weight, ensuring that hero headlines command attention while metadata remains unobtrusive.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section titles.
*   Headline-lg (inferred): Used for feature headers.
*   Headline-md (inferred): Used for sub-headers.
*   Body-md: Standard body text.
*   Body-sm: Secondary text and metadata.
*   Label-sm: Small UI labels and captions.

## Layout

The layout utilizes a responsive grid system with a max-width container to center content, ensuring a consistent experience across desktop and mobile. A 4px-based spacing scale is used for all margins and padding, with {spacing.md} serving as the standard for component internal spacing. The site follows a logical flow: nav, hero, social-proof, features, pricing, faq, and footer. The hero pattern features a centered headline and subhead with a prominent primary CTA, often supported by a dynamic background aura.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the dark background, providing a subtle sense of depth.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for interactive cards.
*   elevation.lg: Pronounced depth for modals and primary card overlays.

## Shapes

The design language favors rounded corners to create a friendly, modern feel that balances the technical nature of the platform. Radius values scale with component size, moving from {rounded.md} for input fields to {rounded.full} for primary call-to-action buttons.

## 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
Buttons use {colors.primary} for primary actions and transparent backgrounds with {colors.outline} for secondary actions. Primary buttons feature {rounded.full} for a modern, approachable look.

### Card
Cards utilize {colors.surface-container} as a background with {rounded.lg} corners. Use these for grouping related content, ensuring they remain distinct from the main {colors.surface} background.

### Input Field
Inputs use {colors.surface} with {rounded.md} and {colors.outline} borders. On focus, the border must transition to {colors.focus-ring} to meet accessibility standards.

### Badge
Badges are used for status or labels, utilizing {colors.surface-bright} for background and {typography.label-sm}. Use {colors.accent-green} for success-related badges.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Never use light backgrounds for the main content area. |
| Apply {rounded.lg} to all card containers. | Avoid mixing sharp corners with the {rounded.full} button style. |
| Use {colors.on-surface} for secondary descriptive text. | Do not use {colors.error} for non-destructive actions. |
| Ensure all inputs have {colors.outline} borders. | Never apply {typography.display-lg} to body text. |
| Use {spacing.md} for consistent component padding. | Avoid using low-contrast text on {colors.surface-container}. |
| Apply {typography.body-sm} for metadata and timestamps. | Do not exceed {spacing.2xl} for section margins. |
| Use {colors.accent-green} for success states. | Never use {colors.focus-ring} for non-interactive elements. |
| Apply {elevation.md} to interactive cards. | Avoid using {elevation.lg} on static, non-modal elements. |

## Content Style

CTA style uses imperative verbs in sentence case, kept short and punchy (e.g., "Sign Up", "Create"). This maintains the direct and inspiring tone of the platform.

Heading tone is benefit-driven and inspiring, focusing on accessibility and creative freedom. Headlines should clearly communicate the value of the tool to the user.

Copy density is designed for scannability. Use short paragraphs and frequent bullet points for feature lists to ensure the user can quickly grasp the capabilities of the platform.

## Imagery & Icons

The imagery style is mixed, utilizing a combination of high-quality album art photography and abstract, glowing gradient backgrounds. This treatment conveys a premium, modern musical aesthetic that feels both artistic and technical. Icons should be minimal and consistent with the overall dark-mode design language.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Suno, a minimal dark-mode music generation platform with a direct, empowering tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — e.g., `{colors.accent-green}`, `{typography.body-md}`, `{rounded.full}` — never hardcode hex, px, or font-size values.
2. Use only the component variants defined under `components:`. Do not invent new button styles, badge types, or card variants beyond what the spec lists.
3. Follow the Shapes narrative: primary CTA buttons use `{rounded.full}`; input fields use `{rounded.md}`; cards use `{rounded.lg}`. Do not mix sharp corners with `{rounded.full}` button patterns.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with a rule (e.g., a light background for the main content area), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations from a site render. If an authoritative source (theme file, Storybook) exists, those values override the inferred ones.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, typography, and elevation value.
- Render hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{spacing.md}` as the default internal component padding; use the `{spacing.xs}`–`{spacing.2xl}` scale for all gaps and margins.
- Use imperative, sentence-case copy for CTAs ("Create", "Sign up") per the Content Style section.
- Apply `{elevation.md}` to interactive cards and reserve `{elevation.lg}` for modals only.

**Must NOT:**
- Introduce colors, fonts, radii, or spacing values absent from the spec.
- Use light backgrounds (`{colors.primary}` or white) for any main content surface.
- Apply `{colors.focus-ring}` to non-interactive elements.
- Apply `{colors.error}` to non-destructive actions.
- Apply `{typography.display-lg}` outside a hero headline context.
- Rewrite, replace, or invent page copy, headings, navigation items, or routes as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value for a context, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for secondary text, default to `{colors.on-surface}`.
- Prefer composing existing spec components over introducing new tokens.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px.
- When user intent conflicts with a Do/Don't rule, state the conflict explicitly and propose the spec-compliant alternative.