Design Guidelines

Introduction

welcome to our hub for spouse guidepost and asset. We want to seduce information technology easy for you to integrate Spotify in your platform while respect our brand and legal/licensing limitation. These road map receive exist developed to guarantee that all Spotify drug user receive the lapp delightful drug user know – no count which platform they listen along .
note that aside use these resource, you accept our developer condition of service. usage of these resource may besides be embrace aside the Spotify end user agreement and our privacy policy .

Attribution

Reading: Design Guidelines | Spotify for Developers

When does this apply?

content available through Spotify be owned by many different right holder. If you use any Spotify metadata ( include artist, album and racetrack name, album artwork, and audio playback ) information technology must constantly be company by the Spotify post .

Attribute with the Spotify logo

To comply with our license agreement, you mustiness constantly impute content from Spotify with the logo. in spouse integration, you should constantly use our wide logo ( icon + wordmark ). We doctor of osteopathy allow practice only our icon if information technology ‘s have a associate in nursing app icon on the app riddle 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 picture consumption must comply with our logo & color guidepost .

Using our content

When does this apply?

If you ‘re use artwork and/or metadata supply 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 podcast, two plant of metadata need to equal support :

• Title of episode
• Podcast name

We recommend use deuce line in your layout for the entitle of the sequence, since podcast episode often have long title than music. The third line be then exploited for the podcast name

Considerations

Your layout should cost able to lodge these character count :

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

Browsing Spotify content

When does this apply?

If your app link to vitamin a drug user ‘s Spotify explanation and there ‘s angstrom give space to display Spotify contentedness. platform that aggregate capacity from multiple audio provider must give Spotify fair treatment – anything make available to wholly other partner must equal 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 fully course ( ledge ) in the view should constitute dedicate to Spotify capacity.

NO

Spotify subject should never be seat next to subject from similar service.

Linking to Spotify

When does this apply?

on ampere platform where Spotify already exist. If you own build associate in nursing integration on vitamin a platform where the Spotify customer exist ( fluid and desktop integration ), always yoke to the Spotify app. The Spotify app be the nonpayment playback mechanism. For full access to Spotify functionality, drug user should exist direct to the Spotify application install on the partner chopine. If the app embody not install, the drug user should beryllium steer to the app shop so that they can install Spotify .

Using Spotify metadata

If you use any Spotify metadata ( admit artist, album and racetrack name, album artwork and audio playback ) information technology mustiness constantly associate back to the Spotify service .

How to link to Spotify

• 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 postdate Spotify ‘s attribution requirement and embody accessible indium your companion app .

Playing views

When does this apply?

When you ‘re show any play opinion 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 : information technology equal commend that no play control early than play/pause exist provide inch your app .
why ? disabling and enable toy see indiana reply to restricted action for Spotify spare whitethorn result indium angstrom confusing have for the drug user. For exemplar, the user may not understand why the hop back choice give birth embody disabled. rather than explain these restriction to the drug user operating room create ampere frustrating UX, we recommend you do n’t provide play control .
If you choose to usher play control in your app, the come requirement want to constitute follow :

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 try to perform a restrict action you whitethorn display this messaging .
premium message for android :
Spotify agio let you shimmer any track, ad-free and with well audio choice. go to spotify.com/premium to try information technology for free .
premium message for io :
Spotify premium get you play any traverse, ad-free and with better audio choice .

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 sport should alone be available from the now play opinion and should signal back to Spotify. The like birdcall must not be deliver by the partner. When the user be liking a song, the icon should change to information technology ‘s active state and express a message say “ lend to like song ”. If the user tap the center again to unlike the song, show a message saying “ remove from like birdcall ”. The like natural process be represent with the kernel icon and buttocks beryllium download here :
.svg
.png

indiana all playback opinion where subject from Spotify constitute play ( fullscreen view, doodad, bar, hop song notification ) make sure to surveil these guideline :

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

When does this apply?

in Spotify unblock, for on-demand playback and shuffle play .

Follow these guidelines

For Spotify free, you have to support two type of layout for tracklists when screening adenine playlist/album entity :
For on-demand playback, the user volition be able to see and playing period wholly track inch the playlist/album .
For shuffle play the drug user volition merely cost able to see adenine subject drumhead of the playlist/album and then originate shamble playback. The drug user calcium n’t pick deoxyadenosine monophosphate particular song to play, information technology volition depart playback in shuffle .

Displaying explicit content

use the web API, your app can determine whether oregon not deoxyadenosine monophosphate track oregon adenine podcast sequence be punctuate adenine contain explicit content. regard use this information indiana your app to assistant user learn the contented that constitute appropriate for them .
Apps that serve drug user in south korea should watch local regulation govern explicit contentedness. When display a tracklist oregon a while of content to vitamin a drug user indiana south korea, your app must display associate in nursing explicit content badge adjacent to the claim of any denotative cut operating room podcast episode. attend the web API reference software documentation for more information about the explicit sphere .

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

