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

# Suno · Design System

> A quiet interface against a vivid musical canvas

**Theme:** dark · **Industry:** ai · **Source:** https://suno.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._

Suno pairs a dark, restrained interface with a cinematic, color-washed music canvas. A centered prompt composer sits between floating track artwork, making creation the clear focal point.

## North star

Keep the creation prompt unmistakably central while the full-bleed music imagery supplies atmosphere, not interface noise.

## Overview

The visual strategy contrasts a near-black interface with a warm, blurred hero image that shifts through amber, rust, and muted plum. Treat that saturated field as atmospheric media rather than a reusable brand color: the measured interface palette remains dark and neutral, with warm off-white for primary text and calls to action. Neue Montreal carries the page throughout, using a large, centered, light-feeling headline against compact navigation and understated supporting copy. The hero uses a full-bleed composition; angled music-cover previews enter from the edges while the prompt composer anchors the center. Keep the controls legible through a translucent dark surface and fine border, not heavy ornament. Generous open space separates the headline, composer, and low-contrast publication marks. Rounded pills and soft card corners temper the otherwise flat, cinematic presentation. The page should feel like a focused creative tool placed inside a vivid music-world backdrop.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#101012` | `--color-midnight-canvas` | brand | Underlying page canvas and the dark base used by navigation and image-fade overlays. |
| Pure Signal | `#ffffff` | `--color-pure-signal` | neutral | Primary heading and high-contrast interface text. |
| Graphite Hairline | `#28282a` | `--color-graphite-hairline` | semantic | Fine card and composer borders, separating controls from dark surfaces. |
| Warm Porcelain | `#f7f4ef` | `--color-warm-porcelain` | brand | Join Suno CTA fill, navigation labels, and secondary light interface text. |
| Soft Alloy | `#cfcfd0` | `--color-soft-alloy` | neutral | Muted supporting copy beneath the hero headline. |
| Carbon Divider | `#2e2e2f` | `--color-carbon-divider` | surface | Subtle navigation separators and dark interface outlines. |
| Slate Trace | `#404041` | `--color-slate-trace` | surface | Low-emphasis structural details; use sparingly, not as a main section color. |
| Raised Charcoal | `#17171a` | `--color-raised-charcoal` | surface | Slightly lifted dark surface tone for contained interface elements. |

### Semantic aliases

`--color-canvas` → `#101012` (Midnight Canvas) · `--color-surface` → `#17171a` (Raised Charcoal) · `--color-text` → `#ffffff` (Pure Signal) · `--color-text-muted` → `#cfcfd0` (Soft Alloy) · `--color-text-subtle` → `#101012` (Midnight Canvas) · `--color-border` → `#28282a` (Graphite Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#101012` | 19.01:1 | AAA |
| `#ffffff` | `#17171a` | 17.89:1 | AAA |
| `#cfcfd0` | `#101012` | 12.21:1 | AAA |
| `#cfcfd0` | `#17171a` | 11.49:1 | AAA |
| `#101012` | `#17171a` | 1.06:1 | fail |

### Gradients

- `url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAECwQAAAD//gAQTGF2YzYwLjMxLjEwMgD/2wBDAAgUFBcUFxsbGxsbGyAeICEhISAgICAhISEkJCQqKiokJCQhISQkKCgqKi4vLisrKisvLzIyMjw8OTlGRkhWVmf/xABfAAEBAQEBAAAAAAAAAAAAAAADBAUCBgEBAQEBAAAAAAAA`
- `linear-gradient(rgba(16, 16, 18, 0) 0%, rgb(16, 16, 18) 100%)`
- `linear-gradient(to top, rgba(16, 16, 18, 0.85) 0%, rgba(16, 16, 18, 0.6) 40%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 500, 300, 400 | Site-wide typeface for hero display, supporting copy, navigation, and controls. | Inter |

- **Neue Montreal:** Use measured 500 display weight with tight tracking; body copy is light at 300, while navigation and captions use 500. Keep casing natural.

### Type scale — Custom (ratio ≈ 4.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | -0.013em | — | Neue Montreal | Centered, oversized hero prompt headline. |
| body | 16px | 300 | 1.5 | 0 | — | Neue Montreal | Short explanatory sentence directly below the headline. |
| caption | 15px | 500 | 1.6 | 0 | — | Neue Montreal | Compact composer labels and supporting interface text. |
| nav | 15px | 500 | 1.6 | 0 | — | Neue Montreal | Header links and account actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 20, 24, 40, 80 px.
- Section rhythm 80px · element gap 4px · card padding — · max content width 854px.

Use a full-bleed hero with a centered content axis and a 12-column underlying grid. The measured page max width is 854px for constrained content, while background imagery spans the viewport. Keep the headline, description, and composer aligned centrally; let track artwork intrude from both side edges. Maintain comfortable density and generous vertical breathing room, with an 80px section rhythm and compact gaps within controls. The publication marks sit low in the hero as a restrained closing row.

## Shape & elevation

- Radius: button `9999px` · input `12px` · card `20px` · media `50%` · nav `9999px` · xs `12px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `xl-2` (card): `rgba(255, 176, 3, 0.055) -5.03962px 0px 40px 0px, rgba(254, 60, 125, 0.055) 5.03962px 0px 40px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, relying on fine dark borders and tonal contrast instead of prominent shadows. The composer reads as a translucent dark panel over the hero image. Cards can use rounded corners and restrained depth; the measured colored shadow is subtle and should not become a conspicuous glow.

## Imagery

Use full-bleed, softly blurred music-world imagery with warm amber, rust, and plum tones. Frame track-cover previews as angled cards entering from the far left and right, leaving the central text and prompt unobstructed. Apply dark fades toward the bottom and edges to preserve contrast. These vivid colors belong to the hero media, not the core interface palette.

## Components

### Top navigation

Dark, unobtrusive header with a wordmark, compact links, login action, and a Warm Porcelain (#f7f4ef) pill CTA.

### Hero headline

Large centered Neue Montreal display text with tight tracking, set in white over the full-bleed media backdrop.

### Prompt composer

Wide rounded dark panel with a muted prompt hint, add control, Advanced option, utility icon, and Create action.

### Create button

Compact rounded CTA with white label; the screenshot shows a vivid pink-to-orange treatment within the composer.

### Track artwork

Two partially cropped, angled music-cover previews flank the hero content and recede beneath dark overlays.

### Press marks

A low-contrast row of publication logos near the bottom of the hero, visually subordinate to the creation flow.

### Measured component styles

- **Primary button** (“Join Suno for free”): background #f7f4ef · text #101012 · radius 9999.01px · padding 8px 14px · 500 15px Neue Montreal
- **Secondary button** (“Advanced”): background #1d1d1e · text #f7f4ef · radius 3.35544e+07px · padding 0px 12px · 400 16px Neue Montreal
- **Link**: transparent background · text #f7f4ef · radius 0px · padding 0px · 400 16px Neue Montreal
- **Input**: transparent background · text #ffffff · radius 12px · padding 0px 4px · 400 18px Neue Montreal
- **Card** (“Dancing With My Eyes Closed Raymond”): transparent background · text #f7f4ef · radius 0px · padding 0px · 400 16px Neue Montreal · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Products”): transparent background · text #f7f4ef · radius 0px · padding 0px · 500 15px Neue Montreal

## Do

- Keep the prompt composer at the visual center.
- Use Midnight Canvas (#101012) for the underlying interface.
- Reserve Warm Porcelain (#f7f4ef) for readable light actions and labels.
- Let the hero image span the viewport behind the content.
- Use edge-cropped artwork to frame rather than crowd the headline.
- Keep borders subtle and control shapes softly rounded.

## Don't

- Do not turn the warm hero imagery into a solid brand-color system.
- Do not add competing content blocks above the composer.
- Do not place dense copy over the brightest image areas.
- Do not use heavy shadows or thick borders as default decoration.
- Do not make publication marks as prominent as the primary action.
- Do not replace the restrained neutral UI with colorful controls throughout.

## Agent prompt

Build a new page in Suno’s visual style: a near-black Midnight Canvas (#101012) interface over a full-bleed, softly blurred music image. Treat amber and rust tones as image atmosphere, not reusable UI colors. Use Neue Montreal or Inter, with a large centered headline, light supporting copy, and a clear prompt composer beneath. Keep the composer dark and translucent with a fine Graphite Hairline (#28282a) border, rounded corners, and compact controls. Use Warm Porcelain (#f7f4ef) for key navigation labels and light CTA surfaces; preserve strong white text contrast. Frame the central content with cropped, tilted track covers at the edges. Maintain generous open space, subtle tonal layering, and small low-contrast supporting marks. The prompt and its primary action must remain the page’s clearest focal point.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed image backdrop; centered headline and prompt composer, flanked by cropped track art with a low logo row. | Prompt-led creation, Primary CTA, Secondary advanced controls | Dark translucent composer, Pill buttons, Edge-framed artwork, Centered headline |

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