!

Design Guidelines
Welcome to our hub for partner guidelines and
assets. We want to make it easy for you to
integrate Spoti! in your platform while
respecting our brand and legal/licensing
restrictions. These guidelines have been
developed to ensure that all Spoti! 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 Spoti!
End User Agreement and our Privacy Policy.

Attribution

When does this apply?

Content available through Spoti! is owned by

many di"erent rights holders. If you use any
Spoti! metadata (including artist, album and
track names, album artwork, and audio
playback) it must always be accompanied by
the Spoti! brand.

Attribute with the Spoti! logo

To comply with our licensing agreements, you

must always attribute content from Spoti! 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.

Spoti! 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 Spoti!.

Follow these guidelines:

For album and podcast artwork

You may only use the artwork provided by

Spoti!.
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 Spoti!.
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 Spoti! account and

there’s a dedicated space to display Spoti!
content. Platforms that aggregate content from
multiple audio providers must give Spoti! fair
treatment - anything made available to all other
partners must be available to Spoti!.

Follow these guidelines

Content provided by Spoti!

Spoti! will provide rows - or shelves - of

recommended content.
Spoti! 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.
Spoti! 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.
Spoti! content should never be seated
next to content from similar services.
Dedicate the full row (shelf) in the view to
Spoti! content.
Never show more than 20 items in a
content set. At the end of each content
set, a link to the Spoti! app should allow
listeners to keep exploring the category.
Use Spoti!’s logo or icon to attribute
content.

YES

The full row (shelf) in

the view should be
dedicated to Spoti!
content.

NO

Spoti! content should

never be seated next to
content from similar
services.

Linking to Spotify

When does this apply?

On a platform where Spoti! already exists. If

you have built an integration on a platform
where the Spoti! client exists (mobile and
desktop integrations), always link to the Spoti!
app. The Spoti! app is the default playback
mechanism. For full access to Spoti!
functionality, users should be directed to the
Spoti! 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 Spoti!.

Using Spoti! metadata

If you use any Spoti! metadata (including artist,

album and track names, album artwork and
audio playback) it must always link back to the
Spoti! Service.

How to link to Spoti!

If the Spoti! app is not installed then the

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

The link to Spoti! must follow Spoti!’s

attribution requirements and be accessible in
your companion app. For more details see our
Content Linking Guide.

Playing views

When does this apply?

When you’re showing any playing views in your

app.

Follow these guidelines

Follow Spoti!’s attribution requirements,

you must always attribute content from
Spoti! with either the Spoti! logo or
icon.
Follow the artwork and metadata
requirements.
Always link to the Spoti! app (when the
Spoti! 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 Spoti! 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 Spoti! 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 Spoti! Free

When the user tries to perform a restricted

action you may display this messaging.

Premium messaging for Android:

Spoti! Premium lets you play any track, ad-free

and with better audio quality. Go to
spoti!.com/premium to try it for free.

Premium messaging for iOS:

Spoti! 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
di"erentiate 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
Spoti!. 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

Spoti! is playing (fullscreen views, widgets,
bars, skipped song noti#cations) make sure to
follow these guidelines:

DON'T DO

Crop artwork Extract

Overlay artwork color
images or for
text on top of background
artwork (Android
Place the Palette). If not
logo over possible, use
artwork Spoti! color
#191414.

Showing entities

When does this apply?

In Spoti! Free, for on-demand playback and

shu$e play.

Follow these guidelines

For Spoti! 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 shu$e play the user will only be able to see

a content summary of the playlist/album and
then start shu$e playback. The user can’t pick a
particular song to play, it will start playback in
shu$e.

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 #eld.

Sample explicit content badge for a

white background

Sample explicit content badge for a

dark background

Using our logo

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
Spoti! brand has already been established.
While the icon can exist without the wordmark,
the wordmark should never exist without the
icon.

Using the logo

The Spoti! 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 Spoti! 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 Spoti! logo

should never be
smaller than 70px
in digital or 20mm The Spoti! icon
in print. 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, modi#ed, or added to. Its
orientation, color, and composition should
remain as indicated in this document — there
are no exceptions.

NO NO

Do not use the old Do not apply a

stacked version of gradient to the icon
the logo. or wordmark.

NO NO

Do not rotate the Do not change the

logo. logo colour or tone
outside of the
Spoti! green.

NO NO

Do not resolve the Do not distort or

logo in two warp the logo in
di"erent colours. any way.

NO NO

Do not use the Do not outline or

wordmark without create a keyline
the icon. around the logo.

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, Spoti!
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 Spoti! 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
o&cial Spoti! logo.

Spoti! Green should only ever sit on white,

black, or a non-duotoned photograph. Spoti!
Green mostly exists in the app. Don’t use
Spoti! Green with a color from the brand
palette or a duotoned image.

YES YES

Spoti! Green on Spoti! Green on

black or white. an image.

NO NO

Spoti! Green on Spoti! Green on

brand palette. duotoned image.