Pandora's iOS app is built around the thumb — the up/down gesture that has been its defining interaction since 2000. Pandora pioneered the Music Genome Project: you start a station from a song or artist, and every track that plays is an experiment. A thumb up tells the genome "more like this" and shapes the station forever; a thumb down skips the track and tunes the station away from it. Unlike a like button bolted onto a catalog app, the thumb is the product — it's how a Pandora station learns and becomes yours. The entire app is engineered around two surfaces: the Now Playing screen (where the thumb lives, framed by album art) and the station list (your collection of genome-built radio stations, which is the app's home).
The brand is anchored by Pandora Blue (#224099), a deep, classic blue that the app darkens into a near-navy canvas (#0B0F1C) for its dark-first identity. Layered on top is Bright Blue (#3668FF) — the constant interactive accent: the active thumb-up fill, the big circular play button, the scrubber fill, and every primary CTA. The signature visual move on Now Playing is the album-art gradient hero: a color pulled from the current track's artwork bleeds down from the top of the screen into the navy floor, and the chrome (thumbs, transport, scrubber) floats over it with no card frame — the artwork and its color own the screen. The station list, by contrast, is calm and structured: square station art tiles, station name, and a thin equalizer animation on whatever's currently playing.
The thumb interaction has a deliberate asymmetry that the visual system reinforces. The thumb-up, when active, fills solid Bright Blue — a confident, committed state, because a thumb-up permanently shapes the station. The thumb-down stays a hollow outline even when "active," because its job is to skip-and-move-on, not to commit. This asymmetry — solid up, hollow down — is a core signature: it tells the user, at a glance, that a thumb-up is a lasting vote and a thumb-down is a one-time correction. Recently-thumbed tracks animate the icon with a quick scale pop and a haptic.
Typography is Pandora's brand sans (a clean grotesque) with Inter as the open-source fallback for implementation. Hierarchy is music-app standard but confident: track titles are heavy (800) on Now Playing so they read over busy artwork; station names are 600; metadata and timecodes are calm and tabular. The overall feel is focused and a little nostalgic — Pandora is the original lean-back radio experience, not an interactive catalog, so the UI keeps the controls few, large, and obvious: thumb down, skip back, big play, skip forward, thumb up.
Key Characteristics:
- The thumb up/down IS the product — the Music Genome Project gesture that shapes every station
- Thumb asymmetry — active thumb-up fills solid Bright Blue (a lasting vote); thumb-down stays a hollow outline (a one-time skip)
- Now Playing = album-art gradient hero — a color from the artwork bleeds top-down into the navy floor; chrome floats with NO card frame
- The station list is home — genome-built radio stations as square-art rows with a now-playing equalizer
- Pandora Blue
#224099deepens to a near-navy canvas (#0B0F1C) — dark-first, never neutral gray - Bright Blue
#3668FFis the constant accent — active thumb-up, play button, scrubber fill, every primary CTA - Lean-back transport — five large controls: thumb down · skip back · big play · skip forward · thumb up
- Album artwork is sacred — never tinted; only the surrounding gradient/UI shifts per track
- Calm, tabular metadata — timecodes and counts are tabular; track titles heavy enough to read over art
- Bottom tab bar — For You / Browse / My Collection / Recents — text-primary active, no pill
- Bright Blue (
#3668FF): THE interactive accent — active thumb-up fill, the circular play button, scrubber fill, primary CTA, active selection. The "do this / this is on" color. - Bright Blue Pressed (
#2A55D8): Pressed state of the play button and primary CTA. - Pandora Blue (
#224099): The brand-heritage blue — used in marketing, the splash, deep gradient bases, and as the hue the dark canvas is derived from.
- Navy Canvas (
#0B0F1C): Primary dark canvas — a deep blue-navy derived from Pandora Blue, NOT neutral black/gray. - Surface 1 (
#141A2B): Card and sheet fills, station-list backdrop sections. - Surface 2 (
#1E2538): Raised rows (the active station row), the scrubber track, segmented controls. - Divider (
#28304A): Hairline dividers between rows and sections. - Now Playing Gradient: top color derived from album art →
#1A2240mid →#0B0F1Cfloor.
- Canvas (
#FFFFFF): Primary light canvas (used in some settings/account flows). - Surface 1 (
#F4F6FB): Grouped backdrop, list sections. - Surface 2 (
#FFFFFF): Card fills lifted above Surface 1. - Divider (
#E4E8F2): Hairline dividers.
- Text Primary Dark (
#EDF0F7): Primary text on the navy canvas. - Text Secondary Dark (
#9AA3BD): Artist names, metadata, the idle thumb-down outline. - Text Tertiary Dark (
#646E8C): Timecodes, captions, disabled. - Text Primary Light (
#11162A): Primary text on light. - Text Secondary Light (
#5C6680): Metadata on light. - Text On Bright (
#FFFFFF): Text/icon on the Bright Blue play button and CTA.
| State | Treatment |
|---|---|
| Thumb Up — active | Solid fill #3668FF, stroke #3668FF — a committed, lasting vote |
| Thumb Up — idle | Hollow, stroke #646E8C (tertiary) |
| Thumb Down — active | Hollow still, stroke #9AA3BD (secondary, slightly brighter than idle) — a one-time skip, never solid |
| Thumb Down — idle | Hollow, stroke #646E8C (tertiary) |
| Role | Dark | Light |
|---|---|---|
| Success / Saved | #2BC48A |
#1E9E6E |
| Warning | #F2A93A |
#D9871C |
| Error | #F0526B |
#D63A53 |
| Info / Active | #3668FF |
#224099 |
| Premium / Upgrade | #3668FF |
#224099 |
| Now-playing equalizer | #3668FF |
#3668FF |
- Bright Blue is the through-line: the active thumb-up, the play button, the scrubber fill, and the primary CTA are all
#3668FF— one consistent "this is the action / this is on" color. - The thumb-up is the only solid-filled control: nothing else fills solid bright blue except the play button — the genome's "yes" is visually privileged.
- Thumb-down never goes solid: even active, it's an outline — this asymmetry is intentional and a hard rule.
- Album art is sacred: never tinted, never color-blocked — the Now Playing gradient samples from it but never paints over it.
- Brand Font: Pandora's brand sans (a clean modern grotesque used across product and marketing).
- Implementation Fallback:
Inter(by Rasmus Andersson, SIL OFL) — closest free grotesque-humanist sans with strong numerals and a wide weight range; use for clones. - System Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: tabular lining figures for timecodes, thumb counts, and durations so they don't jitter.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Inter | 32pt | 800 | 1.15 | -0.4pt | "My Collection" tab header |
| Screen Title | Inter | 26pt | 800 | 1.2 | -0.3pt | "Browse stations" |
| Track Title | Inter | 21pt | 800 | 1.2 | -0.3pt | Now Playing track — heavy to read over art |
| Section Header | Inter | 17pt | 700 | 1.3 | -0.1pt | "Recommended for you" |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Descriptions, station info |
| Station Name | Inter | 15pt | 600 | 1.35 | 0pt | Station-list row title |
| Artist / Meta | Inter | 14pt | 400 | 1.4 | 0pt | "The Glass Hours", row subtitle |
| Album Line | Inter | 13pt | 500 | 1.4 | 0pt | "Neon Reverie · 2023" under the title |
| Eyebrow | Inter | 12pt | 700 | 1.2 | 1.0pt | "STATION" above the station name — uppercase, tracked |
| Time / Caption | Inter | 11pt | 500 | 1.3 | 0pt | "1:42 · -2:18" — tabular |
| Button | Inter | 16pt | 700 | 1.0 | 0.1pt | Primary/secondary button labels |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Thumb Count | Inter | 12pt | 600 | 1.0 | 0pt | "312 thumbs up" — tabular |
- Track title carries the screen: on Now Playing the title is 21pt/800 so it stays legible over busy, colorful album art and the gradient
- Calm metadata: artist, album, station info are 400–600 weight — they support the music, never shout
- Tabular time & counts: timecodes, durations, and thumb counts use tabular lining numerals so they never jitter as they tick
- Tracked uppercase eyebrows: the "STATION" label above the station name is 12pt 700 uppercase +1.0pt tracking — a quiet signpost
- Dynamic Type: display, screen title, track title, body, station name scale; tab labels, eyebrow, timecodes stay fixed (layout-critical)
Primary Button (Create station / Done)
- Shape: pill, 500pt corner radius (Pandora's CTA shape)
- Background:
#3668FF(Bright Blue) - Text:
#FFFFFFInter 16pt weight 700 - Height: 50pt
- Pressed: background
#2A55D8+ scale 0.98 - Disabled:
#3668FFat 40% opacity
Outline Button (Shuffle)
- Background: transparent
- Border: 1.5pt
#9AA3BD(text-secondary) - Text:
#EDF0F7Inter 14pt weight 600 - Height: 44pt, pill radius
- Pressed: 8% white fill
Text Button (Upgrade to Premium)
- Inter 14pt weight 700, color
#3668FF - No underline; pressed: 60% opacity
- Two icons flanking the transport row on Now Playing, 44pt hit each, 26pt glyph
- Thumb Up — active: solid fill
#3668FF, stroke#3668FF— the only filled control besides Play; a lasting genome vote - Thumb Up — idle: hollow, stroke
#646E8C - Thumb Down — active: hollow, stroke
#9AA3BD(brighter than idle but NEVER solid) — a one-time skip-and-tune - Thumb Down — idle: hollow, stroke
#646E8C - Tap feedback: icon scales
1.0 → 1.2 → 1.0over 240ms + light haptic; a thumb-down also triggers a track skip - The asymmetry (solid up / hollow down) is a hard rule — it encodes that up commits, down corrects
- Full-screen, NO card frame
- Album-art gradient hero: a dominant color sampled from the current artwork →
#1A2240mid →#0B0F1Cfloor, top-down vertical gradient behind everything - Top bar: down-chevron (collapse), centered "STATION / {station name}" eyebrow+name, ⋯ overflow — floating over the gradient
- Album art: square, 10pt corner radius, centered, ~76% screen width, deep soft shadow (
rgba(0,0,0,0.7) 0 24px 50px -16px) - Track block: title 21pt/800, artist 15pt/500 secondary, album line 13pt/500 tertiary
- Scrubber: 4pt track
Surface 2, fill#3668FF, 12pt white knob; elapsed / remaining timecodes tabular tertiary - Transport row: thumb-down · skip-back · 66pt circular Bright Blue play · skip-forward · thumb-up
- Row, 12pt corner radius on the active row, full-width
- Leading 52pt square station art, 8pt corner radius
- Station name 15pt/700; subtitle 12pt secondary ("Now playing · {artist}" or "Station · 312 thumbs up")
- Trailing: a 4-bar equalizer animation (
#3668FF) on the currently-playing station; otherwise empty or a ⋯ - Active row gets a
Surface 2background fill
- Pinned above the tab bar on non-Now-Playing screens
- 56pt tall: 40pt square art + title/artist (one line each) + a small play/pause + thumb-up
- Tapping it expands into the full Now Playing (shared-element art transition)
- Background: blurred navy
rgba(11,15,28,0.95), 0.5pt top divider
Bottom Tab Bar
- Height: 66pt total (50pt + safe area)
- Background:
#0B0F1C(blurred on scroll), 0.5pt top divider#28304A - Tabs (4): For You, Browse, My Collection, Recents
- Icon 22pt; active fill, inactive stroke
- Active color:
#EDF0F7(text-primary) — icon + label; NO pill/indicator - Inactive:
#646E8C - Labels: Inter 10pt weight 600, always shown
Top Bar
- On Now Playing: transparent over the gradient (collapse chevron + station + overflow)
- Elsewhere: solid navy, screen title 26pt/800, optional back chevron
Search Field (Search music & podcasts)
- Height: 44pt, pill radius (500pt)
- Background:
Surface 2 - Leading 18pt search icon secondary; placeholder 15pt 400 secondary
- Focus: 1.5pt
#3668FFborder
Thumb Up / Down Pair
- The Music Genome gesture — see the signature atom above. The solid-up / hollow-down asymmetry is Pandora's most recognizable UI signature.
Album-Art Gradient Hero
- The Now Playing background: a color extracted from the artwork bleeding into the navy floor; re-derived on every track change with a 400ms cross-fade.
Now-Playing Equalizer Bars
- A tiny 4-bar animated equalizer in
#3668FFmarking the active station in the list and the mini player.
Create Station Sheet
- Bottom sheet: search a song/artist/genre → "Create station" pill CTA → the new genome station opens straight into Now Playing.
Station Detail / Tune-In
- A station's page: large art, thumb history ("312 thumbs up · 28 thumbs down"), "Add variety", "Edit station" — the genome controls surfaced.
My Collection
- Grid/list of saved stations, playlists, and podcasts — the lean-back home; tap a station tile to instantly start radio.
Crowd-Faces Why-This-Track
- The "Why did you play this song?" panel explaining the genome traits the track shares with the station seed — Pandora's transparency hallmark.
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
- Screen horizontal inset: 20pt; Now Playing art uses ~32pt side inset (centered, large)
- Station-row vertical padding: 10pt; row gap: 4pt
- Now Playing is vertically rhythmic: art → track → scrubber → transport, generous gaps so controls are thumb-reachable
- iPhone: single column; Now Playing full-screen with the gradient hero; mini player + tab bar pinned
- iPad / large: station list in a multi-column grid; Now Playing centered with art capped, gradient still full-bleed
- The transport controls always sit in the lower third for one-handed reach
- Let the art lead: Now Playing has no card frames — the artwork and its gradient own the screen; controls float
- Calm lists: the station list is structured and quiet so the music (and the equalizer) is the only motion
- Few, large controls: lean-back radio means a small set of big targets — thumb, skip, play — never a dense control panel
- The thumb has room: thumbs sit clearly apart from skip/play so a genome vote is never a mis-tap
- Square (0pt): the Now Playing gradient (full-bleed), dividers
- Subtle (4pt): scrubber track, tiny chips
- Standard (8pt): station-art tiles, mini-player art
- Art (10pt): the Now Playing album art
- Card (12pt): active station row, sheets' inner cards
- Comfortable (16pt): bottom sheets, modals
- Pill (500pt): buttons, search field, filter chips
- Circle (50%): the play button, avatars, the thumb hit areas
Pandora uses minimal elevation — the album-art gradient provides the depth; UI is mostly flat over it.
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Navy canvas, station rows, the gradient itself |
| Art (Level 1) | rgba(0,0,0,0.7) 0 24px 50px -16px |
The Now Playing album art (deep soft lift off the gradient) |
| Play Button (Level 1) | rgba(54,104,255,0.7) 0 10px 26px -8px (blue glow) |
The circular Bright Blue play button |
| Pinned (Level 2) | Top divider + backdrop blur (rgba(11,15,28,0.95)) |
Mini player + tab bar |
| Sheet (Level 3) | rgba(0,0,0,0.5) 0 -8px 28px |
Create-station, station-detail, queue sheets |
| Modal Overlay | rgba(5,7,14,0.6) scrim |
Behind modals and sheets |
Shadow Philosophy: the album art floats on a deep soft shadow so it reads as the hero object over the gradient; the play button gets a blue glow echoing Bright Blue so it's unmistakably the primary control. Everything else is flat over the navy. On the rare light surfaces, cards switch to a faint cool shadow.
- Thumb tap: icon scales
1.0 → 1.2 → 1.0over 240ms ease-out; thumb-up cross-fades hollow→solid Bright Blue; light haptic. Thumb-down additionally triggers the skip transition - Track change: album art cross-fades + slight scale
0.96 → 1.0over 320ms; the gradient re-derives from the new art and cross-fades over 400ms; title/artist swap with a 200ms fade - Skip forward/back: art slides horizontally 1:1-ish then settles 260ms ease-out
- Play/pause: icon morphs play↔pause 150ms; button scale
1.0 → 0.96 → 1.0on press - Scrubber drag: knob tracks the finger 1:1; fill follows; timecodes update live (tabular, no layout shift)
- Mini → Now Playing: shared-element art expands into the full hero over 320ms ease-out; gradient fades in
- Station start: tapping a station row pulses its equalizer in and pushes Now Playing (300ms)
- Tab change: instant icon/label tint to text-primary; no pill slide (there is no pill)
- Sheet present: bottom sheet rises 320ms ease-out + scrim fade
- Haptics: light on thumb up/down and play; soft on skip; success on station created
- Make the thumb up/down the centerpiece of Now Playing — it is the Music Genome product
- Keep the thumb asymmetry: active thumb-up fills solid Bright Blue; thumb-down stays a hollow outline always
- Build Now Playing as an album-art gradient hero with NO card frame — chrome floats over it
- Use
#3668FFconsistently for the active thumb-up, play button, scrubber fill, and primary CTA - Use a deep blue-navy canvas (
#0B0F1C) derived from Pandora Blue — dark-first - Make the station list the home — genome-built stations as square-art rows with a now-playing equalizer
- Keep transport lean: thumb-down · skip-back · big play · skip-forward · thumb-up — few, large targets
- Re-derive the Now Playing gradient from each track's artwork with a smooth cross-fade
- Use tabular numerals for timecodes, durations, and thumb counts so they never jitter
- Use the pill shape for buttons and the search field; circular for the play button and thumb hit areas
- Keep metadata calm (400–600) and the track title heavy (800) so it reads over art
- Don't fill the thumb-down solid — even active it stays a hollow outline (the asymmetry is a hard rule)
- Don't bolt the thumb on as a generic "like" — it shapes the station; treat it as the core mechanic
- Don't put a card frame around Now Playing — the artwork and its gradient own the screen
- Don't tint or color-block over album artwork — the gradient samples from it, never paints over it
- Don't use a neutral gray/black canvas — it must be the blue-navy
#0B0F1Cfrom Pandora Blue - Don't add a tab-bar pill/indicator — active is a text-primary tint only
- Don't crowd the transport — lean-back radio means few, large, well-spaced controls
- Don't let timecodes/counts jitter — always tabular lining numerals
- Don't make the play button anything but the circular Bright Blue (with its blue glow) primary control
- Don't animate aggressively — track changes and gradient shifts are smooth 200–400ms cross-fades
- Don't bury the station list — it is the app's home, not a secondary tab afterthought
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Album art ~70% width; transport tighter but thumbs stay ≥44pt apart |
| iPhone 13/14/15 | 390pt | Standard layout; album art ~76% width |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; top bar clears the island |
| iPhone 15/16 Pro Max | 430pt | Larger album art; more vertical breathing room in the transport |
| iPad (portrait) | 768pt | Station list multi-column grid; Now Playing centered, art capped ~520pt, gradient full-bleed |
| iPad (landscape) | 1024pt+ | Split: station list / collection on the left, Now Playing detail on the right |
- Scales: display, screen title, track title, body, station name
- Fixed (layout-critical): tab labels, eyebrow, timecodes, thumb counts
- Album art and the gradient never scale (art-driven)
- iPhone: portrait-primary; Now Playing supports landscape (art + transport reflow side-by-side)
- iPad: full rotation; the split layout reflows
- Thumb up / down: 44pt hit each, clearly separated from skip/play
- Play button: 66pt
- Skip back/forward: 40pt glyph, 44pt+ hit
- Station row: full-row tappable, ≥ 64pt
- Tab icons: 22pt glyph, 48pt+ hit
- Top: Now Playing top bar respects the Dynamic Island/notch over the gradient
- Bottom: mini player + tab bar sit above the home indicator; the gradient extends under both
- Now Playing transport stays clear of the home indicator for one-handed reach
- Interactive accent / active thumb-up / play / scrubber (Bright Blue):
#3668FF(pressed#2A55D8) - Brand-heritage blue (gradient base, marketing):
#224099 - Canvas (dark):
#0B0F1C· surface 1#141A2B· surface 2#1E2538 - Canvas (light):
#FFFFFF· surface 1#F4F6FB - Divider:
#28304Adark /#E4E8F2light - Text primary:
#EDF0F7dark /#11162Alight - Text secondary:
#9AA3BDdark · tertiary#646E8Cdark - Thumb-up active fill:
#3668FF· thumb-down active stroke:#9AA3BD(never filled) - Success:
#2BC48Adark · equalizer:#3668FF
-
"Build Pandora's thumb up/down pair in SwiftUI: two 44pt-hit icons flanking the transport row, 26pt glyph. Thumb-up — active: solid fill
#3668FF, stroke#3668FF; idle: hollow, stroke#646E8C. Thumb-down — active: hollow, stroke#9AA3BD(NEVER solid); idle: hollow, stroke#646E8C. On tap, scale1.0 → 1.2 → 1.0over 240ms + light haptic; thumb-down also triggers a track skip. The solid-up / hollow-down asymmetry is mandatory — it encodes that up commits and down corrects." -
"Build Pandora's Now Playing screen: full-screen, NO card frame. Background is a top-down gradient — a color sampled from the album art →
#1A2240→#0B0F1Cfloor. Top bar floating over it: collapse chevron, centered 'STATION' eyebrow (12pt w700 uppercase +1pt) + station name (13pt w700), ⋯ overflow. Centered square album art, 10pt radius, ~76% width, shadowrgba(0,0,0,0.7) 0 24px 50px -16px. Track title 21pt w800, artist 15pt w500#9AA3BD, album 13pt w500#646E8C. Scrubber: 4pt#1E2538track,#3668FFfill, 12pt white knob, tabular timecodes. Transport: thumb-down · skip-back · 66pt circular#3668FFplay (blue-glow shadow) · skip-forward · thumb-up." -
"Create a Pandora station-list row: full-width, 52pt square station art (8pt radius) leading, station name 15pt w700
#EDF0F7, subtitle 12pt#9AA3BD('Now playing · The Glass Hours'). On the currently-playing station: trailing 4-bar animated equalizer in#3668FFand a#1E2538row background (12pt radius). Tap → push Now Playing." -
"Build the Pandora play button: 66pt circle,
#3668FFfill, white play glyph, shadowrgba(54,104,255,0.7) 0 10px 26px -8px(blue glow). Pressed:#2A55D8+ scale 0.96. It is the only solid-blue control besides an active thumb-up." -
"Build the Pandora bottom tab bar: 4 tabs For You / Browse / My Collection / Recents, height 66pt,
#0B0F1Cbg, 0.5pt#28304Atop divider. Active tint#EDF0F7(icon + label), inactive#646E8C. NO pill/indicator — color tint only. Labels Inter 10pt w600 always visible." -
"Build the Pandora mini player: pinned above the tab bar, 56pt tall, blurred
rgba(11,15,28,0.95)with a 0.5pt#28304Atop divider. 40pt square art + one-line title/artist + small play/pause + thumb-up. Tap expands into full Now Playing with a shared-element art transition."
- The thumb up/down IS the product — the Music Genome gesture that shapes every station; never a generic like
- Thumb asymmetry is a hard rule: active thumb-up fills solid
#3668FF; thumb-down stays a hollow outline always - Now Playing is an album-art gradient hero with NO card frame — a color from the art bleeds into the navy floor; chrome floats
#3668FFis the constant — active thumb-up, the circular play button, the scrubber fill, every primary CTA- The canvas is a deep blue-navy
#0B0F1Cderived from Pandora Blue#224099— dark-first, never neutral gray - The station list is the home — genome stations as square-art rows; the currently-playing one has a
#3668FFequalizer - Transport is lean-back: thumb-down · skip-back · big play · skip-forward · thumb-up — few, large, well-spaced
- Re-derive the Now Playing gradient from each track's artwork with a smooth 400ms cross-fade; never tint the art
- Timecodes, durations, and thumb counts are tabular so they never jitter; track title is heavy (800) to read over art
- Buttons and the search field are pills; the play button and thumb hit areas are circular; motion is smooth 200–400ms