At a glance
23tokens
8type steps
1radius steps
14pxspacing base
Pocket Casts, in one page
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
Do's and don'ts
Do
- Use near-black
#1A1A1Afor the dark canvas — NOT pure#000000 - Keep Pocket Casts Red
#F43E37as 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
#000000as the canvas —#1A1A1Ais 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Pocket Casts design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- single bold Red accent: #f43e37
- Pocket Casts Red: #f43e37
- Red Pressed: #d32b25
- Theme Tint (per-podcast): #e0533c
- Dark Canvas: #1a1a1a
- Dark Surface 1: #232323
- Dark Surface 2: #2e2e2e
- Dark Divider: #383838
- Canvas White: #ffffff
- Surface Gray Light: #f2f2f4
Type:
- families: SF Pro Text, SF Pro Display, Inter, Fallback Stack
- scale: 10, 12, 14, 15, 16, 18, 22, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 10
- elevation: Shadow: `rgba(theme, 0.55) 0 8px 24px -6px` under the play button only | Active reorder: row lifts with `rgba(0,0,0,0.4) 0 8px 16px` shadow | Knob: 13pt circle `#FFFFFF`, `rgba(0,0,0,0.5) 0 1px 4px` shadow
Spacing: 14
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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) (
#E0533Cexample): 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 |
Type scaleRead the full spec
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.
Components and layoutRead the full spec
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:
#FFFFFFdark /#1A1A1Alight, 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 -6pxunder 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:
#F43E37count 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
#383838between 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 16pxshadow
Now Playing Player
Layout (top → bottom)
- Top bar: collapse chevron (leading), "NOW PLAYING" eyebrow (center), ⋯ menu (trailing)
- Cover art: large rounded-corner image, ~70% screen width, 8pt corner radius, theme-tint glow shadow
- Episode title (22pt w700) + show name (14pt w500 theme tint)
- Scrubber: 4pt track
#2E2E2E, fill = theme tint, 13pt circular white knob; timecodes below (current / -remaining) - Transport row: skip-back-15, ⏮ previous, ◉ circular play (68pt, theme tint), ⏭ next, skip-forward-30
- 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 4pxshadow - 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)withblur(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
magnifyingglass16pt#757575 - Placeholder: "Search shows & episodes" 15pt
#757575 - Focus: 1.5pt
#F43E37border
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
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-pocket-casts {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1a1a1a;
--heading-color: #1a1a1a;
--link-color: #9b6d00;
--link-hover-color: #684900;
--border-color: #d6d6d6;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(26,26,26,0.06);
--card-hover-shadow: 0 6px 18px rgba(26,26,26,0.12);
--header-bg: #1a1a1a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6a6a6a;
--button-bg: #ffb300;
--button-text-color: #000000;
--button-hover-bg: #cc8f00;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #1a1a1a;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d6d6d6;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1a1a1a;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- overcast 92.2%
- zwift 90.5%
- coffee meets bagel 87.3%
- sanu 82.5%
- vero 79.2%
Where this came from
- Source document
ios/design-md/music/pocket-casts/DESIGN.md· 25.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.