Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Libeo 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:** Libeo
- **Category:** Blog Feed
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb72bd018523cfee2da2a2_6acb70451a5e5fba58c7bd73_cms-f6a4eb4319ab689fc72cf480.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:** Warm editorial blog with cream backgrounds, forest-green condensed headings and orange doodles.
### Page composition
- **Capture:** 1440 ร 4861 screenshot pixels; estimated CSS scale approximately 1ร.
- **Structure:** Navigation, centered illustrated introduction, category filters, three-column article grid/pagination, peach newsletter band, aqua news grid and green footer.
### Information hierarchy
- **Priority:** Headline introduces the blog; article images, orange categories and uppercase titles lead into excerpts and date/read-time metadata.
### Typography
- **Families:** Bold condensed sans-serif headings and regular sans-serif body; exact families unverified.
- **Estimated CSS sizes:** Hero 48px, card titles 22px, body 16px and metadata 14px.
### Colors & surfaces
- **Measured palette:** Cream #F7F3EA, white #FFFFFF, aqua #D7EFEE, forest #3A5A3D, peach #F8E4CE and image-background blue #DCE6FA.
- **Accents:** Orange category labels, pagination state and newsletter action.
### Components
- **Elements:** Rounded image cards, filter chips, circular pagination, read-time pills, underlined newsletter field and large hand-drawn Hello artwork.
- **Estimated geometry:** Content 1050px wide, 32px grid gaps, 16px card radii and 32px card padding.
### Visual rhythm
- **Spacing:** Repeated tall cards establish the feed rhythm; newsletter and aqua news bands provide clear section changes.
### Responsive
- **Suggested adaptation:** Reduce grid to two then one column, wrap filters and stack newsletter artwork/form. Mobile behavior is not shown.
### Adaptation guidance
- **Transfer:** Preserve the warm palette and image/category/title/excerpt hierarchy. Use consistent excerpt lengths and actual metadata.
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.