Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Segment 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:** Segment
- **Category:** Podcast Pages
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c6f72e5af263a1f7d09_1659621625181-screenshot-device-d38e4f14c2776f09df151e85b3ecaa9a-1659601397866.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:** Graphic podcast archive with deep-blue hero/artwork, hot-pink controls, white episode list, and dimensional letter illustrations.
### Page composition
- **Canvas:** 1440 ร 6373 screenshot px.
- **Header:** Compact blue navigation bar with show mark, About, and pink Subscribe action.
- **Hero:** Split introduction left and oversized dimensional FTFY artwork right.
- **Episodes:** Repeated two-column rows with square artwork left and play/title/date/description right.
- **Bottom:** Newsletter signup, small legal row, and full-width audio-player bar.
### Information hierarchy
- **Primary:** Show title and hero artwork.
- **Episodes:** Pink circular play control, small episode number, blue title, then metadata and summary.
- **Art system:** Same dimensional lettering recolored per episode.
- **Subscription:** Provider badges near hero and email signup near footer.
### Typography
- **Family:** Neutral sans serif; exact family unverified.
- **Hero title:** Approximately 44 screenshot px, bold.
- **Episode titles:** Approximately 26โ28px, bold.
- **Body:** Approximately 14px with 22px line-height.
- **Episode metadata:** Approximately 11โ12px; number uses uppercase tracking.
- **Precision:** Font sizes are screenshot estimates.
### Colors & surfaces
- **Main surface:** #FFFFFF.
- **Hero/artwork blue:** #050A6B.
- **Header/player blue:** #2B3C8D and #293A92.
- **Action pink:** #FF1AAE.
- **Newsletter surface:** #F9FBFC.
- **Artwork:** Cyan, green, yellow, coral, and violet faces with white outline geometry.
- **Precision:** Image compression creates nearby shades.
### Components
- **Episode art:** Large square blue covers with three-dimensional letterforms.
- **Play:** Pink circle with white triangle.
- **Provider badges:** Small light rectangular controls.
- **Newsletter:** Narrow email input and pink square-ended signup action.
- **Player:** Blue bar with playback controls, episode title, and timeline.
- **Episode rows:** No enclosing card or heavy border.
### Visual rhythm
- **Spacing:** Large consistent vertical gaps separate episode rows.
- **Alignment:** Covers and summaries repeat the same column edges.
- **Contrast:** Dense colorful artwork balances compact text blocks.
- **Footer:** Pale signup band creates a pause before dark player chrome.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Stack artwork and summaries, preserve square covers, and keep player controls accessible.
- **Subscription:** Allow provider badges to wrap.
### Adaptation guidance
- **Preserve:** Repeated episode-cover system, direct playback emphasis, and pink/blue contrast.
- **Content:** Use supplied episodes, dates, summaries, and provider links.
- **Behavior:** Audio playback and persistent-player behavior are not verified from the still.
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.