Suno

suno.com

The reference for a single warm dusk gradient (amber #c25a1f into maroon #8a2a3a) carrying a whole product page, with cream text and one coral-pink Create button (#fd429c) as the only chromatic event.

Creative Tool flagship

Design tokens

background
surface
text
textMuted
accent
tone1
tone2
display
Editorial New
body
Neue Montreal
mono

Do / Don't

Reference it for

  • Full-bleed sunset wash as the entire hero canvas: a radial gradient from warm amber at top-left through crimson to a near-black base, no photography needed
  • Warm cream off-white (#f7f4ef) as the single text colour for logo, nav, headline and body against the warm dark ground
  • A gradient coral-to-pink pill button (#fd429c) as the ONE accent, reserved for the primary Create action while every other control stays ghost/outline
  • Oversized rounded-sans headline (~80-140px) with a live typewriter prompt ("Make a house song about quitting your |") demoing the product in the hero copy itself
  • Floating album-art tiles bleeding off both left and right edges, slightly rotated, soft 24px radius, deep shadow rgba(0,0,0,0.25) 0px 25px 50px -12px
  • Inline product surface in the hero: a translucent dark chat input card (12px radius) with a + affordance, an Advanced ghost pill, a shuffle-dice icon and the coral Create button
  • Ghost pill nav: a translucent "Log in" and a solid bone-white "Join Suno for free" pill top-right, both fully rounded
  • Muted greyscale press-logo strip (Rolling Stone, Variety, Wired, Billboard, Complex) fading into the dark footer at low opacity

Do not copy

  • The SUNO wordmark and its tracked-out uppercase logo lockup
  • The exact coral-pink Create gradient (#fd429c), it reads as Suno's signature
  • The specific album-art tiles (Welcome to Earth, No Go Judge Me) used as hero decoration
  • The music-generation prompt copy and the shuffle-dice randomiser affordance
  • The named press-logo endorsement strip
  • The dusk-wash gradient stops as a literal palette, tune the hue to your own brand