Teachable Podcast Page

# Design from Reference: Teachable Podcast Page Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Teachable - **Category:** Podcast Pages - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad9e3da29ecc97f61832_1659677380865-5eebebce78756d62108912b9_screencapture-teachable-podcast-everything-is-teachable-2020-06-19-00_31_47.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Style:** Friendly podcast landing page with teal hero, light flowing wave motifs and spacious white editorial sections. - **Character:** Embedded audio players, creator imagery and a large testimonial support a conversational learning brand. - **Accent:** Teal links and an orange subscription button provide restrained conversion color. ### Page composition - **Canvas:** Source 1440 × 3926 pixels, inspected throughout in three crops at 1400px width. Geometry uses inspection pixels; CSS scale is unverified. - **Hero:** Teal navigation and left-aligned podcast introduction, ending in layered translucent waves. - **Trailer:** Wide embedded audio player below hero, followed by centered listening-platform links. - **About:** Two-column paragraph/image section, then full-width pale testimonial band. - **Brand section:** Product screenshot collage left, explanatory copy and guest-application link right. - **Episodes:** Large embedded player with cover art, playback controls and six visible episode rows. - **Ending:** Centered email subscription region and pale warm footer with five link/contact groups. ### Information hierarchy - **Hero:** Small uppercase listening label precedes podcast name and larger three-line introduction. - **Audio:** Trailer is the first primary content interaction; platform links follow. - **Story:** About copy and workspace photo explain the podcast; testimonial provides a visual proof break. - **Episodes:** Cover artwork anchors the player, while selected episode title and list support browsing. - **Subscription:** Heading, short sentence, email field/button, consent copy and platform alternatives form the final action group. ### Typography - **Hero title:** Approximately 32px semibold sans serif; introduction around 24px light with 32px line height. - **Section headings:** Around 25px light/regular. - **Body:** Approximately 17px regular, 24px line height. - **Testimonial:** Around 34px semibold, 44px line height; attribution around 28px light. - **Player:** Bold titles around 20px, small monospaced episode/time metadata around 11–12px. - **Footer:** Around 15px. Exact font families are unverified. ### Colors & surfaces - **Measured base:** #FFFFFF white, #F9F3F0 warm footer and #F3FAFA testimonial surface. - **Measured teal:** #56B5AC hero, with #5DBAAF and #64BEB4 wave/gradient variations. - **Measured neutral:** #F3F3F3 player/list surface; #FEFEFE appears in transitions. - **Foreground:** White hero text, medium-gray editorial copy and dark player titles. - **Accent:** Orange email-subscription action and teal inline links. ### Components - **Hero waves:** Broad overlapping translucent curves across the lower teal region. - **Trailer player:** Roughly 1118 × 193px, thin pale border, square cover art, black round play button, waveform and time markers. - **Listening links:** Centered text row separated by vertical bars. - **About image:** Large landscape desk/laptop photograph with teal surface. - **Episode player:** Large square cover beside waveform/header and compact episode table with durations right. - **Subscribe form:** Approximately 730 × 59px pill-shaped email/action row; orange button occupies right portion. - **Consent:** Small centered gray text below the form. - **Footer:** Five columns, colored round social icons and small orange wordmark/legal line. - **States:** Players show 00:00 and play icons; playback, speed changes and form feedback are unverified. ### Visual rhythm - **Hero:** Wide wrapper with generous top/bottom space and no boxed content. - **Audio spacing:** Broad gaps separate player, platform links and about section. - **Editorial balance:** Alternating image/text columns vary the page rhythm. - **Testimonial:** Full-width pale band creates a strong pause between narrative sections. - **Subscription/footer:** Large open white area precedes the warm footer. ### Responsive - **Observed scope:** Desktop only; mobile player behavior is unverified. - **Recommended layout:** Stack editorial columns and reduce large quote scale. - **Recommended players:** Use responsive audio embeds with accessible controls and readable episode lists. - **Recommended form:** Stack field/button if necessary and keep consent text readable. - **Recommended footer:** Wrap groups and preserve social/control touch targets. ### Adaptation guidance - **Preserve:** Teal wave identity, audio-first progression and spacious editorial layout. - **Assets:** Use supplied podcast art, episodes, photographs and testimonial attribution. - **Content fidelity:** Replace dates, counts and guest-application details with current supplied content. - **Accessibility:** Provide audio transcripts, named playback controls and clear subscription labels. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.