Full palette: every captured token
Text, warm cream on cool black
cream #f7f4ef · primary text
cream-bright #fcfbf9 · emphasis, badge text
white #ffffff · hero display, card titles
dim rgba(255,255,255,.70) · body, subheads
gray #a3a3a3 · secondary text
muted #696969 · tertiary, disabled
Surfaces and borders
bg #101012 · page canvas
surface-4 rgba(255,255,255,.04) · feature cards
surface-pricing rgba(255,235,235,.05) · pricing cards
ghost-fill rgba(255,255,255,.10) · ghost pills, hover fills
chip-fill rgba(255,255,255,.05) · small chips
border 1px rgba(255,255,255,.10) · hairlines
prompt-glass rgba(20,20,20,.10) + .5px hairline
Accent and semantic
aura · grainy amber to crimson to magenta
pink #fd429c · badge, featured ring
yellow #f5d907 · rating stars
green #02d95c · logo marks, checklist
amber-glow rgba(255,176,3,.16)
pink-glow rgba(254,60,125,.16)
Rule: the aura is the only large color field. It appears in exactly two roles, hero backdrop and the single highest-emphasis CTA. Everything between stays monochrome dark.
Typography specimens: one row per role
Neue Montreal for everything, Editorial New serif for plan names only. Weights never leave 300 to 500.
Hero display h1 · Neue Montreal · 72/72 · 500 · -0.96px
Make any song you can imagine
Section display h1 · Neue Montreal · 72/64 · 500 · tracking normal
Mind blowing song quality
Hero subhead h2 · Neue Montreal · 16/24 · 300 · white
Start with a simple prompt or dive into our pro editing tools.
Feature card title h3 · Neue Montreal · 20/24 · 500 · white
Granular creation controls
Card body / copy · Neue Montreal · 16/24 · 400 · dim .70
Turn any moment into customized music instantly, from your commute to inside jokes.
Plan name · Editorial New serif · 24 · 300 · cream @.90
Premier Plan
UI / nav pill · Neue Montreal · 15 · 500 · height 40
Join Suno for free
UI / large CTA · Neue Montreal · 17 · 500 · height 56
Subscribe
Badge · Neue Montreal · 10 · 500 · uppercase, pink pill
Most Popular
Footer link · Neue Montreal · 12 · 400 · #faf7f5
Terms of Service · Privacy Policy
Controls: everything is a pill
Advanced
Most Popular
Cream primary: rest, hover, disabled
rest · bg #f7f4ef, text #101012
hover · 10% white overlay, lands on cream-bright #fcfbf9
disabled · chip-fill 5% white, muted #696969
Aura CTA: rest, hover, disabled
rest · grainy amber to magenta texture, white text
hover · same aura fill, 10% white overlay
disabled · chip-fill 5% white, muted #696969
Ghost and Log in: rest, hover, disabled
ghost rest · bg rgba(255,255,255,.10), cream text
ghost hover · 10% white overlay on the ghost fill
ghost disabled · chip-fill 5% white, muted #696969
log in rest · translucent #101012 @.25, 1px 10% hairline
log in hover · captured hover fill rgba(255,255,255,.10)
log in disabled · hairline kept, muted #696969 text
Prompt field: default and focus
default · radius 20, glass rgba(20,20,20,.10), 0.5px rgba(255,255,255,.10) hairline, no glow
focus · same field plus the dual aura glow: -7px 0 40px rgba(255,176,3,.16), 7px 0 40px rgba(254,60,125,.16)
Chips, badges and status marks
Advanced
chip · 5% white, h 36, padding 0/12, 16px cream
Advanced
chip hover · ghost-fill rgba(255,255,255,.10)
Advanced
chip disabled · muted #696969
+
icon chip · 36 round, 5% white
Most Popular
badge · pink #fd429c, 10/500 uppercase, radius 12
▶ 645K
stat chip · black @.55 scrim over song art
★★★★★
rating stars · yellow #f5d907
✓ Included
checklist mark · green #02d95c
Everything you need to make music your way
Feature cards: 4% white fill, 1px 10% hairline, radius 24, padding 32.
10 free songs, daily
Turn any moment into customized music instantly. Express what words can't. Free forever, no subscription needed.
Extract stems. Drop into your DAW.
Export up to 12 time-aligned WAV stems and use them seamlessly in Ableton, Logic, or any DAW.
Pro PlanMost Popular
Access to our best models and editing tools.
$12 /month
- Access to best and most personal v5.5 model
- 2,500 credits, refreshes monthly
- Commercial use rights for new songs made
- Advanced Split stem separation
Mind blowing song quality
Song cards: radius 20 art, heavy soft shadow, translucent stat chips, cream title + gray author.
▶ 645K
Easy Come Hard Go
Hotdog_Daddy
▶ 498K
'Know You' by Wheygazer
KakerMix
▶ 371K
Feeling of Love
Lucid Dreamer Records
▶ 254K
District K Dreams
jsp
Depth & motion
Elevation is carried by translucent fills and 1px hairlines. Only two shadow recipes exist on the whole page.
Radius scale
6 · small (stems)
12 · badges
20 · prompt bar, song / rating cards
24 · feature / pricing cards
9999 · all buttons
Shadow recipes
prompt-bar dual glow
-7px 0 40px rgba(255,176,3,.16), 7px 0 40px rgba(254,60,125,.16)
-7px 0 40px rgba(255,176,3,.16), 7px 0 40px rgba(254,60,125,.16)
floating song art
0 25px 50px -12px rgba(0,0,0,.6)
0 25px 50px -12px rgba(0,0,0,.6)
no shadow
cards rely on a 4% white fill and a 1px rgba(255,255,255,.10) hairline
cards rely on a 4% white fill and a 1px rgba(255,255,255,.10) hairline
Control heights
nav pill · 40
large CTA · 56
chip · 36
Motion: the hero headline typewrites through example prompts and the press-logo wall marquees sideways, while sections fade up on scroll. Micro-transitions stay fast: color, background and border at 75ms and 150 to 200ms, transform at 150 to 300ms, all on cubic-bezier(0.4, 0, 0.2, 1).
Frequently asked questions
Why is Suno the best AI music generator? +
How do I make a song with Suno? +
Do I need any music experience to use Suno? +
Is Suno free to use? +