Theme · Product · Intermediate
Podcast Player Site
Podcast site = a show header card with cover and subscribe pill, plus a play-ready episode list with waveforms.
Tips
The cover art carries the brand. Keep controls large and obvious — this is a player, not a poster.
See also
Build a podcast website for "Signal & Noise", a weekly tech-culture show.
STYLE
- Soft gradient ground (sky #9FD4FF → mint #B8FFF3) with frosted glass panels
- Glass plates: rgba(255,255,255,0.42), blur(18px), 1px light edge, 20px radius
- Type #1D1D1F, mute #6E6E73, accent #0071E3 pill CTA
LAYOUT
- Show header card: conic-gradient cover, title "Signal & Noise", host line "Nadia Ferrer - Weekly tech-culture show", a blue "Subscribe" pill + "24.1k followers"
- "Latest episodes" play-button rows: "The quiet economics of open source" (Sep 02 - 48 min), "Funding the commons" (Aug 26 - Interview - 48 min); tall adds "Maintainers on call" (Aug 19 - Panel - 62 min); each row ends with a small blue waveform
COMPONENTS
- Show header: conic cover, title, host line, Subscribe pill, follower count
- Episode rows: play button, title, date - format - duration, mini waveform
INTERACTION
- Play buttons scale on press; waveforms are static decorations; the subscribe pill is the only filled CTA.
TECHNICAL
- React, Tailwind CSS, native audio element, no component library