Podcasts App Guide - Canvas Design System

App Identity

Phase

Learn

Primary Color

#BE123C

Font Stack

Bitter + DM Sans + Fraunces

Design Philosophy

The podcast experience channels an audio studio aesthetic -- warm, tactile, and focused on listening. It shares the paper-like warmth of Tips but with a deeper crimson identity and audio-centric UI patterns.

podcasts

Audio-first hierarchy

The latest episode gets a hero-sized player card. Episode listings lead with play controls. Everything is designed to get users listening quickly, with reading as a secondary action.

palette

Crimson accent on warm paper

Crimson (#BE123C) is deeper than the Tips coral. Paired with the shared paper background (#FAF7F2), it creates a rich, editorial feel suited for long-form audio content.

image

Episode artwork as anchor

Each episode card features a generated cover image. The artwork uses warm gradients and abstract patterns that reinforce the episode theme. Missing artwork falls back to a crimson gradient placeholder.

share

Multi-platform distribution

Platform links (Spotify, Amazon Music, iHeart Radio, Substack) use each platform's brand color as accent. The subscribe bar appears prominently to drive platform follows.

Color Tokens

Crimson palette for the podcast identity. Deeper and more editorial than Tips coral.

Core Palette

Primary (Crimson)

--color-accent

#BE123C

Dark

--color-accent-dark

#9F1239

Light

--color-accent-light

#FECDD3

Very Light

--color-accent-very-light

#FFE4E6

Shared Surface Palette

Paper

#FAF7F2

Paper Dark

#F0EBE3

Kraft

#D4C4A8

Ink

#2C2416

Ink Light

#5C5242

Pencil

#78716C

Platform Brand Colors

Spotify

#1DB954

Amazon Music

#FF9900

iHeart Radio

#C6002B

Substack

#FF6719

/* Podcast app tokens */
--color-accent: #BE123C;           /* Primary crimson */
--color-accent-dark: #9F1239;      /* Dark crimson */
--color-accent-light: #FECDD3;     /* Light crimson */
--color-accent-very-light: #FFE4E6;/* Very light crimson */
--shadow-accent: 0 4px 14px rgba(190, 18, 60, 0.3);

/* Shared warm surfaces (from Tips) */
--color-paper: #FAF7F2;
--color-paper-dark: #F0EBE3;
--color-kraft: #D4C4A8;
--color-ink: #2C2416;
--color-ink-light: #5C5242;
--color-pencil: #78716C;

/* Platform brand colors */
--color-spotify: #1DB954;
--color-amazon: #FF9900;
--color-iheart: #C6002B;
--color-substack: #FF6719;

Layout Patterns

Two-page app: listings index with hero player, and episode detail with embedded audio.

Listings Page Structure

┌────────────────────────────────────────────────┐
│  Unified Header (main site nav)                │
├────────────────────────────────────────────────┤
│                                                │
│  ┌────────────────────────────────────────────┐│
│  │  Hero: Latest Episode (full-width card)    ││
│  │  [Cover Art]  Title / Description / Play   ││
│  │               Stats: Episodes | Weekly     ││
│  └────────────────────────────────────────────┘│
│                                                │
│  ┌──────────────────────────────────────────┐  │
│  │  Platform Subscribe Bar (Spotify, etc.)  │  │
│  └──────────────────────────────────────────┘  │
│                                                │
│  ┌──────┐ ┌──────┐ ┌──────┐                   │
│  │ Ep.  │ │ Ep.  │ │ Ep.  │                   │
│  │ Card │ │ Card │ │ Card │  ...              │
│  │      │ │      │ │      │                   │
│  └──────┘ └──────┘ └──────┘                   │
│                                                │
│  Grid: repeat(auto-fill, minmax(350px, 1fr))   │
│  Max container: 1140px                         │
│                                                │
└────────────────────────────────────────────────┘

Episode Detail Structure

┌────────────────────────────────────────────────┐
│  Unified Header                                │
├────────────────────────────────────────────────┤
│                                                │
│  ← Back to Episodes                           │
│                                                │
│  ┌────────────────────────────────────────────┐│
│  │  Episode Hero                              ││
│  │  [Cover Art]  S01E05 · Category            ││
│  │               Title                        ││
│  │               Description                  ││
│  │               [▶ Play] [Subscribe]         ││
│  └────────────────────────────────────────────┘│
│                                                │
│  ┌────────────────────────────────────────────┐│
│  │  Embedded Substack Audio Player            ││
│  └────────────────────────────────────────────┘│
│                                                │
│  ┌────────────────────────────────────────────┐│
│  │  Show Notes / Transcript (long-form text)  ││
│  └────────────────────────────────────────────┘│
│                                                │
│  Related Episodes (3 cards)                    │
│                                                │
└────────────────────────────────────────────────┘

Element	Spec
Container max-width	`1140px`
Container padding	`32px`
Section spacing	`80px`
Episode grid gap	`auto-fill, minmax(350px, 1fr)`
Page background	`--color-paper (#FAF7F2)`
Card background	`white`
Card shadow	`--shadow-paper`

Key Components

Episode Card

Podcast-specific

White card with episode artwork, season/episode badge, title, description, and play button. Hover lifts the card with an elevated shadow. Artwork uses a 1:1 aspect ratio with 12px radius.

.episode-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-paper);
    transition: all 0.3s var(--ease-out);
    cursor: pointer;
}
.episode-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

