Spotify design.md
Black stage, green pill, type that shouts
A near-black stage where giant, wide, ultra-heavy headlines do the shouting, a single Spotify Green pill carries every call to action, and saturated full-color cards with big rounded corners hold the product stories.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/spotify/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Spotify, measured from their site: follow its colors, fonts, corners and components on every screen you create or change. Where it calls for a paid font, use the free alternative the file names.
The real page
Captured from spotify.com/us/premium in English, at 1440 px wide.
Colors
Click a color to copy it. Roles are in English, as in the file.
Type and shape
SpotifyMixUITitle (variable)
Free substitute: Archivo at wdth 125, weights 300/400/700/800/900 (Google Fonts)
SpotifyMixUI
Free substitute: Figtree 400/700 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 128px | 900 | 0 |
| heading-xl | 64px | 800 | 0 |
| heading-statement | 48px | 400 | 0 |
| heading | 32px | 700 | 0 |
| subheading | 24px | 300 | 0 |
| card-title | 20px | 700 | 0 |
| body | 16px | 400 | 0 |
| button | 16px | 700 | 0 |
| small | 14px | 400 | 0 |
| caption | 12px | 400 | 0 |
- tags
- 4px
- cards
- 24px
- inputs
- 4px
- buttons
- 9999px
The files
Loading…
Screenshots and measurements taken by Faundr from spotify.com/us/premium for reference. Inspired by Spotify, not its official design system; Faundr isn’t affiliated with Spotify, and the name and marks belong to it.
Faundr
A design.md only works if someone checks it.
Faundr reads your design.md and checks every screen your AI touches: colors off the guide, rebuilt components, clipped menus, broken mobile.