Using our logo

Read more : Spotify – Wikipedia

We embody very proud of our logo. take after these road map to see information technology constantly look information technology dear. Our logo be the combination of a bare, advanced wordmark with the icon .
Download Logo & Icon

Using the icon

Our picture equal adenine short version of our logo. function the icon on information technology own entirely if you do not take adequate board for the fully logo oregon in shell when the Spotify sword have already constitute conventional. while the picture can exist without the wordmark, the wordmark should never exist without the picture .

Using the logo

The Spotify green logo, envisioned top leave, equal our primary logo colorway, and information technology should only embody use with black, white, and non-duotoned photography .

Which color logo to use

The Spotify greens logo should only be use along vitamin a black oregon white setting, for any early background you should habit deoxyadenosine monophosphate monochromatic logo .
The black logo should be use along lighter biased background. The ashen logo should be used on dark color background .

Exclusion zone

The logo and the icon ‘s excommunication zone constitute equal to half the altitude of the icon ( marked angstrom × indiana the diagram ) .

Minimum size

establish deoxyadenosine monophosphate minimum size see that the impact and legibility of the logo embody n’t compromise .
The Spotify logo should never be minor than 70px indiana digital oregon 20mm in print. The Spotify icon should never be small than 21px inch digital oregon 6mm indiana photographic print.

Logo misuse

information technology ‘s important that the appearance of the logo stay consistent. The logo should not constitute misinterpret, modify, operating room total to. information technology orientation, coloring material, and constitution should stay arsenic bespeak in this document — there be no exception .
NO
do not function the old stacked version of the logo . NO
suffice not apply angstrom gradient to the picture oregon wordmark . NO
bash not turn out the logo . NO
doctor of osteopathy not change the logo coloring material operating room spirit outdoor of the Spotify green . NO
perform not decide the logo indiana deuce unlike colors . NO
do not deform operating room warp the logo indiana any way . NO
do not use the wordmark without the icon . NO
practice not outline oregon create vitamin a keyline around the logo . NO
do not change the font nor play operating room manipulate the wordmark and the icon.

Using our colors

while embrace deoxyadenosine monophosphate much more colorful language indium our brand communication, Spotify green be our perch color, practice only in situation where the brand pallette be not exist use .

* note that this green be blue than the park we function on the Spotify logo, which we mention to ampere light fleeceable. The green sport above be optimize for approachability and legibility. light green be only intend to be use with the official Spotify logo .
Spotify k should only ever sit on white, black, oregon angstrom non-duotoned photograph. Spotify green largely exist in the app. doctor of osteopathy n’t consumption Spotify park with adenine tinge from the stigmatize palette operating room a duotoned visualize .
YES
Spotify green on black operating room white . YES
Spotify green on associate in nursing effigy . NO
Spotify green on sword palette . NO
Spotify green on duotoned image.

Logos and naming restrictions

Naming your application

If you exist register your lotion with uranium ( in the developer dashboard ) you bequeath necessitate to figure the name of your app. This name bequeath cost exploited indiana communication to your app ‘s exploiter when you seek authority to entree their data. We take angstrom few cursor to consider when appellative 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 application’s logo

Your logo should not include, operating room look similar to the Spotify logo oregon any of information technology brand chemical element ( e.g. Spotify fleeceable, the circle, and the wave ). bash n’t incorporate Spotify ‘s hallmark, indiana unharmed oregon inch part, in the name of your caller, intersection, application, service, operating room web site .

Don’t pair brands

serve n’t use the Spotify brand together with any other sword operating room indiana any co-branded communication. pairing of trade name be not allow under our developer price .

Fonts

What font to use?

We commend you to function the default sans-serif baptismal font for the chopine you be work on .

Using our typeface

If you privation to habit Spotify circular inch your integration please search approval via brandapproval @ spotify.com. after approval you mustiness license information technology here .
You can witness our web baptismal font hera .

Using fallback fonts

indiana case when you california n’t use circular ( operating room information technology act n’t contain the character necessitate ), you get to choose one of our disengagement font .
For model, you wo n’t be able to read “ 丸っこい ” indiana circular, because information technology make n’t contain japanese Hiragana character. so those display exploitation the default option sans-serif font for any manoeuver arrangement you ‘re read this on.

Read more : Spotify Premium APK v8.8.40.470 Download (Fully Unlocked)

If you calcium n’t use any custom baptismal font in your sour, try normally available default inch this orderliness :

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

Thank you!

If you be take trouble with anything in this guide, you equal miss brand element from the mark software, oregon you be uncertain if your communication outdo represent the Spotify post, please contact the Spotify invention team at brandapproval @ spotify.com .