Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Reply eBook 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:** Reply
- **Category:** Ebook Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c66a4f21fa396a27433_1659621173275-screenshot-device-193fdaabd1d54a2df9e43dfc8cf6dcc1-1659600101338.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:** Clean ebook lead-generation page with navy typography, bright-blue actions, soft lavender circles and polished book mockups.
### Page composition
- **Canvas:** 1440 ร 3215 screenshot px.
- **Sequence:** Navigation; split book/form hero; explanatory text; ten chapter summaries in two columns; repeated ebook CTA; light-gray trial band and multicolumn footer.
### Information hierarchy
- **Priority:** Large book cover and multiline headline lead into a short two-field download form. Chapter grid substantiates the resource before a repeated conversion prompt.
### Typography
- **Family:** Humanist sans serif, exact font unverified.
- **Scale:** Estimated screenshot hero 34โ38 px, section headings 30 px, chapter headings 18 px and body 16 px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF, footer #F7F7F7, pale lavender #F5F6FF and action blue #0059FF.
- **Accents:** Navy headings; dark book cover with magenta concentric circles; chapter thumbnails alternate dark navy and vivid pink.
### Components
- **Hero:** Dimensional book with soft shadow left; rounded white name/email inputs with soft shadows and blue pill CTA right.
- **Chapters:** Small document-cover illustrations beside title/summary pairs in five aligned rows.
- **Secondary CTA:** Lavender rectangular banner combines smaller book mockup, headline and blue pill action; footer groups five link categories plus social marks.
### Visual rhythm
- **Spacing:** Approximately 80โ120 screenshot px section gaps and generous chapter-row spacing. Pale circular hero forms add depth without enclosing the whole page.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Stack hero book/form, use one chapter column and collapse footer groups. Keep the download action visible near the headline.
### Adaptation guidance
- **Preserve:** Book-led hero, concise gated form and chapter-preview grid.
- **Replace:** Use the actual resource cover, supplied chapter content and valid download flow; avoid unsupported resource claims.
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.