Typography
scale ratio 1.288- Aktiv Groteskcss: aktiv-groteskdisplay + body400 500 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Aktiv Grotesk | 96px | 500 | 1.2 | 0em |
| headline | Aktiv Grotesk | 42px | 500 | 1 | 0em |
| title | Aktiv Grotesk | 64px | 500 | 1.2 | 0em |
| body | Aktiv Grotesk | 21px | 400 | 1.3 | 0em |
| body-sm | Aktiv Grotesk | 18px | 400 | 1.4 | 0em |
| label | Aktiv Grotesk | 16px | 400 | 0em |
Type scale
Aa14Aa16Aa18Aa21Aa40Aa42Aa48Aa64Aa72Aa96
- Body size
- 21px / 1.3
- Display size
- 96px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 13.58:1
- Dark mode
- none
Declared accent tokens
- --color-accentRed#DE8579not on page
- --color-accentGold#C59C6Enot on page
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 48
- 53.5
- 56
- 80
- 106.5
- 112
Corner radii
102051pill
Shadows (1)
- Borders
- regular, 2px
- Section padding
- 134px
Components
exact computed valuesbutton-secondary
Build your system
- textColor
- #000000
- rounded
- 9999px
- padding
- 16px 48px
- height
- 59.4px
- fontFamily
- Aktiv Grotesk
- fontSize
- 18px
- fontWeight
- 500
- border
- 2px solid #000000
card
- rounded
- 20px
- padding
- 0px
- border
- 1px solid #E0E0E0
input
- rounded
- 0px
- height
- 30px
- padding
- 0px 0px
- border
- 1px solid #BFBFBF
Layout & motion
- Container
- 1227px
- Grid columns
- 6
- Hero
- centered-over-media+media-below
- Navigation
- top-sticky+transparent
- Page height
- 13,238px
- Easing
- cubic-bezier(0.4, 0, 1, 1)
- Durations
- 100ms 500ms
- Transitions
- 22
- Keyframes
- 0
- Stack
- next.js, tailwind, google-tag-manager, vercel
Page sections (12)
section labels are heuristic
01nav
02heroGet your head in the holidays
03content?
04content?
05features?Hear how sound should sound
06logosPlay your way
07testimonialsThe whole-home sound system
08testimonialsStream everything you love
09testimonialsControl it all like magic
10testimonialsStart your system
11newsletterNever miss a beat or an offer
12footer
How Sonos compares
- Body text
- 21px: larger than 96% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 51% of indexed sites (median 1.28×).
- Container
- 1227px: narrower than 54% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 13,238px: longer than 87% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Aktiv Grotesk
- The only site in the index that loads Aktiv Grotesk.
- 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 Sonos use?
Sonos uses Aktiv Grotesk (loaded as "aktiv-grotesk") for headings and body text.
What are Sonos's brand colors?
Sonos's website uses a light scheme: background #FFFFFF, text #000000, muted text #2E2E2E and borders #FFFFFF.
How is Sonos's website laid out?
The most common corner radius is fully rounded (pill), body text is 21px with 1.3 line height, and the page container is 1227px wide.
