Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Swan Blog Feed
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Swan
- **Category:** Blog Feed
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acada14ca6d79c1e0c8a173_6acad99ca43009b06fe6afd9_cms-1b543be17b87f73b0cc75da4.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
- **Character:** Refined editorial blog with soft neutral surfaces, subtle pastel glows, and thin typography.
### Page composition
- **Canvas:** 2880 ร 13420 screenshot px. Navigation, title/search introduction, featured split article, three recommended cards, category tabs, long image/text article list, dark newsletter, and multi-column footer.
### Information hierarchy
- **Priority:** Large blog title introduces the publication; featured story and recommendations precede browsable categories. Author avatars and dates accompany articles.
### Typography
- **Scale:** Estimated CSS at assumed 2ร capture: title 56 px, article titles 24 px, body 16 px, uppercase categories 12 px monospace. Main sans serif family unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #F9F9FA, #F5F5F7, near-black #14191A/#151A1B/#161B1C, and #FFFFFF. Pale pink/lilac gradients underpin illustrated thumbnails and footer glows.
### Components
- **Details:** Small-radius thumbnails, circular author portraits, underlined search field, tracked category tabs, subtle separators, dark newsletter input, and white Subscribe button.
### Visual rhythm
- **Spacing:** Estimated 1250 CSS px content width with broad 100 px section padding and generous vertical gaps between article rows.
### Responsive
- **Adaptation:** Mobile is not shown. Stack feature/list rows, wrap categories, and keep author/date metadata with each title.
### Adaptation guidance
- **Transfer:** Preserve editorial hierarchy, consistent image proportions, and quiet color. Use actual articles, authors, publication dates, and newsletter terms.
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.