CURATED · OPEN · FREE

Suno

Turn simple text prompts into fully produced songs using AI.

aimusic

↓ Download design system (13 MB)Open in OpenDesign

Visit: https://suno.com

📦 Browse pack contents →

Identity DNA

AI MusicCreative PromptAudio GenerationConversational

A digital studio that turns text into music through a magical, immersive interface.

Color

#F7F4EFInk

#101012BG

#9CA3AFMuted

rgba(247, 244, 239, 0.1)Line

Cinematic dark mode with high-contrast warm whites and vibrant gradient accents.

Typography

geometric-sans

display64px · 500

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px base unit

Surfaces

sm · 6px

md · 12px

lg · 24px

pill · 9999px

1px solid rgba(247, 244, 239, 0.1)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

75msmicro

150mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions · Subtle transform scales on hover · Typewriter effect for hero text

Subtle scale and color transitions on buttons and cards. · Immediate visual feedback with transform resets.

Components

button Pill-shaped with gradient backgrounds or subtle borders.
card Rounded corners with subtle glassmorphism or drop shadows.
chip Small, rounded pills with minimal styling.
input Large, rounded input field with integrated action buttons.
hero Centered text over a cinematic, blurred gradient background with floating media cards.

Voice & Don'ts

Tone Inviting and creative, like a personal music producer.
Headlines Large, conversational, and descriptive prompts.
CTAs Direct and action-oriented (e.g., 'Create', 'Join Suno for free').

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.
Avoid: Technical jargon
Avoid: Aggressive marketing language
Avoid: Overly formal tone

Inside the pack — real screenshots

Suno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko