Suno
suno.comThe 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