# Suno · Design system migration spec

> Source: https://suno.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a modern, AI-driven consumer product with a highly expressive and immersive visual language.

## 1. Identity DNA

Suno's design system is a digital studio, a dark chamber built to turn text into music through an immersive, focused interface. Its identity is defined by a cinematic dark mode, a centered hero layout, and vibrant gradient accents that mark the path from prompt to creation. The system is engineered for a conversational, creative flow, not a complex software dashboard.

**One-liner:** Turn simple text prompts into fully produced songs using AI.
**Keywords:** AI Music · Creative Prompt · Audio Generation · Conversational
**Analogy:** A digital studio that turns text into music through a magical, immersive interface.

## 2. Color

The palette is built on a foundation of deep charcoal (#101012), which provides a vast, quiet stage for the content. Warm white (#F7F4EF) text and vibrant orange-to-pink gradients act as the primary light sources, creating high contrast and guiding the eye to key actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#101012` | main background |
| `--ink` | `#F7F4EF` | body text |
| `--muted` | `#9CA3AF` | placeholder |
| `--line` | `rgba(247, 244, 239, 0.1)` | divider |

**Color principle:** Cinematic dark mode with high-contrast warm whites and vibrant gradient accents.

The color principle is cinematic and high-contrast, using a single primary gradient to punctuate the dark canvas for essential interactive moments.

## 3. Typography

Typography is a clean, geometric sans-serif voice, specifically Neue Montreal, used with tight letter-spacing for bold, conversational headlines. The scale is generous and display-oriented, prioritizing large, descriptive prompts over dense text hierarchies.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 500 | -3.68px | Hero headline |

## 4. Spacing

The spatial rhythm is governed by a strict 4px base unit, ensuring consistent and modular alignment throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit

## 5. Surfaces

Surfaces are defined by depth and translucency, using layered shadows and semi-transparent borders to create a sense of floating elements. A single, consistent border style (1px solid rgba(247, 244, 239, 0.1)) provides subtle separation without harsh lines.

- **Radius:** sm 6px · md 12px · lg 24px · pill 9999px
- **Shadows:**
  - 0 25px 50px -12px rgba(0,0,0,0.25)
  - 0 10px 15px -3px rgba(0,0,0,0.1)
  - -5.37px 0px 40px 0px rgba(255,176,3,0.07)
  - 5.37px 0px 40px 0px rgba(254,60,125,0.07)
- **Borders:** 1px solid rgba(247, 244, 239, 0.1)

## 6. Layout

The layout skeleton is hero-focused and intentionally simple, centered on a single-column column. Floating media cards flank a central prompt input, creating a focused, immersive workspace within a centered, single-column layout.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Hero-focused with floating cards and a central prompt input.

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, purposeful transitions that reinforce direct manipulation and provide subtle feedback. Animations are concise and functional, like the typewriter effect for headlines and transform scales on hover, using a standard 0.3s cubic-bezier timing.

- **Durations:** micro 75ms · small 150ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions
  - Subtle transform scales on hover
  - Typewriter effect for hero text

- **Hover:** Subtle scale and color transitions on buttons and cards.
- **Click:** Immediate visual feedback with transform resets.
- **Transition:** All 0.3s cubic-bezier(0.4, 0, 0.2, 1) for standard UI elements.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is inviting and creative, speaking like a personal music producer rather than a technical platform. Language is large, conversational, and action-oriented, avoiding jargon and overly formal marketing tone.

- **Tone:** Inviting and creative, like a personal music producer.
- **Headline style:** Large, conversational, and descriptive prompts.
- **CTA style:** Direct and action-oriented (e.g., 'Create', 'Join Suno for free').
- **Avoid:** Technical jargon / Aggressive marketing language / Overly formal tone

### Don'ts
- ❌ Don't use a light background — screenshot shows a deep dark (#101012) base.
- ❌ Don't use sharp corners — screenshot shows rounded corners (up to 999px) on most elements.
- ❌ Don't use a complex grid for the hero — screenshot shows a centered, single-column layout.
- ❌ Don't use multiple vibrant accent colors — screenshot shows a single primary gradient (orange/pink) for the 'Create' button.
- ❌ Don't use small, cramped typography — screenshot shows large, bold display text with tight letter-spacing.
- ❌ Don't use heavy drop shadows everywhere — screenshot shows shadows only on cards and specific interactive elements.

The system deliberately forgoes light themes, sharp corners, cluttered grids, and the overuse of vibrant accents to maintain its focused, cinematic core.

## System Prompt (paste into AI tool)

```
Suno is an AI-powered music creation platform with a cinematic, premium dark-mode aesthetic. Its design DNA is built around a deep charcoal (#101012) background, warm white (#F7F4EF) text, and vibrant orange-to-pink gradients for key actions. Typography utilizes a clean geometric sans-serif (Neue Montreal) with tight letter-spacing for bold headlines. Key constraints include maintaining a centered, immersive hero layout and avoiding light themes, sharp corners, or cluttered grids. The interface emphasizes simplicity and creative flow through a prominent prompt-based input system.
```
