--- version: alpha name: Pocket-Casts-design-analysis description: "A podcast player that treats listening as a tidy library: a single bright sky blue interactive color on white or near-black, cool gray text ladders, and a shared token set (primary-ui, primary-text, primary-icon, support, filter, category) that the Android app, the iOS app and the web player all use. Nine selectable themes, including light, dark, extra dark and a rose and indigo pair." status: Draft appVersion: "source snapshot of the public repositories and web player, 2026-10-06" platformsCovered: [iOS, Android, Web] reviewer: "" verifiedAt: "" colors: primary: "#03a9f4" primary-hover: "#50d0f1" primary-active: "#8ae9ff" primary-wash: "#e6f6fe" on-primary: "#ffffff" ink: "#292b2e" ink-secondary: "#8f97a4" paper: "#ffffff" canvas: "#f7f9fa" canvas-soft: "#fafafa" field: "#eff3f5" divider: "#e0e6ea" icon-muted: "#b8c3c9" support-green: "#78d549" support-red: "#f43e37" support-orange: "#ff9d3b" support-yellow: "#feb700" support-blue-deep: "#187adc" filter-purple: "#5d31c4" filter-pink: "#e93673" dark-bg: "#1a1b1d" dark-surface: "#292b2e" dark-surface-raised: "#383a3d" dark-divider: "#393a3c" dark-ink: "#ffffff" dark-ink-secondary: "#9c9fa4" dark-primary: "#40c3ff" typography: body: fontFamily: "'Roboto', sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.4 body-small: fontFamily: "'Roboto', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 label: fontFamily: "'Roboto', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.3 title: fontFamily: "'Roboto', sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.3 display: fontFamily: "'Roboto', sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 1.2 rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 24px pill: 999px spacing: xs: 4px sm: 8px base: 16px lg: 24px xl: 32px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.md}" height: 48px card: backgroundColor: "{colors.paper}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 16px field: backgroundColor: "{colors.field}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" height: 48px card-dark: backgroundColor: "{colors.dark-surface}" textColor: "{colors.dark-ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 16px --- ## Overview Pocket Casts is a podcast player built around a quiet library and strong cover art. The chrome stays neutral (white or near-black with cool gray text), one sky blue marks everything interactive, and the artwork supplies the color. The Android app, the iOS app and the web player share one named token set, so the same role names exist on every platform. [Observed] What defines the look: 1. **One interactive blue.** `#03a9f4` is the icon, link, toggle and primary button color in light themes, brightened to `#40c3ff` in dark. [Measured] 2. **Role-named tokens.** Colors are called `primary-ui-01` to `06`, `primary-text-01` and `02`, `primary-icon-01` to `03`, `primary-field`, `primary-interactive`, `support`, `filter` and `category`, and are generated from one source for all platforms. [Measured] 3. **Artwork leads.** Cover art is large and the player tints itself from the episode artwork, so UI color stays restrained. [Inferred] 4. **Many themes.** Light, dark, extra dark, classic light, rose, indigo, electric and two contrast themes. [Measured] Source for this file: the public Android and iOS repositories and the pocketcasts.com web player stylesheet, read on 2026-10-06. No on-device capture was done. See Known Gaps. ## Core ### Colors | Role | Light | Dark | Where | |------|-------|------|-------| | Page and primary surface (`primary-ui-01`) | `#ffffff` | `#292b2e` | Android and web tokens | | Deepest surface (`primary-ui-02` in dark) | `#ffffff` | `#1a1b1d` | | | Secondary surface (`primary-ui-03`) | `#fafafa` | `#202124` | | | Soft canvas (`primary-ui-04`) | `#f7f9fa` | not read | | | Divider (`primary-ui-05`) | `#e0e6ea` | `#393a3c` | | | Text (`primary-text-01`) | `#292b2e` | `#ffffff` | | | Secondary text (`primary-text-02`) | `#8f97a4` | `#9c9fa4` | | | Interactive and icon | `#03a9f4` | `#40c3ff` (interactive), `#33b8f4` (icon) | | | Interactive hover and active | `#50d0f1`, `#8ae9ff` | not read | | | Selected row wash | `#e6f6fe` | not read | | | Field fill | `#eff3f5` | `#eff3f5` at 10% alpha | | | Support colors | green `#78d549`, red `#f43e37`, orange `#ff9d3b`, yellow `#feb700`, blue `#187adc` | same red | | Twelve filter colors and nineteen category colors also exist, for user filters and podcast categories. Examples are filter purple `#5d31c4` and filter pink `#e93673`. [Measured] ### Typography Android uses the Material type roles with Roboto, and the repository bundles Roboto Regular and Medium plus a display font file for special screens. [Measured] Component code uses sizes of 13, 14, 15, 16, 17 and 18sp. [Measured] The web player's stylesheet uses 14px most often, then 16, 20, 28 and 36px, with weights 400, 500, 600 and 700. The web font family was not captured. [Measured] iOS uses the system font. [Inferred] ### Shape and spacing Modest corners. Android components use 4, 6, 8, 10 and 12dp, with a 24dp pill for large controls. [Measured] The web player uses 4px most, then 8px, 12px, circles and 1000px pills. [Measured] Shadows are light: `0 1px 2.5px` at 25% black on the web player. [Measured] A 4 and 8 spacing grid is used. [Inferred] ### Iconography and motion Simple outline icons that take the secondary icon color and switch to the interactive blue when selected. [Inferred] The app has a confetti component, animated play and pause button, and a pager progress indicator in its component library. [Measured] Motion timing was not measured. ### Themes Nine selectable themes on Android: light, dark, rose, indigo, extra dark, dark contrast, light contrast, electric and classic light. iOS has the same set. [Measured] The web player has a light and a dark token set. [Measured] ## Platform: iOS How the iOS app looks and behaves. Items come from public source files. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Follows the iOS pattern with a navigation controller. [Inferred] Gesture and title behavior were not checked. ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for the main areas (podcasts, filters, discover, profile). The exact items were not confirmed on a device. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. The persistent mini player above the tab bar is the main action surface, and it opens a full-screen player. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Themed alerts and sheets, with the full player presented as a modal. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Themed controls: rounded buttons, selection views, text fields and swipe cells each have a themeable wrapper that reads the active theme. [Measured] ### Text sizing Expected on iOS: Dynamic Type. Dynamic Type support was not checked. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not verified. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not verified. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Custom icon set rather than SF Symbols for most controls. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Pocket Casts has accounts for sync and a paid plan. Whether Sign in with Apple is offered, and how account deletion works, was not checked. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. Themed views read tokens through a theme object, so the app trades some system look for one consistent palette across its nine themes. [Inferred] ## Platform: Android How the Android app looks and behaves. Items come from public source files. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. System back and an up arrow in the themed top app bar. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for podcasts, filters, discover and profile, plus a mini player above it. [Inferred] ### Main action Expected on Android: Floating action button. A mini player and play button are the main action, not a floating action button. Adding a podcast goes through search. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. A themed dialog component, a themed snackbar host and banners exist in the compose library. [Measured] ### Controls Expected on Android: Material switches, pickers, chips. Material components with custom theming, a number stepper, a form field set and a folder color picker. [Measured] ### Text sizing Expected on Android: Font scale. Not checked against the system font scale. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not verified. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not verified. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Custom vector icons with a gradient icon helper. [Measured] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. Material 2 style type roles with an app-wide color object that replaces the Material color scheme. Deviations are the nine themes and artwork-driven player colors. [Inferred] ## Platform: Web The pocketcasts.com web player, whose stylesheet was read. The marketing pages were not measured. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back and in-app links. [Inferred] ### Primary navigation Expected on Web: Top nav or sidebar. A dark navigation color token (`#1e1f1e` background, white text) exists, which suggests a dark rail beside a light content area. [Inferred] ### Main action Expected on Web: Page-level button. Play controls in a persistent bottom player bar. [Inferred] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Modal and popup menu styles exist in the stylesheet, with a popup background of white and a translucent scrim. [Measured] ### Controls Expected on Web: Native or custom. Custom form controls and buttons, with disabled states `#f2f4f5` and text `#b8c3c9`. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are in px with some em, so they follow zoom. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Not verified. [Inferred] ### Insets and system bars Expected on Web: Viewport, scrollbars. Responsive layout, not measured at several widths. [Inferred] ### Icons Expected on Web: Any. An icon component set drawn as SVG. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable for browsing, accounts are required for sync. [Inferred] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. Follows web norms and reuses the same `--token-primary-ui-01` style names as the apps. A legacy token group (`--legacy-theme-*`) still exists beside the newer one. [Measured] ## Cross-platform consistency Consistent across platforms: the role-named token set, the sky blue interactive color, white and near-black surfaces, and the themes. [Measured] Intentionally different: the web player uses a dark navigation rail even on the light theme, and each native app uses its own tab and player structure. [Inferred] ## Do's and Don'ts ### Do - Use one interactive blue and let artwork carry the color. - Name colors by role (surface, text, icon, interactive) so themes can swap them. - Brighten the interactive color in dark themes (`#40c3ff`). - Keep corners modest, 4 to 12 for components. ### Don't - Don't use the blue for body text on white. It measures about 2.6 to 1. - Don't introduce a second brand color. Support colors are for status only. - Don't tint chrome from artwork. Only the player does that. ## Known Gaps - No on-device capture was done. All app statements come from reading source and a stylesheet. - The interactive blue `#03a9f4` against white measures about 2.6 to 1, well below the 4.5 to 1 target for normal text, and white text on the primary button has the same ratio. - Web font family, iOS spacing and corner radii, and motion values were not measured. - Dark values for hover, active and soft canvas were not read. - Account deletion and store policy rules were not verified for either app.