# Suno — Style Reference
> Dark studio, neon pulses. An expansive, dim canvas where vibrant light flickers to life.
**Theme:** dark
Suno's design evokes a dark, pulsating club atmosphere, where digital magic happens. The expansive, low-contrast color palette, punctuated by fleeting, vivid neon accents, creates a sense of cutting-edge technology merging with artistic expression. Subtle dark gradients on backgrounds and elevated elements add depth without sharp divisions. White, bold typography against these dark canvases commands attention, establishing a stage for creative output.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Pitch Black | `#101012` | `--color-pitch-black` | Page backgrounds, deeply recessed surfaces, primary text on light elements. |
| Void Black | `#17171a` | `--color-void-black` | Subtle background for card elevations or grouped content, creating hierarchy within dark surfaces. |
| Ghost White | `#f7f4ef` | `--color-ghost-white` | Primary text color for headlines and body copy on dark backgrounds, selected interactive elements. |
| Pure White | `#ffffff` | `--color-pure-white` | Strongest contrast for key headings, input text, and active states, providing distinct visual pop. |
| Graphite | `#000000` | `--color-graphite` | Text on light backgrounds (e.g. 'Sign Up' button), icon fills. |
| Ash Gray | `#c2c2c1` | `--color-ash-gray` | Minor background tint or subtle borders. |
| Muted Steel | `#a3a3a3` | `--color-muted-steel` | Subtle icons and secondary UI elements, creating a desaturated feel to non-critical information. |
| Sunset Yellow | `#f5d907` | `--color-sunset-yellow` | Icons and occasional decorative elements, appearing as a point of visual interest against the dark theme. |
| Vivid Pink | `#fd429c` | `--color-vivid-pink` | Used sparingly for interactive elements, such as the 'Create' button, indicating primary action with an energetic glow. |
| Electric Green | `#02d95c` | `--color-electric-green` | Small interactive elements like icons or indicators, signaling status or a secondary action without overwhelming the primary palette. |
## Tokens — Typography
### Neue Montreal — Primary typeface for all UI elements, headings, body text. Its modern, sans-serif structure holds legibility across a wide range of sizes and weights, supporting both robust headlines and subtle metadata. Tightly tracked at large sizes for a contemporary feel. · `--font-neue-montreal`
- **Substitute:** Inter
- **Weights:** 300, 400, 500
- **Sizes:** 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 40px, 72px, 140px
- **Line height:** 0.87, 0.89, 1.00, 1.14, 1.20, 1.27, 1.33, 1.40, 1.41, 1.43, 1.50, 1.55, 1.60, 1.63, 1.78
- **Letter spacing:** -0.0260em at display sizes, to 0.0000em at body sizes
- **Role:** Primary typeface for all UI elements, headings, body text. Its modern, sans-serif structure holds legibility across a wide range of sizes and weights, supporting both robust headlines and subtle metadata. Tightly tracked at large sizes for a contemporary feel.
### Editorial New — Used sparingly for specific heading elements at 24px, weight 300, it provides a light, elegant contrast to the primary sans-serif, adding a touch of sophisticated flair without sacrificing modernity. Its unique character functions as an occasional alternative voice. · `--font-editorial-new`
- **Substitute:** Playfair Display
- **Weights:** 300
- **Sizes:** 24px
- **Line height:** 1.50
- **Letter spacing:** normal
- **Role:** Used sparingly for specific heading elements at 24px, weight 300, it provides a light, elegant contrast to the primary sans-serif, adding a touch of sophisticated flair without sacrificing modernity. Its unique character functions as an occasional alternative voice.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.78 | — | `--text-caption` |
| button | 16px | 1.5 | -0.48px | `--text-button` |
| subheading | 24px | 1.5 | — | `--text-subheading` |
| heading | 40px | 1.2 | — | `--text-heading` |
| heading-lg | 72px | 1.14 | -1.44px | `--text-heading-lg` |
| display | 140px | 0.89 | -3.64px | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** compact
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |
| 104 | 104px | `--spacing-104` |
| 120 | 120px | `--spacing-120` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 12px |
| pills | 16777200px |
| small | 6px |
| images | 12px |
| inputs | 12px |
| buttons | 6px |
| default | 6px |
### Shadows
| Name | Value | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | `--shadow-xl` |
### Layout
- **Section gap:** 100-150px
- **Card padding:** 20px
- **Element gap:** 4-16px
## Components
### Primary Ghost Button
**Role:** Action button
Background transparent, text #F7F4EF. Used for secondary actions like 'Sign In' or 'Advanced'. Displays a subtle inner shadow on hover/focus that reveals a light tint.
### Pill Ghost Button
**Role:** Filter/Tag button
Background oklab(0.999994 0.0000455678 0.0000200868 / 0.05), text #F7F4EF, with an extremely large border radius (16777200px) creating a pill shape. Used for tags or subtle navigation.
### Primary Filled Button
**Role:** Main CTA Button
Solid #F7F4EF background with #101012 text and 16777200px border radius, 8px padding vertical, 16px horizontal. Used for primary calls to action like 'Sign Up'.
### Interactive Input Field
**Role:** Text input
Background transparent, text #FFFFFF, border radius 12px. Used for user input fields, placeholder text is typically #A3A3A3.
### Create Action Button
**Role:** Primary interactive button with gradient
Background linear-gradient(90deg, #fd429c, #f5d907), text #F7F4EF, border radius 6px. Central interactive element for content generation, featuring a vibrant gradient to draw focus.
### Prompt Input Container
**Role:** Input wrapper
Background oklab(0.173939 0.00113384 -0.00393198 / 0.25) rgba(0,0,0,0.25), text #FCFBF9, border-top rgba(255,255,255,0.1), border-radius 6px, padding 4px vertical, 8px horizontal. Encapsulates input fields for music creation.
## Do's and Don'ts
### Do
- Prioritize text legibility on dark backgrounds by using Ghost White (#F7F4EF) or Pure White (#FFFFFF) for body and headline text.
- Use Pitch Black (#101012) as the primary page background to maintain the dark, atmospheric tone across all sections.
- Employ the 6px border radius for all interactive elements like buttons and input containers to ensure a consistent, slightly softened aesthetic.
- Apply the gradient from Vivid Pink (#FD429C) to Sunset Yellow (#F5D907) exclusively for key 'Create' actions to highlight primary functionality.
- Maintain generous vertical spacing between sections (100-150px) to provide breathing room and prevent visual clutter on the dark canvas.
- Use Neue Montreal at a weight of 300 or 400 for most text, reserving 500 for emphasized elements, without overusing bolding.
- Ensure interactive elements like buttons have a minimum padding of 4px vertical and 8px horizontal, or 8px vertical and 16px horizontal for primary CTAs.
### Don't
- Avoid using bright, saturated colors for large background areas or extensive text blocks, as this will disrupt the intended dark and low-key aesthetic.
- Do not introduce hard shadows or strong elevation effects that could break the subtle, layered depth created by varying dark tones.
- Refrain from deviating from the established border radii; maintain 6px for buttons and 12px for cards/inputs.
- Do not use more than one distinct primary brand color in any single section to avoid visual competition and maintain focus on the content.
- Do not use generic system fonts; Neue Montreal is critical to the brand's typographic identity.
- Avoid excessive use of the Editorial New typeface; it is a decorative accent for specific headings, not a general body or UI font.
- Do not introduce stark white backgrounds for entire sections, as the design system is fundamentally dark-themed with occasional light elements for high contrast.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Page Base | `#101012` | The foundational background for the entire page, providing a deep, dark canvas. |
| 1 | Card Surface | `#17171a` | Used for card backgrounds and grouped content, visually lifting elements slightly from the base with a subtle darker tone. |
| 2 | Interactive Overlay | `#00000040` | A semi-transparent dark shade used for interactive elements like input containers, creating a sense of depth and interactivity over the base. |
## Elevation
- **Prominent Cards/Containers:** `box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;`
## Imagery
The visual language for imagery is characterized by contained, slightly rounded media cards displaying diverse content such as album art or user-generated visualizers. These are often dark-toned or moody, showcasing a mix of abstract and human elements, implying artistic creation. The treatment involves a 12px border radius, with elements appearing in a somewhat scattered, dynamic arrangement rather than a rigid grid, reinforcing a creative, less formal atmosphere. The images serve a primarily functional and atmospheric role, decorating the dark interface and providing visual context to the AI-generated music tracks.
## Layout
The page primarily employs a full-bleed layout with content sections centered, but without a strict `pageMaxWidth` constraint, giving a sense of expansiveness. The hero section is full-bleed, featuring a dominant, centrally aligned headline on a dark, subtly textured gradient background, with interactive elements positioned below. Subsequent sections often feature a mix of centered stacked content and fluid arrangements of cards or media, sometimes flowing freely across the width. There's a subtle rhythm created by changes in background tint or the introduction of card-based content, rather than strong visual dividers. Navigation is handled by a minimal top bar with 'Sign In' and 'Sign Up' buttons.
## Agent Prompt Guide
### Quick Color Reference
- **Text Primary (dark bg):** #F7F4EF
- **Text Secondary (light bg):** #101012
- **Background Primary:** #101012
- **CTA Gradient:** linear-gradient(90deg, #fd429c, #f5d907)
- **Button Text (Primary):** #101012
- **Accent Icon:** #f5d907
### 3-5 Example Component Prompts
1. **Create a Hero Section**: Background #101012, with a subtle gradient texture. Centered headline 'Make a house song about quitting your job' using Neue Montreal, 72px, weight 500, #F7F4EF, letter-spacing -1.44px. Subtext 'Start with a simple prompt...' Neue Montreal, 24px, weight 400, #F7F4EF, line-height 1.5. Below, a text input 'Chat to make music' with transparent background, #FFFFFF text, 12px radius, and a 'Create' button with background linear-gradient(90deg, #fd429c, #f5d907), #F7F4EF text, 6px radius, 4px vertical 8px horizontal padding.
2. **Generate a Ghost Button**: 'Sign In' ghost button: background transparent, text #F7F4EF, Neue Montreal, 15px, weight 400, 6px border-radius, 4px vertical 8px horizontal padding.
3. **Design a Media Card**: Background #17171a, 12px border radius, with an image inside that also has a 12px radius. Title text 'Moth Among the Stars (Live)' Neue Montreal, 15px, weight 400, #F7F4EF. Small text '@ SunoUser' Neue Montreal, 12px, weight 300, #A3A3A3. Include a play icon using #F5D907.
4. **Create a Filled Primary Button**: 'Sign Up' button: background #F7F4EF, text #101012, Neue Montreal, 16px, weight 500, 16777200px border-radius, 8px vertical 16px horizontal padding.
## Similar Brands
- **Spotify** — Same dark theme with vibrant, gradient-based accents for key interactive elements like play buttons or calls to action.
- **Ableton** — Dark UI with a focus on functional, clean typography and minimal, well-defined interactive elements, catering to music creation.
- **Linear** — Similar modern, dark-themed aesthetic with a strong emphasis on clean typography and subtle, purposeful use of color to denote interactivity.
- **Discord** — Utilizes a dark background with specific, brighter colors for key features and interactive elements, maintaining a digital, connected feel.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-pitch-black: #101012;
--color-void-black: #17171a;
--color-ghost-white: #f7f4ef;
--color-pure-white: #ffffff;
--color-graphite: #000000;
--color-ash-gray: #c2c2c1;
--color-muted-steel: #a3a3a3;
--color-sunset-yellow: #f5d907;
--color-vivid-pink: #fd429c;
--color-electric-green: #02d95c;
/* Typography — Font Families */
--font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1.78;
--text-button: 16px;
--leading-button: 1.5;
--tracking-button: -0.48px;
--text-subheading: 24px;
--leading-subheading: 1.5;
--text-heading: 40px;
--leading-heading: 1.2;
--text-heading-lg: 72px;
--leading-heading-lg: 1.14;
--tracking-heading-lg: -1.44px;
--text-display: 140px;
--leading-display: 0.89;
--tracking-display: -3.64px;
/* Typography — Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-60: 60px;
--spacing-64: 64px;
--spacing-72: 72px;
--spacing-80: 80px;
--spacing-100: 100px;
--spacing-104: 104px;
--spacing-120: 120px;
/* Layout */
--section-gap: 100-150px;
--card-padding: 20px;
--element-gap: 4-16px;
/* Border Radius */
--radius-md: 6px;
--radius-xl: 12px;
--radius-2xl: 20px;
--radius-3xl: 24px;
/* Named Radii */
--radius-cards: 12px;
--radius-pills: 16777200px;
--radius-small: 6px;
--radius-images: 12px;
--radius-inputs: 12px;
--radius-buttons: 6px;
--radius-default: 6px;
/* Shadows */
--shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
/* Surfaces */
--surface-page-base: #101012;
--surface-card-surface: #17171a;
--surface-interactive-overlay: #00000040;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-pitch-black: #101012;
--color-void-black: #17171a;
--color-ghost-white: #f7f4ef;
--color-pure-white: #ffffff;
--color-graphite: #000000;
--color-ash-gray: #c2c2c1;
--color-muted-steel: #a3a3a3;
--color-sunset-yellow: #f5d907;
--color-vivid-pink: #fd429c;
--color-electric-green: #02d95c;
/* Typography */
--font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1.78;
--text-button: 16px;
--leading-button: 1.5;
--tracking-button: -0.48px;
--text-subheading: 24px;
--leading-subheading: 1.5;
--text-heading: 40px;
--leading-heading: 1.2;
--text-heading-lg: 72px;
--leading-heading-lg: 1.14;
--tracking-heading-lg: -1.44px;
--text-display: 140px;
--leading-display: 0.89;
--tracking-display: -3.64px;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-60: 60px;
--spacing-64: 64px;
--spacing-72: 72px;
--spacing-80: 80px;
--spacing-100: 100px;
--spacing-104: 104px;
--spacing-120: 120px;
/* Border Radius */
--radius-md: 6px;
--radius-xl: 12px;
--radius-2xl: 20px;
--radius-3xl: 24px;
/* Shadows */
--shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
```
Dark stage, glowing spotlights. A…
Midnight gradient glow

Synthwave dark lab – precision…
Midnight gradient with neon…
High-contrast digital studio. A…

Digital console in midnight. A…
Midnight command center, where…
Neon rings in midnight
Midnight atelier of digital…
Digital Studio, Cobalt Glow. A…
architectural blueprint on dark…
Midnight Command Center: a dark…

Celestial Command Center: A dark,…
Warm earth against dark steel

Midnight command center, subtly…

Midnight Terminal with Aqua Glow.…

Midnight Grid Console — where…

Deep-space observatory control…

Deep Space Luxury Console. The UI…
Galactic Command Center. Deep…