Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Suno
AISuno embodies a cinematic, AI-native aesthetic with warm golden-amber gradients that evoke creative inspiration and musical energy. The Neue Montreal typography brings sophisticated restraint to an otherwise dreamlike, immersive experience designed for musical creation.
Design Identity
Signature Color
Suno Gold
#f5d907
creative inspiration and musical energy - the warmth of artistic expression
Visual Identity
Cinematic gradient backgrounds with floating album artwork previews and expansive white typography that dominates the screen - creating an immersive, studio-like atmosphere for music creation.
Component Style
Soft, approachable components with 12px border radius throughout. Buttons feel warm and inviting with gentle curves, semi-transparent overlays, and subtle opacity effects rather than hard shadows or sharp borders.
Spacing Philosophy
Generous breathing room with massive central focal areas - the hero section consumes 80% of the viewport, creating an immersive, distraction-free creative environment with minimal UI chrome.
Design Principles
- Border radius consistently uses 12px for all interactive elements
- Typography hierarchy relies on weight contrast: 300 for subtitles, 500 for headlines
- Opacity overlays at 75% white create depth without harsh boundaries
- 24px blur effects add atmospheric depth to background elements
- All text uses Neue Montreal for typographic consistency
Target Audience
Creative musicians and content creators who want AI-powered music generation with an intuitive, inspiring interface rather than technical complexity.
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 24px | |
| h1 | 72px | 500 | 72px | |
| h2 | 16px | 300 | 24px | |
| h3 | 20px | 500 | 24px | |
| p | 18px | 400 | 24px | |
| a | 16px | 400 | 24px | |
| button | 15px | 500 | 24px |
Color Palette
#d7cdff#ffffff#7d7c83#6a6a72#0071ea#234e52#38383e#1f8bff#00b5d8#02d95c#1c1c1f#252529
