Overcast DESIGN.md

1. Visual Theme & Atmosphere

Overcast is the audiophile's podcast app, designed by Marco Arment as a single-developer labor of love, and its iOS interface reflects that ethos: opinionated, restrained, fast, and built around two killer audio features. The most distinctive thing about Overcast's look is its warm paper-cream light theme (#FBFAF6 canvas, #F7F5EF surfaces) — it doesn't use stark white; it uses a soft, off-white "paper" that feels like a well-set book. Paired with a single warm Overcast Orange (#FC7E0F) accent and a true dark theme (#121212), the app reads as calm and editorial rather than flashy. There is exactly one accent color and the chrome carries no gradients — the orange is the entire visual identity.

The signature screen is the episode player (Now Playing): a square cover image with a thin orange bottom rule, the episode title and show name, a slim scrubber with an orange knob, and — Overcast's most recognizable control — a circular play button outlined in orange (a ring, not a filled disc) flanked by two large skip buttons that show their interval (e.g. "30") underneath a back/forward chevron pair. Below the transport sits the row that defines Overcast: Smart Speed and Voice Boost toggles. Smart Speed dynamically removes silences from talk audio without changing pitch; Voice Boost applies loudness and EQ tuned for speech. These are not buried in settings — they are first-class, always one tap from the player, and Overcast even surfaces a running "you've saved X hours with Smart Speed" stat as a point of pride.

The second-most-iconic surface is the Playlists tab: Overcast organizes listening into smart and manual playlists (All Episodes, In Progress, Starred, plus user-built ones) rendered as tidy rows with a rounded-square colored icon, a name, a one-line description, and an episode count on the trailing edge. The other defining piece is the recommendation engine — Overcast lets you publicly recommend episodes and surfaces friends' recommendations, a social layer no other major podcast app has. Overall the personality is "calm, fast, audio-first": one accent, generous list spacing, a paper-warm canvas, the orange ring play button, and Smart Speed/Voice Boost front and center.

Key Characteristics:

• Warm paper-cream light theme (#FBFAF6 canvas, #F7F5EF surfaces) — NOT stark white
• True dark theme (#121212 canvas, #1C1C1E surfaces)
• Single Overcast Orange accent (#FC7E0F) — identical across both themes
• Circular play button as an orange ring (outlined, not filled) — the brand's signature control
• Smart Speed toggle — dynamically removes silences without altering pitch; first-class on the player
• Voice Boost toggle — loudness + EQ tuned for spoken-word clarity; first-class on the player
• "Time saved with Smart Speed" running stat — a signature flex surfaced in the UI
• Playlists tab — smart + manual playlists as tidy rows with colored rounded-square icons
• Recommendation engine — publicly recommend episodes; see friends' recommendations
• Skip buttons that display their interval ("30") beneath a chevron pair
• Restrained chrome — one accent, no gradients, generous list spacing, editorial calm
• 10pt rounded-rectangle buttons; rounded-square (9pt) playlist icons

2. Color Palette & Roles

Primary (Interactive)

• Overcast Orange (#FC7E0F): The single brand accent — play-button ring, scrubber fill/knob, active Smart Speed / Voice Boost toggles, tab selection, links, primary CTAs. Identical in light and dark.
• Orange Pressed (#E06A00): Pressed state of orange buttons and the play ring.
• Link Blue (#2D7FF9): External web links inside show notes (system-blue style); orange is preferred for in-app actions.

Canvas & Surfaces (Light Mode — paper)

• Paper Canvas (#FBFAF6): Primary light canvas — warm off-white, NOT pure #FFFFFF.
• Cream Surface (#F7F5EF): Grouped list backgrounds, settings cards, elevated rows.
• Surface Pressed Light (#EDEBE3): Pressed/selected rows.
• Divider Light (#E4E1D8): Hairline separators between playlist/episode rows.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#121212): Primary dark canvas.
• Dark Surface 1 (#1C1C1E): Cards, grouped lists, settings groups.
• Dark Surface 2 (#2A2A2C): Scrubber track, inactive toggle track, pressed rows.
• Dark Divider (#303032): Hairline separators in dark.

Text

• Text Primary Light (#1A1A1A): Episode titles, screen titles on paper.
• Text Secondary Light (#6E6E6E): Show names, descriptions, metadata on paper.
• Text Tertiary Light (#9A9A9A): Counts, disabled, low-emphasis.
• Text Primary Dark (#F2F2F2): Primary text on dark.
• Text Secondary Dark (#9A9A9A): Secondary text on dark.
• Text Tertiary Dark (#6A6A6A): Low-emphasis on dark.

Semantic

• Success Green (#34C759): Download-complete tick, "Starred" playlist icon, success states.
• Error Red (#FF3B30): Delete confirmation, failed-download banner.
• Warning Amber (#FF9F0A): Storage / sync-conflict warnings.
• Active Orange (#FC7E0F): Reuses the brand accent for "active effect" indication (Smart Speed / Voice Boost ON).

Playlist Icon Colors (rounded-square tiles)

3. Typography Rules

Font Family

• iOS System: SF Pro Text / SF Pro Display (San Francisco) — Overcast uses the system face for native rendering and full Dynamic Type support.
• 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, durations, and the Smart Speed time-saved stat.

Hierarchy

Principles

• Tabular timecodes & stats: Timecodes, durations, and the Smart Speed time-saved counter use tabular figures so digits don't jitter.
• One accent only: Type never uses color for hierarchy except the single orange for links/active state; hierarchy comes from size and weight.
• Weight concentrated at 400 / 500 / 600 / 700 / 800: Regular body, medium show names, semibold row titles and toggles, bold episode/section titles, heavy large nav title.
• Uppercase only for the stat caption: The "SAVED … WITH SMART SPEED" line is the rare uppercase, tracked caption — a deliberate badge of pride.
• Dynamic Type first-class: Titles, body, metadata scale; tab labels, effect chips, timecodes, counts stay fixed for layout stability.

4. Component Stylings

Buttons

Primary Button (Add Podcast)

• Shape: Rounded rectangle, 10pt corner radius
• Background: #FC7E0F (Overcast Orange)
• Text: #FFFFFF, SF Pro Text 16pt weight 600
• Padding: 14pt vertical, 26pt horizontal
• Pressed: background #E06A00 + scale 0.98

Outline Button (Recommend)

• Background: transparent
• Border: 1.5pt #FC7E0F
• Text: #FC7E0F, SF Pro Text 15pt weight 600
• Corner radius: 10pt
• Pressed: 8% orange fill

List / Neutral Button (Edit Playlist)

• Background: #F7F5EF light / #2A2A2C dark
• Border: 1pt #E4E1D8 light / #303032 dark
• Text: #1A1A1A light / #F2F2F2 dark, SF Pro Text 15pt weight 500
• Corner radius: 10pt

Text Button (See all episodes)

• Text: #FC7E0F, SF Pro Text 15pt weight 600
• No background, no underline
• Pressed: opacity 0.6

Circular Play Button (signature ring)

• Size: 66pt diameter
• Style: 2.5pt #FC7E0F ring (outlined — NOT a filled disc)
• Icon: 24pt orange play triangle / pause bars
• Pressed: ring + icon shift to #E06A00, scale 0.96
• This outlined ring is the single most recognizable Overcast control

Skip Buttons

• Chevron-pair glyph (27pt) with the interval number ("30") in 9pt w700 #6E6E6E directly beneath
• Tap = skip; long-press = continuous seek
• Default intervals user-configurable (commonly back 30 / forward 30 or back 15 / forward 60)

Cards & Rows

Playlist Row

• Height: ~66pt
• Leading: 38pt rounded-square colored icon (9pt corner radius), white glyph
• Name: SF Pro Text 15pt w600 primary
• Description: SF Pro Text 12pt w400 secondary (one line)
• Trailing: episode count, SF Pro Text 14pt w600 secondary
• Divider: 1pt #E4E1D8 light / #303032 dark
• Swipe: leading = move to top of Up Next; trailing = settings

Episode Row (within a playlist)

• Leading: small circular play/queue button (orange ring when queued)
• Title: SF Pro Text 15pt w600, up to 2 lines
• Meta: SF Pro Text 14pt w400 secondary ("48 min · downloaded · -1:22 left")
• Progress: thin orange underline showing playback position when partially played

Recommendation Card

• Friend avatar (28pt circle) + name + "recommended"
• Episode artwork thumbnail (44pt, 8pt corner radius) + episode title
• Optional one-line note from the recommender
• Tap = open episode; orange "Add to playlist" affordance

Now Playing Player

Layout (top → bottom)

1. Top bar: back/collapse chevron (orange, leading), "Now Playing" label (center), list/queue icon (trailing)
2. Cover art: square image, 10pt corner radius, 4–6pt orange bottom rule, soft shadow
3. Episode title (22pt w700) + show name (14pt w500 secondary)
4. Scrubber: 3pt track #2A2A2C (dark) / #E4E1D8 (light), orange fill, 14pt orange circular knob; timecodes below (current / -remaining)
5. Transport row: skip-back (chevron + "30"), ◯ orange-ring play button (66pt), skip-forward (chevron + "30")
6. Effect row: speed (e.g. "1.3×") · Smart Speed · Voice Boost · Star

Scrubber

• Track: 3pt height, #2A2A2C dark / #E4E1D8 light, 2pt corner radius
• Fill: #FC7E0F, 2pt corner radius
• Knob: 14pt circle #FC7E0F, rgba(0,0,0,0.5) 0 1px 4px shadow
• Scrubbing: knob grows to 18pt; tooltip shows target timecode

Effect Chip

• Vertical icon (19pt stroked) + label (10pt w600) stack
• Inactive: secondary text color
• Active (Smart Speed / Voice Boost ON, non-default speed): #FC7E0F
• Speed chip shows the numeric multiplier ("1.3×")

Smart Speed & Voice Boost (signature)

Smart Speed Toggle Row

• Label "Smart Speed" SF Pro Text 15pt w600
• Sub "Dynamically shortens silences in talk shows — no pitch change" 12pt secondary
• Switch: 50×30pt, ON track #FC7E0F, OFF track #2A2A2C/#E4E1D8, 24pt white knob
• When ON, the player shows a small running "saved X with Smart Speed" stat

Voice Boost Toggle Row

• Label "Voice Boost", sub "Loudness and EQ tuned for spoken-word clarity"
• Same switch styling

Speed Control

• Stepper 0.5× → 3.0× (often shown as a horizontal control in the player sheet)
• Current rate in an orange pill / orange text

Navigation

Bottom Tab Bar

• Height: 52pt + safe area
• Background: rgba(251,250,246,0.94) light / rgba(18,18,18,0.94) dark with blur(20px) + 0.5pt top border
• Tabs (4): Playlists, Podcasts, Search, Settings
• Icon size: 22pt
• Active: #FC7E0F (filled glyph), Inactive: tertiary text (stroked glyph)
• No tint pill — color + fill change only
• Labels: SF Pro Text 10pt w600, always shown

Mini-Player

• Persistent strip above the tab bar (~58pt): artwork thumb (40pt) + episode title + orange play/pause
• Tap: expands to full player with a 300ms upward sheet slide

Top Nav (Podcast / Playlist Detail)

• Large title collapses to compact on scroll
• Leading: back chevron (orange); Trailing: edit / settings (orange)

Input Fields

Search Bar (Podcasts / Search tab)

• Height: 40pt
• Background: #F7F5EF light / #2A2A2C dark
• Corner radius: 10pt
• Leading magnifyingglass 16pt secondary
• Placeholder: "Search podcasts" 15pt secondary
• Focus: 1.5pt #FC7E0F border

Playlist Rule Builder

• Smart-playlist criteria (podcasts included, episode limit, sort order, downloaded-only)
• Each rule a tappable row opening a sheet
• Color picker for the playlist icon tile (~10 system tints)

Distinctive Components

Orange-Ring Play Button

• The single most recognizable Overcast element: a 66pt circle with a 2.5pt orange stroke and an orange play/pause glyph — outlined, never filled. Used on the player and (smaller) on episode rows.

Smart Speed Time-Saved Stat

• A running counter ("You've saved 1 hr 12 min with Smart Speed") shown on the player and in Settings — a deliberate badge of the feature's value.

Recommendation Engine

• Publicly recommend an episode; a feed of friends' recommendations with avatars and optional notes. No other major podcast app surfaces this.

Playlist System

• Smart playlists (rule-based) + manual playlists; each with a colored rounded-square icon. The Playlists tab is the app's home, not a podcast grid.

Effect Row on Player

• Speed · Smart Speed · Voice Boost · Star — always one tap from playback; the row that defines Overcast's audio-first identity.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 64
• Playlist/episode row vertical padding: 14pt
• Player horizontal inset: 34pt (cover breathing room)
• Screen content inset: 16pt horizontal

Grid & Container

• iPhone: single-column lists, full-width rows with 16pt inset, 1pt dividers
• iPad: lists in a sidebar (Playlists/Podcasts/Search/Settings) + detail/player pane
• Player: cover art ~70% screen width, centered
• Mini-player: full-width strip above tab bar

Whitespace Philosophy

• Editorial calm: generous row height and padding; the paper-cream canvas plus a single accent make the UI feel like a well-set page
• One accent discipline: orange appears only where action lives (play ring, scrubber, active effects, links, tab selection) — never decoratively
• Player focus: cover, title, scrubber, transport, effect row — nothing extraneous

Border Radius Scale

• Square (0pt): dividers, full-bleed headers
• Subtle (4pt): scrubber track/fill, small badges
• Small (8pt): episode-row artwork thumbnails, recommendation thumbnails
• Standard (9–10pt): playlist icon tiles, buttons, search field, cover art
• Comfortable (14pt): bottom sheets
• Large (20pt): large modal sheets
• Pill (999pt): the speed-rate pill, occasional chips
• Circle (50%): play button ring, avatars, episode-row play

6. Depth & Elevation

Overcast is flat and editorial; shadow is reserved for the cover, floating sheets, and the mini-player lift.

Shadow Philosophy: Overcast doesn't use shadow as decoration — only the player cover gets a soft drop shadow to lift it off the paper. Lists and settings are perfectly flat with hairline dividers. On the paper-cream theme, shadows are gentle (0.12–0.18 opacity) so they don't muddy the warm canvas; on dark they deepen slightly. The single orange accent does the visual work; depth stays subtle.

Motion

• Play/Pause: triangle↔bars morph 200ms ease-in-out; ring + icon scale 0.96 on press
• Scrubber drag: knob 14→18pt over 120ms; 1:1 tracking; target-timecode tooltip
• Smart Speed indicator: the time-saved stat ticks up live during playback (no animation, just value updates)
• Mini-player → Full player: upward sheet slide 300ms ease-out; artwork hero-transitions to the cover
• Toggle flip (Smart Speed / Voice Boost): knob slides 200ms ease-out; track color cross-fades to orange
• Playlist row swipe: 1:1 reveal; commit threshold 50%; spring snap 250ms damping 0.85
• Tab change: instant icon fill swap to orange; no slide
• Theme switch (light/dark): cross-fade 250ms (no hard cut)
• Pull-to-refresh (playlist): orange spinner; 200ms settle
• Haptic feedback: soft impact on play, toggle flip, scrubber boundary, recommend action

7. Do's and Don'ts

Do

• Use the warm paper-cream canvas #FBFAF6 for light — NOT stark white
• Use a true dark #121212 canvas for dark mode
• Keep Overcast Orange #FC7E0F as the single accent — play ring, scrubber, active effects, links, tabs
• Render the play button as an orange ring (2.5pt stroke, outlined) — never a filled disc
• Put Smart Speed and Voice Boost on the player as first-class toggles — never bury them
• Show the "saved X with Smart Speed" stat — it's a deliberate badge of value
• Show skip intervals ("30") beneath the chevron glyph
• Use tabular figures for timecodes, durations, and the time-saved stat
• Organize content into Playlists (smart + manual) with colored rounded-square icons
• Surface the recommendation engine — it's a unique Overcast differentiator
• Keep chrome flat with hairline dividers and generous row spacing

Don't

• Don't use stark white #FFFFFF for the light canvas — #FBFAF6 paper-cream is the signature
• Don't introduce a second accent — orange is the entire identity
• Don't fill the play button — it must be an outlined orange ring
• Don't add a tint pill behind the active tab — color + fill change only
• Don't bury Smart Speed / Voice Boost in deep settings — they belong on the player
• Don't hide the skip interval — the "30" beneath the chevron is part of the look
• Don't add gradients to chrome — Overcast is flat and editorial
• Don't use proportional figures for timecodes — they shift while scrubbing
• Don't make the app a podcast grid — Playlists is the home surface
• Don't animate aggressively — motion is quiet, 150–300ms ease ranges
• Don't use color for type hierarchy — only size/weight; orange is for action only

8. Responsive Behavior

Device Sizes

Dynamic Type

• Screen title, episode title, body, metadata: full scale
• Tab labels, effect chips, timecodes, playlist counts: FIXED (layout-sensitive)
• Play ring, scrubber, skip buttons stay fixed-size; only text scales

Orientation

• Player and lists support rotation
• iPad landscape uses a multi-column split (sidebar + list + detail)
• Cover re-centers on rotation; aspect preserved

Touch Targets

• Circular play ring: 66pt (well above minimum)
• Skip buttons: 44pt hit (chevron + interval)
• Playlist-row tap: full-row, ≥56pt
• 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 34pt

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light, paper): #FBFAF6
• Surface (light, cream): #F7F5EF
• Canvas (dark): #121212
• Surface 1 (dark): #1C1C1E
• Surface 2 (dark): #2A2A2C
• Divider: #E4E1D8 light / #303032 dark
• Overcast Orange: #FC7E0F
• Orange pressed: #E06A00
• Text primary: #1A1A1A light / #F2F2F2 dark
• Text secondary: #6E6E6E light / #9A9A9A dark
• Link blue: #2D7FF9
• Success green: #34C759

Example Component Prompts

• "Build the Overcast Now Playing screen in SwiftUI: paper-cream #FBFAF6 (light) / #121212 (dark) canvas. Top bar — orange back chevron (leading), 'Now Playing' SF Pro 13pt w700 (center), list icon (trailing). Square cover art, 10pt corner radius, with a 5pt #FC7E0F bottom rule and a soft rgba(0,0,0,0.18) 0 18px 40px -18px shadow. Episode title SF Pro 22pt w700 primary, show name SF Pro 14pt w500 secondary. Scrubber: 3pt track #E4E1D8/#2A2A2C, fill #FC7E0F, 14pt orange circular knob, timecodes below tabular 12pt secondary. Transport: skip-back (chevron + '30' in 9pt w700 secondary), 66pt circular play button as a 2.5pt #FC7E0F ring with an orange play triangle, skip-forward (chevron + '30')."

• "Create the Overcast effect row: speed chip ('1.3×'), Smart Speed, Voice Boost, Star — each a vertical 19pt stroked icon + 10pt w600 label. Inactive = secondary text; active (Smart Speed ON, Voice Boost ON, non-default speed) = #FC7E0F."

• "Build an Overcast Smart Speed toggle row: label 'Smart Speed' SF Pro 15pt w600 primary, sub 'Dynamically shortens silences in talk shows — no pitch change' SF Pro 12pt secondary. Trailing switch 50×30pt: ON track #FC7E0F, OFF track #2A2A2C (dark) / #E4E1D8 (light), 24pt white knob, 200ms slide. 1pt divider below."

• "Render an Overcast playlist row: 66pt tall, leading 38pt rounded-square colored icon (9pt corner radius, white glyph — #FC7E0F for All Episodes, #2D7FF9 In Progress, #34C759 Starred). Name SF Pro 15pt w600 primary, description SF Pro 12pt w400 secondary (one line). Trailing episode count SF Pro 14pt w600 secondary. 1pt #E4E1D8/#303032 divider."

• "Render the Overcast bottom tab bar: 52pt + safe area, rgba(251,250,246,0.94) (light) / rgba(18,18,18,0.94) (dark) with 20px blur and 0.5pt top border. 4 tabs — Playlists, Podcasts, Search, Settings. 22pt icons. Active = #FC7E0F filled glyph; inactive = tertiary stroked glyph. No tint pill. Labels SF Pro 10pt w600 always shown."

• "Create the Overcast mini-player: persistent strip ~58pt above the tab bar. Leading 40pt artwork thumb (8pt corner radius), episode title SF Pro 14pt w600 primary (1 line) + show name SF Pro 12pt secondary, trailing orange circular play/pause 22pt. Tap expands to full player with a 300ms upward sheet slide; artwork hero-transitions to the cover."

Iteration Guide

1. Light canvas is warm paper-cream #FBFAF6 (surfaces #F7F5EF) — NEVER stark white
2. Dark canvas is true #121212 (surfaces #1C1C1E)
3. Overcast Orange #FC7E0F is the single accent — identical across themes; used only for action
4. The play button is an outlined orange ring (2.5pt stroke), never a filled disc — the signature control
5. Smart Speed + Voice Boost are first-class toggles on the player effect row — never buried
6. Surface the "saved X with Smart Speed" stat — it's a deliberate badge of value
7. Skip buttons show their interval ("30") beneath the chevron glyph
8. Playlists (smart + manual) with colored rounded-square icons is the home surface, not a grid
9. Timecodes, durations, and the time-saved stat use tabular figures so digits don't jitter
10. Chrome is flat and editorial — one accent, hairline dividers, generous row spacing, no gradients