Skip to content

Design Guidelines

Introduction

Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Spotify in your platform while respecting our brand and legal/licensing restrictions. These guidelines are meant to help any external developer integrating Spotify into their product while ensuring all Spotify users receive the same delightful user experience - no matter which platform they listen on.

By using these resources, you accept our Developer Terms of Service. Usage of these resources may also be covered by the Spotify End User Agreement and our Privacy Policy.


Attribution

When does this apply?

Content available through Spotify is owned by many different rights holders. If you use any Spotify metadata (including artist, album and track names, album artwork, and audio playback) it must always be accompanied by the Spotify brand.

To comply with our licensing agreements, you must always attribute content from Spotify with the logo. In partner integrations, you should always use our full logo (icon + wordmark). We do allow using only our icon if it's featured as an app icon on the app screen of a device.

Spotify full logo and icon

  • The full logo is the combination of a wordmark with our icon.
  • Our icon is a shorter version of our logo. Only use it if you do not have enough room for the full logo.

Full logo

Icon

Full logo and icon use must comply with our Logo & Color Guidelines.


Using our content

When does this apply?

If you're using artwork and/or metadata provided by Spotify.

Follow these guidelines:

For album and podcast artwork

  • You may only use the artwork provided by Spotify.
  • Artwork must be kept in its original form. Don't animate or distort it in any way. This includes applying overlays and blurring.
  • Artwork corners must be rounded to a radius that's equal to 2.5% of the image height, and rounded up or down to the nearest whole number. Keep the radius above a minimum of 4 so the rounding is visible.
    Example 1: An image with a height of 128 will be multiplied by 0.025, resulting in a corner radius of 3.2. Round this up to the minimum radius of 4 (128 x 0.025 = 3.2 → 4).
    Example 2: An image with a height of 210 * 0.025 gives a radius of 5.25. Round this down to the nearest radius of 5 (210 x 0.025 = 5.25 → 5).
  • If screen real estate is limited, it's OK to not include any album artwork.

For metadata

  • Track, artist, playlist, and album titles must always be presented with the metadata provided by Spotify.
  • The metadata must always be legible.
  • You may truncate metadata if space is limited. The user should always be able to view the entire metadata.
  • Don't manipulate any content or metadata.

For podcasts

For podcasts, two sets of metadata need to be supported:

  • Title of episode
  • Podcast name

We recommend using two lines in your layout for the title of the episode, since podcast episodes often have longer titles than music. The third line is then used for the podcast name.

For audiobooks

For audiobooks, two sets of metadata need to be supported and one is suggested.

  • Title of book
  • Name of Author
  • Chapter if sharing

Considerations

Your layout should be able to accommodate these character counts:

  • Playlist/album name: 25 characters
  • Artist name: 18 characters
  • Track name: 23 characters

Browsing Spotify content

When does this apply?

If your app links to a user's Spotify account and there's a dedicated space to display Spotify content. Platforms that aggregate content from multiple audio providers must give Spotify fair treatment - anything made available to all other partners must be available to Spotify.

Follow these guidelines:

Content provided by Spotify

  • Spotify will provide rows - or shelves - of recommended content.
  • Spotify provides metadata and decides what metadata should be shown to the user, such as headlines and naming of unique contexts and groups of contexts, for all relevant surfaces.
  • Spotify should determine and populate your content categories. We've optimised our APIs to cover several use cases and serve the most relevant content to each user.

How to display provided content

  • Don't manipulate any content or metadata.
  • Spotify content should never be seated next to content from similar services.
  • Dedicate the full row (shelf) in the view to Spotify content.
  • Never show more than 20 items in a content set. At the end of each content set, a link to the Spotify app should allow listeners to keep exploring the category.
  • Use Spotify's logo or icon to attribute content.

YES

The full row (shelf) in the view should be dedicated to Spotify content.

NO

Spotify content should never be seated next to content from similar services.


Linking to Spotify

When does this apply?

On a platform where Spotify already exists. If you have built an integration on a platform where the Spotify client exists (mobile and desktop integrations), always link to the Spotify app. The Spotify app is the default playback mechanism. For full access to Spotify functionality, users should be directed to the Spotify application installed on the partner platform. If the app is not installed, the user should be directed to the app store so that they can install Spotify.

Using Spotify metadata

If you use any Spotify metadata (including artist, album and track names, album artwork and audio playback) it must always link back to the Spotify Service.

  • If the Spotify app is not installed then the link should say, GET SPOTIFY FREE
  • If the Spotify app is installed then use any of the following text strings: OPEN SPOTIFY, PLAY ON SPOTIFY or LISTEN ON SPOTIFY

The link to Spotify must follow Spotify's attribution requirements and be accessible in your companion app.


Playing views

When does this apply?

When you're showing any playing views in your app.

Follow these guidelines:

  • Follow Spotify's attribution requirements, you must always attribute content from Spotify with either the Spotify logo or icon.
  • Follow the artwork and metadata requirements.
  • Always link to the Spotify app (when the Spotify client is available on platform).

Our recommendation:

It is recommended that no play controls other than play/pause are provided in your app.

Why?

Disabling and enabling play controls in response to restricted actions for Spotify Free may result in a confusing experience for the user. For example, the user may not understand why the skip back option has been disabled. Rather than explaining these restrictions to the user or creating a frustrating UX, we recommended you don't provide play controls.

If you choose to show play controls in your app, the following requirements need to be followed:

Handling Spotify Free restricted actions in your companion app

  • Use the restrictions returned in SpPlaybackRestrictions to correctly set the playback state in the companion app and to respond to the user when they try to perform a restricted action.
  • Play controls must either have a disabled state to indicate that they are restricted or they should not be displayed at all.
  • Make clear that the track progress bar is for information only - there should be no indication that the user can seek.

Upgrade information in Spotify Free

When the user tries to perform a restricted action you may display this messaging.

Premium messaging for Android:

Spotify Premium lets you play any track, ad-free and with better audio quality. Go to spotify.com/premium to try it for free.

Premium messaging for iOS:

Spotify Premium lets you play any track, ad-free and with better audio quality.

Handling playback actions for podcasts in your companion app

  • Podcasts need to have the option to seek 15 seconds forward or backwards.
  • Audiobook samples also need to have the option to seek 15 seconds forward or backwards.
  • You can parse the track URI in order to differentiate between podcast episodes and regular tracks.

Liking a song

The Like feature should only be available from the Now playing view and should signal back to Spotify. The liked song must not be saved by the partner. When the user is liking a song, the icon should change to it's active state and show a message saying “Added to Liked Songs”. If the user taps the heart again to unlike the song, show a message saying “Removed from Liked Songs”. The like action is represented with the heart icon and can be downloaded here:

In all playback views where content from Spotify is playing (fullscreen views, widgets, bars, skipped song notifications) make sure to follow these guidelines:

DON'T

  • Crop artwork
  • Overlay images or text on top of artwork
  • Place the logo over artwork

DO

  • Extract artwork color for background (Android Palette). If not possible, use Spotify color #191414.

Showing entities

Graphic of Spotify tracks being displayed on a mobile phone

When does this apply?

In Spotify Free, for on-demand playback and shuffle play.

Follow these guidelines

For Spotify Free, you have to support two types of layouts for tracklists when showing a playlist/album entity:

For on-demand playback, the user will be able to see and play all tracks in the playlist/album.

For shuffle play the user will only be able to see a content summary of the playlist/album and then start shuffle playback. The user can't pick a particular song to play, it will start playback in shuffle.

Displaying explicit content

Using the Web API, your app can determine whether or not a track or a podcast episode is marked as containing explicit content. Consider using this information in your app to help users discover the content that is appropriate for them.

Apps that serve users in South Korea should follow local regulations governing explicit content. When displaying a tracklist or a piece of content to a user in South Korea, your app must display an explicit content badge next to the title of any explicit track or podcast episode. See the Web API reference documentation for more information about the explicit field.

Sample explicit content badge for a white background
Sample explicit content badge for a dark background

We are very proud of our logo. Follow these guidelines to ensure it always looks its best.

Our full logo is the combination of our logo icon and the wordmark.

Using the icon

Our icon is a shorter version of our logo. Use the icon on its own only if you do not have enough room for the full logo or in cases when the Spotify brand has already been established. While the icon can exist without the wordmark, the wordmark should never exist without the icon.

The Spotify green logo, pictured top left, is our primary logo colorway, and it should only be used with black, white, and non-duotoned photography.

Which color logo to use

The Spotify green logo should only be used on a black or white background, for any other background you should use a monochrome logo.

The black logo should be used on light colored backgrounds. The white logo should be used on dark colored backgrounds.

Legibility

Our logo should always be legible and impactful. Always apply the logo and the icon's exclusion zone to isolate the logo from competing visual elements such as a busy area of an image, low contrast areas where legibility is compromised, or on top of text or supporting graphics. The exclusion zone is equal to half the height of the icon (marked as × in the diagram).

Minimum size

Establishing a minimum size ensures that the impact and legibility of the logo aren't compromised.

The Spotify logo should never be smaller than 70px in digital or 20mm in print.

The Spotify icon should never be smaller than 21px in digital or 6mm in print.

Logo misuse

It's important that the appearance of the logo remains consistent. The logo should not be misinterpreted, modified, or added to. Its orientation, color, and composition should remain as indicated in this document — there are no exceptions.

NO

Don't rotate the logo

NO

Don't fill the lines of the logo

NO

Don't stretch or alter the shape of the logo

NO

Don't use the logo in a sentence or as a letter

NO

Don't use the logo to make new objects or shapes

NO

Don't place the logo in a busy area, or in low-contrast areas where legibility is compromised


Using our colors

While embracing a much more colorful language in our brand communications, Spotify Green is our resting color, used whenever Spotify's voice needs to be recognizable.

YES

Do get creative with surprising color combinations

YES

Do choose colors with high contrast to ensure accessibility

NO

Don't introduce new colors outside our brand palette

NO

Don't use over-saturated colors for CMYK printing


Logo and naming restrictions

Naming your application

If you are registering your application with us (on the Dashboard page) you will need to enter the name of your app. This name will be used in communications to your app's users when you seek authorization to access their data. We have a few pointers to consider when naming your app:

The app name should not include 'Spotify' or be similar to 'Spotify' in sound or spelling. It shouldn't imply endorsement by Spotify, but suggesting to users that it is 'for Spotify' is acceptable.

Your logo should not include, or look similar to the Spotify logo or any of its brand elements (e.g. Spotify Green, the circle, and the waves). Don't incorporate Spotify's trademarks, in whole or in part, in the name of your company, product, application, service, or website.

Don't pair brands

Don't use the Spotify brand together with any other brand or in any co-branded communications. Pairing of brands is not permitted under our Developer Terms.


Fonts

What font to use?

We recommend you to use the default sans-serif font for the platform you are working on. Try commonly available defaults in this order:

  • Default sans-serif for the platform
  • Helvetica Neue
  • Helvetica
  • Arial

Thank you!

If you are having trouble with anything in this guide, you are missing brand elements from the brand package, or you are unsure if your communication best represents the Spotify brand, please contact the Spotify brand approval team at brandapproval@spotify.com.

For additional programming resources, check out Stack Overflow (tag: Spotify).