Buket Style Guide
Project UN
banner_one row_rectangle
Item Type ID: 18
Text - None
Artwork Aspect Ratio – 16:9
Content supported - all content type & deep link
Music
square_one_row
Artwork Aspect Ratio – 1:1
Item Type ID: 2
Text Left aligned Artwork with Album title
Supported content – Album, playlist, Podcast, songs,
Radio, Charts, Audio Stories
Meta 1 – title
Meta 2 – Artist name
Recently Played
Mix_two_rows
Artwork Aspect Ratio – 1:1
Item Type ID: 7
Text - Text Left & vertically center aligned
Content supported - all content type
Music
square_two_rows
Artwork Aspect Ratio – 1:1
Item Type ID: 12
Text Left aligned
Two rows of the bucket will be available in such bucket
styling Artwork image
Supported content - Album , playlist, Podcast, songs,
Radio, charts, Audio Stories
Meta 1 – title
Meta 2 – Artist name
Meta 3 – no of plays
Music
square_three_rows- Songs
Artwork Aspect Ratio – 1:1
Item Type ID: 8
Text - Text Left & vertically center aligned
Songs Artwork image
Supported content - songs , Podcast episode
Meta 1 – title
Meta 2 – Artist name
Music
Layer 1 patch
#F5CDA9
One_single/direct_content
#000000
Layer 1 – end to end patch 100% (Linear gradient patch from
left to right with 20% opacity)
Layer 2 - Artist image in circle left side
Layer 3 – song bucket patch color #000000 with 42% opacity
layer 4 – song name , artist and direct play button in color #ffffff
Artwork Aspect Ratio – 1:1
Item Type ID: 19
Text alignment left
Supported content - Album, song, podcast & podcast episodes,
playlist & Associated artist
Meta 1 – title
Meta 2 – Album / Artist name
Music
Square_with_circle_with_details
Artwork Aspect Ratio – 1:1
Item Type ID: 16
Layer 1 – color picked from the artwork
Layer 2 – color patch #000000 with 40% opacity
Layer 3- Artist image in circle
Text Center aligned overlay on artwork
Artist Name & Number of followers in the square
Supported content - Artists
Music
Layer 1 patch
#F0F0F0
circle_one_row
#0B0B0B
#EFE2E2
Artwork Aspect Ratio - circular radio -1:1
Item Type ID: 11
Layer 1 - Gradient gray Circle in background (with 22%
opacity)
Layer 2 - Artwork in circular shape with Radio channels
names & number
Text Center aligned
Supported content - All Radio types
Meta 1 – Title
Meta 2 - no of listeners
Meta 3 – Language
Music
Pattern in square_one_row
Artwork Aspect Ratio – 1:1
Item Type ID: 42
Text Left aligned
Layer 1- Artwork image
Layer 2 - Color patch shape with Top 100 & Top 40 text on Image
Supported content - Playlist, Podcast, charts
Meta 1 – title
Meta 2 – no of plays
Music
Sample image
#000000
square_one_row- music
#400B79
Artwork Aspect Ratio – 1:1
Item Type ID: 41
Text Left aligned
Artwork with Album title
Layer 1 – Radial Gradient shade picked from the image
layer 2 - three square images
Supported content - Playlist, Podcast, charts
Meta 1 – title
Meta 2 – Artist name
Music
Layer 2
square_one_row
Artwork Aspect Ratio – 1:1
Item Type ID: 9
Layer 1 - image in the background
Layer 2 – white color #ffffff patch with background blur
29, brightness –41, effect opacity 13%
Layer 3 - Center align Square image with details
Supported content - Playlist, Podcast, charts
Text: Center aligned
Music
Language
Two_Row _Rectangle
Artwork Aspect Ratio – 16:9
Item Type ID: 15
Layer 1 rectangle
We will provide all language pngs seperatly
Supported content - movies, Tv Shows, languages
Music
Sample image - layer 1
#D96D03
square_one_row
#000000
Artwork Aspect Ratio - 1:1
Item Type ID: 43
Text - Left aligned on a white background
Layer 1 - Gradient color patch
Layer 2 – black patch
Layer 3 - Rectangle photo artwork
Sample image - layer 2
Collection
Rectangle_one_row- Mix
Layer 1 – patch color code #141414 Artwork Aspect
Ratio – 21:9
Layer 2 – design pattern on top right
Layer 3 – category name & collection title
Layer 4 - Logo on top right
Layer 5 – different bucket tiles
Item Type ID: 20
Supported content - Collection All content Types
Collection
Rectangle_one_row- Movies
Card Aspect Ratio – 21:9 patch color #1A1A1A
Artwork aspect Ratio – 2:3
Item Type ID: 3
Text Left aligned
Multiple images supported with Movie details
Play button on left bottom
Supported content – Movies
Meta 1 – title
Meta 2 – number of movies
Meta 3 – Language
Video
Single_one_row
Artwork Aspect Ratio – 4:3
Item Type ID: 13
Text Left aligned
Supported content – TV Show
Meta 1 – title
Meta 2 – language & genre
Video
vertical_rectangle _single _row
Artwork Aspect Ratio – 2:3
Item Type ID: 22
Supported content - live performance, Movies, short
films
Video
Top 10 Movies
Layer 1 – card width 100%, Aspect Ratio – 21:9 color #000000 with
20% opacity
Layer 2 - Artwork aspect ratio – 2:3
Layer 3 – Number 01 top right corner (we will provide all 1 to10) png
images separately
Item Type ID: 21
Text left aligned
Rent / Subscribe button on right bottom on artwork
Supported content - Movies, Tv shows
Meta 1 – title
Meta 2 – year of release & language
Video
Premium Movies
Layer 1 - Card 100% width Aspect Ratio – 21:9 color #000000
with 20% opacity
Artwork aspect ratio – 2:3
Item Type ID: 23
Text left center aligned
Rent / Subscribe gradient color button on right bottom on
artwork
Supported content - Movies, short films, TV shows, Live
Performance
Meta 1 – title
Meta 2 – year of release & language
Meta 3 – short description
Video
Movies_vertical_rectangle _single _row
Artwork Aspect Ratio – 2:3
Item Type ID: 6
Text Left aligned
Rent button on left top on artwork and Ratings on right
bottom
Supported content - Movies, short films
Meta 1 – title
Meta 2 – Year of release & language
Video
Rectangle_one_row
Artwork Aspect Ratio – 16:9
Item Type ID: 5
Text left aligned
Added Duration on artwork left bottom align
Play icon over the artwork (right bottom)
Content supported - Tv shows, music video & short
video
Meta 1 – title
Meta 2 – Artist name
Meta 3 - Language & views
Mood/genres/categories
Three - Rows Rectangle
Video
Rectangle_two_row
Artwork Aspect Ratio – 16:9
Item Type ID:
Text left aligned
Duration on artwork left bottom align
Play icon over the artwork (right bottom)
Content supported - Tv shows, music & short video
Meta 1 – title,
Meta 2 – Artist name
Meta 3 - Language & views
Artists Bucket
One - Row Circle
Artwork Aspect Ratio – 1:1
Item Type ID:
Text center align
Supported content - Artist, Radio
UGC Playlist Bucket
Artwork Aspect Ratio – 1:1
Item Type ID: 44
Text center align
Supported content - UGC Playlists
Meta 1 – title
Meta 2 – by 'handle name of the user who created the
playlist'
Continuity Bucket
Artwork Aspect Ratio – 16:9
Item Type ID: 45
Supported content - Any
Meta 1 – NA
Meta 2 – NA
Spacing between two thumbnails - 4px
Original Page Banner Bucket
Artwork Aspect Ratio – as per design
Item Type ID: 46
Text center - NA
Supported content - banner
Original Page episode bucket
Artwork Aspect Ratio – 16:9 of the content
Item Type ID: 47
Text center align
Supported content - TV Show Trailer and episodes
My Mix Bucket
Artwork Aspect Ratio – 1:1
Item Type ID: 55
Text center align
Supported content - Playlist
Collection Bucket
Artwork Aspect Ratio – 16:9
Layer 1- Color patch bg (color from the artwork)
Layer 2- Artwork image right align with 1:1 ratio
Layer 3- Color overlay and circular transparency on right
side above the image
Layer 4- Image with 50% gaussian Blur and 40% opacity
Layer 5- Rectangle color patch for collection name
#000000 with 9% opacity
Layer 6-Collection name left align
Item Type ID: 49
Text center align
Supported content - All
Games Bucket (android only)
Artwork Aspect Ratio – 16:9
Item Type ID: 48
Supported content - Games
Meta 1 – Game title
On Ground Live Event
Layer 1- Live event artwork in portrait mode
with rounded radius 9
Layer 2- Date tag on top left align with 10px spacing
from left
Artwork Aspect Ratio – 2:3
Item Type ID: 52
Supported content - Any
Meta 1 – NA
Meta 2 – NA
Spacing between two thumbnails - 16px
Music For You (1)
Artwork Aspect Ratio – 1:1
Item Type ID: 53
Layer 1 - Image with icon
Layer 2 - Text left top align
Music For You (2)
Artwork Aspect Ratio – 1:1
Item Type ID: 54
Layer 1 – rectangular box with image on the left
Audio Books
Artwork1 Artwork Aspect Ratio – 1:1
Item Type ID: 56
Layer 1- Artwork image center align with 1:1 ratio
Layer 2- The color patch will be picked in accordance to
the most prominent color present in the artwork
Layer 3- Color patch will be one shade lighter from layer 2
Layer 4- Color patch will be one shade lighter from layer 3
Supported content - Audio Books
Layer 1 Layer 2 Layer 3 Layer 4
Audio Books
16px Artwork Aspect Ratio – 1:1
Item Type ID: 57
Layer 1- Artwork image center align with 1:1 ratio
Patch with radial fill Text - left align font - SF Pro Text style bold & sub text
6px
rounded radius 4
Background blur 30
regular font
Brightness -23 CTA left align with text
Space between 2 bucket – 16 px
Layer 2- The color patch will be picked in accordance to the
Layer 1 Layer 2 Layer 3 Layer 4 most prominent color present in the artwork
Layer 3- Color patch will be one shade lighter from layer 2
Layer 4- Color patch will be one shade lighter from layer 3
Layer 5 – Bg black color patch #000000
Mask patch- left align 1 orange circle patch #FBB044 & 1
blue circle patch #3552F9 with object blur 50 & 60%
Layer 5 opacity for both patch (for entire mask patch 50% opacity)
Supported content - Audio Books
Meta 1 – Title
Meta 2 – Author name
Shorts_mobile
Artwork
Artwork Aspect Ratio – 2:3
Item Type ID: 58
Layer 1- Artwork image or video center align with 2:3 ratio
Layer 2- black gradient color patch bottom with 60% opacity
Layer 3- text layer with hashtag and (emoji optional)
Supported content - Shorts
10px
Outline color code #828B82
with thickness -1 & 60% opacity
Gradient color
code #050608
#damaged3
46px
Layer 1 Layer 2 Layer 3
Top 10 Trending Top 10 trending in
app
Creative screen
Creative
Guidelines Dimension
125 px
1. Image ratio 9:13
2. Item Type ID: 59
3. No text should be there in the no text
area defined in the dimension creative 180 px
4. Content Type Support: TV Shows, &
Movies
5. In total of 1.5 artworks will be
70 px
visible to a user who is not using
bigger than standard handset.
6. Supported content - Movies , Tv 100 px
Shows
Creative Reference
Trending Now Trending Now in
app
screen
Creative Creative
Guidelines Dimension
200 px Thumbnail Outline
1. Image ratio 9:13
2. Item Type ID: 60
3. Content Type Support: TV Shows, &
Movies 290 px
4. In total of 1.5 artworks will be visible to
a user who is not using bigger than
standard handset.
5. Supported content - Movies, Tv
Size – 2 Color
Shows,Albums,Playlist #FFFFFF
6. Meta - Movies/Tv show Name with 10% opacity
Creative Reference
UGP Bucket
- Artwork Aspect Ratio – 1:1
- Item Type ID: 61
- Center aligned text center aligns with Playlist name +
Creator Name
- Supported content - User-generated Playlist
- Itype will be a collection of artworks of the first 4 songs
in the user’s playlist
Games Bucket (VAS only)
1 Artwork Aspect Ratio – 16:9 Rounded Radius - 20px
2 Artwork Aspect Ratio – 1:1 Rounded Radius – 16px
Spacing between two buckets is 16px
Item Type ID: 62
Star ratings spacing between 2 stars 6px size
Supported content - Games
Meta 1 – Game title
Games Bucket (VAS only)
Artwork Aspect Ratio – 1:1
Item Type ID: 63
Game title font style bold
Sub text font style medium
Spacing between artwork and text is 20px
10px spacing around the artwork
Star ratings spacing between 2 stars 6px size
20 px
Supported content - Games
Meta 1 – Game title
Games Bucket (VAS only)
Artwork Aspect Ratio – 1:1
Rounded radius –24px
Spacing between two buckets is 16px
Spacing in artwork and title is 12px
Star ratings spacing between 2 stars 6px size
Item Type ID: 64
Supported content - Games
Meta 1 – Game title
Games Bucket (VAS only)
Artwork Aspect Ratio – 16:9
rounded radius 22 px
Spacing between 2 buckets is 16px
Item Type ID: 65
Supported content - Games
Meta 1 – Game title
Games Continuity Bucket (VAS only)
Artwork Aspect Ratio – 16:9 Rounded Radius – 24px
Spacing between two bucket is 2.5px
Item Type ID: 66
Supported content - Games
Meta 1 – Game title
Games Bucket (VAS only)
Artwork Aspect Ratio – 16:9 Rounded Radius - 20px
Item Type ID: 67
Space between 2 bucket is 16px
Supported content - Games
Meta 1 – Game title
Games Bucket (VAS only)
Artwork Aspect Ratio – 16:9 Rounded Radius - 20px
Item Type ID: 67
Space between 2 bucket is 16px
Supported content - Games
Meta 1 – Game title
Games Bucket (VAS only)
Artwork Aspect Ratio – 16:9 Rounded Radius - 20px
Item Type ID: 68
Space between 2 bucket is 16px
Supported content - Games
Meta 1 – Game title
Download icon – right aligned
Short Video Bucket (VAS only)
Artwork Aspect Ratio – 16:9 Rounded Radius - 5px
Item Type ID: 68
Space between 2 bucket is 10px
135px
One and half videos are visible at a time
Supported content - Short Videos
Meta 1 –Title
240 px
Activity Playlist (Pleng)
Artwork Aspect Ratio – 16:9 Rounded Radius - 7px
Item Type ID: 69
Space between 2 bucket is 14px
Two and half artwork are visible at a time
Meta 1 –Title