Pocket Casts Mobile — design system & UI screens
This is a podcast player for listening to audio episodes with playback customization options. The screen displays album artwork for a podcast called "ologies" at the top, followed by three adjustable playback effects: Speed control with ±/1x buttons, Trim Silence toggle with intensity levels (Mild/Medium/Mad Max), and Volume Boost toggle. Each control is laid out vertically with descriptions and icons.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/pocket-casts-mobile.
Decoded design system
Pocket Casts Mobile's decoded design system: background #000000, text #FFFFFF, accent #FF3401, link #FF3401, primary #FF3401; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #FF3401 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #000000 |
| surface | #0F0F0F |
| border | #262626 |
| text | #FFFFFF |
| text_muted | #9E9E9E |
| primary | #FF3401 |
| accent | #FF3401 |
| link | #FF3401 |
| button_bg | #FF3401 |
| button_text | #000000 |
Using these colors
- Action color
#FF3401— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#FF3401— one role, not several (the action color).- accent
#FF3401— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 4px
- scale: 4px, 8px, 10px, 12px, 13px, 16px, 18px, 20px, 24px, 30px
Radii
- base: 12px
- button: 12px
Motion
Micro-interactions run at 200ms (dominant) with ease.
- durations: 200ms · 50ms · 300ms
- easings:
ease·ease-in-out - animated properties: transform, opacity, background, color
Native design tokens
| Token | Value |
|---|---|
--rt-color-white | #fff |
--rt-color-dark | #222 |
--rt-color-success | #8dc572 |
--rt-color-error | #be6464 |
--rt-color-warning | #f0ad4e |
--rt-color-info | #337ab7 |
--token-primary-text-01 | #292b2e |
--token-primary-icon-03-active | #03a9f4 |
--token-primary-interactive-01-active | #8ae9ff |
--token-support-03 | #03a9f4 |
…and 110 more measured on the page.
Button states (measured)
- primary focus: outline
2px solid rgb(24, 122, 220)
Layout (measured)
- container max-width:
1140px - nav: 87px sticky
- common grid: 2 columns
Input (measured)
height 56px · radius 8px 0px 0px 8px
Responsive (measured)
- mobile (390px): nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →