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 have been developed to ensure that all Spotify users receive the same delightful user experience - no matter which platform they listen on.

Note that 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 logo and icon

  • The 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.

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.
  • 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

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.
  • 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:

.svg .png

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 logo is the combination of a simple, modern wordmark with the icon.

Download Logo & Icon

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.

Exclusion zone

The logo and the icon's 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.

old stacked version of Spotify logo

NO

Do not use the old stacked version of the logo.

Spotify logo with a gradient applied to the icon

NO

Do not apply a gradient to the icon or wordmark.

the Spotify logo rotated

NO

Do not rotate the logo.

the Spotify logo in an unapproved dark green color

NO

Do not change the logo colour or tone outside of the Spotify green.

the spotify logo with differently colored icon & wordmark components

NO

Do not resolve the logo in two different colours.

a distorted copy of the logo

NO

Do not distort or warp the logo in any way.

the wordmark without the icon

NO

Do not use the wordmark without the icon.

an outline around the logo

NO

Do not outline or create a keyline around the logo.

the Spotify logo represented with an incorrect typeface

NO

Do not change the typeface nor recreate or manipulate the wordmark and the icon.

Using our colors

While embracing a much more colorful language in our brand communications, Spotify Green is our resting color, used only in situations where the brand palette is not being used.

*Note that this green is darker than the green we use on the Spotify logo, which we refer to as light green. The green featured above is optimized for accessibility and legibility. Light green is only intended to be used with the official Spotify logo.

Spotify Green should only ever sit on white, black, or a non-duotoned photograph. Spotify Green mostly exists in the app. Don't use Spotify Green with a color from the brand palette or a duotoned image.

a Spotify green circle on a background that is half black, and half white

YES

Spotify Green on black or white.

a Spotify green circle overlayed onto an image

YES

Spotify Green on an image.

Spotify green on other Spotify brand colors

NO

Spotify Green on brand palette.

Spotify green overlayed on a duotone photograph

NO

Spotify Green on duotoned image.

Logos and naming restrictions

Naming your application

If you are registering your application with us (in the developer dashboard) 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:

  • It shouldn't imply endorsement by Spotify, but suggest to users that it is “for Spotify” is acceptable.
  • It cannot begin with “Spot” or be similar to “Spotify” in sound or spelling.

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.

Using our typeface

If you want to use Spotify Circular in your integration please seek approval via brandapproval@spotify.com. After approval,you will be granted links to the web and desktop fonts, and instructions on how to license them correctly before use.

Using fallback fonts

In cases when you can't use Circular (or it doesn't contain the characters needed), you have to chose one of our fallback fonts.

For example, you won't be able to read “丸っこい” in Circular, because it doesn't contain Japanese Hiragana characters. So those displays using the default sans-serif font for whatever operating system you're reading this on.

If you can't use any custom fonts in your work, 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 design team at brandapproval@spotify.com.