# Design System Inspiration of Pandora (iOS)

## 1. Visual Theme & Atmosphere

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 `#224099`** deepens to a near-navy canvas (`#0B0F1C`) — dark-first, never neutral gray
- **Bright Blue `#3668FF`** is 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

## 2. Color Palette & Roles

### Primary (Interactive)
- **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.

### Canvas & Surfaces (Dark Mode — primary)
- **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 → `#1A2240` mid → `#0B0F1C` floor.

### Canvas & Surfaces (Light Mode)
- **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
- **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.

### Thumb States (signature)

| 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) |

### Semantic

| 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` |

### Semantic Notes
- **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.

## 3. Typography Rules

### Font Family
- **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.

### Hierarchy

| 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 |

### Principles
- **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)

## 4. Component Stylings

### Buttons

**Primary Button (Create station / Done)**
- Shape: pill, 500pt corner radius (Pandora's CTA shape)
- Background: `#3668FF` (Bright Blue)
- Text: `#FFFFFF` Inter 16pt weight 700
- Height: 50pt
- Pressed: background `#2A55D8` + scale 0.98
- Disabled: `#3668FF` at 40% opacity

**Outline Button (Shuffle)**
- Background: transparent
- Border: 1.5pt `#9AA3BD` (text-secondary)
- Text: `#EDF0F7` Inter 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

### Thumb Up / Down (the signature atom)
- 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.0` over 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

### Now Playing (the signature surface)
- Full-screen, NO card frame
- **Album-art gradient hero**: a dominant color sampled from the current artwork → `#1A2240` mid → `#0B0F1C` floor, 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

### Station List Row (the home atom)
- 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 2` background fill

### Mini Player
- 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

### Navigation

**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

### Input Fields

**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 `#3668FF` border

### Distinctive Components

**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 `#3668FF` marking 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.

## 5. Layout Principles

### Spacing System
- 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

### Grid & Container
- 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

### Whitespace Philosophy
- **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

### Border Radius Scale
- 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

## 6. Depth & Elevation

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.

### Motion
- **Thumb tap**: icon scales `1.0 → 1.2 → 1.0` over 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.0` over 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.0` on 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

## 7. Do's and Don'ts

### Do
- 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 `#3668FF` consistently 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
- 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 `#0B0F1C` from 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

## 8. Responsive Behavior

### Device Sizes
| 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 |

### Dynamic Type
- 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)

### Orientation
- iPhone: portrait-primary; Now Playing supports landscape (art + transport reflow side-by-side)
- iPad: full rotation; the split layout reflows

### Touch Targets
- 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

### Safe Area Handling
- 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

## 9. Agent Prompt Guide

### Quick Color Reference
- 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: `#28304A` dark / `#E4E8F2` light
- Text primary: `#EDF0F7` dark / `#11162A` light
- Text secondary: `#9AA3BD` dark · tertiary `#646E8C` dark
- Thumb-up active fill: `#3668FF` · thumb-down active stroke: `#9AA3BD` (never filled)
- Success: `#2BC48A` dark · equalizer: `#3668FF`

### Example Component Prompts
- "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, scale `1.0 → 1.2 → 1.0` over 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` → `#0B0F1C` floor. 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, shadow `rgba(0,0,0,0.7) 0 24px 50px -16px`. Track title 21pt w800, artist 15pt w500 `#9AA3BD`, album 13pt w500 `#646E8C`. Scrubber: 4pt `#1E2538` track, `#3668FF` fill, 12pt white knob, tabular timecodes. Transport: thumb-down · skip-back · 66pt circular `#3668FF` play (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 `#3668FF` and a `#1E2538` row background (12pt radius). Tap → push Now Playing."

- "Build the Pandora play button: 66pt circle, `#3668FF` fill, white play glyph, shadow `rgba(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, `#0B0F1C` bg, 0.5pt `#28304A` top 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 `#28304A` top 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."

### Iteration Guide
1. The thumb up/down IS the product — the Music Genome gesture that shapes every station; never a generic like
2. Thumb asymmetry is a hard rule: active thumb-up fills solid `#3668FF`; thumb-down stays a hollow outline always
3. Now Playing is an album-art gradient hero with NO card frame — a color from the art bleeds into the navy floor; chrome floats
4. `#3668FF` is the constant — active thumb-up, the circular play button, the scrubber fill, every primary CTA
5. The canvas is a deep blue-navy `#0B0F1C` derived from Pandora Blue `#224099` — dark-first, never neutral gray
6. The station list is the home — genome stations as square-art rows; the currently-playing one has a `#3668FF` equalizer
7. Transport is lean-back: thumb-down · skip-back · big play · skip-forward · thumb-up — few, large, well-spaced
8. Re-derive the Now Playing gradient from each track's artwork with a smooth 400ms cross-fade; never tint the art
9. Timecodes, durations, and thumb counts are tabular so they never jitter; track title is heavy (800) to read over art
10. Buttons and the search field are pills; the play button and thumb hit areas are circular; motion is smooth 200–400ms