Suno

suno.com10 colors6 componentsNeue MontrealMulti-page · 12 screens

Create stunning original music for free in seconds using our AI generator. Make your own masterpieces, share with friends, and discover music from artists worldwide.

Remix Visit

Remix

Visit

12 screenshots captured· suno.com

1 / 12 · Suno | AI Music Generator · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from suno.com

Primary

#F7F4EF

Primary CTA, brand accent, active state; Body copy

#02D95C

Accent / decorative

Neutral

#101012

Default page background; label colour on brand surfaces

#FFFFFF

Headings / primary text

#C2C2C1

Captions, secondary text

#A3A3A3

Tertiary / placeholder text

#000000

Neutral

#252529

Neutral

#6A6A72

Neutral

Semantic

#4AAB04

Success

Typography · Neue Montreal

caption12px · 400 · 16px

heading14px · 500 · 21px

link14px · 400 · 21px

body14px · 400 · 22.75px

button12px · 500 · 18.6px

nav-link15px · 500 · 24px

body14px · 500 · 16px

button15px · 500 · 24px

list-item16px · 400 · 24px

button16px · 400 · 24px

list-item14px · 400 · 20px

body15.581px · 500 · 15.581px

caption11.685px · 500 · 15.581px

button17px · 500 · 24px

caption12px · 500 · 16px

body17px · 500 · 24px

button14px · 500 · 20px

h172px · 500 · 72px

h272px · 500 · 64px

h320px · 500 · 24px

body16px · 400 · 26px

input18px · 400 · 32px

display140px · 500 · 121.8px

body16px · 500 · 24px

heading18px · 400 · 24px

body18px · 400 · 27px

button20px · 500 · 30px

heading16px · 300 · 24px

caption11px · 500 · 14px

h230px · 500 · 36px

h318px · 500 · 28px

link14px · 500 · 24px

input14px · 500 · 20px

heading30px · 500 · 32px

caption10px · 500 · 15px

body20px · 400 · 28px

heading12px · 700 · 16px

h264px · 500 · 64px

h324px · 500 · 28px

heading20px · 500 · 24px

button12.68px · 500 · 15.216px

heading24px · 500 · 32px

h324px · 500 · 24px

body20px · 500 · 22px

Typography · Editorial New

h196px · 300 · 104px

heading24px · 300 · 36px

h140px · 300 · 48px

body24px · 300 · 36px

display64px · 300 · 64px

h248px · 300 · 50.4px

h332px · 300 · 44px

h254px · 300 · 58px

h190px · 300 · 91.8px

display66px · 300 · 69.96px

display54px · 300 · 57.24px

Typography · Neue Montreal Book

body16px · 400 · 24px

body18px · 400 · 28px

heading16px · 400 · 24px

body18px · 400 · 26px

link16px · 400 · 24px

input14px · 500 · 20px

list-item10px · 500 · 16px

caption12px · 400 · 16px

heading11px · 500 · 16px

h318px · 400 · 28px

body20px · 400 · 22.6px

body14px · 400 · 18.2px

Typography · Input Sans

body16px · 400 · 24px

Spacing

16px

4px

8px

24px

12px

20px

40px

100px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

Components · 6

Remixes of Suno

Latest remixes

No public remixes yet. Be the first to make one.

Remix it