Hero Player Card

Podcast-specific

Full-width featured card for the latest episode. Two-column layout with large cover art on the left and episode details + play/subscribe CTAs on the right. Stats bar shows episode count and release schedule.

Platform Subscribe Bar

Podcast-specific

Horizontal strip with platform logos and brand-colored link buttons (Spotify green, Amazon orange, iHeart crimson, Substack orange). Each link opens the podcast on that platform. Centered layout with platform icon + label.

music_note Spotify

music_note Amazon Music

favorite iHeart Radio

mail Substack

Embedded Audio Player

Third-party embed

Substack-hosted audio player embedded via iframe on the episode detail page. Styled with a card wrapper to match the paper aesthetic. Provides play/pause, progress, and speed controls.

Episode Artwork Placeholder

Podcast-specific

When episode artwork is missing, a gradient placeholder fills the space. Uses a crimson-to-dark gradient with a centered podcast icon. Maintains the 1:1 aspect ratio of the artwork slot.

Do / Don't

Do: Use crimson, not Tips coral

#BE123C for Podcasts, #F87171 for Tips. The deeper crimson conveys editorial authority suited for audio content.

Don't: Mix crimson with Tips coral

Each app has its own accent. Using #F87171 in the podcast UI breaks the app identity boundary.

Do: Use platform brand colors for links

Spotify green, Amazon orange, etc. Users recognize these instantly and trust the links.

Don't: Style all platform links with the crimson accent

Generic styling makes platform links look like internal navigation. Brand colors communicate "this takes you to Spotify."

Do: Lead with audio controls

Play buttons should be the most prominent interactive element on every episode card and detail page.

Don't: Bury the play action below the fold

This is an audio experience. If users have to scroll to press play, the hierarchy is wrong.

Typography

The podcast shares its type system with Tips but uses Bitter for display text instead of Fraunces as primary.

Role	Font	Usage
Display / Headings	`Bitter`	Episode titles, hero heading, section titles
Body / UI	`DM Sans`	Descriptions, metadata, buttons, navigation
Accent / Serif	`Fraunces`	Decorative pull-quotes, season labels

File Reference

File	Purpose
`/podcasts/index.php`	Episode listings with hero player
`/podcasts/episode.php`	Episode detail with embedded audio
`/podcasts/styles.css`	All podcast-specific styles and tokens

Font Migration Plan

warning Planned for v1.7: Podcasts currently uses Bitter (display) + DM Sans (body). These should migrate to the platform fonts Fraunces (headings) + Inter (body) for cross-app consistency.

Migration Steps

Step	Action	Notes
1	Update `podcasts/css/podcasts.css` font imports	Replace Bitter/DM Sans Google Fonts imports with Fraunces/Inter
2	Update `--font-display` and `--font-body` overrides	Change to `var(--font-heading)` and `var(--font-body)` from platform-tokens
3	Adjust font-weight values	Bitter 600 ≈ Fraunces 500; DM Sans 500 ≈ Inter 500
4	Visual QA	Check episode cards, player UI, and season headers — Fraunces italic may need letter-spacing adjustments