Typography
scale ratio 1.351- Neue Montrealdisplay + body300 400 50099%
- Editorial Newother3001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Neue Montreal | 72px | 500 | 1 | -0.013em |
| body | Neue Montreal | 16px | 300 | 1.5 | 0em |
| body-sm | Neue Montreal | 14px | 400 | 1.429 | 0em |
Type scale
Aa10Aa11Aa12Aa14Aa15Aa16Aa17Aa18Aa20Aa24Aa72
- Body size
- 16px / 1.5
- Display size
- 72px
- Display tracking
- -0.013em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 4.97:1
- Muted on bg
- 2.79:1
- Accent on bg
- 4.53:1
- Dark mode
- none
Declared accent tokens
- --color-accent-red#F8441Bnot on page
- --color-accent-pink#FD429Cnot on page
- --color-accent-blue#1F8BFFnot on page
- --color-accent-green#02D95Cpainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 80
- 100
Corner radii
2024pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
- backgroundColor
- #F7F4EF
- textColor
- #101012
- rounded
- 9999px
- padding
- 8px 16px
- height
- 40px
- fontFamily
- Neue Montreal
- fontSize
- 15px
- fontWeight
- 500
card
- rounded
- 24px
- padding
- 0px
- border
- 1px solid #FFFFFF1A
Layout & motion
- Container
- 1240px
- Grid columns
- 3
- Hero
- centered-over-media
- Navigation
- none-detected
- Page height
- 900px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 75ms 150ms 200ms 300ms
- Transitions
- 85
- Keyframes
- 2
- Stack
- next.js, tailwind, vercel, cloudflare
Page sections (1)
01footerCompany
How Suno compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 69% of indexed sites (median 1.28×).
- Container
- 1240px: narrower than 50% of indexed sites (median 1242px).
- Text contrast
- 5.0:1: lower than 97% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Neue Montreal
- One of 3 indexed sites that load Neue Montreal (1%).
- Editorial New
- The only site in the index that loads Editorial New.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Suno use?
Suno uses Neue Montreal for headings and body text. Editorial New is used for other.
What are Suno's brand colors?
Suno's website uses a light scheme: background #10101299, surface #1010121A, text #FFFFFF, muted text #C2C2C1 and borders #FFFFFF1A.
How is Suno's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.5 line height, and the page container is 1240px wide.
Similar to Suno
Neue Montreal / Altera Carve / Neue Gstaad Normal Normal#EDEDED
Pangram Pangrampangrampangram.com
Monument Grotesk / Mxi Rnd Rg A / Ora Vr Rg A#FFFFFF
Abcdinamoabcdinamo.com
Cash Sans#00E013
Cashcash.app
Inter / Menlo / Moranga#FFFFFF
Denodeno.com
Neue Montreal / Bethany Elingston / IBM Plex Mono#FFFFFF
Eight Sleepeightsleep.com