# Design System Inspiration of Pocket Casts (iOS)

## 1. Visual Theme & Atmosphere

Pocket Casts is the connoisseur's podcast app, and its iOS design reflects that: a confident, dark-first interface where the **circular cover-art motif**, the **single bold Red accent** (`#F43E37`), and a **per-podcast color theme** sampled from each show's artwork combine into something instantly recognizable. Open the app and you land on a grid of subscribed podcasts — square artwork tiles on a near-black canvas (`#1A1A1A`, not pure black) — then tap any show and the entire screen subtly re-tints to a color drawn from that podcast's cover. Pocket Casts Red is the brand constant (tab-bar selection, the Subscribe button, unplayed badges), but the moment you start listening, the Now Playing screen becomes a small bespoke environment colored by the show you chose.

The signature screen is the **full-screen Now Playing player**: a large rounded-corner cover image (often shown with the brand's circular "play ring" motif), the episode title and show name, a thin scrubber with a circular knob, and a transport row anchored by a big circular play button. Below the transport sits a row of action chips — Up Next, playback speed, Trim Silence, Star, Mark Played, Effects, AirPlay. The scrubber fill, the play button, and any active chip all take the **theme tint** (here `#E0533C`), while the canvas and chrome stay monochrome so the cover art and the colored controls do the talking. The second-most-iconic surface is the **episode list** — date-stamped rows with a small artwork thumbnail, a one-line title, duration/remaining metadata, and a circular play/queue button on the trailing edge.

Pocket Casts' personality is "precise, premium, dark." There are no playful gradients in the chrome, no skeuomorphism — just crisp Inter-style type (SF Pro on device), generous tap targets, pill-shaped buttons, and a disciplined Red. The most distinctive structural decisions are: (1) **circular geometry** — the play button, the speed/skip controls, episode-row play buttons, and the historic logo are all circles; (2) **per-podcast theming** — the app extracts a dominant color from cover art and applies it as the screen accent so each show feels like its own space; (3) **the Up Next queue** — a persistent, reorderable play queue surfaced from the Now Playing screen and the mini-player; and (4) **Trim Silence + Volume Boost** — power-user playback effects exposed as first-class toggles, a defining Pocket Casts feature.

**Key Characteristics:**
- Near-black canvas (`#1A1A1A`) dark / paper-white (`#FFFFFF`) light — dark is the canonical theme
- Pocket Casts Red (`#F43E37`) as the single brand accent — tab selection, Subscribe, unplayed badge
- Per-podcast theme tint sampled from cover art — re-colors scrubber, play button, active chips
- Circular geometry everywhere — play button, transport controls, episode-row play buttons, logo
- Full-screen Now Playing player with large cover art + thin scrubber + circular transport
- Up Next queue — persistent, reorderable, surfaced from player and mini-player
- Trim Silence + Volume Boost — power-user playback effects as first-class toggles
- Episode list rows — date eyebrow, artwork thumb, one-line title, duration meta, circular action
- Filters — smart episode lists (New Releases, In Progress, Starred) as a dedicated tab
- Mini-player — a persistent bottom strip above the tab bar with artwork, title, play/pause
- Pill-shaped buttons (Subscribe, Play Episode) with full 999pt corner radius
- Discover tab — curated podcast charts, networks, and categories

## 2. Color Palette & Roles

### Primary (Interactive)
- **Pocket Casts Red** (`#F43E37`): The brand accent — tab-bar selected state, Subscribe button, unplayed-episode dot, primary CTAs, brand logomark.
- **Red Pressed** (`#D32B25`): Pressed/active state of Red buttons.
- **Theme Tint (per-podcast)** (`#E0533C` example): A color extracted from the open podcast's cover art. Applied to the Now Playing scrubber fill, the circular play button, and active action chips. Varies per show — this doc uses a warm coral as the representative example.

### Canvas & Surfaces (Dark Mode — canonical)
- **Dark Canvas** (`#1A1A1A`): Primary dark canvas — Pocket Casts' signature near-black, NOT pure `#000000`.
- **Dark Surface 1** (`#232323`): Cards, list backgrounds, settings groups, elevated rows.
- **Dark Surface 2** (`#2E2E2E`): Scrubber track, inactive toggle track, pressed rows, chips.
- **Dark Divider** (`#383838`): Hairline separators between episode rows and setting rows.

### Canvas & Surfaces (Light Mode)
- **Canvas White** (`#FFFFFF`): Primary light canvas.
- **Surface Gray Light** (`#F2F2F4`): Cards, grouped list backgrounds.
- **Surface Pressed Light** (`#E6E6E8`): Pressed rows.
- **Divider Light** (`#E2E2E4`): Hairline separators.

### Text
- **Text Primary Dark** (`#FFFFFF`): Episode titles, screen titles, transport icons on dark.
- **Text Secondary Dark** (`#B8B8B8`): Show names, duration, supporting metadata.
- **Text Tertiary Dark** (`#757575`): Date eyebrows, disabled, very low-emphasis.
- **Text Primary Light** (`#1A1A1A`): Primary text on light.
- **Text Secondary Light** (`#6B6B6B`): Secondary text on light.

### Accent & Semantic
- **Info Blue** (`#03A9F4`): Links, informational highlights, "New" network labels.
- **Played Green** (`#78D549`): Played/complete checkmark, success states, download-complete tick.
- **Star Gold** (`#FBC02D`): Starred-episode indicator.
- **Error Red** (`#F43E37`): Reuses brand Red for destructive/error (delete download, remove from Up Next).
- **Warning Amber** (`#FFB300`): Storage-warning, sync-conflict banners.
- **Download Blue** (`#03A9F4`): Active-download progress ring.

### Theme Tint Examples (per-podcast accents — illustrative)
Pocket Casts derives a tint from each show's cover art. Representative palette:

| Show Type | Theme Tint | Used For |
|-----------|-----------|----------|
| Warm / news | `#E0533C` | Scrubber, play button, active chips |
| Cool / tech | `#3E7BC2` | Scrubber, play button, active chips |
| Green / nature | `#3FA66A` | Scrubber, play button, active chips |
| Purple / culture | `#7E57C2` | Scrubber, play button, active chips |
| Pink / lifestyle | `#D6457E` | Scrubber, play button, active chips |

## 3. Typography Rules

### Font Family
- **iOS System**: `SF Pro Text` / `SF Pro Display` (San Francisco) — Pocket Casts uses the system face on iOS for native rendering and Dynamic Type.
- **Web / Documentation Fallback**: `Inter` (by Rasmus Andersson, SIL OFL) — the closest free face for static specs and previews.
- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Numerals**: Tabular figures for timecodes and durations so digits don't shift while scrubbing.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title | SF Pro Display | 32pt | 800 | 1.2 | -0.4pt | "Podcasts", "Discover" large nav title |
| Now Playing Episode | SF Pro Display | 22pt | 700 | 1.25 | -0.3pt | Episode title on player |
| Section Header | SF Pro Display | 22pt | 700 | 1.3 | -0.2pt | "Up Next", "New Releases" |
| Episode Title | SF Pro Text | 18pt | 700 | 1.3 | -0.1pt | Episode-detail title |
| List Row Title | SF Pro Text | 15pt | 600 | 1.35 | 0pt | Episode-row title (1 line, truncated) |
| Body | SF Pro Text | 16pt | 400 | 1.5 | 0pt | Show notes, descriptions |
| Show Name | SF Pro Text | 14pt | 500 | 1.4 | 0pt | Show name under episode title (theme tint) |
| Metadata | SF Pro Text | 14pt | 400 | 1.4 | 0pt | Duration, "42 min left", "Downloaded" |
| Date Eyebrow | SF Pro Text | 12pt | 700 | 1.3 | 0.6pt | "SUN · OCT 13" uppercase row eyebrow |
| Eyebrow / Player Label | SF Pro Text | 12pt | 700 | 1.0 | 1.0pt | "NOW PLAYING" uppercase |
| Timecode | SF Mono / SF Pro | 12pt | 500 | 1.0 | 0pt | "14:22", "-19:48" tabular |
| Button | SF Pro Text | 16pt | 700 | 1.0 | 0pt | Subscribe / Play Episode |
| Chip Label | SF Pro Text | 10pt | 600 | 1.0 | 0.1pt | "Up Next", "Trim", "1.2×" |
| Tab Label | SF Pro Text | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Caption | SF Pro Text | 12pt | 400 | 1.4 | 0pt | Small print, sync timestamps |

### Principles
- **Tabular timecodes**: All durations and scrubber timecodes use tabular figures so they don't jitter as time advances.
- **One-line episode titles in lists**: Episode-row titles truncate to a single line with ellipsis; the full title appears on the detail/player screen.
- **Weight concentrated at 400 / 500 / 600 / 700 / 800**: Regular body, medium for show names, semibold for row titles, bold for episode/section titles, heavy for the large nav title.
- **Uppercase eyebrows**: Date stamps and the "NOW PLAYING" label are uppercase with positive tracking — the only uppercase type in the system.
- **Dynamic Type first-class**: Titles, body, metadata scale; tab labels, chip labels, timecodes stay fixed for layout stability.

## 4. Component Stylings

### Buttons

**Primary Button (Subscribe)**
- Shape: Pill, 999pt corner radius
- Background: `#F43E37` (Pocket Casts Red)
- Text: `#FFFFFF`, SF Pro Text 16pt weight 700
- Padding: 14pt vertical, 28pt horizontal
- Pressed: background `#D32B25` + scale 0.98
- After subscribe: collapses to a "Subscribed ✓" ghost/outline state

**Theme-Tint Button (Play Episode)**
- Shape: Pill, 999pt corner radius
- Background: per-podcast theme tint (e.g. `#E0533C`)
- Text: `#FFFFFF`, SF Pro Text 16pt weight 700
- Used for the primary play action on a podcast/episode detail screen
- Pressed: tint darkened 12% + scale 0.98

**Secondary / Outline Button (Mark Played / Download)**
- Background: transparent
- Border: 1.5pt `#B8B8B8` (dark) / `#9A9A9A` (light)
- Text: `#FFFFFF` dark / `#1A1A1A` light, SF Pro Text 14pt weight 600
- Corner radius: 999pt (pill)
- Pressed: 8% white overlay (dark) / 6% black overlay (light)

**Text Button (Show all episodes)**
- Text: `#F43E37`, SF Pro Text 14pt weight 700
- No background, no underline
- Pressed: opacity 0.6

**Circular Transport Button (Play / Pause)**
- Size: 68pt diameter (main play), 44pt (skip/effects)
- Background: theme tint (play), transparent (skip)
- Icon: 26pt white triangle/pause-bars (play); 30pt stroked skip glyph
- Shadow: `rgba(theme, 0.55) 0 8px 24px -6px` under the play button only
- Pressed: scale 0.94

**Episode-Row Play Button**
- Size: 30pt circle
- Border: 1.5pt `#B8B8B8`
- Icon: 12pt filled triangle `#FFFFFF`
- On play: morphs to a small pause/progress ring in theme tint

### Cards & Tiles

**Podcast Grid Tile**
- Square cover art, 8pt corner radius
- Grid: 3 columns on iPhone, 8pt gutter
- Unplayed badge: `#F43E37` count pill, top-right, 18pt circle
- Pressed: scale 0.97 + 8% dim

**Episode List Row**
- Height: ~80pt
- Leading: 52pt artwork thumbnail, 6pt corner radius
- Date eyebrow: 12pt w700 uppercase `#757575`
- Title: 15pt w600 `#FFFFFF`, one line, ellipsis
- Metadata: 14pt w400 `#B8B8B8` ("34 min · ↓ Downloaded")
- Trailing: 30pt circular play/queue button
- Divider: 1pt `#383838` between rows
- Swipe actions: leading = Up Next (theme tint); trailing = Archive / Download

**Up Next Queue Row**
- Drag-reorder handle (≡) leading, 24pt `#757575`
- 40pt artwork thumb
- Title (1 line) + show name
- Trailing: remove (×) button
- Active reorder: row lifts with `rgba(0,0,0,0.4) 0 8px 16px` shadow

### Now Playing Player

**Layout (top → bottom)**
1. Top bar: collapse chevron (leading), "NOW PLAYING" eyebrow (center), ⋯ menu (trailing)
2. Cover art: large rounded-corner image, ~70% screen width, 8pt corner radius, theme-tint glow shadow
3. Episode title (22pt w700) + show name (14pt w500 theme tint)
4. Scrubber: 4pt track `#2E2E2E`, fill = theme tint, 13pt circular white knob; timecodes below (current / -remaining)
5. Transport row: skip-back-15, ⏮ previous, ◉ circular play (68pt, theme tint), ⏭ next, skip-forward-30
6. Action chip row: Up Next · Speed (1.2×) · Trim Silence · Star · Effects

**Scrubber**
- Track: 4pt height, `#2E2E2E`, 2pt corner radius
- Fill: theme tint, 2pt corner radius
- Knob: 13pt circle `#FFFFFF`, `rgba(0,0,0,0.5) 0 1px 4px` shadow
- Scrubbing: knob grows to 18pt; haptic tick on 1s boundaries

**Action Chip**
- Vertical icon (19pt stroked) + label (10pt w600) stack
- Inactive: `#B8B8B8`
- Active (Trim on, Up Next has items): theme tint
- Speed chip shows the numeric rate ("1.2×") instead of an icon when non-default

### Playback Effects (signature)

**Trim Silence Toggle**
- Row: label (15pt w600) + sub ("Shortens silent gaps in talk audio", 12pt `#B8B8B8`)
- Switch: 50×30pt, ON track `#F43E37`, OFF track `#2E2E2E`, 24pt white knob
- Three intensity levels when expanded: Mild / Medium / Mad Max

**Volume Boost Toggle**
- Same switch styling; sub "Levels quiet voices for noisy rooms"

**Playback Speed Control**
- Stepper from 0.5× to 3.0× in 0.1 increments; current value in a theme-tint pill

### Navigation

**Bottom Tab Bar**
- Height: 52pt + safe area
- Background: `rgba(26,26,26,0.94)` with `blur(20px)` + 0.5pt top border `#383838`
- Tabs (4): Podcasts, Filters, Discover, Profile
- Icon size: 22pt
- Active: `#F43E37` (filled glyph), Inactive: `#757575` (stroked glyph)
- No tint pill — color + fill change only
- Labels: SF Pro Text 10pt w600, always shown

**Mini-Player**
- Persistent strip directly above the tab bar (~64pt tall)
- Background: theme tint at full or as a slim accent bar; artwork thumb (44pt) + title + play/pause
- Tap: expands to full Now Playing with a 300ms upward sheet transition
- Swipe down on full player: collapses back to mini-player

**Top Nav (Podcast Detail)**
- Large title collapses to compact on scroll
- Leading: back chevron; Trailing: Settings gear + ⋯ menu

### Input Fields

**Search Bar (Discover / Filters)**
- Height: 40pt
- Background: `#2E2E2E` (dark) / `#EDEDED` (light)
- Corner radius: 10pt
- Leading `magnifyingglass` 16pt `#757575`
- Placeholder: "Search shows & episodes" 15pt `#757575`
- Focus: 1.5pt `#F43E37` border

**Filter Builder**
- Smart-filter rules (Episode status, Download status, Media type, Release date)
- Each rule a tappable row opening a sheet of options
- Filter color picker: choose accent for that custom filter (one of ~12 swatches)

### Distinctive Components

**Per-Podcast Theme Tint Engine**
- On opening a podcast, Pocket Casts extracts a dominant accent from the cover art
- That tint colors: scrubber fill, circular play button, active chips, links on the detail screen, the mini-player accent
- Falls back to brand Red `#F43E37` when extraction yields low-contrast color

**Circular Play Ring**
- The brand's recurring motif: a thick white ring with a play triangle — appears in the logo, empty states, and as a loading affordance

**Up Next Queue**
- Reorderable list; "Play Next" vs "Play Last" insert options from any episode's swipe/long-press
- Surfaced from the Now Playing chip and the mini-player

**Filters (Smart Episode Lists)**
- Prebuilt: New Releases, In Progress, Starred; plus user-built custom filters
- Each filter has its own accent color and icon, shown as colored cards in the Filters tab

**Listening History & Stats**
- "You've listened for 312 hours" style stat cards in Profile
- Time-saved-by-Trim-Silence and speed counters — a signature Pocket Casts flex

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 64
- Episode-row vertical padding: 14pt
- Player horizontal inset: 36pt (cover art breathing room)
- Screen content inset: 16pt horizontal (lists), 20pt (player chrome)

### Grid & Container
- iPhone: podcast grid = 3 columns, 8pt gutter, 16pt outer margin
- iPad: podcast grid = 5–6 columns; player centered max-width 520pt
- Episode lists: full-width rows with 16pt inset, 1pt dividers
- Mini-player: full-width strip, edge-to-edge above tab bar

### Whitespace Philosophy
- **Art-forward**: cover artwork is given maximum size and breathing room; chrome is minimal so artwork and the theme tint dominate
- **Dense but tappable lists**: episode rows pack date + title + meta + action in ~80pt, but every actionable element has ≥44pt hit area
- **Player calm**: the Now Playing screen is uncluttered — art, title, scrubber, transport, chips, nothing else

### Border Radius Scale
- Square (0pt): dividers, full-bleed art on some headers
- Subtle (4pt): scrubber track/fill, small badges
- Small (6pt): episode-row artwork thumbnails
- Standard (8pt): cover art tiles, large Now Playing cover, cards
- Comfortable (12–16pt): bottom sheets, modals, search field
- Pill (999pt): all buttons (Subscribe, Play Episode, outline)
- Circle (50%): play button, transport controls, episode-row play, logo, avatars

## 6. Depth & Elevation

Pocket Casts is mostly flat; shadow is reserved for the play button glow, floating sheets, and drag-reorder.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Canvas, list rows, settings groups |
| Tint Glow (Level 1) | `rgba(themeTint, 0.55) 0 8px 24px -6px` | Circular play button, large cover art glow |
| Card (Level 2) | `rgba(0,0,0,0.4) 0 8px 16px` | Drag-reorder lift in Up Next |
| Sheet (Level 3) | `rgba(0,0,0,0.5) 0 -6px 28px` | Bottom sheets (Effects, Up Next, sort menu) |
| Mini→Full | sheet slide 300ms | Mini-player expands to full Now Playing |
| Modal Overlay | `rgba(0,0,0,0.55)` | Dim behind sheets/modals |

**Shadow Philosophy**: The only "glow" in the app is the theme-tinted shadow under the circular play button and large cover — it makes the player's focal point feel alive and on-brand. Everything else is flat: dark canvas with hairline `#383838` dividers. On the dark theme, sheet shadows are weak, so sheets also get a slightly lighter `#232323` top surface to read as elevated.

### Motion
- **Play/Pause**: triangle↔bars icon morph 200ms ease-in-out; button scale 0.94 on press
- **Scrubber drag**: knob scales 13→18pt over 120ms; 1:1 finger tracking; soft haptic tick at boundaries
- **Mini-player → Full player**: upward sheet slide 300ms ease-out; artwork hero-transitions to the large cover
- **Theme-tint cross-fade**: on opening a new podcast, accent colors cross-fade over 250ms ease-out (no hard cut)
- **Episode-row swipe**: 1:1 reveal of swipe actions; commit threshold 50%; spring snap 250ms damping 0.85
- **Up Next reorder**: 60fps drag; neighbors shift 200ms ease-out; drop snaps 150ms + soft haptic
- **Tab change**: instant icon fill swap to Red; no slide
- **Download progress**: circular ring fills 0→360° tied to bytes; completes with a `#78D549` tick pop (150ms)
- **Pull-to-refresh (episode list)**: theme-tint spinner; 200ms settle
- **Haptic feedback**: soft impact on play, scrubber boundary ticks, reorder pickup/drop, toggle flip

## 7. Do's and Don'ts

### Do
- Use near-black `#1A1A1A` for the dark canvas — NOT pure `#000000`
- Keep Pocket Casts Red `#F43E37` as the single brand accent (tab selection, Subscribe, unplayed badge)
- Sample a per-podcast theme tint from cover art and apply it to scrubber, play button, active chips
- Make the play button and transport controls circular — circular geometry is core brand
- Give cover art maximum size and a subtle theme-tint glow on the Now Playing screen
- Use pill (999pt) corner radius for all buttons
- Show durations and timecodes in tabular figures so digits don't jitter
- Expose Trim Silence and Volume Boost as first-class toggles — they're signature features
- Surface Up Next from the player and mini-player as a reorderable queue
- Truncate episode-row titles to one line; show the full title on detail/player
- Cross-fade the theme tint when switching podcasts — never a hard color cut

### Don't
- Don't use pure black `#000000` as the canvas — `#1A1A1A` is the signature
- Don't introduce a second brand accent — Red is it; per-podcast tint is the only other color
- Don't make the play button rectangular — it must be a circle
- Don't add a tint pill behind the active tab — Pocket Casts uses color + fill change only
- Don't let chrome compete with cover art — keep surfaces monochrome
- Don't use sharp corners on buttons — everything is pill-shaped
- Don't hard-cut the theme tint when changing shows — always cross-fade 250ms
- Don't bury Trim Silence in deep settings — it belongs on the player chip row
- Don't wrap episode-row titles to multiple lines in lists — one line, ellipsis
- Don't animate aggressively — motion is quiet, 150–300ms ease ranges
- Don't use proportional figures for timecodes — they shift while scrubbing

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Podcast grid 3 cols; cover art ~62% width on player |
| iPhone 13/14/15 | 390pt | Standard layout; cover art ~70% width |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in player top bar |
| iPhone 15/16 Pro Max | 430pt | Larger cover art; grid stays 3 cols with wider tiles |
| iPad (portrait) | 768pt | Podcast grid 5 cols; player centered max 520pt with side padding |
| iPad (landscape) | 1024pt+ | Sidebar nav (Podcasts/Filters/Discover/Profile) + detail pane; player as right-side panel |

### Dynamic Type
- Screen title, episode title, body, metadata: full scale
- Tab labels, chip labels, timecodes, date eyebrows: FIXED (layout-sensitive)
- Scrubber and transport stay fixed-size; only text scales

### Orientation
- Player and lists support rotation
- iPad landscape adopts a 2-column split (list + detail) and a persistent right-edge player
- Cover art re-centers on rotation; aspect ratio preserved

### Touch Targets
- Circular play button: 68pt (well above minimum)
- Transport skip/effects: 44pt hit
- Episode-row play button: 30pt glyph, 44pt hit
- Tab bar icons: 22pt glyph, 44pt hit
- Toggle switches: 50×30pt control, 44pt row hit

### Safe Area Handling
- Top: player top bar respects safe area and Dynamic Island
- Bottom: mini-player + tab bar + home indicator respected
- Mini-player sits directly above the tab bar inside the safe area
- Sides: 16pt list inset; player chrome 20pt

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (dark): `#1A1A1A`
- Canvas (light): `#FFFFFF`
- Surface 1: `#232323`
- Surface 2: `#2E2E2E`
- Divider: `#383838`
- Pocket Casts Red: `#F43E37`
- Red pressed: `#D32B25`
- Theme tint (example): `#E0533C`
- Text primary: `#FFFFFF` dark / `#1A1A1A` light
- Text secondary: `#B8B8B8`
- Text tertiary: `#757575`
- Info blue: `#03A9F4`
- Played green: `#78D549`
- Star gold: `#FBC02D`

### Example Component Prompts
- "Build the Pocket Casts Now Playing screen in SwiftUI: near-black `#1A1A1A` canvas. Top bar — collapse chevron (leading), 'NOW PLAYING' eyebrow SF Pro 12pt w700 tracking 1pt `#B8B8B8` (center), ⋯ menu (trailing). Large cover art ~70% width, 8pt corner radius, with a `rgba(224,83,60,0.55) 0 8px 24px -6px` glow. Episode title SF Pro 22pt w700 `#FFFFFF`, show name SF Pro 14pt w500 in theme tint `#E0533C`. Scrubber: 4pt track `#2E2E2E`, fill `#E0533C`, 13pt white circular knob, timecodes below in tabular 12pt `#B8B8B8`. Transport row: skip-back-15, previous, 68pt circular play button (`#E0533C` bg, white triangle), next, skip-forward-30."

- "Create a Pocket Casts episode list row: 80pt tall, leading 52pt artwork thumbnail 6pt corner radius. Date eyebrow SF Pro 12pt w700 uppercase tracking 0.6pt `#757575` ('SUN · OCT 13'). Title SF Pro 15pt w600 `#FFFFFF`, one line truncated. Metadata SF Pro 14pt w400 `#B8B8B8` ('34 min · ↓ Downloaded'). Trailing 30pt circular play button with 1.5pt `#B8B8B8` border and 12pt white filled triangle. 1pt `#383838` bottom divider. Leading swipe = Up Next (theme tint), trailing swipe = Archive."

- "Render the Pocket Casts bottom tab bar: 52pt + safe area, `rgba(26,26,26,0.94)` background with 20px blur and 0.5pt `#383838` top border. 4 tabs — Podcasts, Filters, Discover, Profile. 22pt icons. Active = `#F43E37` filled glyph; inactive = `#757575` stroked glyph. No tint pill. Labels SF Pro 10pt w600 always shown."

- "Build the Pocket Casts Trim Silence row: label 'Trim Silence' SF Pro 15pt w600 `#FFFFFF`, sub 'Shortens silent gaps in talk audio' SF Pro 12pt `#B8B8B8`. Trailing switch 50×30pt: ON track `#F43E37`, OFF track `#2E2E2E`, 24pt white knob, 200ms slide. 1pt `#383838` bottom divider."

- "Create the Pocket Casts mini-player: persistent strip ~64pt above the tab bar, theme-tint `#E0533C` accent. Leading 44pt artwork thumb, episode title SF Pro 14pt w600 `#FFFFFF` (1 line) + show name SF Pro 12pt `#B8B8B8`, trailing circular play/pause 22pt. Tap expands to full Now Playing with a 300ms upward sheet slide; artwork hero-transitions to the large cover."

- "Render a Pocket Casts podcast grid: 3 columns, 8pt gutter, 16pt outer margin. Each tile = square cover art, 8pt corner radius. Unplayed count badge: `#F43E37` 18pt circle, top-right, white SF Pro 11pt w700. Press = scale 0.97 + 8% dim."

### Iteration Guide
1. Canvas is near-black `#1A1A1A` in dark (canonical), pure white `#FFFFFF` in light — NEVER pure black
2. Pocket Casts Red `#F43E37` is the single brand accent — tab selection, Subscribe, unplayed badge
3. The Now Playing screen re-tints to a per-podcast color sampled from cover art (e.g. `#E0533C`) — scrubber, play button, active chips
4. Circular geometry is core — play button, transport, episode-row play, logo are all circles
5. Buttons are pill-shaped (999pt corner radius), not rounded rectangles
6. Cover art is given maximum size with a subtle theme-tint glow; chrome stays monochrome
7. Trim Silence + Volume Boost are first-class toggles on the player chip row — signature features
8. Up Next is a reorderable queue surfaced from the player and the mini-player
9. Timecodes and durations use tabular figures so digits don't jitter while scrubbing
10. The theme tint cross-fades 250ms when switching shows — never a hard color cut