Music and podcast streaming. Rules for outside developers who show Spotify content
Spotify’s design and branding guidelines for developers, annotated
Spotify’s rules for developers give exact logo sizes for screen and print, and the real files to download. Its best rules quoted with notes, and its gaps.
Spotify publishes these guidelines for outside developers who show Spotify content in their own apps, and not for its own marketing. So they are short and strict. They cover how to credit content with the logo, which logo version to use where, and how to show album artwork. The logo rules are some of the most exact rules on this site.
Best parts, quoted with notes
Logo
To comply with our licensing agreements, you must always attribute content from Spotify with the logo.
Has: reason. Gives the reason the logo is required: licensing, not taste.
Logo
Our full logo is the combination of our logo icon and the wordmark.
Has: real file. Download buttons for the full logo and icon sit right below, as zips of SVG, EPS, PDF, AI and PNG.
Logo
While the icon can exist without the wordmark, the wordmark should never exist without the icon.
Has: where it applies. Says which part can stand alone and which never can.
Logo
The exclusion zone is equal to half the height of the icon (marked as × in the diagram).
Has: exact value. Clear space is a ratio of the icon, so it holds at any size.
Logo
The Spotify logo should never be smaller than 70px in digital or 20mm in print.
Has: exact value. One limit for screens, one for print. The icon gets its own: 21px or 6mm.
Logo
Don't place the logo in a busy area, or in low-contrast areas where legibility is compromised
Has: right and wrong. One of six don'ts, each with a picture of the mistake.
Color
Extract artwork color for background (Android Palette). If not possible, use Spotify color #191414.
Has: exact value. The only color code in the page text. The palette image gives black as #121212 instead.
Words and style
If the Spotify app is installed then use any of the following text strings: OPEN SPOTIFY, PLAY ON SPOTIFY or LISTEN ON SPOTIFY
Has: exact value. Lists the exact link labels allowed, plus GET SPOTIFY FREE when the app is missing.
What it leaves out
- Spotify Green's HEX, RGB and CMYK values appear only inside an image with empty alt text, so a reader or agent working from text gets no values. Source
- No voice and tone guidance. The only set wording is link labels, like-button messages, and one upgrade message. Source
What to take from it
- Give the minimum sizes for screens and for print separately, as numbers.
- Measure clear space from a part of the logo itself, so that the rule works at any size.
- Put color values in the text of the page, and not only in a swatch image.