App Clone inspired by Spotify

---
version: 1.0
name: Spotify
slug: spotify
description: A 19-screen Spotify clone — Home, Search, Your Library, Now Playing, and playlist detail.
categories: [music, streaming]
screens: 19
platform: [android]
generated: 2026-04-13T14:21:46.596Z
source: https://appspec.md/starters/spotify
---

# Spotify — APPSPEC.md

_Reverse-engineered UI specification. Not affiliated with Spotify. Generated by [APPSPEC.md](https://appspec.md)._

## 01 · Overview

A 19-screen Spotify clone — Home, Search, Your Library, Now Playing, and playlist detail.

Spotify is a content-first listening app with a dense browse layer, swipeable Now Playing, and a personal library. This starter gives you the tab shell, track rows, player transitions, and search — a clean base for any streaming or audio product.

This spec covers **19 screens** across 6 flows. It is intentionally UI-only — no backend contracts, no API shapes, no auth. Bring your own Supabase / Firebase.

## 02 · Navigation

The app clusters into 6 flow groups:

```
Home & Dashboard (2 screens)
  ├─ HomeScreen
  ├─ InAppBrowserScreen
Tracking & Logs (1 screens)
  ├─ LoginScreen
Onboarding & Auth (2 screens)
  ├─ ConsentManagementScreen
  ├─ SignUpScreen
Profile & Settings (5 screens)
  ├─ AccountManagementScreen
  ├─ CompleteProfileScreen
  ├─ ProfilePictureScreen
  ├─ ProfileScreen
  ├─ SettingsScreen
Detail & Sheet (1 screens)
  ├─ KidsAvatarPickerScreen
Other (8 screens)
  ├─ AgeVerificationScreen
  ├─ ChangePronounsScreen
  ├─ DisplayAdScreen
  ├─ LibraryScreen
  ├─ NowPlayingScreen
  ├─ PremiumScreen
  ├─ SearchScreen
  ├─ ShareScreen
```

## 03 · Screens

Full UI specification for every screen — layout, components, copy, and state transitions. Every screen below is grounded in the real shipped app.

# Login & Account Setup Screens

---

## Welcome / Login Entry Screen

### Overview
The user sees the Spotify logo and is prompted to choose how to continue — either by logging in or signing up — using multiple identity provider options.

### UI Elements
- **Header**: Spotify logo centered at the top of the screen
- **Title text**: "Who's listening?" (from `account_selection_title`)
- **Subtitle text**: "Get personalized recommendations, playlists, and more." (from `account_selection_subtitle`)
- **Continue with Google button** — labeled using `accessibility_continue_with_google` ("Google"), branded button with Google icon
- **Continue with Facebook button** — labeled using `accessibility_continue_with_facebook` ("Facebook"), branded button with Facebook icon
- **Continue with Apple button** — labeled using `accessibility_continue_with_apple` ("Apple"), branded button with Apple icon
- **Continue with Phone number button** — labeled using `accessibility_continue_with_phone` ("Phone number")
- **Continue with Email button** — labeled using `accessibility_continue_with_email` ("Email")
- **Continue with NAVER button** — labeled using `accessibility_continue_with_naver` ("NAVER") — shown in applicable regions
- **"Switch to log in" link** — text link labeled `action_switch_to_login` ("switch to log in")
- **"Switch to sign up" link** — text link labeled `action_switch_to_signup` ("switch to sign up")

### Interactions
- Tapping **Google**, **Facebook**, **Apple**, **NAVER**: Initiates OAuth flow for that provider; user is taken to that provider's login page in a browser or in-app web view
- Tapping **Phone number**: Navigates to the phone number entry screen
- Tapping **Email**: Navigates to the email/password login or signup screen
- Tapping **"switch to log in"**: Toggles the screen to the Login variant (if currently on signup)
- Tapping **"switch to sign up"**: Toggles the screen to the Signup variant (if currently on login)

### Sample Data
- User sees: "Who's listening?" with subtitle "Get personalized recommendations, playlists, and more."
- Five social/identity buttons stacked vertically: Google, Facebook, Apple, Phone number, Email

---

## Email Login Screen

### Overview
The user enters their Spotify email address and password to log in with credentials.

### UI Elements
- **Back button** — top-left, labeled "Back" (`accessibility_navigate_back`)
- **Screen title** — "Log in" or equivalent heading
- **Email/username input field** — text input with hint text `abc_search_hint` ("Search…") or email placeholder; single line
- **Password input field** — masked text input; password type
- **"Send login link" link** — text link labeled `action_log_in_without_password` ("send login link") for passwordless login
- **Log In button** — primary CTA button; enabled once fields are non-empty
- **Error message area** — inline error text below relevant field when credentials fail (e.g., `action_navigate_to_content_error` "Something went wrong")

### Interactions
- Typing in email field: Updates field value; no action until submission
- Typing in password field: Updates masked field value
- Tapping **"send login link"**: Navigates to passwordless login flow — app sends a login link to the user's email
- Tapping **"open email app"** (`action_open_email_app`): Opens the device's default email client (appears after login link is sent)
- Tapping **Log In button**: Submits credentials; on success navigates to the main home screen; on failure shows an error message
- Tapping **Back**: Returns to the Welcome screen

### Sample Data
- Email field: "alex.johnson@gmail.com"
- Password field: "••••••••••"
- Error state: "Something went wrong" shown below the password field on invalid credentials

---

## Passwordless Login (Send Login Link) Screen

### Overview
The user is informed that a magic login link has been sent to their email, and they are prompted to open their email app to complete login.

### UI Elements
- **Back button** — top-left
- **Instructional heading** — explains that a login link was sent to the user's email address
- **Email address displayed** — shows the address the link was sent to (e.g., "We sent a link to alex@gmail.com")
- **"Open email app" button** — primary CTA labeled `action_open_email_app` ("open email app")
- **Retry / Resend link** — secondary option to resend the link if not received

### Interactions
- Tapping **"Open email app"**: Opens the device's default email client so the user can tap the magic link
- Tapping **Back**: Returns to the Email Login screen
- After tapping the magic link from the email: User is authenticated and redirected into the app's home screen

### Sample Data
- "We sent a link to alex.johnson@gmail.com. Check your inbox and tap the link to log in."

---

## Account Picker ("Who's Listening?") Screen

### Overview
On a shared device, users can pick which Spotify account to listen with from a list of previously logged-in accounts.

### UI Elements
- **Title**: "Who's listening?" (`account_picker_title_text`)
- **Subtitle**: "Get personalized recommendations, playlists, and more." (`account_picker_info_text`)
- **Account list** — vertical list of account cards, each showing:
  - Profile picture / avatar
  - Display name
  - Account type badge (e.g., "Managed plan member" from `account_type_premium_managed`, "Spotify Free" from `account_type_free_managed`, "Self-managed" from `account_details_account_type_self_managed`)
  - PIN required indicator (icon + label `account_switching_user_pin_required_content_description` "PIN required") if applicable
  - Disabled state with label `account_switching_user_disabled_accessibility_label` ("No internet connection") if offline
- **"Add account" button** — at the bottom of the account list, labeled `account_picker_add_user_text` ("Add account")
- **Accessibility label for switching** — each account row has `account_switching_user_action_accessibility_label` ("switch to %1$s's account")

### Interactions
- Tapping an **account row** (no PIN required): Switches to that account immediately; shows snackbar "You're now logged in as [Name]" (`account_switching_logged_in_snackbar_message`)
- Tapping an **account row** (PIN required): Shows a PIN entry dialog before switching
- Tapping **"Add account"**: Navigates to the Add Account screen (login/signup flow for a new account)
- Tapping a **disabled account row**: No action; row shows "No internet connection" accessibility label
- Note: Young listener accounts on shared devices can switch between managed accounts without a PIN; a self-managed account requires the plan manager to enter a PIN (`account_switching_young_listener_disclaimer`)

### Sample Data
- Account 1: Avatar, "Alex Johnson", "Self-managed" badge
- Account 2: Avatar, "Sam (Kid)", "Managed plan member" badge, PIN required icon
- Account 3: "Add account" button at bottom

---

## Add Account Screen

### Overview
The user initiates adding a new Spotify account to the current device by entering credentials or choosing a sign-in method.

### UI Elements
- **Back button** — top-left
- **Screen title**: "Add account" (`add_account_page_title`)
- **Subtitle/disclaimer**: "While you are signed in, anyone else using this device will be able to access your account." (`account_switching_disclaimer`)
- **"Add a different account" section title** (`add_different_account_title`)
- **Sign-in method buttons** — same options as Welcome screen (Google, Facebook, Apple, Phone, Email)
- **"Add Account" primary button** (`add_account` "Add Account")

### Interactions
- Tapping any sign-in provider: Initiates the corresponding auth flow
- Successful auth: New account added to the account picker list; snackbar "You're now logged in as [Name]" shown
- Failed attempt: Snackbar error "Something went wrong. Have another go?" (`add_managed_account_failed_snackbar`)
- Tapping **Back**: Returns to Account Picker

### Sample Data
- Screen title: "Add account"
- Disclaimer: "While you are signed in, anyone else using this device will be able to access your account."

---

## Parental Consent / QR Code Screen

### Overview
A young listener is shown a QR code that their parent or guardian must scan in order to grant parental consent for account creation.

### UI Elements
- **Screen title**: "Ask your parent or guardian to scan this code" (`aa_share_parental_consent_title`)
- **QR code image** — large, scannable QR code centered on screen; accessibility description: "QR Code, use another camera to scan and continue" (`aa_share_parental_consent_qr_code_description`)
- **Primary instruction text**: "They should scan this code with the device where they normally use Spotify." (`aa_share_parental_consent_instruction`)
- **Divider / "Or" separator**
- **"Parent login" button** — secondary CTA labeled `aa_share_parental_consent_continue_current_device_button` ("Parent login") for the alternative flow
- **Alternative instruction text**: "Or, your parent can log in here temporarily. You won't be able to access their account." (`aa_share_parental_consent_instruction_current_device`)
- **Disclaimer**: "Does your parent not have an account? They can sign up for free with either option." (`aa_share_parental_consent_disclaimer`)

### Interactions
- Parent scans QR code with another device: Completes parental consent flow on the parent's device; the young listener's app progresses automatically
- Tapping **"Parent login"**: Opens a temporary parent login screen on the current device so the parent can authenticate and grant consent without the child accessing the parent's full account

### Sample Data
- Title: "Ask your parent or guardian to scan this code"
- Large QR code image displayed
- Below: "They should scan this code with the device where they normally use Spotify."
- Button: "Parent login"
- Fine print: "Does your parent not have an account? They can sign up for free with either option."

---

## Account Details / Profile Screen

### Overview
The user views and manages their account information, including account type, name, profile picture, and content settings.

### UI Elements
- **Back/navigation button** — top-left
- **Screen title**: "Account type" label (`account_details_account_type_title`)
- **Profile picture** — circular image; accessibility description `account_details_profile_picture_description` ("Profile picture")
- **Name row** — shows display name with click label `account_details_name_row_click_label` ("Update name") and row title `account_details_name_row_title` ("Name"); tappable to edit
- **Account type row** — displays one of:
  - "Spotify Kids (separate app)" (`account_details_account_type_kids`)
  - "Managed account (you control playback)" (`account_details_account_type_managed`)
  - "Self-managed" (`account_details_account_type_self_managed`)
  - "Account switch in progress" (`account_details_account_type_switch_in_progress`)
- **Account transition in progress banner** — if applicable, shows `account_details_button_disabled` ("Account transition is in progress"); all buttons disabled
- **Explicit content toggle** — labeled `account_details_explicit_content_title` ("Explicit content") with description `account_details_explicit_content_description` ("Content (labeled with the [E] tag) that may contain adult language or themes.")
- **Remove member section** (plan manager only):
  - Title: "Remove member" (`account_details_remove_member_title`)
  - Description: "Remove this person's access to your plan." (`account_details_remove_member_description`)
  - **Remove button** — labeled `account_details_remove_member_button` ("Remove"); red/destructive style

### Interactions
- Tapping **Name row**: Opens an inline edit field or dialog to update display name
- Toggling **Explicit content**: Enables or disables explicit content for this account; updates immediately
- Tapping **Remove** (plan manager view): Opens a confirmation dialog before removing the member from the plan
- Confirmation dialog buttons: "Cancel" / "Remove"
- When account transition is in progress: All interactive elements show as disabled with message "Account transition is in progress"

### Sample Data
- Name: "Alex Johnson"
- Account type: "Managed plan member"
- Explicit content: Toggle in ON state
- Remove member: "Remove this person's access to your plan." with "Remove" button (shown to plan manager only)
<!-- source-hash:7e86140b1173 -->

---

# Music Player & Playback — Screen Specifications

---

## Now Playing View

### Overview
The full-screen music player where users see the currently playing track's artwork, control playback, and access related features like lyrics, queue, and sharing.

### UI Elements

**Header / Top Bar**
- Back/collapse chevron (down arrow) — returns user to the previous screen
- Title: "Now Playing" (string: `now_playing_view_title`)
- "..." or three-dot button — opens context menu (more options)
- Share button — labeled "Share" (`action_share_label`)

**Artwork Area**
- Large square album/track artwork, centered, fills most of the upper screen
- Artwork animates slightly (scale + alpha transitions) on track change
- On video tracks, artwork area shows the video player

**Track Info**
- Track title (large, single line, truncated with ellipsis)
- Artist name (smaller, below title)
- "Save" / heart button — adds track to library; label: "Add" (`action_save_label`); when saved: "Item added" (`add_to_button_content_description_added`)

**Playback Controls**
- **Shuffle button** — toggles shuffle mode; accessibility label: "Smart Shuffle" (`accessibility_smartshuffle`)
- **Previous track button** — skips to previous track or restarts current track
- **Play/Pause button** — large center button; toggles playback
- **Next track button** — skips to next track
- **Repeat button** — cycles through repeat modes (off → repeat all → repeat one)

**Seek Bar / Progress**
- Horizontal scrubber showing elapsed and total track time
- Current playback position timestamp (left)
- Total duration timestamp (right)
- Draggable thumb to seek

**Volume Control**
- Horizontal volume slider (below seek bar or near bottom)
- Accessibility label: "Volume %d" (`accessibility_label_volume`)

**Bottom Action Row**
- **Lyrics button** — navigates to full-screen lyrics (`spotify:lyrics:fullscreen`)
- **Queue button** — opens the play queue (`spotify:queue`)
- **Connect / Devices button** — opens device picker (`spotify:internal:connect-device-picker`); shows current output device name; accessibility: "Volume for %s" (`accessibility_label_volume_for_device`)
- **Share button** — opens share sheet

**Gradient Background**
- Background uses a color gradient derived from the album artwork

**Snackbar / Toast**
- Appears on errors: "Something went wrong" (`action_navigate_to_content_error`)
- Track save confirmation snackbar

**Picture-in-Picture (PiP) Mode**
- When app enters PiP, the player collapses to a small floating window
- Shows artwork, track title, and play/pause control

### Interactions
- **Tapping artwork** — toggles a "preview" mode or opens video player if video track
- **Swiping down** — collapses Now Playing View back to the mini player / previous screen; uses `nowplaying_activity_exit` animation
- **Tapping shuffle** — toggles shuffle; button state updates visually
- **Tapping prev/next** — skips track; artwork and track info update immediately
- **Tapping play/pause** — toggles playback state; button icon changes
- **Dragging seek bar** — scrubs through track; timestamp updates in real time
- **Tapping lyrics** — navigates to full-screen lyrics screen
- **Tapping queue** — navigates to Queue screen
- **Tapping devices** — opens Connect Device Picker bottom sheet
- **Tapping share** — opens Share sheet
- **Tapping "..." (more options)** — opens context menu bottom sheet with additional actions
- **Tapping save/heart** — adds track to library; heart icon fills; snackbar confirms
- **Configuration change (rotate/resize)** — layout re-renders to match new orientation/width
- **Entering PiP** — full UI collapses; dialogs are dismissed automatically

### Sample Data
- **Track:** "Anti-Hero" 
- **Artist:** Taylor Swift
- **Album artwork:** Midnights album art
- **Duration:** 3:20
- **Current position:** 1:14
- **Volume:** 72%
- **Shuffle:** On
- **Repeat:** Off

---

## Now Playing — Lyrics (Full Screen)

### Overview
A full-screen overlay showing synchronized, scrolling lyrics for the currently playing track.

### UI Elements
**Header**
- Close/back button (top left) — collapses back to Now Playing View
- Track title and artist name (top center, small)
- Share lyrics button — navigates to lyrics share selector (`spotify:lyrics-share-selector`)

**Lyrics Body**
- Scrolling list of lyric lines
- Current line highlighted (larger or brighter color)
- Past lines dimmer; upcoming lines slightly muted
- Lines scroll in sync with playback position

**Upsell Banner (Free Users)**
- If lyrics are behind a paywall, a banner appears explaining the Premium benefit
- Button: upgrade/learn more

**Premium Signifier**
- Small badge or label visible if content requires Premium (`premiumSignifier`)

### Interactions
- **Lines scroll automatically** as the track progresses
- **Tapping a lyric line** — seeks the track to that timestamp
- **Tapping share** — opens the lyrics share selector where user can pick which lines to share
- **Tapping close** — returns to Now Playing View

### Sample Data
- Current line (highlighted): *"It's me, hi, I'm the problem, it's me"*
- Previous line (dimmed): *"At teatime, everybody agrees"*
- Next line (muted): *"I'll stare directly at the sun but never in the mirror"*

---

## Queue

### Overview
The play queue screen where users see the currently playing track and the list of upcoming songs.

### UI Elements
**Header**
- Back button or close button
- Title: "Queue" (implied by `spotify:queue` route)

**Now Playing Section**
- Label: "Now playing" 
- Row showing: track artwork thumbnail, track title, artist name
- Currently playing indicator (e.g., animated bars or highlighted row)

**Next in Queue Section**
- Section header: "Next in queue" or "Next up"
- List of upcoming tracks, each row showing:
  - Track number/position
  - Artwork thumbnail (small)
  - Track title
  - Artist name
  - Drag handle (to reorder)
  - Remove button (swipe or long press); accessibility: "Remove %1$s by %2$s" (`accessibility_action_remove_track`)

**Next From [Context] Section**
- Section header showing the source context (e.g., "Next from: Midnights")
- Remaining tracks from the original playlist/album/context

**Clear Queue Button**
- Button or action to clear all manually queued tracks

### Interactions
- **Tapping a track row** — plays that track immediately; queue updates
- **Long pressing / drag handle on a row** — reorders track in queue
- **Swiping a row left** — removes track from queue; snackbar confirms
- **Tapping remove icon** — removes track; accessibility announces "Remove [track] by [artist]"
- **Tapping back** — returns to Now Playing View
- **Tapping "Add to queue" from elsewhere** — adds track to queue; snackbar: "Added to queue"

### Sample Data
**Now Playing:**
- "Anti-Hero" — Taylor Swift

**Next in Queue:**
1. "Karma" — Taylor Swift
2. "Lavender Haze" — Taylor Swift

**Next from: Midnights:**
3. "Midnight Rain" — Taylor Swift
4. "Vigilante Shit" — Taylor Swift
5. "Bejeweled" — Taylor Swift

---

## Connect Device Picker

### Overview
A bottom sheet that lets users choose which device (phone, speaker, TV, etc.) to play music on via Spotify Connect.

### UI Elements
**Sheet Header**
- Title: "Connect to a device" or similar
- Close button (top right)

**Current Device**
- Row labeled "This device" or the phone's name
- "Local device" indicator (`local_device`)
- Volume slider for the current device; accessibility: "Volume for %s" (`accessibility_label_volume_for_device`)

**Available Devices List**
- Each device row shows:
  - Device icon (speaker, TV, phone, car, etc.)
  - Device name (e.g., "Living Room Speaker", "Kitchen Echo")
  - Connection status (active device highlighted)
  - Disabled state if unavailable; accessibility: "The %s device is disabled." (`accessibility_device_row_disabled`)
- "..." or context menu button per device; accessibility: "Open context menu for %s" (`accessibility_open_context_menu_for_device`)

**Bluetooth Settings Link**
- "Open Bluetooth devices in system settings" (`accessibility_open_bluetooth_settings`) — tappable link

**Volume Control (Active Device)**
- Volume slider for the currently active remote device
- Accessibility: "Volume for %s" (`accessibility_label_volume_for_device`)

**Output Switcher Option**
- Button/link to open system audio output switcher (`spotify:internal:connect-output-switcher`)

### Interactions
- **Tapping a device** — transfers playback to that device; selected device gets highlighted; sheet may close or stay open
- **Tapping "..." on a device** — opens a context menu for that device (`spotify:internal:connect-device-context-menu`) with options like rename, disconnect, etc.
- **Tapping "Open Bluetooth settings"** — opens system Bluetooth settings
- **Adjusting volume slider** — changes volume on the selected device in real time; accessibility announces "Volume %d" (`accessibility_label_volume`)
- **Tapping close** — dismisses the sheet

### Sample Data
- **This device:** Pixel 7 Pro (active, currently playing)
- **Available:**
  - Kitchen Echo Dot (Bluetooth)
  - Living Room TV (Spotify Connect)
  - MacBook Pro (Spotify Connect)

---

## Now Playing — Context Menu (More Options)

### Overview
A bottom sheet of additional actions for the currently playing track, accessible via the "..." button in the Now Playing View.

### UI Elements
**Header**
- Track artwork thumbnail
- Track title
- Artist name
- Album name

**Action List** (each item is a tappable row with an icon and label)
- **Add to playlist** — "Add to playlist" (`add_to_collection_label`)
- **Add to queue** — add track to queue end
- **Go to artist** — navigates to artist page
- **Go to album** — navigates to album page
- **Share** — "Share" (`action_share_label`); opens share sheet
- **Save to library / Remove from library** — "Add" / "Remove" toggle
- **View credits** — navigates to track credits (`spotify:track:{id}:credits`)
- **Start radio** — starts a radio based on this track
- **Song DNA** — "About SongDNA" (`about_songdna_title`); navigates to SongDNA feature (`spotify:track:{id}:dna`)
- **Report** — "Report" (`actions_picker_report_abuse`)
- **Sleep timer** — access sleep timer settings

### Interactions
- **Tapping any action** — performs the action and closes the sheet (or navigates away)
- **Tapping outside the sheet** — dismisses it
- **Tapping share** — opens the Share sheet; sheet closes
- **Tapping "Add to playlist"** — opens the Add to Playlist screen
- **Tapping "Go to artist"** — navigates to artist page; Now Playing collapses

### Sample Data
- Track: "Flowers" by Miley Cyrus, from *Endless Summer Vacation*
- Actions visible: Like, Add to playlist, Add to queue, Go to artist, Go to album, Share, View credits, Start radio, Song DNA, Report

---

## Mini Player (Now Playing Bar)

### Overview
The persistent mini player bar pinned to the bottom of the screen while music is playing, visible from any main tab.

### UI Elements
- **Track artwork** — small square thumbnail (left)
- **Track title** — truncated single line
- **Artist name** — smaller text below title
- **Play/Pause button** — icon button (right side)
- **Next track button** — icon button (far right)
- **Progress indicator** — thin progress line along the top edge of the bar

### Interactions
- **Tapping the bar (anywhere except buttons)** — expands to the full Now Playing View with enter animation (`nowplaying_activity_enter`)
- **Tapping play/pause** — toggles playback without opening full view
- **Tapping next** — skips to next track; bar updates with new track info
- **Swiping the bar left or right** — optionally dismisses or skips (behavior may depend on feature flags)
- Accessibility: "show Now Playing View" (`action_desc_show_now_playing_view`)

### Sample Data
- Artwork: "Flowers" single cover
- Title: "Flowers"
- Artist: "Miley Cyrus"
- State: Playing (pause icon shown)
- Progress: ~40% filled

---

## Video Player (Now Playing — Video Mode)

### Overview
Full-screen video playback within the Now Playing view, shown when the currently playing content includes a music video or podcast video episode.

### UI Elements
**Video Viewport**
- Full-screen video display (portrait or landscape)
- Tap to show/hide playback controls overlay

**Overlay Controls (visible on tap)**
- Back/collapse button (top left)
- Track title and artist (top center)
- "..." more options button (top right)
- Seek bar with timestamps
- Play/Pause, Previous, Next buttons (center bottom)
- Volume control
- Full-screen toggle

**Video Settings Button**
- Navigates to `spotify:nowplaying:video-settings`

**Ad Overlay (if ad playing)**
- "Ad Playing" label (`ad_playing`)
- Skip countdown: "Skip in %d" (`ad_delayed_skip_label`)
- "Your [music/podcast] will continue after the break" (`ad_header_title_music` / `ad_header_title_podcast`)

**Subtitles/Captions Toggle**
- Accessible via video settings (`spotify:nowplaying:video-settings:subtitles`)

### Interactions
- **Tapping video** — shows/hides control overlay; overlay auto-hides after a few seconds
- Accessibility label: "Tap to show controls" (`ad_overlay_view_description`)
- **Tapping settings** — opens Video Settings sheet
- **Tapping subtitles** — toggles captions or opens subtitle language picker
- **Rotating device** — video re-layouts to fill new orientation
- **Entering PiP** — video continues playing in floating PiP window; controls hidden; tapping PiP restores full view

### Sample Data
- Content: Beyoncé — "CUFF IT" (Official Music Video)
- Duration: 4:02
- Current time: 2:15
- Subtitles: Off
- Quality: Auto

---

## Video Settings

### Overview
A settings sheet or screen for configuring video playback options such as quality and subtitles, accessible from the Now Playing video player.

### UI Elements
**Header**
- Title: "Video settings" (implied by `spotify:nowplaying:video-settings`)
- Close button

**Video Quality Row**
- Label: "Video quality"
- Current quality shown (e.g., "Auto", "360p", "720p")
- Tapping navigates to `spotify:nowplaying:video-settings:video-quality`

**Subtitles Row**
- Label: "Subtitles / Captions"
- Toggle or current language shown
- Tapping navigates to `spotify:nowplaying:video-settings:subtitles`

**Audio Language Row**
- Label: "Audio language"
- Current language shown
- Tapping navigates to `spotify:nowplaying:video-settings:audio-language`

**"Video disabled" info link**
- Navigates to `spotify:nowplaying:video-disabled-info` if video is unavailable

### Interactions
- **Tapping "Video quality"** — opens quality selection list; user picks a resolution; returns to settings
- **Tapping "Subtitles"** — opens subtitle language picker
- **Tapping "Audio language"** — opens audio track/language picker
- **Tapping close** — dismisses the sheet; returns to video player

### Sample Data
- Video quality: Auto (current)
- Subtitles: Off
- Audio language: English
<!-- source-hash:880e410c17e4 -->

---

# Spotify Search & Discovery — Screen Specifications

---

## Search Home (Browse / Discover)

### Overview
The user lands on the Search tab and sees a browse grid of content categories they can explore, plus a search bar at the top.

### UI Elements

**Header/Toolbar**
- Screen title: "Search" (or "Find" depending on variant)
- Search bar with placeholder text: "Search…" (from `abc_search_hint`)
- Microphone icon button for voice search (accessibility: "Voice search")

**Search Input Area**
- Text input field, placeholder: "Search…"
- Clear button appears when text is present (accessibility label: "Clear query")
- Submit/search button (accessibility label: "Submit query")
- Voice search button (accessibility label: "Voice search")

**Browse Categories Grid**
- 2-column grid of category cards, each showing:
  - Category artwork/background image (fills the card)
  - Category name overlaid as bold text (e.g., "Pop", "Hip-Hop", "Podcasts", "New Releases", "Charts")
  - Cards have distinct background colors per category
- Sections visible: Music, Podcasts & Shows, Audiobooks, Live, Charts, Browse All
- Possible category entries (from code): Pop, Hip-Hop, Rock, Podcasts, Audiobooks, Charts, New Releases, Genres, etc.

**Bottom Navigation Bar**
- "Home", "Search", "Your Library", and "Premium" (or profile icon) tabs

### Interactions
- Tapping the search bar focuses the input and transitions to the Active Search / Autocomplete screen
- Tapping a category card navigates to that genre/category's browse page (e.g., a genre page with playlists, albums, and top tracks)
- Tapping the microphone button opens voice search mode
- Typing in the search bar triggers autocomplete suggestions in real time

### Sample Data
Category grid examples:
- "Pop" (pink gradient)
- "Hip-Hop" (orange gradient)
- "Podcasts & Shows" (green)
- "New Releases" (dark blue)
- "Charts" (teal)
- "Audiobooks" (gold)
- "Live Events" (red)

---

## Active Search / Autocomplete

### Overview
After tapping the search bar, the user sees their recent searches and, as they type, live autocomplete suggestions appear.

### UI Elements

**Header**
- Back arrow (accessibility label: "Back" / "Navigate up")
- Active search text input field (focused, keyboard visible)
- Clear ("✕") button to clear the current query

**Recent Searches Section** (shown before typing begins)
- Section header: "Recent searches"
- List of recent search entries, each showing:
  - Search query text
  - Clock/history icon
  - "✕" remove button to delete that entry
- If no recents: empty state or omitted entirely

**Autocomplete Suggestions List** (shown while typing)
- Vertically scrollable list of suggested queries
- Each row shows:
  - Magnifying glass icon
  - Suggested search term text
  - Arrow icon (to indicate it will execute the search)
- Suggestions update in real time as the user types

**Recent/Trending Section** (before typing, optional)
- "Trending" section with popular search terms shown as chips or a list

### Interactions
- Tapping a recent search item executes that search immediately and navigates to Search Results
- Tapping the "✕" on a recent item removes only that item from history
- Tapping an autocomplete suggestion executes the search and navigates to Search Results
- Tapping the arrow on a suggestion opens full search results for that query
- Pressing the keyboard "search" / "done" action submits the current typed query
- Tapping the back arrow returns to Search Home without executing a search

### Sample Data
Recent searches: "Taylor Swift", "Morning coffee playlist", "Crime Junkie podcast", "Radiohead"

Autocomplete for "tay": "taylor swift", "taylor swift anti-hero", "taylor swift midnights", "taylor hendrix"

---

## Search Results

### Overview
The user sees a tabbed results page showing all content types matching their query, with a prominent "Top Result" card at the top.

### UI Elements

**Header**
- Back arrow
- Search query text in the input field (editable)
- Clear button

**Filter Tabs Row** (horizontally scrollable pills/chips)
- "All", "Songs", "Artists", "Albums", "Playlists", "Podcasts & Shows", "Episodes", "Audiobooks", "Profiles", "Genres" — all derived from the navigation routes (SEARCH_SONGS, SEARCH_ARTISTS, SEARCH_ALBUMS, SEARCH_PLAYLISTS, SEARCH_PODCASTS_AND_EPISODES, SEARCH_EPISODES, SEARCH_AUDIOBOOKS, SEARCH_PROFILES)
- Active filter pill is highlighted (white/green)

**"All" Tab Content:**

*Top Result Card* (large card at top)
- Entity artwork (artist photo, album cover, or playlist image)
- Entity name (bold, large text)
- Type label below name (e.g., "Artist", "Album", "Song")
- Play button in bottom-right corner of the card

*Songs Section*
- Section header: "Songs"
- Vertical list of up to 4 track rows, each showing:
  - Track thumbnail (album art)
  - Track title (primary text)
  - Artist name (secondary text)
  - Explicit badge ("E") if applicable
  - "…" context menu button
- "See all" link at the bottom of the section

*Artists Section*
- Section header: "Artists"
- Horizontally scrollable row of circular artist cards, each showing:
  - Circular artist photo
  - Artist name below
  - "Artist" label

*Albums Section*
- Section header: "Albums"
- Horizontally scrollable row of album cards, each showing:
  - Square album artwork
  - Album title
  - Artist name + release year

*Playlists Section*
- Section header: "Playlists"
- Horizontally scrollable row of playlist cards:
  - Playlist artwork
  - Playlist name
  - Owner name (prefixed with "by", e.g., "by Spotify")

*Podcasts & Shows Section*
- Section header: "Podcasts & Shows"
- Vertical list rows each showing:
  - Show thumbnail (square)
  - Show title
  - Creator / publisher name
  - "Podcast" or "Show" type label

**Individual Filter Tab Content (e.g., "Songs" tab)**
- Full scrollable list of matching tracks
- Each row: album art thumbnail, track title, artist name, explicit badge if applicable, "…" context menu
- List is paginated/infinite scroll

**No Results State**
- Centered illustration or icon
- Primary message: "No results found for '[query]'"
- Secondary message: "Check the spelling, or try a different keyword."
- (Based on strings: `add_to_playlist_empty_view_search_title`, `add_to_playlist_empty_view_search_subtitle`)

**Search Feedback Dialog** (accessible from a menu or prompt)
- Triggered by a "Give feedback" link in some search contexts
- Routes to `DIALOG_SEARCH_FEEDBACK`

### Interactions
- Tapping a filter tab pill reloads the results list filtered to that content type
- Tapping the Top Result card navigates to that entity's page (artist profile, album, etc.)
- Tapping a track row plays the track and opens the mini Now Playing bar
- Tapping "…" on a track opens the track context menu (add to playlist, share, go to artist, etc.)
- Tapping "See all" under a section navigates to a full results list for that type
- Tapping an artist card navigates to the Artist profile page
- Tapping an album card navigates to the Album page
- Tapping a playlist card navigates to the Playlist page
- Tapping a podcast/show card navigates to the Show/Podcast page

### Sample Data
Query: "Billie Eilish"

- Top Result: Billie Eilish (Artist card with photo, "Artist" label, Play button)
- Songs: "bad guy", "Happier Than Ever", "Ocean Eyes", "Therefore I Am"
- Albums: "HIT ME HARD AND SOFT" (2024), "Happier Than Ever" (2021), "When We All Fall Asleep…" (2019)
- Playlists: "This Is Billie Eilish" by Spotify, "Billie Eilish Radio", "sad girl hours"
- Related Artists: Khalid, Billie Eilish's brother Finneas, Lorde

---

## Search Results — Songs Filter

### Overview
A full-screen scrollable list of songs matching the search query.

### UI Elements

**Header**
- Back arrow
- Search bar showing the current query
- "Songs" filter tab active

**Sort / Filter Options** (optional, top of list)
- Sort by: Relevance (default)

**Track List**
- Each track row contains:
  - Album art thumbnail (small square, ~50×50px)
  - Track title (bold)
  - Artist name (smaller, muted)
  - Explicit "E" badge (if applicable, described: `account_details_explicit_content_title`)
  - Playback duration (right-aligned)
  - "…" overflow/context menu button

**Loading State**
- Skeleton rows while loading

**Empty / Error State**
- Message: "Couldn't find "[query]"" with retry option

### Interactions
- Tapping a track row begins playback and shows the mini Now Playing bar
- Tapping "…" opens the track context menu (options: Add to playlist, Save to library, Share, Go to artist, Go to album, View credits, Add to queue, Report)
- Scrolling to the bottom loads more results

### Sample Data
Query: "love"
- "Lover" — Taylor Swift (3:41)
- "Love Story (Taylor's Version)" — Taylor Swift (3:57) 
- "Crazy in Love" — Beyoncé (3:56)
- "Love Yourself" — Justin Bieber (3:38)
- "What Is Love" — Haddaway (3:52)

---

## Search Results — Podcasts & Episodes Filter

### Overview
A filtered view showing only podcast shows and individual episodes that match the search query.

### UI Elements

**Header**
- Back arrow, active search query in search bar
- "Podcasts & Shows" filter tab active

**Sub-filter pills** (horizontal scroll, below main tab)
- "Shows", "Episodes" — to further narrow results
- Optionally: "Videos" (from route SEARCH_PODCASTS_AND_EPISODES_VIDEOS), "Upload date: Last week" / "Last 24 hours" (from SEARCH_LAST_WEEK, SEARCH_LAST_24_HOURS)

**Shows List**
- Each show row:
  - Square show artwork
  - Show title (bold)
  - Publisher / creator name
  - "Podcast" type label
  - Follow/Save button (heart icon or "+" icon)

**Episodes List**
- Each episode row:
  - Square show artwork (small)
  - Episode title (bold, 2 lines max, ellipsized)
  - Show name (secondary text)
  - Publication date + duration (e.g., "Nov 14 · 45 min")
  - Download/save icon
  - Playback progress bar (if partially listened)
  - "…" context menu

### Interactions
- Tapping a show navigates to the Show/Podcast page
- Tapping an episode immediately begins playback and shows the Now Playing bar
- Tapping "…" on an episode opens the episode context menu (Add to queue, Download, Share, Go to show, Mark as played)
- Sub-filter pills refine the results list in place

### Sample Data
Query: "true crime"
- Shows: "Crime Junkie" by audiochuck · Podcast; "Serial" by This American Life · Podcast; "My Favorite Murder" · Podcast
- Episodes: "MURDERED: Jennifer Servo" — Crime Junkie · Nov 18 · 28 min; "Update: Adnan Syed" — Serial · Oct 12 · 32 min

---

## Spotify Codes Scanner (Scannables)

### Overview
The user sees a live camera viewfinder to scan a Spotify Code (a unique barcode-style code that links to any Spotify content), with options to cancel or select an image from photos.

### UI Elements

**Full-Screen Camera Viewfinder**
- Live camera preview occupying the full screen background
- A centered scanning target area/frame overlaid on the viewfinder (rectangular or rounded rectangle guide)
- Spotify-themed overlay/branding

**Top Bar**
- Cancel/close button ("✕") in the top-left corner, white icon (from code: white "X" icon drawn with `R.color.white`)
- No title text in default mode; in social listening mode, the privacy notice text is visible

**Bottom Controls**
- "Select from photos" button — allows user to pick a photo containing a Spotify Code from their device gallery
  - *Hidden* in social listening mode (`button.setVisibility(GONE)`)

**Social Listening Mode Variant** (when launched for social listening)
- "Select from photos" button is hidden
- Privacy notice text label is shown instead (from `R.id.social_listening_privacy_notice`)
- Scanning hint text changes to: "scannables_social_listening_viewfinder_hint" (e.g., something like "Point your camera at your friend's Spotify Code")

**Default Mode Hint Text**
- Instructional text below the viewfinder frame (from `R.id.txt_scannable_instructions`), e.g., "Point your camera at a Spotify Code"

**Progress Dialog** (shown while processing)
- Title: (from `scannables_progress_dialog_title`, e.g., "Scanning…")
- Message states:
  1. While decoding: `scannables_progress_dialog_decoding` (e.g., "Decoding code…")
  2. While contacting server: `scannables_progress_dialog_contacting_server` (e.g., "Finding content…")
  - Device vibrates briefly when a code is successfully detected (decoding complete)

**Error Toast Messages**
- If the code can't be retrieved: `scannables_cant_retrieve_scannable` (e.g., "Can't retrieve this Spotify Code")
- For other errors: `scannables_error_message_toast` (generic error message)

### Interactions
- Camera viewfinder auto-scans continuously for any Spotify Code in frame
- When a valid code enters the frame:
  1. The progress dialog appears with "Decoding code…"
  2. Device vibrates
  3. Message changes to "Finding content…"
  4. On success: the screen closes and the linked Spotify content opens (e.g., a track, album, artist, or playlist page)
  5. On failure: a toast error is shown and the scanner stays open
- Tapping "Select from photos" (default mode only): opens the device photo gallery; user picks an image; the app decodes the Spotify Code from that image using the same flow
- Tapping the Cancel/close "✕" button: closes the scanner and returns to the previous screen

**Onboarding Screen** (shown first time, before camera permission granted)
- If camera permission is not yet granted or the user hasn't seen onboarding, the app navigates to `ScannablesOnboardingActivity` (request code 10001) before showing the scanner
- After granting permission, the scanner screen launches automatically

### Sample Data
- Scanning a Spotify Code on a physical poster → opens "Blinding Lights" by The Weeknd
- Scanning a code from a friend's phone screen → opens the "Chill Hits" playlist by Spotify
- Scanning a code on an album sleeve → opens the album "GUTS" by Olivia Rodrigo

---

## Genre / Category Browse Page

### Overview
After selecting a category from the Search home grid, the user sees a curated page of playlists, albums, shows, and editorial content within that genre or category.

### UI Elements

**Header**
- Back arrow
- Category name as page title (e.g., "Pop", "Hip-Hop", "Podcasts")
- Category-specific header color/background (matching the browse grid card color)

**Content Sections** (vertically stacked, each with a section header and horizontal scroll)

*Featured / Editorial Row*
- Large banner card at top (full-width or near full-width)
- Editorial playlist or Spotify-curated content
- Title + subtitle text overlaid on artwork

*Playlists Section*
- Section header (e.g., "Popular Playlists", "Editorial Picks")
- Horizontally scrollable row of playlist cards:
  - Square artwork
  - Playlist name
  - Short description or follower count

*New Releases Section* (for music genres)
- Section header: "New Releases"
- Horizontally scrollable album cards:
  - Album artwork
  - Album title
  - Artist name

*Top Tracks / Chart Section* (optional)
- Section header: "Top Tracks" or "Charts"
- List or horizontal cards

*Shows / Podcasts Section* (for podcast categories)
- Section header: "Shows"
- Show cards with artwork and name

*Sub-Categories / Related Genres*
- Pills or card row for related genres/moods (e.g., under "Hip-Hop": "Rap", "Trap", "R&B")

### Interactions
- Tapping a playlist card navigates to the Playlist page
- Tapping an album card navigates to the Album page
- Tapping an artist navigates to the Artist profile
- Tapping a show card navigates to the Podcast/Show page
- Tapping a sub-category pill navigates to that sub-genre browse page
- Tapping the Play button on a featured item begins playback

### Sample Data
Category: "Hip-Hop"
- Featured: "RapCaviar" playlist (large hero image)
- Popular Playlists: "Most Necessary", "Get Turnt", "Gold School", "Feelin' Myself"
- New Releases: "GNX" — Kendrick Lamar (2024), "Chromakopia" — Tyler, The Creator (2024)
- Sub-categories: "Trap", "Old School", "Conscious Rap", "Latin Rap"

---

## Assisted Curation Search (Playlist Creation Search)

### Overview
A search interface specifically for finding and adding songs, artists, albums, or shows when building an AI-assisted or manually curated playlist.

### UI Elements

**Header**
- Back/close button
- Title: (contextual, e.g., "Add songs" or "Search")
- Search input field, auto-focused with keyboard visible
- Placeholder: "Search" (`add_blocked_content_search_placeholder`)

**Filter Tabs** (horizontal scroll)
- "Songs", "Artists", "Albums", "Playlists", "Episodes", "Shows" — each navigating to a sub-search (from ASSISTED_CURATION_SEARCH_SONGS, _ARTISTS, _ALBUMS, _SHOWS, _EPISODES, etc.)

**Results List**
- For songs: track rows with checkbox or add icon
  - Track title, artist name, album art, duration
  - "Add" / checkmark toggle button on the right
- For artists: artist rows with circular photo, name, follower count
- For albums: album rows with artwork, title, year
- For shows: show rows with artwork, name, episode count

**Empty / No Results State**
- Title: "No result found" (`add_to_playlist_empty_view_search_title`)
- Subtitle: "Check the spelling, or try different keywords." (`add_to_playlist_empty_view_search_subtitle`)

**Selected Items Indicator** (optional sticky footer or counter)
- Shows number of selected items, e.g., "3 songs selected"
- "Done" button to confirm selections

### Interactions
- Typing in the search field queries all content types and shows results filtered by the active tab
- Tapping a track/album/artist adds it to the playlist-in-progress (item shows a checkmark)
- Tapping a checked item removes it from the selection
- Tapping "Done" commits the selections and returns to the playlist creation screen
- Tapping back without confirming discards any unsaved changes (may show a discard confirmation)

### Sample Data
Search: "kendrick"
- Songs tab: "HUMBLE." (4:43), "Not Like Us" (4:35), "DNA." (3:05)
- Artists tab: Kendrick Lamar (57M followers)
- Albums tab: "GNX" (2024), "Mr. Morale & The Big Steppers" (2022)

---

## AI Playlist Creator

### Overview
The user interacts with a conversational prompt interface to describe the playlist they want, and Spotify's AI generates a personalized playlist for them.

### UI Elements

**Header**
- Back/close button
- Title: (e.g., "Create playlist with AI" or "AI Playlist")

**Prompt Input Area**
- Large text input or multi-line field
- Placeholder text inviting the user to describe what they want (e.g., "Describe your ideal playlist…")
- Character counter or limit indicator
- Microphone/voice input button (optional)

**Send / Generate Button**
- Prominent CTA button: "Create" or a send arrow icon

**Generated Playlist Preview** (after AI responds)
- Playlist artwork (auto-generated or user-selectable)
- Playlist title (AI-suggested)
- List of generated tracks:
  - Each track row: artwork, title, artist, duration, "…" context menu
- "Regenerate" option or thumbs up/down feedback
- "Save" / "Add to library" button

**Re-Edit Option** (for existing AI playlists)
- If opened via `PLAYLIST_CREATE_EUTERPE_REPORT_A_PROBLEM` or reedit route
- Shows original prompt
- Allows editing the prompt and regenerating

**Report a Problem Link**
- Small link: "Report a problem" navigates to a feedback/report screen

### Interactions
- Typing a description and tapping "Create" sends the prompt and shows a loading state while the AI generates the playlist
- The generated playlist appears with a preview of tracks
- User can regenerate if not satisfied (new set of tracks generated from same or tweaked prompt)
- Tapping "Save" adds the playlist to the user's library
- Tapping a track in the preview plays it
- Tapping "Report a problem" opens a feedback form specific to AI playlist generation

### Sample Data
Prompt: "Songs for a rainy Sunday morning, mostly indie and acoustic, calm energy"
Generated playlist:
- "Skinny Love" — Bon Iver
- "Re: Stacks" — Bon Iver
- "First Day of My Life" — Bright Eyes
- "The Night Will Always Win" — Manchester Orchestra
- "Holocene" — Bon Iver
Suggested title: "Rainy Sunday Acoustic"
<!-- source-hash:9761241dd5e4 -->

---

# Your Library & Playlists — Screen Specifications

---

## Your Library

### Overview
The main library hub where users browse and manage all their saved music, podcasts, and playlists in one scrollable list.

### UI Elements

**Header/Toolbar:**
- Title: "My Library" (from `action_bar_add_to_library_context_accessibility`)
- Top-right: Search icon (magnifying glass) — searches within library
- Top-right: "+" / Add button — adds new content or creates a playlist
- Profile avatar (top-left, or accessible via account switcher)

**Filter Chips (horizontal scrollable row below header):**
- "Playlists" — filter to show only playlists
- "Albums" — filter to show only saved albums
- "Artists" — filter to show only followed artists
- "Podcasts & Shows" — filter to show only podcast subscriptions
- "Downloaded" — filter to show only locally downloaded content

**Sort/View Controls (below filter chips):**
- Sort selector showing current sort order (e.g., "Recently added", "Alphabetical", "Creator")
- Grid/List view toggle icon — switches between list rows and grid tiles

**Library Item List (scrollable):**
Each row shows:
- Artwork thumbnail (square, ~48×48dp) — playlist cover, album art, artist photo, or podcast image
- Title (bold, single line, truncated with ellipsis)
- Subtitle: content type + owner/artist (e.g., "Playlist • Spotify", "Album • Taylor Swift", "Artist", "Podcast • Weekly")
- Download indicator (arrow/checkmark icon) if content is downloaded offline
- A "PIN required" badge (from `account_switching_user_pin_required_content_description`) for managed-account-restricted content

**Special Items:**
- "Liked Songs" row — purple gradient thumbnail with heart icon, "Playlist • [N] songs"
- "Liked Episodes" row — purple thumbnail with heart icon (for podcast episodes)
- "Your Episodes" row — podcast episodes saved for later

**Empty State (if no items match filter):**
- Illustration
- Title + subtitle suggesting the user add content

**Mini Now-Playing Bar (pinned at bottom):**
- Track/episode artwork thumbnail
- Title and artist name
- Play/Pause toggle button
- Next track button

**Bottom Navigation Bar:**
- Home | Search | **Your Library** (active, highlighted) | Premium (or Feed)

### Interactions

- **Tap a playlist/album/artist/podcast row** → Opens the respective detail page (Playlist Detail, Album, Artist, or Podcast screen)
- **Long-press any row** → Opens a context bottom sheet with options: Play, Add to queue, Add to playlist, Download, Share, Remove from library, etc.
- **Tap the "+" button** → Opens a modal/sheet: "Create playlist", "Create playlist folder", "Find playlists to follow"
- **Tap the Search icon** → Reveals an in-library search field (placeholder: "Find in Your Library") at the top, filters the list in real time
- **Swipe down on list** → Scroll to reveal search bar (pull-to-filter gesture)
- **Tap a filter chip** → Filters list to show only that content type; chip becomes active/highlighted; other chips remain tappable to switch
- **Tap sort selector** → Opens a bottom sheet with sort options: "Recently added", "Recently played", "Alphabetical", "Creator", "Custom order"
- **Tap grid/list toggle** → Switches between compact list rows and a 2-column grid of artwork tiles
- **Tap the Mini Now-Playing bar** → Expands to full Now Playing screen

### Sample Data

| Artwork | Title | Subtitle |
|---|---|---|
| 💜 gradient | Liked Songs | Playlist • 847 songs |
| Custom collage | Chill Vibes | Playlist • You |
| Album art | Midnights | Album • Taylor Swift |
| Artist photo | The Weeknd | Artist |
| Podcast cover | How I Built This | Podcast • NPR |
| Green tiles | Discover Weekly | Playlist • Spotify |
| Single color | My Running Mix | Playlist • You • Downloaded |

---

## Playlist Detail

### Overview
A full-screen view of a single playlist showing its artwork, metadata, all tracks, and playback controls.

### UI Elements

**Hero / Header Area (scrolls away):**
- Large square playlist artwork (full-width or centered, ~60% of screen width)
- Playlist title (large, bold): e.g., "Chill Vibes"
- Owner line: "by [Username]" or "by Spotify" (from `add_to_playlist_by_owner`)
- Track count + total duration (e.g., "32 songs, 2 hr 8 min")
- Optional description text (1–2 lines, truncated)

**Action Row (below header, sticky or near-sticky):**
- Heart/Add icon — saves/unsaves the playlist to Your Library; filled when saved, outline when not (from `add_to_button_content_description_add` / `add_to_button_content_description_added`)
- Download icon (arrow pointing down) — downloads for offline; shows filled checkmark when downloaded
- Share icon (from `action_share_label`)
- "···" More options button (from `action_more_options`)
- **Shuffle button** (large, green/active color) — starts playlist in shuffle mode
- **Play button** (large, solid green circle with triangle) — plays from the first track

**Track List:**
Each track row shows:
- Track number or reorder handle (if in edit mode)
- Track title (bold, single line)
- Artist name(s) (gray, single line, comma-separated for multiple artists)
- Explicit badge "E" if content is explicit (from `account_details_explicit_content_title`)
- Track duration (right-aligned)
- A "···" context menu icon on the right (visible on tap/long-press)
- Currently playing indicator: animated equalizer bars replacing the track number for the active track

**Sticky Playback Header (appears when scrolling past the hero):**
- Compact playlist title
- Shuffle + Play buttons remain accessible

**Footer:**
- "Add to playlist" button or "Find more" recommendation row
- Recommended tracks section: "Recommended · Based on what's in this playlist" with a list of suggested tracks, each showing a green "+" button

### Interactions

- **Tap the Play button** → Begins playing the playlist from track 1; mini player appears at bottom
- **Tap the Shuffle button** → Begins playing in shuffle order; Shuffle mode activates
- **Tap any track row** → Plays that track, then continues through the playlist
- **Long-press a track row** → Opens context bottom sheet with: Play next, Add to queue, Add to playlist, Go to artist, Go to album, Share, Download, Remove from this playlist (if owner), Report
- **Tap "···" on a track** → Same context bottom sheet
- **Tap the Heart/Add icon** → Toggles save state; snackbar confirmation: "Added to Your Library" / "Removed from Your Library"
- **Tap the Download icon** → Downloads all tracks; progress indicator replaces icon; snackbar: "Downloading"
- **Tap Share icon** → Opens share sheet (from `action_share_content_description`)
- **Tap "···" More (header)** → Bottom sheet: Add to queue, Go to radio, Edit playlist (if owner), Delete playlist, Report, Share
- **Tap a recommended track "+"** → Adds to playlist; confirmation snackbar
- **Swipe back / tap Back** → Returns to Your Library or previous screen

### Sample Data

**Playlist:** "Late Night Drive"
- By: johndoe_music
- 24 songs · 1 hr 34 min
- Description: "Perfect songs for long drives when the city goes quiet."

**Tracks:**
1. Blinding Lights — The Weeknd · 3:20
2. Levitating — Dua Lipa · 3:23
3. Golden Hour — JVKE · 3:25 **[currently playing — equalizer bars]**
4. Sunflower — Post Malone, Swae Lee · 2:38
5. Let Her Go — Passenger · 4:14

---

## Create / Edit Playlist

### Overview
The screen where users create a new playlist or edit an existing one's title, description, and cover image.

### UI Elements

**Header:**
- Back/Close button (X or ←)
- Title: "New playlist" (when creating) or "Edit playlist" (when editing)
- "Save" button (top-right, bold, enabled once a name is entered) — from `add_to_playlist_button_done`
- "Cancel" button or back gesture — from `add_to_playlist_button_cancel`

**Artwork Section:**
- Large square artwork preview (center, ~160×160dp); shows current cover or a default mosaic of track art
- Pencil/edit overlay icon in the bottom-right corner of the artwork
- Tapping artwork triggers the image picker

**Edit Fields:**
- Text input: "Name" (from `account_details_name_row_title`) — single-line, placeholder: "Add a name"
- Text area: "Description" (optional) — multiline, placeholder: "Add an optional description"

**"Add to playlist" refine section (from `add_to_playlist_refine_details_title`):**
- Toggle: "Make private" — controls playlist visibility
- Toggle: "Collaborative playlist" — allows friends to add tracks

**Image Picker Sheet** (appears on artwork tap):
- "Take photo"
- "Choose from library" (device photos)
- "Use generated art" (auto-generated cover from track mosaic)
- "Remove photo" (if a custom photo is set)

**Keyboard behavior:** Keyboard appears automatically when the screen opens if creating a new playlist.

### Interactions

- **Tap artwork / pencil icon** → Opens image picker bottom sheet
- **Select "Choose from library"** → Opens device photo picker (native system UI)
- **Type in Name field** → Enables the Save button; character limit enforced (100 chars)
- **Type in Description field** → Optional; shown on playlist detail page below the title
- **Toggle "Make private"** → Playlist visibility changes; only visible to the owner if ON
- **Tap "Save" / "Done"** → Saves changes; navigates back to playlist detail or Your Library; snackbar confirmation: "Playlist saved"
- **Tap "Cancel" / Back** → Dismisses without saving; confirmation dialog if changes were made: "Discard changes?" with "Discard" and "Keep editing" buttons

### Sample Data

- **Name:** "Summer Road Trip 2024"
- **Description:** "All the songs we played on the way to the coast."
- **Cover:** Mosaic of 4 album covers (Dua Lipa, Harry Styles, Olivia Rodrigo, Arctic Monkeys)

---

## Add to Playlist

### Overview
A modal sheet or full-screen picker where users choose which existing playlist to add a track or album to, or create a new playlist.

### UI Elements

**Header:**
- Title: "Save to playlist" or "Add to playlist"
- Close/back button (from `add_to_playlist_back_button_content_description`)

**Search Field:**
- Placeholder: "Find playlist" (from `add_to_playlist_find_playlist_hint`)
- Clear button (X) when text is present (from `add_to_playlist_find_playlist_clear_button_content_description`)

**"New playlist" Button (pinned at top of list):**
- "+" icon + "New playlist" label (from `add_to_playlist_new_playlist_button_text`)

**"Save in" / "Saved in" Section Headers:**
- "Save in" label (from `add_to_playlist_save_in_section_header`) — shows playlists the item is NOT yet in
- "Saved in" label (from `add_to_playlist_saved_in_section_header`) — shows playlists the item is ALREADY in, with a "Clear all" link (from `add_to_playlist_saved_in_section_header_clear_all`)

**Playlist List:**
Each row shows:
- Playlist artwork thumbnail (square, ~48×48dp)
- Playlist name (bold)
- "by [Owner]" subtitle (from `add_to_playlist_by_owner`)
- Checkmark icon on the right when the item is already in this playlist

**Empty Search State:**
- "No result found" title (from `add_to_playlist_empty_view_search_title`)
- "Check the spelling, or try different keywords." subtitle (from `add_to_playlist_empty_view_search_subtitle`)

**Empty Folder State:**
- "This folder is empty" title (from `add_to_playlist_empty_view_folder_title`)
- "Click New Playlist to create a new playlist in this folder." subtitle (from `add_to_playlist_empty_view_folder_subtitle`)

**Bottom action:**
- "Done" button (from `add_to_playlist_button_done`) — confirms selection and dismisses

### Interactions

- **Tap "New playlist"** → Navigates to Create Playlist screen; on save, the track is automatically added to the new playlist
- **Tap a playlist row** → Immediately adds the item; row gets a checkmark; snackbar: "Added to [Playlist Name]"
- **Tap a playlist row already checked** → Removes the item; checkmark disappears; snackbar: "Removed from [Playlist Name]"
- **Type in search field** → Filters playlist list in real time
- **Tap "Clear all"** → Removes the item from all playlists it was saved in; confirmation may appear
- **Tap "Done"** → Dismisses the sheet, returns to previous screen
- **Tap Close/Back** → Dismisses without further action

### Sample Data

**Adding track:** "Espresso" by Sabrina Carpenter

**Playlists shown:**
- ✅ Late Night Drive (already saved)
- Morning Coffee — by You — 18 songs
- Gym Hits — by You — 42 songs
- Running Playlist — by You — 31 songs
- Pop Favorites — by Spotify — 50 songs

---

## Library Search (Find in Library)

### Overview
An in-library search experience that filters the user's saved content by keyword across all types.

### UI Elements

**Header:**
- Back arrow button
- Active text input field with placeholder "Search…" (from `abc_search_hint`)
- Clear button (X) — from `abc_searchview_description_clear`
- Voice search button (microphone icon) — from `abc_searchview_description_voice`

**Results List:**
- Results appear immediately as the user types, filtered from library content only
- Each result row shows:
  - Artwork thumbnail
  - Item title (bold)
  - Content type badge + artist/owner (e.g., "Song", "Playlist • You", "Artist", "Album")
  - Explicit badge "E" if applicable

**Empty Results State:**
- Text: "Couldn't find "[query]"" style message
- Suggestion to check spelling

**Recent Searches:**
- Shown before typing starts (if any history exists)
- List of recent search terms with clock icon
- "Clear recent searches" link

### Interactions

- **Type in search field** → Results filter live from the library
- **Tap a result** → Opens that item (song plays, playlist/album/podcast opens its detail page)
- **Tap X (clear)** → Clears query and shows all library items or recent searches again
- **Tap back arrow** → Returns to Your Library main view
- **Tap a recent search term** → Re-executes that search

### Sample Data

**Query:** "taylor"

**Results:**
- 🎵 Anti-Hero — Taylor Swift (Song, in Liked Songs)
- 📁 Taylor Swift Radio (Playlist • Spotify)
- 👤 Taylor Swift (Artist, followed)
- 💿 Midnights — Taylor Swift (Album, saved)
- 💿 Folklore — Taylor Swift (Album, saved)
<!-- source-hash:d26b4b491987 -->

---

# Premium & Payments Screens

## Premium Signup Screen

### Overview
The user is presented with a web-based flow for upgrading to Spotify Premium, displayed within a native container that manages the signup experience.

### UI Elements

**Header/Toolbar**
- No traditional navigation toolbar; the screen uses an immersive full-screen layout
- A close/back button (top-left or top-right) to exit the signup flow

**Main Content Area**
- A full-screen web view embedded within the native shell, loading Spotify's premium checkout experience
- The web content renders the plan selection, pricing, and payment steps

**Plan Selection Section**
- Headline text presenting Premium plan options (e.g., "Go Premium")
- Plan cards or list items, each showing:
  - Plan name (e.g., "Premium Individual", "Premium Duo", "Premium Family")
  - Monthly price (e.g., "$11.99/month")
  - A short description of what's included
  - A "Get started" or "Try free" call-to-action button
- A promotional banner if a free trial is available (e.g., "Try 1 month free")

**Payment Section** (after plan selection)
- Payment method selector:
  - Credit/debit card option
  - Other payment methods depending on region
- Card input fields:
  - Card number
  - Expiration date (MM/YY)
  - CVV/security code
  - Cardholder name
- Billing address fields (if required)
- A "Start" or "Subscribe" button to complete purchase
- Price summary line (e.g., "You'll be charged $11.99/month after your free trial")
- Legal disclaimer text linking to Terms of Service

**Payment Method Icons**
- Logos for accepted payment types (e.g., Visa, Mastercard) — the URL `https://wwwcheckout.spotifycdn.com/static/images/play-fop-logos/Visa.png` confirms Visa branding is shown
- A recurring premium plan image is loaded from `https://checkout.spotifycdn.com/static/images/product-images/recurring_premium.png`

**Footer**
- Links to Spotify's Privacy Policy and Terms of Service
- "Cancel anytime" reassurance text

### Interactions

- **Tapping a plan card** → Highlights that plan and reveals payment entry below, or advances to a dedicated payment step
- **Tapping "Try free" / "Get Premium"** → Initiates the checkout flow for the selected plan
- **Filling in payment details** → Real-time card validation feedback (e.g., incorrect card number, expired date)
- **Tapping "Subscribe" / "Start"** → Submits payment; shows a loading indicator while processing
  - On success → Navigates to a confirmation/welcome screen or returns to the main app with Premium unlocked
  - On failure → Displays an inline error message describing the issue (e.g., card declined)
- **Tapping the close/back button** → Dismisses the signup screen and returns the user to the previous screen
- **Tapping Terms of Service or Privacy Policy links** → Opens the relevant page in an in-app browser or external browser

### Sample Data

- **Plan card example:**
  - Plan: "Premium Individual"
  - Price: "$11.99 / month"
  - Offer: "Try 1 month free, then $11.99/month"
  - Button: "Try free for 1 month"

- **Plan card example:**
  - Plan: "Premium Duo"
  - Price: "$16.99 / month"
  - Subtitle: "2 Premium accounts for couples under one roof"
  - Button: "Get Premium Duo"

- **Plan card example:**
  - Plan: "Premium Family"
  - Price: "$19.99 / month"
  - Subtitle: "Up to 6 Premium accounts"
  - Button: "Get Premium Family"

---

## Account Type & Plan Details Screen

### Overview
The user views their current account type, subscription status, and plan membership information, and can manage certain account settings from here.

### UI Elements

**Header/Toolbar**
- Title: "Account" or the user's display name
- Back navigation button (top-left)

**Account Type Row**
- Label: "Account type"
- Value showing one of the following based on account state:
  - "Self-managed"
  - "Managed account (you control playback)"
  - "Spotify Free"
  - "Managed plan member"
  - "Spotify Kids (separate app)"
  - "Plan member"
  - "Account switch in progress"

**Name Row**
- Label: "Name"
- Displays the user's current display name
- Tappable — accessibility label: "Update name"

**Profile Picture Section**
- Circular profile photo thumbnail
- Accessibility label: "Profile picture"
- Tappable to change profile picture

**Explicit Content Toggle**
- Title: "Explicit content"
- Description: "Content (labeled with the E tag) that may contain adult language or themes."
- Toggle switch — ON/OFF
- Disabled with message "Account transition is in progress" during account switching

**Plan Membership Section** (for plan managers only)
- Section showing plan members under the current user's plan
- Each member row shows:
  - Member name and account type
  - A "Remove" button per member
- Tapping "Remove" triggers a confirmation dialog:
  - Title: "Remove member"
  - Body: "Remove this person's access to your plan."
  - Buttons: "Remove" (destructive) / Cancel
  - Success snackbar: "Removed from your plan."

**Account Privacy Link**
- Tappable row labeled "Account Privacy"
- Opens the Account Privacy page

**Disabled State Banner** (during account transition)
- Banner text: "Account transition is in progress"
- All buttons are disabled while transition completes

### Interactions

- **Tapping "Name" row** → Opens a name editing screen or inline edit field
- **Toggling "Explicit content"** → Immediately updates the setting; blocked with a toast during account transition
- **Tapping "Remove" next to a plan member** → Shows a confirmation dialog
  - Confirming → Removes the member; shows snackbar "Removed from your plan."
  - Cancelling → Dismisses the dialog
- **Tapping "Account Privacy"** → Navigates to Account Privacy page
- **Tapping back** → Returns to the previous screen (Settings or Profile)

### Sample Data

- **Account type:** "Premium Duo"
- **Name:** "Maria Gonzalez"
- **Explicit content:** ON
- **Plan members:**
  - "Carlos Gonzalez" — Managed plan member — [Remove]
  - "Sofia Gonzalez" — Managed plan member — [Remove]

---

## Parental Consent / QR Code Screen

### Overview
A young listener (child) is shown a QR code that their parent or guardian must scan to grant parental consent, enabling account creation or access.

### UI Elements

**Header/Toolbar**
- No standard toolbar; uses a full-screen onboarding style layout
- Possibly a back button (top-left) to go back

**Title**
- Large heading: "Ask your parent or guardian to scan this code"

**QR Code Display**
- A prominently displayed QR code image in the center of the screen
- Accessibility description: "QR Code, use another camera to scan and continue"

**Instruction Text**
- Body text: "They should scan this code with the device where they normally use Spotify."

**Alternative Option Section**
- Subheading or separator line
- Secondary instruction: "Or, your parent can log in here temporarily. You won't be able to access their account."
- Button: "Parent login" (allows the parent to log in directly on the child's device)

**Disclaimer Text**
- Small text at the bottom: "Does your parent not have an account? They can sign up for free with either option."

### Interactions

- **Parent scans QR code** → On the parent's device, the Spotify app or browser opens a consent flow; upon completion, the child's device receives confirmation and advances
- **Tapping "Parent login"** → Opens a temporary parent login screen on the current device (child's device); after the parent authenticates, the child's flow resumes — the parent's account is not accessible to the child
- **Tapping back** → Returns to the previous onboarding step

### Sample Data

- The QR code encodes a unique session URL, e.g., linked to `https://www.spotify.com/account/parental-consent` with a session token
- Child's name shown in context if available: e.g., "Set up an account for Lena"

---

## Account Switcher / Who's Listening Screen

### Overview
Users on a shared device see a list of accounts and can tap their profile to start listening, or add a new account.

### UI Elements

**Header**
- Title: "Who's listening?"

**Subtitle**
- "Get personalized recommendations, playlists, and more."

**Account List**
- A grid or list of circular profile avatars, each showing:
  - Profile picture (or initial placeholder)
  - Display name below avatar
  - For accounts requiring a PIN: a lock icon with accessibility label "PIN required"
  - For disabled/no internet accounts: grayed out with accessibility label "No internet connection"
  - Accessibility label per item: "switch to [name]'s account"

**Add Account Button**
- A "+" avatar tile at the end of the list
- Label: "Add account"

**Young Listener Disclaimer** (shown in managed account context)
- Small text: "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN."

**Logged-in Snackbar**
- Appears after successful switch: "You're now logged in as [name]"

### Interactions

- **Tapping an account avatar** →
  - If no PIN required: immediately switches to that account, shows snackbar "You're now logged in as [Name]", navigates to home
  - If PIN required: prompts a PIN entry dialog before switching
  - If no internet: shows an error state or toast
- **Tapping "Add account"** → Opens the Add Account / Log In screen
- **Tapping "Add a different account"** (if that option is present) → Opens login flow for a different Spotify account

### Sample Data

- Account 1: Profile photo of a woman, name "Maria"
- Account 2: Green initial circle "C", name "Carlos"
- Account 3: Lock icon, name "Sofia" (PIN required)
- Add account tile: "+" / "Add account"
<!-- source-hash:f7336f968ac9 -->

---

# Social & Group Listening — Screen Specifications

---

## Spotify Jam Onboarding (Host Welcome Screen)

### Overview
A full-screen onboarding screen shown to the user who is starting a Spotify Jam session, explaining what Jam is and how to manage it before confirming they want to begin hosting.

### UI Elements

**Header Area**
- A custom illustrated header component (the "IPL Onboarding Header") spanning the top portion of the screen — this is likely a branded graphic or animation related to Spotify Jam (group listening), showing visual imagery of the social listening experience (e.g., multiple people listening together, music visualizer, or Jam branding artwork)

**Body Text — Privacy / Info Notice**
- Two paragraphs of explanatory text displayed together:
  1. **Host information line:** Text from the string `social_listening_v2_onboarding_host_info_jam` — explains what being a Jam host means to the user (e.g., something like: "As the host, you control what plays for everyone in the Jam.")
  2. **Turn off / devices line:** Text from the string `social_listening_v2_onboarding_host_info_turn_off_jam`, which includes an inline **Devices icon** (a small icon rendered inline with the text, matching the "DEVICES" icon from Spotify's icon set). This sentence describes how to turn off the Jam or manage devices.
  - On **portrait orientation**, the two text blocks are separated by two line breaks (stacked vertically)
  - On **landscape orientation**, the two text blocks are joined by a single space (inline on the same line)

**Confirm Button**
- Label: `"Got it"` (inferred from the event key `got_it_button` tracked on click)
- Style: Primary action button, full-width or prominently sized, at the bottom of the screen
- Behavior: Tapping confirms the user has read the onboarding info and dismisses/closes this screen

### Interactions

- **Tapping "Got it" button:**
  - Logs a "got it button clicked" analytics event under the `host_onboarding` context
  - Dismisses and closes this onboarding screen entirely, returning the user to wherever they came from (typically the Now Playing view or a Jam invite flow)
  - If no username is associated (edge case), a warning is logged internally but the button still functions

- **Screen appearance:**
  - The screen tracks an impression event labeled `host_onboarding` when it becomes visible
  - No back navigation gesture is explicitly handled — the screen is modal and must be dismissed via the button

### Sample Data

- **Host info text (portrait layout):**
  > "As the host, you control what's playing for everyone in your Jam."
  >
  > "To turn off Jam, go to [Devices icon] Devices."

- **Host info text (landscape layout):**
  > "As the host, you control what's playing for everyone in your Jam. To turn off Jam, go to [Devices icon] Devices."

- **Button:** "Got it"

- **Username context:** The screen receives the host's username (e.g., `"musiclover42"`) from the calling flow but does not necessarily display it visibly — it is used internally to identify the session host.

---

## Spotify Jam — Active Session / Live Sharing Dialog

### Overview
A dialog or sheet shown during an active Spotify Jam session, allowing participants to view who is in the session and manage the live group listening experience.

### UI Elements

*(Based on navigation route keys `live_sharing_session_dismissed`, `live_sharing_dialog`, and `session_id` present in the navigation state, plus the Jam-related class references)*

**Session Header**
- Spotify Jam branding/logo area — the Jam logo image loaded from `https://misc.spotifycdn.com/livesharing/meet_logo_large.png`
- Session name or currently playing track info (title and artist)

**Participant List**
- A scrollable list of users currently in the Jam session
- Each participant row shows:
  - Circular avatar / profile picture
  - Display name (e.g., "Sarah K.")
  - Listening indicator (e.g., animated sound bars or a "now listening" badge if they are actively connected)

**Session Controls**
- **Invite button** — allows the host or participants to invite more people to join the Jam (shares a link or QR code)
- **Leave / End Jam button** — labeled differently depending on role:
  - Host sees: "End Jam" (terminates the session for everyone)
  - Participant sees: "Leave Jam" (removes only themselves)

**Privacy / Info Footer**
- Brief note about what Jam is and how listening is shared with participants

### Interactions

- **Tapping "Invite":**
  - Opens a share sheet with a Jam invite link that others can tap to join
  - The link is deep-linkable into the Spotify app

- **Tapping "Leave Jam" (as participant):**
  - Exits the user from the session
  - Dismisses the dialog and returns them to normal solo playback
  - Fires a `live_sharing_session_dismissed` navigation event

- **Tapping "End Jam" (as host):**
  - Ends the session for all participants
  - All listeners return to their own individual playback contexts
  - Dialog is dismissed

- **Tapping outside the dialog / swiping down:**
  - Dismisses the dialog without leaving the session (user remains in the Jam, dialog just closes)

### Sample Data

- **Session:** "Jam with Alex, Maria, and 2 others"
- **Now Playing:** "Espresso" by Sabrina Carpenter
- **Participants:**
  - Alex R. (host) — 🎵 listening
  - Maria T. — 🎵 listening
  - Jake M. — 🎵 listening
  - You

---

## Spotify Jam — Join Session Screen

### Overview
A screen or dialog presented to a user who has received a Jam invite link, showing them details about the active session and prompting them to join.

### UI Elements

*(Inferred from `search_query`, `session_id`, `live_sharing_dialog` nav routes and the Jam onboarding/joining flow)*

**Session Preview Card**
- Host's profile picture (circular avatar)
- Host's display name (e.g., "Alex is hosting a Jam")
- Currently playing track artwork (album cover)
- Track title and artist name
- Number of current listeners (e.g., "3 people listening")

**Action Buttons**
- **"Join Jam"** — primary button, Spotify green, joins the user into the group session
- **"Not now"** / **"Dismiss"** — secondary text button, declines the invitation without joining

**Footer Note**
- Small text explaining that joining the Jam means the host controls playback

### Interactions

- **Tapping "Join Jam":**
  - User enters the active Jam session
  - Playback on their device switches to match what the host is playing
  - User is now listed as a participant in the host's participant list
  - Screen transitions to the Now Playing view, now showing the shared Jam context

- **Tapping "Not now" or dismissing:**
  - Dialog/screen is closed
  - User's current playback is unaffected
  - The invite is ignored (no session joined)

### Sample Data

- **Header:** "Alex is hosting a Jam"
- **Now Playing:** "Flowers" by Miley Cyrus
- **Listeners:** "You + 3 others"
- **Join button:** "Join Jam"
- **Decline button:** "Not now"
<!-- source-hash:2c139336df06 -->

---

# Profile & Account Management — Screen Specifications

---

## Account Picker ("Who's Listening?")

### Overview
Users see a list of all accounts linked to the device and select which profile to use for the current session.

### UI Elements
- **Header / Title:** Bold headline text reading **"Who's listening?"** centered at the top of the screen.
- **Subtitle / Info text:** Secondary line below the title reading **"Get personalized recommendations, playlists, and more."**
- **Account list (scrollable):** A vertical list of account rows. Each row shows:
  - Profile picture / avatar
  - Display name
  - Account type badge (e.g., "Managed plan member", "Spotify Free", "Spotify Kids (separate app)", "Self-managed")
  - If a PIN is required to switch to that account, a small **"PIN required"** indicator is shown on the row
  - If the account is unavailable due to no internet, a **"No internet connection"** indicator replaces the account type badge
  - If an account switch is currently in progress, the row shows **"Account switch in progress"**
- **"Add account" button:** A text or button row at the bottom of the list labeled **"Add account"**, allowing the user to add a new profile to the device.
- **Loading state:** While accounts load, the list area may show a loading indicator in place of the account rows.

### Interactions
- **Tapping an account row:** Switches the active session to that account. If the account requires a PIN, a PIN entry prompt appears before switching. On success, a snackbar message appears: **"You're now logged in as [name]"** and the user is taken to the main app home screen.
- **Tapping "Add account":** Opens the Add Account flow, navigating to a screen titled **"Add account"** / **"Add a different account"**.
- **Tapping an account row when no internet:** No switch occurs; the row is shown as disabled with the label **"No internet connection"** used as the accessibility description.
- **Back navigation:** Exits the picker and returns to the previous screen or exits the app.

### Sample Data
- **"Aisha Lawson"** — Self-managed
- **"Ben Lawson"** — Managed plan member
- **"Lily Lawson"** — Spotify Kids (separate app)
- **"Add account"** — bottom row

---

## Account Details

### Overview
The user views and manages details for a specific account, including name, profile picture, account type, explicit content settings, and family plan membership controls.

### UI Elements
- **Back navigation button** in the top-left
- **Screen title:** "Account" or the account holder's name shown in the toolbar/header
- **Profile picture row:**
  - Circular avatar image with accessibility label **"Profile picture"**
  - Tappable to change the photo
- **Name row:**
  - Label: **"Name"**
  - Current display name shown as a value
  - Tap action labeled **"Update name"** (accessibility label: **"Update name"**)
- **Account type row:**
  - Label: **"Account type"**
  - Value: one of **"Self-managed"**, **"Managed account (you control playback)"**, **"Spotify Kids (separate app)"**, **"Plan member"**, **"Managed plan member"**, or **"Account type: Account transition is in progress"**
- **Explicit content row:**
  - Title: **"Explicit content"**
  - Description: **"Content (labeled with the [E] tag) that may contain adult language or themes."**
  - Toggle switch (ON / OFF)
- **Remove member section** (only visible on managed/family plan accounts):
  - Section title: **"Remove member"**
  - Description: **"Remove this person's access to your plan."**
  - Button labeled **"Remove"**
- **Disabled state banner** (shown when a transition is in progress):
  - Message: **"Account transition is in progress"**
  - All action buttons disabled

### Interactions
- **Tapping the name row:** Opens an inline or separate name editor so the user can update their display name.
- **Toggling explicit content:** Immediately updates the explicit content setting for this account. The toggle reflects the new state.
- **Tapping "Remove":** Opens a confirmation dialog:
  - Title: **"Remove member"**
  - Body: **"Remove this person's access to your plan."**
  - Buttons: **"Remove"** (destructive) and **"Cancel"**
  - On confirm: a snackbar shows **"Removed from your plan."** and the member is removed from the list.
- **Back navigation:** Returns to the account picker or family plan management screen.

### Sample Data
- **Name:** "Ben Lawson"
- **Account type:** "Managed account (you control playback)"
- **Explicit content:** OFF

---

## Account Privacy

### Overview
The user reads information about their Spotify account privacy and can request a download of their personal data.

### UI Elements
- **Back navigation button**
- **Page header title:** **"Account Privacy"**
- **Body text:**
  > "We want to make it easy for you to manage and understand your account privacy, so you can use the Spotify service in the way you want.
  >
  > The controls on this page enable you to download a copy of your Spotify personal data."
- **"Download my data" button** (or equivalent action button): allows the user to request a data download
- **Links / legal text:** May include links to the Spotify privacy policy (`https://www.spotify.com/legal/privacy-policy`)

### Interactions
- **Tapping "Download my data":** Initiates a data export request. The user may see a confirmation message or be directed to their email to complete the request.
- **Tapping the privacy policy link:** Opens the Spotify privacy policy in the in-app browser or default browser.
- **Back navigation:** Returns to the previous account settings screen.

### Sample Data
*(Content is static informational text as shown above.)*

---

## Add Account

### Overview
Users add a new Spotify account to the device so it can appear in the account picker.

### UI Elements
- **Back navigation button / Close button**
- **Screen title:** **"Add account"** or **"Add a different account"**
- **Login options list** — each option is a full-width tappable row with an icon and label:
  - **"Email"** (accessibility label: "Email")
  - **"Facebook"** (accessibility label: "Facebook")
  - **"Google"** (accessibility label: "Google")
  - **"Apple"** (accessibility label: "Apple")
  - **"Phone number"** (accessibility label: "Phone number")
  - **"NAVER"** (accessibility label: "NAVER") *(shown in supported regions)*
- **Disclaimer text:**
  > "While you are signed in, anyone else using this device will be able to access your account."
- **"Don't have an account? Sign up" link** at the bottom (switches between log-in and sign-up modes)

### Interactions
- **Tapping a login option (e.g., "Google"):** Launches the corresponding authentication flow (OAuth, Facebook SDK, Apple Sign In, etc.) in a sheet or browser.
- **Completing authentication:** Closes the authentication sheet; the new account appears in the account picker and a snackbar confirms: **"You're now logged in as [name]"**.
- **Tapping "switch to sign up":** Changes the form to account-creation mode.
- **Back/close:** Returns to the account picker without adding an account.

### Sample Data
- A user already logged in as "Aisha Lawson" wants to add "Ben Lawson's" account. They tap "Email," enter Ben's credentials, and are returned to the picker showing both accounts.

---

## Parental Consent — Share QR Code

### Overview
A young listener's device shows a QR code that a parent or guardian must scan from their own device to grant parental consent.

### UI Elements
- **Screen title:** **"Ask your parent or guardian to scan this code"**
- **QR code image:** Large centered QR code with accessibility label **"QR Code, use another camera to scan and continue"**
- **Instruction text (primary):**
  > "They should scan this code with the device where they normally use Spotify."
- **Divider / "Or" separator**
- **Secondary instruction text:**
  > "Or, your parent can log in here temporarily. You won't be able to access their account."
- **"Parent login" button:** A button labeled **"Parent login"** allowing the parent to log in directly on the child's device instead of scanning.
- **Disclaimer text:**
  > "Does your parent not have an account? They can sign up for free with either option."

### Interactions
- **Parent scans the QR code** with their own device: Opens the parental consent flow on the parent's device; once approved, the child's screen advances.
- **Tapping "Parent login":** Opens a temporary login screen for the parent on the current device. The parent's account is not made persistently accessible to the child.
- **Completing parental consent:** Advances the child's account to the appropriate account state and returns to the main app.
- **Back navigation:** Cancels the consent request and returns the child to the previous step in onboarding/account setup.

### Sample Data
- Child account: "Lily Lawson" (age-restricted, awaiting parental consent)
- Parent: logs in temporarily as "Aisha Lawson" on the same device to grant consent

---

## Account Switching — PIN Entry

### Overview
When a user attempts to switch to an account that is protected by a PIN, a PIN entry prompt appears before access is granted.

### UI Elements
- **Title / prompt text:** Indicates the account being accessed (e.g., the account name or a generic prompt to enter PIN)
- **PIN input field:** Numeric input (typically 4 digits), masked for privacy
- **Accessibility label on the PIN field:** **"PIN required"**
- **"Confirm" / "Submit" button**
- **"Cancel" button:** Dismisses the prompt and returns to the account picker
- **Error state:** If the PIN is incorrect, an inline error message is shown and the field is cleared

### Interactions
- **Entering the correct PIN and tapping "Confirm":** The account switch completes; the user is taken to the home screen as the new account, with snackbar: **"You're now logged in as [name]"**.
- **Entering an incorrect PIN:** Error message displayed; the PIN field is cleared for re-entry.
- **Tapping "Cancel":** Returns to the account picker with no account switch.

### Sample Data
- Attempting to switch to "Aisha Lawson (Self-managed)" which is PIN-protected
- Correct PIN: 4-digit numeric code set by the plan manager

---

## Young Listener Account — Shared Device Notice

### Overview
On a shared device, an informational banner or screen explains the PIN rules for young listeners switching between account types.

### UI Elements
- **Informational text:**
  > "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN."
- **OK / Dismiss button**

### Interactions
- **Tapping "Dismiss" or "OK":** Closes the notice and returns the user to the account picker or the screen they came from.

### Sample Data
*(Static informational content as above.)*
<!-- source-hash:40468dddb0ab -->

---

# Ads & Promotions — Screen Specifications

---

## Audio Ad Break Screen

### Overview
The user sees a full-screen (or overlay) ad interstitial between tracks, informing them that their music or podcast will resume after a brief ad break, with ad content and optional skip controls.

### UI Elements

**Header / Context Banner**
- Text: "Your music will continue after the break" (for music context) or "Your podcast will continue after the break" (for podcast context), or "Enjoy this playlist with limited ads, after a message from [Sponsor Name]" for sponsored contexts
- "Ad Playing" label displayed prominently while ad audio is active

**Ad Content Area**
- Advertiser branding / artwork image (full-width)
- Ad title / tagline text
- Sponsored label or advertiser name

**Skip Control**
- Countdown label: "Skip in [N]" (e.g., "Skip in 5") while the skip delay is active — not tappable yet
- Once the delay expires, a tappable "Skip" button appears

**Ad Feedback Button**
- A small "tell us about this ad" or thumbs-down action visible during/after the ad

**Footer**
- "FEWER ADS" badge (shown to users with a qualifying plan or offer), with accessibility label "Fewer ads"
- Progress bar showing how far through the ad break the user is

**"Fewer Ads" Badge**
- Label: "FEWER ADS"
- Accessibility: "Fewer ads"

---

### Interactions
- **Skip button (after countdown):** Skips the current ad and returns to music/podcast playback. Only becomes interactive after the countdown timer finishes.
- **Skip in N countdown:** Non-interactive countdown label; updates every second (e.g., "Skip in 5" → "Skip in 4" → … → "Skip").
- **Ad image / CTA area tap:** Opens the advertiser's click-through URL in an in-app browser or external browser.
- **Ad feedback button:** Opens the Ad Feedback Sheet (see below).
- **Ad finishes naturally:** Music or podcast playback resumes automatically; screen is dismissed with no transition animation.

---

### Sample Data
- Header text: "Your music will continue after the break"
- Advertiser: "Nike"
- Ad tagline: "Just Do It — Shop the new Air Max collection"
- Skip countdown: "Skip in 5"
- Badge: "FEWER ADS"

---

## Video Ad Overlay Screen

### Overview
The user sees a full-screen video advertisement overlay that plays over the app before returning to their content.

### UI Elements

**Video Player Area**
- Full-screen video playback
- Overlay description text: "Tap to show controls" (accessibility label `ad_overlay_view_description`)

**Playback Controls (revealed on tap)**
- Mute/unmute toggle
- Skip countdown label: "Skip in [N]" while unskippable
- Skip button: becomes active after countdown completes

**Ad Attribution**
- Small advertiser name or logo
- "Ad Playing" status label

**Skip / Close Button**
- Countdown label while unskippable
- Tappable "Skip" once timer expires

**Ad Feedback (optional)**
- Thumbs-down or feedback icon

---

### Interactions
- **Tap anywhere on video:** Reveals or hides playback controls
- **Mute button:** Toggles audio on/off for the video ad
- **Skip button (after countdown):** Dismisses the video ad and resumes content; screen closes with no transition animation
- **Video completes naturally:** Screen is dismissed, content playback resumes

### Sample Data
- Advertiser: "Spotify Premium"
- Ad headline: "No ads. No limits. Try Premium free."
- Skip countdown: "Skip in 3"

---

## Ad Feedback Sheet

### Overview
A bottom sheet or dialog that appears when the user taps the feedback/dislike button on an ad, allowing them to report why they dislike the current ad.

### UI Elements

**Sheet Header**
- Title: "Tell us more about this ad" (neutral) or a positive variant prompt
- Subtitle: "This helps improve ads on Spotify."

**Reason List (single-select)**
Negative feedback options:
- "It's not relevant to me"
- "I'm getting this ad too often"
- "I think the content was unpleasant"
- "I think the content was offensive"
- "I just don't like this ad"

Positive feedback options (shown in alternate flows):
- "It's relevant to me"
- "I'm interested in this brand"
- "I'm interested in this product"
- "The content was enjoyable"
- "It helped me discover something new"

**Confirmation / Dismiss**
- After selecting a reason, the sheet closes and a confirmation message appears: "Thanks. This helps improve ads on Spotify." (or for in-feed ads: "Thanks. We'll adjust your ad experience.")

---

### Interactions
- **Tap a reason:** Selects that reason and immediately submits feedback; sheet dismisses
- **Tap outside sheet / swipe down:** Dismisses sheet without submitting feedback
- **Post-submission:** A brief toast/snackbar appears with the confirmation text, then disappears

### Sample Data
- Title: "Tell us more about this ad"
- Subtitle: "This helps improve ads on Spotify."
- Selected reason: "I'm getting this ad too often"
- Confirmation: "Thanks. This helps improve ads on Spotify."

---

## App Open Ad Screen

### Overview
A full-screen interstitial that appears when the user first opens Spotify, showing a brief ad before the app's main content becomes accessible.

### UI Elements

**Background / Branding**
- Spotify logo centered
- Accessibility label: "Spotify Logo"

**Ad Message**
- Text: "Spotify starts after this brief ad"

**Ad Content**
- Advertiser image or animated asset (full-screen)
- Advertiser name / tagline

**Skip / Timer**
- Countdown or auto-dismiss once ad completes

**Progress Indicator**
- Visual progress bar or countdown timer indicating time remaining before app content loads

---

### Interactions
- **Ad plays to completion:** Automatically navigates to the Spotify home/main screen with no user action required
- **Skip button (if available after countdown):** Skips the ad and proceeds to the main app screen immediately
- **Tap ad CTA area:** Opens advertiser link in browser

### Sample Data
- Message: "Spotify starts after this brief ad"
- Advertiser: "Samsung"
- Tagline: "Galaxy S25 — Discover what's next"

---

## Promoted Playlist / Sponsored Context Banner

### Overview
An inline banner or card appearing within the user's feed or playlist view, indicating the current listening context is sponsored by an advertiser and will include limited ads.

### UI Elements

**Banner / Card**
- Sponsor attribution text: "Enjoy this playlist with limited ads, after a message from [Brand Name]"
- Advertiser logo or image
- "FEWER ADS" badge (where applicable)

**CTA Button (optional)**
- "Learn more" fallback label linking to advertiser content

**Dismiss / Interaction Area**
- Tapping the banner navigates to ad content or advertiser page

---

### Interactions
- **Tap banner:** Opens advertiser's destination URL or campaign content
- **"Learn more" button:** Opens advertiser URL in in-app browser
- **Dismiss (if available):** Collapses or hides the banner; returns to normal playlist view

### Sample Data
- Banner: "Enjoy this playlist with limited ads, after a message from Coca-Cola"
- Badge: "FEWER ADS"
- CTA: "Learn more"

---

## Ad Carousel / Image Ad Unit

### Overview
A horizontally scrollable carousel of ad images embedded in the home feed or browse screen, showing a series of sponsored cards the user can swipe through.

### UI Elements

**Carousel Container**
- Multiple image cards displayed horizontally, scrollable left/right
- Each card has an accessibility label: "Image [N] of [Total], [Description]." (e.g., "Image 1 of 3, Nike Air Max campaign.")

**Individual Card**
- Full-bleed ad image
- Advertiser name / tagline overlay
- Page indicator dots showing current position

**CTA / Tap Target**
- Tapping a card opens the advertiser destination

---

### Interactions
- **Swipe left/right:** Advances through carousel cards; page indicator updates
- **Tap card:** Opens advertiser URL in browser or in-app web view
- **Auto-advance:** Cards may auto-scroll on a timer

### Sample Data
- Card 1: "Image 1 of 3, Nike — Shop the Air Max 95"
- Card 2: "Image 2 of 3, Apple Music — Try 3 months free"
- Card 3: "Image 3 of 3, Samsung — Galaxy S25 Ultra"

---

## Ad Preferences / Partner Preferences Screen

### Overview
A web-based screen (loaded in an in-app browser or webview) where users can manage their ad personalization settings and opt out of interest-based advertising on Spotify.

### UI Elements

**Page Header**
- Title: "Account Privacy" or ad preferences heading
- Back navigation button

**Content (webview)**
- Loaded from `https://www.spotify.com/account/ads/`
- Explains how Spotify uses data to personalize ads
- Opt-out toggles or preference controls rendered by the web page

**Navigation**
- "Open in default browser" option (accessible via share/overflow menu)

---

### Interactions
- **Toggle ad personalization (web controls):** Updates user's ad preference settings on the Spotify account
- **Back button:** Returns to previous app screen
- **"Open in default browser":** Launches device browser at the same URL

### Sample Data
- Page URL: spotify.com/account/ads/
- Description: "We want to make it easy for you to manage and understand your account privacy, so you can use the Spotify service in the way you want."
<!-- source-hash:c3f6e519ac9c -->

---

# Live Events & Stories — Screen Specifications

---

## On Tour Legal Disclosure

### Overview
A full-screen informational screen that presents a legal disclosure to the user before they can access live event or concert content, requiring them to acknowledge tour-related legal terms.

### UI Elements

**Header / Toolbar**
- Back/close button (X icon, top-left) — navigates away and dismisses the screen
- No title text in the toolbar itself; content title is part of the main body

**Main Content Area**
- Scrollable body containing the legal disclosure text for live events ("On Tour" disclosure)
- The disclosure is rendered via a Spotify-hosted web view at the URI `spotify:live-legal-disclosure`
- Legal text explains terms and conditions related to ticket sales, live events, or on-tour concert campaign content
- Spotify branding / logo may appear as part of the webview header

**Navigation / Action Buttons**
- No explicit "Agree" or "Continue" button is shown in this minimal wrapper — the webview itself manages any acceptance actions
- Pressing the system Back button or the toolbar close button dismisses the screen and returns the user to the previous screen

**Toolbar Close Icon**
- Rendered using the Spotify icon font at 24 dp
- Color: white/light on dark background (consistent with Spotify's dark theme)

### Interactions

| Element | Action | Result |
|---|---|---|
| Back button (hardware or toolbar X) | Tap | Closes/finishes the screen; returns to the previous screen (e.g., Artist Concerts, Event listing) |
| Webview content | Scroll | Scrolls through the legal disclosure text |
| Any in-webview buttons (e.g., "Accept", "Continue") | Tap | Handled internally by the webview; may navigate deeper into the concert/live event flow |

**Navigation Flow:**
- This screen is entered when the user attempts to access live event or on-tour content that requires a legal acknowledgment (e.g., tapping on a concert campaign or ticket-sale entry point from an artist page or Events Hub).
- After the user closes or completes the disclosure, they are returned to the calling screen (artist page, concerts hub, etc.).

### Sample Data

> **Legal Disclosure — Live Events**
>
> By continuing, you acknowledge that ticket purchases are subject to Spotify's [Ticket Sale Terms](https://www.spotify.com/legal/ticket-sale-terms/). Prices and availability are set by third-party sellers and are subject to change. Spotify is not responsible for the accuracy of event listings. Events may be cancelled or postponed; refund policies are determined by the event organizer.

---

## Concerts / Live Events Hub

### Overview
A browsable hub screen showing upcoming concerts and live events near the user, organized around artists the user follows and events relevant to their listening history.

### UI Elements

**Header / Toolbar**
- Screen title: "Concerts" (inferred from `mod0.CONCERTS` / `acw.a(8)` = `"concert_campaign"`, `acw.a(11)` = `"event"`)
- Share icon button (top-right) — shares the hub or a specific event link
- Context menu button (three dots / "More" icon, top-right)

**Location / City Row**
- A row showing the user's current city or a manually selected city (e.g., "New York, NY")
- Tapping opens the City Search screen to change the location
- Small location-pin icon to the left of the city name

**Section: Upcoming Concerts for Artists You Follow**
- Horizontal or vertical scrollable list of artist cards
- Each card shows:
  - Artist photo or avatar (circular)
  - Artist name (e.g., "Taylor Swift")
  - Upcoming event count badge (e.g., "3 upcoming shows")
- Tapping an artist card opens the Artist Concerts sub-screen

**Section: Events Near You**
- Vertical list of event rows
- Each event row shows:
  - Event artwork / venue image (square thumbnail, ~56 dp)
  - Event/concert name (e.g., "The Eras Tour – Night 2")
  - Artist name (e.g., "Taylor Swift")
  - Date and city (e.g., "Sat, Aug 10 · Madison Square Garden, New York")
  - A "Tickets" or "Get Tickets" pill button (green, Spotify-styled CTA)
- Tapping the row opens the Concert Detail screen
- Tapping "Get Tickets" opens the Concert Webview (third-party ticket seller)

**Section: Concert Campaigns**
- Horizontal card carousel
- Each card shows:
  - Promotional campaign image (wide aspect ratio ~16:9)
  - Campaign title (e.g., "Summer Arena Tour 2025")
  - Subtitle text (e.g., "Featuring Arctic Monkeys, Wet Leg")

**Empty State** (if no events are found nearby)
- Illustration or icon (e.g., a map pin with a music note)
- Title: "No concerts nearby"
- Subtitle: "Try changing your location to see shows in other cities."
- Button: "Change location"

**Loading State**
- Skeleton placeholders for the event rows and section headers

### Interactions

| Element | Action | Result |
|---|---|---|
| Location row | Tap | Opens City Search screen (`concerts/citysearch`) |
| Artist card | Tap | Opens Artist Concerts screen (`concerts/artist`) |
| Event row | Tap | Opens Concert Detail screen (`concerts/concert`) |
| "Get Tickets" button | Tap | Opens ticket purchase webview (`concerts/concert/webview`) |
| Concert Campaign card | Tap | Opens Concert Campaign screen (`concerts/campaign`) |
| Share button | Tap | Opens share sheet to share the events hub link |
| Context menu (•••) | Tap | Opens a bottom sheet with options: "Share", "Copy Link" |

### Sample Data

**Events Near You:**
- 🎵 **Olivia Rodrigo** — GUTS World Tour · Fri, Sep 5 · Kia Forum, Los Angeles
- 🎵 **Arctic Monkeys** — The Car Tour · Sat, Sep 6 · Hollywood Bowl, Los Angeles
- 🎵 **Hozier** — Unreal Unearth Tour · Sun, Sep 7 · Greek Theatre, Los Angeles

---

## Artist Concerts

### Overview
A dedicated sub-screen showing all upcoming (and optionally past) concert dates for a specific artist, allowing the user to browse shows by date and city and purchase tickets.

### UI Elements

**Header / Toolbar**
- Back arrow (top-left) — returns to the previous screen
- Title: Artist name (e.g., "Billie Eilish")
- Share icon (top-right)

**Artist Banner**
- Full-width artist hero image or banner photo at the top
- Artist name overlaid in large bold text at the bottom of the banner
- "Follow" / "Following" toggle button (pill, below the banner or overlaid)

**Filter / Sort Bar**
- Horizontal filter chips:
  - "All Dates"
  - "This Month"
  - "This Weekend"
- Optional location filter chip: "Near Me" / "All Cities"

**Concert Date List**
- Vertical list of concert rows, grouped by month
- Month header (e.g., "September 2025") in uppercase secondary text
- Each row shows:
  - Date block (left side): day abbreviation + number (e.g., "FRI\n05")
  - Event details:
    - Venue name (e.g., "Madison Square Garden")
    - City and country (e.g., "New York, USA")
    - Support act if available (e.g., "with Gracie Abrams")
  - Right side: "Tickets" button (green pill) or "Sold Out" label (gray, disabled)
- If the user has previously saved/bookmarked the event, a small bookmark icon appears on the row

**No Upcoming Shows State**
- Centered message: "No upcoming shows"
- Subtext: "Follow Billie Eilish to get notified when new dates are announced."
- Follow button

### Interactions

| Element | Action | Result |
|---|---|---|
| Back button | Tap | Returns to Concerts Hub or Artist page |
| Follow/Following button | Tap | Toggles follow state; snackbar: "Following Billie Eilish" |
| Filter chip | Tap | Filters the list to matching dates; selected chip highlighted in white |
| Concert row | Tap | Opens Concert Detail screen for that specific event |
| "Tickets" button | Tap | Opens Concert Webview (external ticket seller) |
| Share button | Tap | Opens share sheet for the artist's concert tour page |

### Sample Data

**September 2025**
- FRI 05 — Kia Forum, Los Angeles, USA · *with Chappell Roan* — **Tickets**
- SAT 06 — Kia Forum, Los Angeles, USA — **Sold Out**
- TUE 09 — Chase Center, San Francisco, USA — **Tickets**

**October 2025**
- THU 02 — United Center, Chicago, USA — **Tickets**
- FRI 03 — United Center, Chicago, USA — **Tickets**

---

## Concert Detail

### Overview
A detail screen for a specific concert event, showing full event information, the venue, lineup, and a prominent call-to-action to purchase tickets.

### UI Elements

**Header / Toolbar**
- Back arrow (top-left)
- Share icon (top-right)
- Context menu (•••) with options: "Copy Link", "Report a problem"

**Hero Section**
- Large event artwork or venue photo (full-width, ~220 dp tall)
- Gradient overlay at the bottom of the image
- Event name in large bold text overlaid (e.g., "The Eras Tour – Surprise Night")

**Event Info Card**
- Date and time (e.g., "Saturday, August 10, 2025 at 7:30 PM")
- Venue name (bold): "Madison Square Garden"
- Address: "4 Pennsylvania Plaza, New York, NY 10001"
- Map thumbnail (static map image showing the venue location) — tapping opens Maps app
- "Get Directions" link

**Lineup Section**
- Section header: "Lineup"
- List of performing artists (each row):
  - Artist avatar (circular, ~40 dp)
  - Artist name
  - Role label if applicable (e.g., "Headliner", "Support")
  - Follow button (small, outlined)

**Ticket CTA Section**
- Large green button: "Get Tickets"
- Subtext below button: "Tickets sold by [Ticketmaster / AXS / etc.]"
- Price range if available (e.g., "From $45")
- If sold out: grayed-out button labeled "Sold Out" with subtext "Check resale options"

**Legal Disclosure Trigger**
- Small text link at the bottom: "Ticket sale terms"
- Tapping this opens the On Tour Legal Disclosure screen

**About the Venue**
- Collapsible section: "About the Venue"
- Brief text description of the venue (e.g., capacity, location history)

### Interactions

| Element | Action | Result |
|---|---|---|
| Back button | Tap | Returns to Artist Concerts or Concerts Hub |
| Share icon | Tap | Opens share sheet for this event's link |
| Map thumbnail / "Get Directions" | Tap | Opens native Maps app with venue as destination |
| Artist row | Tap | Navigates to that artist's profile page |
| Follow button on artist row | Tap | Follows/unfollows the artist |
| "Get Tickets" button | Tap | Opens Concert Webview for ticket purchase |
| "Ticket sale terms" link | Tap | Opens On Tour Legal Disclosure screen |
| Context menu (•••) | Tap | Shows bottom sheet: "Copy Link", "Share", "Report a problem" |

### Sample Data

**Event:** Taylor Swift — The Eras Tour (Final Night)
**Date:** Sunday, December 8, 2025 at 7:00 PM
**Venue:** Rogers Centre, 1 Blue Jays Way, Toronto, ON M5V 1J1
**Lineup:**
- Taylor Swift (Headliner)
- Gracie Abrams (Support)

**Tickets from $89 — Get Tickets** (powered by Ticketmaster)

---

## City Search (Concert Location Picker)

### Overview
A search screen that allows users to find and select a city to filter the Concerts Hub for live events in that location.

### UI Elements

**Header / Toolbar**
- Back arrow (top-left) — dismisses and returns to the Concerts Hub
- Title: "Search location"
- Search field (full-width, auto-focused on open): placeholder text "Search cities…"
- Clear button (X) inside the search field — clears the typed query

**Current Location Row** (above the search results list)
- Location pin icon
- Text: "Use current location"
- Tapping requests location permission if not granted, then auto-selects the user's city

**Recent Locations Section** (shown before user types)
- Section header: "Recent"
- List of recently selected cities, each row:
  - Location pin icon
  - City name and country (e.g., "Los Angeles, USA")

**Search Results List** (shown while typing)
- Each result row:
  - Location pin icon
  - City name (e.g., "New York")
  - State/country label (e.g., "New York, USA")
- No-results state:
  - Text: "No results for "[query]""
  - Suggestion: "Try a different city name."

**Loading State**
- Spinner or skeleton rows while fetching results

### Interactions

| Element | Action | Result |
|---|---|---|
| Back button | Tap | Dismisses screen; no location change |
| Search field | Type | Filters/queries city list in real time |
| Clear (X) in search field | Tap | Clears typed text; returns to recent locations view |
| "Use current location" row | Tap | Requests location permission; on grant, sets location to user's current city and returns to Concerts Hub |
| Recent location row | Tap | Sets that city as the selected location; returns to Concerts Hub filtered to that city |
| Search result row | Tap | Sets that city as the selected location; returns to Concerts Hub filtered to that city |

### Sample Data

**Recent:**
- Los Angeles, USA
- Chicago, USA

**Search results for "New":**
- New York, USA
- New Orleans, USA
- Newcastle, UK
- New Delhi, India

---

## Concert Webview (Ticket Purchase)

### Overview
An in-app web browser that loads the external ticket-selling page for a specific concert, allowing the user to purchase tickets without leaving the Spotify app.

### UI Elements

**Header / Toolbar**
- Back arrow (top-left) — closes the webview and returns to Concert Detail
- Title: Event name or ticket seller name (e.g., "Ticketmaster" or "Get Tickets")
- "Open in browser" icon button (top-right) — opens the same URL in the device's default browser
- Progress bar (thin, below the toolbar) — shows page load progress

**WebView Content Area**
- Full-width, full-height embedded browser rendering the ticket seller's website
- Supports scrolling, tapping links, and form input (for purchase flow)
- Standard webview back/forward navigation via swipe gestures or in-page controls

**Loading State**
- Centered Spotify-styled loading spinner while the page loads
- If the page fails to load:
  - Error message: "Something went wrong"
  - "Try again" button
  - "Open in browser" link

**Footer / Bottom Bar** (if applicable)
- May display a persistent "Open in [Browser Name]" suggestion banner at the bottom on first load

### Interactions

| Element | Action | Result |
|---|---|---|
| Back arrow | Tap | If webview can go back in history: navigates back within webview. If at root page: closes webview and returns to Concert Detail |
| "Open in browser" icon | Tap | Opens the current URL in the device's default browser (Chrome, etc.) |
| In-page links / buttons | Tap | Navigates within the webview (selecting tickets, entering payment info, etc.) |
| "Try again" button (error state) | Tap | Reloads the ticket page |
| Swipe back (gesture) | Swipe right | Goes back in webview history or closes if at root |

### Sample Data

**Title:** "Get Tickets — Ticketmaster"
**URL Loading:** `https://www.ticketmaster.com/event/taylor-swift-eras-tour-new-york-08102025`

---

## Concert Campaign

### Overview
A promotional screen for a themed concert campaign (e.g., a festival, a multi-artist tour sponsorship, or a branded concert series), showing featured events grouped under a campaign identity.

### UI Elements

**Header / Toolbar**
- Back arrow (top-left)
- Share icon (top-right)

**Campaign Hero**
- Full-width promotional banner image (16:9 or panoramic aspect)
- Campaign title overlaid in large text (e.g., "Coachella 2025")
- Optional tagline or subtitle (e.g., "See all artists performing this April")

**Campaign Description**
- Short paragraph text describing the campaign (e.g., "Discover artists playing at the world's biggest music festivals this season.")

**Featured Events Section**
- Section header: "Events" or "Shows"
- Vertical list or 2-column grid of event cards:
  - Event artwork (square thumbnail)
  - Event name
  - Artist(s) performing
  - Date and city

**Featured Artists Section**
- Section header: "Artists in this campaign"
- Horizontal scrollable row of artist avatar cards:
  - Circular artist photo
  - Artist name below
  - Tapping navigates to the artist's profile

**CTA Section**
- "Browse All Events" button (full-width, green)
- Or individual "Get Tickets" buttons per event card

### Interactions

| Element | Action | Result |
|---|---|---|
| Back button | Tap | Returns to Concerts Hub |
| Share icon | Tap | Opens share sheet for the campaign page link |
| Event card | Tap | Opens Concert Detail screen for that event |
| "Get Tickets" on event card | Tap | Opens Concert Webview for ticket purchase |
| Artist avatar | Tap | Opens the Artist profile page |
| "Browse All Events" button | Tap | Expands or navigates to a full list of campaign events |

### Sample Data

**Campaign:** "Global Citizen Festival 2025"
**Tagline:** "Music for change — Central Park, New York · Sep 27, 2025"
**Description:** "Join millions of Global Citizens as we bring together the world's biggest artists to end extreme poverty by 2030."

**Featured Artists:** Beyoncé · SZA · Coldplay · H.E.R. · Davido

**Events:**
- Global Citizen Festival NYC — Sep 27, Central Park, New York
- Global Citizen Festival Accra — Sep 28, Black Star Square, Accra

---

## Multi-Event Bottom Sheet

### Overview
A bottom sheet that appears when a user taps on a map pin or location cluster that contains multiple events in the same city or venue, allowing quick browsing without leaving the current screen.

### UI Elements

**Sheet Handle**
- Thin drag handle at the top of the sheet (indicates it can be expanded or dismissed)

**Sheet Header**
- City/venue name (e.g., "3 events in Los Angeles")
- Close button (X) on the right

**Event List**
- Scrollable vertical list of event rows (same design as the Concerts Hub event rows):
  - Event artwork thumbnail (square, ~48 dp)
  - Artist name (bold)
  - Event name / tour name
  - Date (e.g., "Sat, Sep 6")
  - Venue name
  - "Tickets" button (green pill, right-aligned)

**Sheet Expand Indicator**
- "See all events in Los Angeles" text link at the bottom of the list (if more than ~4 events)

### Interactions

| Element | Action | Result |
|---|---|---|
| Drag handle | Drag up | Expands the sheet to near full-screen |
| Drag handle | Drag down / Close X | Dismisses the sheet |
| Event row | Tap | Opens Concert Detail for that event (sheet remains dismissible) |
| "Tickets" button | Tap | Opens Concert Webview |
| "See all events in [City]" | Tap | Navigates to a full filtered Concerts Hub view for that city |

### Sample Data

**Sheet Title:** "3 events in Los Angeles"

- **Olivia Rodrigo** — GUTS World Tour · Sep 5 · Kia Forum — **Tickets**
- **Arctic Monkeys** — The Car Tour · Sep 6 · Hollywood Bowl — **Tickets**
- **Hozier** — Unreal Unearth Tour · Sep 7 · Greek Theatre — **Tickets**
<!-- source-hash:b67b21aab3c6 -->

---

# Kids & Family Screen Specifications

---

## Account Selector ("Who's Listening?")

### Overview
Users see a list of accounts on the current device and select whose profile to use before listening begins.

### UI Elements
- **Header text:** "Who's listening?" (displayed as the page title)
- **Subheading:** "Get personalized recommendations, playlists, and more."
- **Account list:** Scrollable vertical list of user profiles, each row showing:
  - Profile avatar/photo (circular thumbnail)
  - Display name (e.g., "Emma", "Dad", "Mia")
  - Account type badge where applicable (e.g., "Managed plan member", "Spotify Free", "Spotify Kids (separate app)")
  - PIN lock icon badge labeled "PIN required" for accounts that require a PIN to access
  - Disabled state with label "No internet connection" for accounts that can't be accessed offline
- **"Add account" button:** Text button at the bottom of the list, labeled "Add account"
- **Disclaimer text (shared devices with young listeners):** "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN."

### Interactions
- Tapping a standard account row immediately logs into that account and navigates to the Spotify home screen
- Tapping an account requiring a PIN prompts a PIN entry overlay before proceeding
- Tapping a disabled (no internet) account shows an error or does nothing
- Tapping "Add account" navigates to the Add Account screen
- The screen is navigated to automatically when the app detects multiple accounts, or is accessed from Settings

### Sample Data
- **Emma** — Managed plan member
- **Sarah** — Self-managed (Plan Manager)
- **Jake** — Spotify Free
- **Lily** (PIN required badge) — Managed plan member

---

## Add Account

### Overview
Users initiate the process of logging into a new Spotify account to add it to the device's account list.

### UI Elements
- **Page title:** "Add account"
- **Informational text:** "Get personalized recommendations, playlists, and more."
- **Login options:** Buttons or list items for each sign-in method:
  - "Continue with Google"
  - "Continue with Facebook"
  - "Continue with Apple"
  - "Continue with Email"
  - "Continue with Phone number"
- **"Add a different account" section:** A separate entry point labeled "Add a different account"
- **Disclaimer text:** "While you are signed in, anyone else using this device will be able to access your account."

### Interactions
- Tapping a login method launches the corresponding authentication flow (OAuth, email/password, phone OTP, etc.)
- On successful login, the new account is added to the account list and the user is taken to the home screen
- Failure or cancellation returns the user to the Account Selector screen
- A snackbar message may appear on failure: "Something went wrong. Have another go?"

### Sample Data
- User is adding their child's Spotify account to a family tablet
- After tapping "Continue with Email," a standard email + password login screen opens

---

## PIN Gate

### Overview
A PIN entry screen that guards access to a specific account or parental control settings, requiring the user to enter a numeric PIN before proceeding.

### UI Elements
- **Title/instruction:** Contextual heading (e.g., "Enter your PIN" or similar)
- **PIN input area:** A numeric PIN entry field, typically displayed as a series of masked dots corresponding to PIN digits
- **Numeric keypad:** On-screen digit buttons (0–9) plus a backspace/delete button
- **Error state:** An error message displayed inline if the entered PIN is incorrect
- **Cancel/back option:** A button or back gesture to dismiss the PIN gate and return to the previous screen

### Interactions
- User taps digits on the keypad; each digit fills one dot in the PIN display
- When the correct number of digits is entered, the app automatically validates
  - Correct PIN: User is granted access and navigated to the protected destination
  - Incorrect PIN: Dots shake or clear and an error is shown
- Tapping Cancel or back navigates the user back without granting access

### Sample Data
- A parent set up a 4-digit PIN "1234" (note: blacklisted passwords are filtered during setup)
- Incorrect entry shows an error message inline beneath the PIN dots

---

## Change PIN

### Overview
Allows the plan manager or parent to update the PIN used to protect parental controls and managed account access.

### UI Elements
- **Page title:** "Change PIN" (or similar heading)
- **Current PIN input field:** A numeric entry field for the existing PIN (masked dots + on-screen keypad)
- **New PIN input field:** Entry for the desired new PIN
- **Confirm new PIN field:** Repeat entry to confirm the new PIN
- **Submit/Save button:** A primary action button (e.g., "Save" or "Done")
- **Error/validation messages:** Inline messages if the current PIN is wrong, or if the new PIN and confirmation don't match

### Interactions
- User enters current PIN; if incorrect, an error is displayed and flow does not proceed
- User enters and confirms new PIN; if they don't match, an error is displayed
- On successful change, a confirmation message (snackbar or inline) is shown and the user is returned to Settings or the Parental Controls screen

### Sample Data
- Current PIN: ● ● ● ●
- New PIN: ● ● ● ●
- Confirm: ● ● ● ●
- Success snackbar: "Your PIN has been updated."

---

## Parental Controls Settings

### Overview
A settings screen where the plan manager (parent/guardian) manages content restrictions and account settings for young listeners on their plan.

### UI Elements
- **Page title:** "Parental controls"
- **Explicit content toggle row:**
  - Label: "Explicit content"
  - Description: "Content (labeled with the E tag) that may contain adult language or themes."
  - Toggle switch (ON/OFF)
- **Manage blocked content row:**
  - Label: "Blocked artists & songs"
  - Navigates to the blocked content management screen
- **Account details section per managed member:**
  - Member name row (label: "Name", tap to update)
  - Birthday row (tap to update)
  - Account type row showing "Managed account (you control playback)"
  - Remove member button labeled "Remove" with description: "Remove this person's access to your plan."
- **Change PIN row:** Navigates to the Change PIN screen
- **Parental consent section:** A row or button related to parental consent/approval (if applicable)

### Interactions
- Toggling explicit content immediately applies the setting to the managed account
- Tapping "Blocked artists & songs" navigates to the Manage Blocked Content screen
- Tapping "Name" navigates to an inline editor for updating the managed account's display name
- Tapping "Birthday" navigates to an inline birthday update screen
- Tapping "Remove" triggers a confirmation dialog before removing the member from the plan
- Tapping "Change PIN" navigates to the Change PIN screen

### Sample Data
- Member: Lily, Age 9
- Explicit content: OFF
- Blocked: 3 artists, 2 songs
- Account type: Managed account (you control playback)

---

## Manage Blocked Content

### Overview
Displays the list of artists and songs currently blocked for a managed (young listener) account, and allows the parent to remove blocks or search for new items to block.

### UI Elements
- **Page title:** "Blocked artists & songs" (or "Blocked content")
- **Search bar:** A search input labeled "Search" for finding new artists or songs to block
- **Blocked items list:** Each row shows:
  - Content artwork (artist photo or album art thumbnail)
  - Name of the artist or song
  - Artist name for songs (secondary line)
  - Remove/unblock button (e.g., a trash icon or "Remove" label)
- **Empty state:**
  - Title: "Search artists or songs"
  - Subtitle: "Choose music that this young listener won't be able to play."
- **Error state:**
  - Title: "Couldn't load result"
  - Subtitle: "Try again?"
  - Button: "Reload"

### Interactions
- Tapping the search bar opens the blocked content search screen
- Tapping the remove button on a blocked item unblocks that artist or song immediately
- Items unblocked disappear from the list with a brief animation
- Pulling down on the list or tapping "Reload" refreshes the list

### Sample Data
- **Blocked artists:** Eminem, Cardi B
- **Blocked songs:** "WAP" by Cardi B ft. Megan Thee Stallion, "Lose Yourself" by Eminem

---

## Add Blocked Content (Search)

### Overview
A search interface that lets the parent search for specific artists or songs to add to a managed account's blocked list.

### UI Elements
- **Search bar:** Text input with placeholder "Search" and an "X" clear button labeled "Clear search"
- **Search results list:** Each result row shows:
  - Thumbnail (artist photo or album art)
  - Primary name (artist or song title)
  - Secondary text (e.g., artist name for tracks)
  - An "Add" button or plus icon on the right
- **Empty/zero state (before searching):**
  - Title: "Search artists or songs"
  - Subtitle: "Choose music that this young listener won't be able to play."
- **No results state:**
  - Title: "Couldn't find "[search term]""
  - Subtitle: "Try searching again using a different spelling or keyword."
- **Error state:**
  - Title: "Couldn't load result"
  - Subtitle: "Try again?"
  - Button: "Reload"

### Interactions
- Typing in the search bar triggers a live search for matching artists and songs
- Tapping "Clear search" clears the input and returns to the zero state
- Tapping "Add" on a result adds the artist or song to the blocked list; the button may change state to indicate it is blocked
- Tapping back/cancel returns to the Manage Blocked Content screen without changes

### Sample Data
- Search query: "drake"
- Results: Drake (Artist), "God's Plan" by Drake, "Hotline Bling" by Drake, "One Dance" by Drake ft. WizKid

---

## Kid Account Creation — Education

### Overview
An informational screen in the kid account creation flow that explains to the parent what a managed (young listener) account is and what controls they will have.

### UI Elements
- **Illustration:** A full-width or centered image (sourced from Spotify's CDN, e.g., IAM_SeparateAccounts.png) depicting the concept of separate accounts or family listening
- **Headline:** Contextual heading explaining the feature (e.g., "Separate accounts for your family" or similar)
- **Body text:** 2–3 paragraphs explaining:
  - What a managed account is
  - That the parent controls what the child can play
  - That explicit content can be blocked
- **Continue/Next button:** Primary CTA to move to the next step in the flow
- **Back/Cancel option:** Navigation to exit or go back in the flow

### Interactions
- Tapping "Continue" or "Next" advances to the next step (e.g., name entry, birthday entry, or parental consent)
- Tapping back or the device back gesture returns to the previous step or exits the flow

### Sample Data
- Illustration: Two cartoon profile icons representing a parent and child with the Spotify logo
- Headline: "Separate accounts, separate listening"
- Body: "Your child gets their own Spotify account. You control what they can play, and their listening is kept separate from yours."

---

## Kid Account Creation — Name Entry

### Overview
A step in the kid account creation flow where the parent enters the child's name for their new managed account.

### UI Elements
- **Step indicator:** Optional progress dots or step count at the top
- **Headline:** "What's your child's name?" or similar
- **Name text input field:** A single-line text input with appropriate label
- **Continue/Next button:** Primary CTA, disabled until a valid name is entered
- **Back button:** Returns to the previous step

### Interactions
- User types the child's name; the Continue button becomes active when at least one character is entered
- Tapping Continue advances to the next creation step (e.g., birthday)
- Tapping back returns to the education/previous step

### Sample Data
- Input: "Lily"
- Continue button activates after "L" is typed

---

## Kid Account Creation — Birthday

### Overview
A step in the kid account creation flow where the parent enters the child's date of birth to verify eligibility and set age-appropriate controls.

### UI Elements
- **Headline:** "When's [child's name]'s birthday?" or similar
- **Date picker:** A scrollable date selector (day, month, year) or three separate numeric input fields
- **Informational note:** A short text explanation of why the birthday is needed (e.g., for age-appropriate recommendations and compliance)
- **Continue/Next button:** Primary CTA, enabled when a valid date is entered
- **Back button:** Returns to the previous step

### Interactions
- User scrolls/selects a date of birth
- Tapping Continue validates the date; if the age is outside the supported range, an error or age-gating message is shown
- On a valid date, advances to the next step (e.g., PIN creation, parental consent)

### Sample Data
- Date selected: September 14, 2016
- Child's name shown in heading: "When's Lily's birthday?"

---

## Kid Account Creation — PIN Setup

### Overview
A step in the kid account creation flow where the parent creates a numeric PIN that will protect parental control settings and account switching.

### UI Elements
- **Headline:** "Create a PIN" or "Set up a PIN for parental controls"
- **PIN entry display:** A row of 4 masked dot indicators
- **On-screen numeric keypad:** Digits 0–9 and a backspace key
- **Instructional text:** Explains that this PIN will be used to access parental controls
- **Back button:** Returns to the previous step

### Interactions
- User taps digits on the keypad; each fills one dot
- After 4 digits are entered, the app automatically advances to a PIN confirmation step
- In the confirmation step, the user re-enters the same PIN; if it matches, the PIN is saved and the flow continues
- If PINs don't match, both fields clear and an error is shown (e.g., "PINs don't match. Try again.")

### Sample Data
- PIN display: ● ● ● ●
- Confirmation prompt: "Enter your PIN again to confirm"

---

## Kid Account Creation — Parental Consent (Legal)

### Overview
A step presenting the legal terms and consent required by the parent before a managed child account can be created, including privacy policy acknowledgment.

### UI Elements
- **Headline:** "Before we continue…" or "Your consent is needed"
- **Scrollable legal text:** Summary of the managed account terms and privacy policy with a link to the full document
  - Link: Spotify managed account privacy policy URL
- **Checkbox or toggle:** "I agree to the terms" acknowledgment control
- **Continue/Accept button:** Primary CTA, enabled only after agreement is checked
- **Back button:** Returns to the previous step
- **"Does your parent not have an account?" note** (if applicable in a child-led signup variant): "They can sign up for free with either option."

### Interactions
- User scrolls through the legal text
- Tapping the checkbox/toggle enables the Continue button
- Tapping Continue submits the consent and moves to the next step (account submission)
- Links within the text open the relevant legal pages in an in-app browser

### Sample Data
- Privacy policy link: "Spotify Managed Account Young Listener Privacy Policy"
- Checkbox label: "I confirm I am the parent or guardian and agree to these terms"

---

## Kid Account Creation — Submitting

### Overview
A transitional loading screen shown while the new managed kid account is being created on Spotify's servers.

### UI Elements
- **Spotify logo or animated loading indicator:** Centered on the screen
- **Status text:** "Creating account…" or "Just a moment…"
- No interactive controls; the user waits for the process to complete

### Interactions
- On success, the user is automatically navigated to a confirmation/welcome screen or the account selector
- On failure, an error screen is shown with a "Try again" option

### Sample Data
- Loading spinner with text: "Setting up Lily's account…"

---

## Parental Consent QR Code (Share Parental Consent)

### Overview
Displays a QR code for a child who needs parental consent — the parent scans it on their own device to approve account creation or changes.

### UI Elements
- **Page title:** "Ask your parent or guardian to scan this code"
- **Instructional text:** "They should scan this code with the device where they normally use Spotify."
- **QR code image:** A large, centered QR code graphic with accessibility label "QR Code, use another camera to scan and continue"
- **Alternative option text:** "Or, your parent can log in here temporarily. You won't be able to access their account."
- **"Parent login" button:** A secondary button allowing the parent to log in directly on the current device
- **Disclaimer text:** "Does your parent not have an account? They can sign up for free with either option."
- **Back/Cancel option**

### Interactions
- The QR code is displayed statically; the parent scans it using another device's camera or the Spotify app
- Tapping "Parent login" navigates to a temporary parent login screen on the current device
- Scanning the QR code on the parent's device opens the consent approval flow on that device
- Once consent is granted (from either path), this screen automatically advances or shows a success state

### Sample Data
- QR code links to: https://www.spotify.com/account/parental-consent
- Child's name shown in subtitle context: "Lily is waiting for your approval"

---

## Graduation — Forced Lock Screen

### Overview
A blocking full-screen overlay shown to a young listener whose account has been forced to graduate (transition to a self-managed account), preventing further use of the app until the graduation process is acknowledged.

### UI Elements
- **Full-screen blocking overlay:** Covers the entire app, preventing interaction with any underlying content
- **Spotify logo or illustration:** Centered graphic indicating this is an important notice
- **Headline:** Context-specific heading explaining that the account needs to be graduated (e.g., "Time to take control of your account" or similar transition messaging)
- **Body text:** Explanation that the account is being transitioned and playback has been stopped
- **Primary CTA button:** Labeled to start or acknowledge the graduation process (e.g., "Get started" or "Continue")
- **No dismiss/back option:** The screen cannot be bypassed; the user must engage with the graduation flow

### Interactions
- Music/audio playback is automatically stopped when this screen appears
- Tapping the CTA button launches the graduation flow (education → terms → account transition steps)
- There is no way to dismiss this screen without completing or engaging with the graduation process
- The back gesture is disabled or redirected back to this screen

### Sample Data
- Headline: "You've grown up on Spotify"
- Body: "It's time to manage your own account. Tap below to get started — it only takes a few minutes."
- Button: "Get started"

---

## Graduation — Education

### Overview
An informational screen in the account graduation flow that explains to the user what it means to graduate from a managed account to a self-managed account.

### UI Elements
- **Illustration:** An image representing independence or growing up (e.g., from Spotify's CDN)
- **Headline:** Explains the graduation concept (e.g., "You're becoming self-managed")
- **Body text:** 2–3 paragraphs explaining:
  - What changes (they gain full control of their account)
  - What stays the same (their music, playlists, listening history)
  - Any parental oversight that is ending
- **Continue/Next button:** Primary CTA to advance in the flow
- **Back button / Close option** (only if not forced)

### Interactions
- Tapping Continue advances to the graduation terms screen
- If in the forced graduation flow, back navigation may be disabled or loop back to this screen

### Sample Data
- Headline: "Your account is growing up"
- Body: "You'll now manage your own Spotify account. Your playlists, liked songs, and listening history are all yours."

---

## Graduation — Terms & Conditions

### Overview
A screen presenting the terms of service the user must accept as part of graduating to a self-managed Spotify account.

### UI Elements
- **Page title:** "Terms and conditions" or "Review and accept"
- **Scrollable terms text:** Full or summarized graduation/self-managed account terms with links to full legal documents
- **Acceptance checkbox or button:** User must actively agree before proceeding
- **Accept/Continue button:** Primary CTA, active only after acceptance
- **Back button**

### Interactions
- User scrolls through the terms
- Tapping the checkbox enables the Continue button
- Tapping Continue submits acceptance and moves to the next graduation step
- Links within the terms text open in an in-app web browser

### Sample Data
- Terms summary: "By continuing, you agree to Spotify's Terms of Service and Privacy Policy. You will become the sole manager of this account."
- Link: "Read the full Privacy Policy"

---

## Graduation — Status Screens (Requested / Postponed / Approved / Rejected / Supervision)

### Overview
A set of status-feedback screens shown to the user at different points in the graduation request lifecycle, each communicating the current state of their graduation request.

### UI Elements (common across all status screens)

**Requested:**
- Illustration representing a pending/waiting state
- Headline: Something like "Request sent"
- Body: Explanation that the plan manager has been notified and needs to approve
- Optional "View request" or "Check status" button

**Postponed:**
- Headline: Explains the graduation has been postponed
- Body: Reason or timeframe, with options to try again later or contact the plan manager

**Approved:**
- Celebratory illustration or Spotify branding
- Headline: "Your graduation has been approved!"
- Body: Confirmation that the account is now self-managed
- CTA: "Start listening" or "Go to Spotify"

**Rejected:**
- Headline: Indicates the request was not approved
- Body: Explains who rejected it (the plan manager) and what the user can do next
- CTA: "OK" or "Go back"

**Supervision:**
- Headline: Indicates the account is under supervision mode
- Body: Explains what supervision means for the account's capabilities
- CTA to proceed or learn more

### Interactions
- Each status screen has a primary button that navigates the user forward appropriately:
  - Approved → Home screen
  - Rejected / Postponed → Back to the managed account experience
  - Supervision → Informational flow or home
- "View request" opens the view-request details screen showing the graduation request details

### Sample Data
- **Requested:** "Your request has been sent to Sarah. She'll get a notification to review it."
- **Approved:** "Welcome to your new account, Lily! You're now in charge."
- **Rejected:** "Sarah has declined your graduation request. Talk to them for more details."

---

## Managed Account Details (Plan Manager View)

### Overview
A screen where the plan manager views and edits the details of a specific managed (young listener) account on their plan.

### UI Elements
- **Page title:** The managed member's name (e.g., "Lily's account")
- **Profile picture:** Circular avatar labeled "Profile picture" (accessible)
- **Name row:**
  - Label: "Name"
  - Current name value (e.g., "Lily")
  - Tap to edit, accessibility label: "Update name"
- **Account type row:**
  - Label: "Account type"
  - Value: "Managed account (you control playback)"
- **Explicit content row:**
  - Label: "Explicit content"
  - Toggle: ON/OFF
  - Description: "Content (labeled with the E tag) that may contain adult language or themes."
- **Blocked content row:**
  - Label: "Blocked artists & songs"
  - Navigates to Manage Blocked Content
- **Birthday row:**
  - Shows current birthday or age
  - Tap to update
- **Remove member section:**
  - Title: "Remove member"
  - Description: "Remove this person's access to your plan."
  - Button: "Remove" (destructive action, red or secondary style)
- **Account transition in progress state** (if applicable):
  - Disabled button labeled "Account transition is in progress"

### Interactions
- Tapping the name row opens a name edit screen
- Tapping the birthday row opens a birthday edit screen
- Toggling explicit content applies immediately
- Tapping blocked content navigates to the Manage Blocked Content screen
- Tapping "Remove" shows a confirmation dialog:
  - Title: "Remove member"
  - Description: "Remove this person's access to your plan."
  - Buttons: "Remove" (confirm) and "Cancel"
  - On confirmation, a snackbar appears: "Removed from your plan."

### Sample Data
- Name: Lily
- Account type: Managed account (you control playback)
- Explicit content: OFF
- Birthday: September 14, 2016
- Blocked: Eminem, Cardi B

---

## Add Child Plan Member

### Overview
A screen that allows a plan manager to add a new managed child account to their Premium Family plan.

### UI Elements
- **Page title:** "Add to your plan"
- **Informational illustration or icon**
- **Body text:** Explains what adding a child plan member means (they get a managed Spotify account, parent controls playback)
- **Primary CTA button:** "Add to plan"
- **Cancel button:** "Cancel"
- **Error state (if addition fails):**
  - Title: "Something went wrong"
  - Body: "Try again?"
  - Buttons: "Try again" and "Cancel"

### Interactions
- Tapping "Add to plan" initiates the kid account creation flow (education → name → birthday → PIN → consent → submit)
- Tapping "Cancel" dismisses the screen and returns to the plan management screen
- On success, a confirmation is shown and the new member appears in the plan member list
- On failure, the error state is shown with a retry option

### Sample Data
- Heading: "Add a child to your plan"
- Body: "They'll get a managed Spotify account. You'll be able to control what they can listen to."
- Button: "Add to plan"
<!-- source-hash:dfaf94d031a0 -->

---

# Settings & Notifications — Screen Specifications

---

## Settings (Main Settings Screen)

### Overview
The user sees a list of all configurable settings categories for the Spotify app, from which they can navigate into any specific settings section.

### UI Elements

**Header/Toolbar**
- Title: "Settings" (the route `spotify:settings` confirms this as the top-level settings destination)
- Back arrow to return to the previous screen

**Settings Category List**
Each row is a tappable navigation item with a label that routes to a sub-settings screen. Based on the routes registered in the app:

- **Account** — routes to Account Settings
- **Notifications** — routes to Notification Settings
- **Quality** — routes to Playback Quality settings
- **Playback** — routes to Playback settings
- **Social** — routes to Social settings
- **Connectivity** — routes to Connectivity settings
- **Content Personalization** — routes to Content Personalization settings
- **Ads** — routes to Ads preferences (`spotify:config:ads`)
- **Parental Controls** — routes to Parental Controls settings
- **Integrations** — routes to Integrations settings
- **App Icon** — routes to custom app icon picker (`spotify:config:app-icon`)
- **Business Information** — routes to Business Information (`spotify:settings:business-information`)
- **About** — routes to About screen
- **Search** — a search bar or search icon in the toolbar to search within settings (`spotify:settings:search`)

**Search Bar (optional, inline or toolbar)**
- Placeholder text: "Search…" (from `abc_search_hint`)
- Tapping opens a filtered settings search view

### Interactions
- Tapping any category row navigates to that section's dedicated settings screen.
- Tapping the Search icon or row navigates to the Settings Search screen.
- Back arrow returns to the main app (Home or wherever the user came from).

### Sample Data
```
Settings

Account
Notifications
Quality
Playback
Social
Connectivity
Content Personalization
Ads
Parental Controls
Integrations
App Icon
Business Information
About
```

---

## Settings Search

### Overview
The user searches within the settings menu to quickly find a specific setting by keyword.

### UI Elements

**Header/Toolbar**
- Search input field (autofocused), placeholder: "Search…"
- Clear ("×") button appears when text is entered (label: "Clear query")
- Back arrow to return to the main Settings screen

**Search Results List**
- Each result row displays:
  - Setting name/label
  - Parent section name as secondary text (e.g., "Playback · Quality")
- Empty state: no results message with suggestion to check spelling or try different keywords (based on similar empty-state patterns: "No result found" / "Check the spelling, or try different keywords.")

### Interactions
- Typing in the search field filters settings in real time.
- Tapping a result navigates directly to that settings sub-page.
- Tapping "Clear query" clears the search field and resets results.
- Back arrow dismisses search and returns to main Settings.

### Sample Data
```
[Search field: "notif"]

Notifications
  Main Settings
New Episode Notifications
  Notifications
Push Notifications
  Notifications
```

---

## Account Settings

### Overview
The user manages their Spotify account details, subscription status, and linked services.

### UI Elements

**Header/Toolbar**
- Title: "Account" (route: `spotify:settings:account`)
- Back arrow

**Account Info Section**
- Display name row — label: "Name", tapping opens an update flow; accessibility: "Update name"
- Account type row — label: "Account type", value shown as one of:
  - "Spotify Free"
  - "Managed plan member"
  - "Self-managed"
  - "Spotify Kids (separate app)"
- Profile picture — label: "Profile picture", tappable to update
- Explicit content toggle — label: "Explicit content", description: "Content (labeled with the [E] tag) that may contain adult language or themes."

**Plan / Membership Section** (if applicable)
- Plan overview link

**Danger Zone / Actions**
- Log out button
- Link to account privacy page (title: "Account Privacy", description about downloading personal data)

### Interactions
- Tapping "Name" row opens the update name flow.
- Tapping "Account type" may show account upgrade or management options depending on account type.
- Tapping "Explicit content" toggles the setting on or off.
- Tapping "Account Privacy" opens the Account Privacy page with a description: "We want to make it easy for you to manage and understand your account privacy…" and an option to download Spotify personal data.

### Sample Data
```
Account

Name
  Taylor Chen

Account type
  Self-managed

Profile picture
  [Avatar image]

Explicit content  [Toggle: ON]
  Content labeled with the E tag that may contain adult language or themes.

Account Privacy
```

---

## Notification Settings (Main)

### Overview
The user views and manages all push notification preferences for the Spotify app.

### UI Elements

**Header/Toolbar**
- Title: "Notifications" (route: `spotify:internal:preferences:push_notification`)
- Back arrow

**Global Toggle**
- Master "Allow notifications" toggle — enables or disables all Spotify push notifications

**Notification Category List**
Each row shows a category name and optionally the current enabled/disabled state:
- **Messages** — tapping opens the Messages notification category detail screen (`spotify:settings:notifications:category-details:notify-messages`)
- **New Episode Notifications** — routes to `spotify:new-episode-notifications`
- **Notification Categories** — routes to category list view (`spotify:internal:preferences:notification_settings:categories`)

**System Settings Link**
- "Open notification settings in system settings" link/button — takes the user to the Android system notification settings for the Spotify app

### Interactions
- Toggling the master switch enables or disables all notification types.
- Tapping a category row opens that category's detail screen.
- Tapping the system settings link opens the device's notification settings for Spotify.

### Sample Data
```
Notifications

Allow notifications  [Toggle: ON]

Messages              →
New Episodes          →
Categories            →

Open in system settings
```

---

## Notification Category Details

### Overview
The user views and toggles notifications for a specific notification category (e.g., Messages).

### UI Elements

**Header/Toolbar**
- Title: name of the category (e.g., "Messages")
- Back arrow

**Description**
- Short text explaining what types of notifications this category includes

**Toggle**
- Enable/disable toggle for this specific notification category
- Label: "ON" / "OFF"

**Channel List** (if applicable)
- Sub-channels within the category, each with their own toggle
- Each row: channel name + toggle

### Interactions
- Toggling enables/disables that notification category.
- Sub-channel toggles work independently within the enabled category.
- Back arrow returns to Notification Settings.

### Sample Data
```
Messages

Notifications about new messages from friends and listening activity.

Enable  [Toggle: ON]

Direct Messages         [Toggle: ON]
Group Messages          [Toggle: ON]
```

---

## New Episode Notifications

### Overview
The user manages push notification settings for new podcast episodes from shows they follow.

### UI Elements

**Header/Toolbar**
- Title: "New Episode Notifications" (route: `spotify:new-episode-notifications` / `spotify:podcast-new-episode-notifications:settings`)
- Back arrow

**Global Toggle**
- Label: "Notify me about new episodes" — master toggle for all podcast episode notifications

**Show List**
Each row represents a podcast show the user follows:
- Podcast artwork (square thumbnail, ~48×48px)
- Podcast name (bold, single line)
- Latest episode info (secondary text, e.g., "New episode available")
- Toggle to enable/disable notifications for that specific show

**Empty State**
- Shown when the user follows no podcasts
- Text: "Follow podcasts to get notified about new episodes"

### Interactions
- Master toggle enables/disables all new-episode notifications.
- Per-show toggle individually enables or disables notifications for that show.
- Tapping the show row (not the toggle) navigates to that podcast's show page.

### Sample Data
```
New Episode Notifications

Notify me about new episodes  [Toggle: ON]

[artwork]  The Daily                    [Toggle: ON]
           The New York Times

[artwork]  Stuff You Should Know        [Toggle: OFF]
           iHeartPodcasts

[artwork]  Crime Junkie                 [Toggle: ON]
           audiochuck
```

---

## Quality Settings

### Overview
The user controls streaming and download audio quality settings.

### UI Elements

**Header/Toolbar**
- Title: "Audio quality" (route: `spotify:settings:quality`)
- Back arrow

**Streaming Quality Section**
- Header: "Streaming"
- Options listed (tappable radio-style rows):
  - "Automatic" — adjusts based on connection
  - "Low" — saves data
  - "Normal"
  - "High"
  - "Very high" (Premium only)
  - "Extreme" / "Lossless" (Premium only — accessible via `spotify:lossless:settings-sheet:quality`)
- Currently selected option has a checkmark or highlighted state
- Accessibility label: "Streaming quality [current value]"

**Download Quality Section**
- Header: "Download"
- Same quality tier options as streaming
- Only available for Premium users

**Other Toggles**
- "Download using cellular" — toggle to allow/disallow downloads on mobile data
- Data Saver mode toggle — label: "Data saver" — reduces streaming quality automatically

### Interactions
- Tapping a quality tier selects it (radio button behavior).
- Tapping "Download using cellular" triggers a confirmation dialog: `spotify:internal:download-over-cellular-dialog`
- Data Saver toggle saves state immediately.
- Lossless/Extreme rows show an upgrade prompt if user is not on the right Premium tier.

### Sample Data
```
Audio Quality

STREAMING
○ Automatic (recommended)
● Normal
○ High
○ Very high
○ Extreme

DOWNLOAD
○ Normal
● High
○ Very high
○ Extreme

Download using cellular  [Toggle: OFF]
Data Saver               [Toggle: OFF]
```

---

## Playback Settings

### Overview
The user configures playback behavior including crossfade, gapless playback, and other audio options.

### UI Elements

**Header/Toolbar**
- Title: "Playback" (route: `spotify:settings:playback`)
- Back arrow

**Playback Options**
- **Crossfade** — slider (0–12 seconds) controlling overlap between tracks; label shows current value (e.g., "5 seconds")
- **Gapless playback** — toggle; removes silence between tracks
- **Automix** — toggle; blends certain playlist transitions like a DJ
- **Normalize volume** — toggle; keeps volume consistent across tracks
- **Mono audio** — toggle; plays audio as single channel (accessibility)
- **Equalizer** — tappable row that opens the device's system equalizer
- **Show unplayed podcasts first** — toggle for podcast episode ordering
- **Playback timeout** — link to configure playback timeout (`spotify:playback-timeout`)
- **Sleep timer nudge** — may appear contextually (`spotify:internal:sleep-timer-nudge`)

### Interactions
- Crossfade slider updates the setting in real time as it's dragged.
- Toggle switches save immediately.
- Tapping "Equalizer" launches the system equalizer app/view.
- Tapping "Playback timeout" navigates to the timeout configuration screen.

### Sample Data
```
Playback

Crossfade  ────●────────  5 sec

Gapless playback      [Toggle: ON]
Automix               [Toggle: ON]
Normalize volume      [Toggle: ON]
Mono audio            [Toggle: OFF]

Equalizer             →

Show unplayed podcasts first  [Toggle: ON]

Playback timeout      →
```

---

## Social Settings

### Overview
The user controls privacy and social sharing settings, such as whether their listening activity is visible to friends.

### UI Elements

**Header/Toolbar**
- Title: "Social" (route: `spotify:settings:social`)
- Back arrow

**Social Sharing Toggles**
- **Private session** — toggle; hides listening activity from followers and prevents it from affecting recommendations. Label: "Private session"
- **Listening activity** — toggle; shows what you're listening to in the Friend Activity feed. Related route: `spotify:listening-activity:settings`, `spotify:listening-activity:audiencesetting`
- **Share my listening activity on Spotify** — toggle to control activity sharing
- **Connect with Facebook** — tappable row to link/unlink Facebook account (`spotify:internal:preferences:facebook-connect`)
- **Artist announcements** — toggle to receive push notifications when followed artists post

**Audience Setting**
- "Who can see your listening activity?" — tappable row with options: Everyone / Only people I follow / Nobody

### Interactions
- Toggling "Private session" immediately switches the listening mode and updates the UI indicator (lock icon may appear in Now Playing).
- Tapping "Who can see your listening activity?" opens the Audience Setting sub-screen.
- Tapping "Connect with Facebook" opens the Facebook connect flow.

### Sample Data
```
Social

Private session           [Toggle: OFF]
Share my listening activity  [Toggle: ON]

Who can see your listening activity?
  Everyone                →

Connect with Facebook      →
Artist announcements       [Toggle: ON]
```

---

## Connectivity Settings

### Overview
The user manages network and device connection preferences, such as offline mode and Spotify Connect behavior.

### UI Elements

**Header/Toolbar**
- Title: "Connectivity" (route: `spotify:settings:connectivity`)
- Back arrow

**Network Options**
- **Offline mode** — toggle; limits playback to downloaded content only
- **Sync over Wi-Fi only** — toggle; prevents downloads over mobile data
- **Sync downloaded content** — toggle; keeps downloaded content up to date

**Spotify Connect**
- **Show local devices only** — toggle; limits device picker to devices on the same network
- **Device picker** — tappable link to open the device picker (`spotify:internal:connect-device-picker`)

**Bluetooth**
- **Bluetooth device settings** — tappable row; accessibility: "Open bluetooth devices in system settings"

### Interactions
- Toggling "Offline mode" immediately restricts the app to downloaded tracks only and shows a visual indicator.
- "Show local devices only" filters the Connect device list.
- Tapping "Device picker" opens the full Spotify Connect device picker overlay.
- Tapping Bluetooth row opens device-level Bluetooth settings.

### Sample Data
```
Connectivity

Offline mode              [Toggle: OFF]
Sync over Wi-Fi only      [Toggle: ON]
Sync downloaded content   [Toggle: ON]

SPOTIFY CONNECT
Show local devices only   [Toggle: OFF]
Device picker             →

BLUETOOTH
Bluetooth devices         →
```

---

## Content Personalization Settings

### Overview
The user controls how Spotify personalizes content recommendations based on their listening behavior and data.

### UI Elements

**Header/Toolbar**
- Title: "Content Personalization" (route: `spotify:settings:content-personalization`)
- Back arrow

**Personalization Toggles**
- **Tailor my Spotify experience** — toggle; allows Spotify to use listening data for recommendations
- **Process my data for ads personalization** — toggle; routes to `spotify:config:ads`
- **Taste profile** — tappable row to view and manage taste profile (`spotify:internal:tasteprofile`)

**Links**
- "Privacy Policy" — opens `https://www.spotify.com/legal/privacy-policy` in a web view
- "Ads preferences" — opens `https://www.spotify.com/account/ads/`

### Interactions
- Toggles save immediately.
- Tapping "Taste profile" navigates to the Taste Profile screen.
- Tapping policy links opens an in-app browser.

### Sample Data
```
Content Personalization

Tailor my Spotify experience     [Toggle: ON]
  Spotify uses your listening data to give you
  better recommendations.

Ads personalization              [Toggle: ON]

Taste profile                    →

Privacy Policy                   ↗
Ads preferences                  ↗
```

---

## Parental Controls Settings

### Overview
A plan manager or parent manages content restrictions and account controls for young listeners on a Family plan.

### UI Elements

**Header/Toolbar**
- Title: "Parental Controls" (route: `spotify:settings:parental-controls`)
- Back arrow

**Content Restrictions**
- **Explicit content** — toggle to block explicit content for managed accounts; description: "Content (labeled with the E tag) that may contain adult language or themes."
- **Manage blocked content** — tappable row to add or remove blocked artists/songs; navigates to `spotify:internal:parental-control:manage-blocked-content:[id]`

**Account Management**
- **Managed account members list** — each member row shows:
  - Member name
  - Account type (e.g., "Managed account (you control playback)")
  - Arrow to open member details
- **Add member** — button: "Add to plan" / "Add account"
- **Remove member** — opens a confirmation dialog with title: "Remove member", description: "Remove this person's access to your plan.", button: "Remove"

**PIN Management**
- **Change PIN** — tappable row (`spotify:internal:change-pin`)
- **PIN required for switching** — informational note: "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN."

### Interactions
- Tapping "Manage blocked content" navigates to the blocked content search/management screen.
- Tapping a member row navigates to that member's account detail screen.
- Tapping "Add to plan" launches the add member flow.
- Tapping "Remove" on a member shows a confirmation dialog before removing.
- Tapping "Change PIN" navigates to the PIN change flow.
- After removing a member, a snackbar shows: "Removed from your plan."

### Sample Data
```
Parental Controls

CONTENT
Explicit content          [Toggle: OFF]
  Content labeled with E that may contain adult language.

Manage blocked content    →
  2 blocked artists

FAMILY MEMBERS
[avatar]  Jamie Chen
          Managed account  →

[avatar]  Alex Chen
          Managed account  →

+ Add to plan

PIN
Change PIN                →
```

---

## Manage Blocked Content

### Overview
A parent or plan manager searches for and adds artists or songs that a young listener will not be able to play.

### UI Elements

**Header/Toolbar**
- Title: "Blocked Content" (implied from `spotify:internal:parental-control:manage-blocked-content:[id]`)
- Back arrow

**Search Bar**
- Placeholder: "Search" (`add_blocked_content_search_placeholder`)
- Clear button: "Clear search" (`add_blocked_content_clear_search`)

**Empty State (before search)**
- Title: "Search artists or songs" (`add_blocked_content_empty_title`)
- Subtitle: "Choose music that this young listener won't be able to play." (`add_blocked_content_empty_subtitle`)

**Search Results List**
- Each result row:
  - Artwork thumbnail
  - Artist or track name (bold)
  - Secondary label: artist name (for tracks) or "Artist"
  - "Block" / "Unblock" action button or checkmark

**No Results State**
- Title: "Couldn't find "[search term]"" (`add_blocked_content_no_results_title`)
- Subtitle: "Try searching again using a different spelling or keyword." (`add_blocked_content_no_results_subtitle`)

**Error State**
- Title: "Couldn't load result" (`add_blocked_content_error_title`)
- Subtitle: "Try again?" (`add_blocked_content_error_subtitle`)
- Button: "Reload" (`add_blocked_content_retry_button`)

**Currently Blocked Items**
- Section header: "Blocked"
- List of blocked artists/songs with option to unblock each

### Interactions
- Typing in the search field fetches matching artists and tracks.
- Tapping a result adds it to the blocked list.
- Tapping a blocked item removes it.
- Tapping "Reload" on error retries the search.

### Sample Data
```
Blocked Content

[Search field: "Drake"]

RESULTS
[artwork]  Drake           Artist    [Block]
[artwork]  God's Plan      Drake     [Block]
[artwork]  Hotline Bling   Drake     [Block]

BLOCKED
[artwork]  Cardi B         Artist    [Unblock]
[artwork]  WAP             Cardi B   [Unblock]
```

---

## About Settings

### Overview
The user views app version information, legal notices, and links to Spotify's terms and policies.

### UI Elements

**Header/Toolbar**
- Title: "About" (route: `spotify:settings:about`)
- Back arrow

**App Info Section**
- Spotify logo or icon
- App version number (e.g., "Version 8.9.14.588")
- Build number

**Legal & Policies Links**
- "Privacy Policy" — opens `https://www.spotify.com/legal/privacy-policy`
- "Terms of Use" / "Platform Rules" — opens `https://www.spotify.com/platform-rules/plain`
- "Licenses" — opens the open-source licenses viewer
- "Support" — opens `https://support.spotify.com`

**Social / Credits**
- Copyright notice: "© 2024 Spotify AB"

### Interactions
- Tapping policy links opens them in an in-app browser / web view.
- Tapping "Licenses" navigates to a list of open-source library licenses.
- Tapping "Support" opens the Spotify support site.

### Sample Data
```
About

[Spotify logo]
Spotify
Version 8.9.14.588

Privacy Policy            ↗
Terms of Use              ↗
Platform Rules            ↗
Licenses                  →
Support                   ↗

© 2024 Spotify AB
```

---

## Integrations Settings

### Overview
The user manages third-party integrations and connected services, such as Alexa or car platform connections.

### UI Elements

**Header/Toolbar**
- Title: "Integrations" (route: `spotify:settings:integrations`)
- Back arrow

**Connected Services List**
- Each row:
  - Service logo/icon
  - Service name (e.g., "Amazon Alexa", "Facebook")
  - Status indicator: "Connected" or "Not connected"
  - Arrow to manage the connection

**Available Integrations**
- Amazon Alexa — connects to Alexa skill for voice control (deep link to Alexa account linking)
- Facebook — "Connect with Facebook" (`spotify:internal:preferences:facebook-connect`)
- Waze — driving integration (`spotify:waze:optout` / `spotify:waze:onboarding`)

### Interactions
- Tapping a connected service opens the management/disconnect flow for that service.
- Tapping a not-connected service opens the connection/authorization flow.
- Alexa integration navigates to Alexa account linking URL via in-app browser.

### Sample Data
```
Integrations

[Alexa icon]   Amazon Alexa
               Not connected          →

[Facebook icon] Facebook
               Connected              →

[Waze icon]    Waze
               Not connected          →
```
<!-- source-hash:dbc75eb638be -->

## 04 · Components

Reusable UI primitives implied by the screens above. Use these as your component boundaries when rebuilding:

- **TabBar** — Bottom tab bar — the primary navigation spine. Tabs derived from § 02.
- **AppHeader** — Top header with title, leading icon/avatar, and trailing action(s).
- **ListRow** — Dense list row with leading icon/avatar, title, subtitle, and trailing chevron or action.
- **MetricTile** — Dashboard tile — label, value, optional progress, tap → detail screen.
- **PrimaryButton** — Filled button in brand accent. Pill or rounded per tokens § 05.
- **Sheet** — Modal bottom sheet for pickers, confirmations, and settings leaves.
- **MetricChart** — Time-series chart for activity, sleep, or other logged metrics.

See `## 03 · Screens` for per-screen component composition.

## 05 · Design Tokens

Coherent system inferred from brand cues and app category. Use these verbatim, or override a few lines — don't reinvent the scale.

```yaml
tokens:
  brand:
    accent: "#1DB954"
    accentSoft: "rgba(29,185,84,0.15)"
  palette:
    - { name: "Spotify Green", hex: "#1DB954" }
    - { name: "Ink", hex: "#121212" }
    - { name: "Surface", hex: "#181818" }
    - { name: "Card", hex: "#282828" }
    - { name: "Muted", hex: "#B3B3B3" }
  radius: "4px cards · 8px tiles · full avatar"
  spacing: "8px base grid"
  typography: "Circular-ish sans · 14/16/22/32"
  elevation:
    - "0 2px 4px rgba(0,0,0,0.2)"
    - "0 8px 24px rgba(0,0,0,0.5)"
```

## 06 · Interactions

Key micro-interactions surfaced from the screen spec. The small moments that make the clone feel real.

- **Welcome / Login Entry Screen** — Tapping Google, Facebook, Apple, NAVER: Initiates OAuth flow for that provider; user is taken to that provider's login page in a browser or 
- **Email Login Screen** — Typing in email field: Updates field value; no action until submission
- **Passwordless Login (Send Login Link) Screen** — Tapping "Open email app": Opens the device's default email client so the user can tap the magic link
- **Account Picker ("Who's Listening?") Screen** — Tapping an account row (no PIN required): Switches to that account immediately; shows snackbar "You're now logged in as [Name]" (account_swi
- **Add Account Screen** — Tapping any sign-in provider: Initiates the corresponding auth flow
- **Parental Consent / QR Code Screen** — Parent scans QR code with another device: Completes parental consent flow on the parent's device; the young listener's app progresses automa
- **Account Details / Profile Screen** — Tapping Name row: Opens an inline edit field or dialog to update display name
- **Now Playing View** — Tapping artwork — toggles a "preview" mode or opens video player if video track
- **Now Playing — Lyrics (Full Screen)** — Lines scroll automatically as the track progresses
- **Queue** — Tapping a track row — plays that track immediately; queue updates
- **Connect Device Picker** — Tapping a device — transfers playback to that device; selected device gets highlighted; sheet may close or stay open
- **Now Playing — Context Menu (More Options)** — Tapping any action — performs the action and closes the sheet (or navigates away)

## 07 · Do's and Don'ts

**Do**

- Use realistic placeholder content — real-sounding usernames, captions, prices, dates. No Lorem Ipsum.
- Fetch photos, avatars, and thumbnails from real URLs (pravatar, picsum, etc.) — never gray rectangles.
- Declare the design system at the top of your output, then reuse tokens across every screen.
- Build every screen listed in `## 03 · Screens` — don't drop screens to save effort.
- Make every frame interactive — tabs switch, lists scroll, forms accept input.

**Don't**

- Don't ask the user to clarify colors, images, fidelity, or dark mode — apply the tokens.
- Don't render empty gradient rectangles or `[image]` / `[avatar]` labels.
- Don't invent screens that aren't in the spec.
- Don't ship a static mockup — every frame is live DOM.
- Don't assume a backend — this spec is UI-only.

## 08 · Responsive Behavior

Primary target is mobile portrait (iPhone 15 Pro, 390×844 logical). On tablet and desktop:

- Keep the phone as a scalable frame (`transform: scale(...)`) — never resize inner content.
- Canvas gallery mode: at ≥1100px show 3 phone frames per row; at ≥700px show 2; below 700px show 1.
- Safe-area insets: respect the status bar (9:41) and home indicator on every screen.
- Android notes: where the source app differs from iOS conventions, the screens section calls it out inline.

## 09 · Agent Prompt Guide

Copy-paste prompts for your coding agent:

```
Read APPSPEC.md. Build the Authentication & Account Management screen using the tokens in § 05 and the layout in § 03.
```

```
Read APPSPEC.md. Generate a single standalone HTML prototype with every screen in § 03 as an independently-stateful phone frame in a scrollable gallery.
```

```
Read APPSPEC.md § 04. Scaffold the listed components in React + TypeScript, one file per component, using the tokens in § 05.
```

Tips:

- Reference sections by number (`§ 03`, `§ 05`) — agents latch onto structure more reliably than prose.
- When asking for one screen, name it exactly as written in `## 03 · Screens`.
- The spec is UI-only. If you need API shapes, write them yourself and pass them as a separate doc.