Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Mailchimp Download 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:** Mailchimp
- **Category:** Download Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbb9bdd1be8ecd2912de46_6acb6bc3096561906c24d8de_cms-b5ec8f7c01105b6357256b6d.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:** A mobile-app marketing page combines pale green, warm yellow and white regions with editorial serif headlines and hand-drawn black illustration.
- **Capture evidence:** The screenshot measures 1440 × 7788 pixels and was inspected in six portions through the footer. Approximate dimensions are image pixels; near-1× CSS scale is estimated.
- **Tone:** Large product mockups, open spacing and a distinctive warm palette make the page approachable and practical.
### Page composition
- **Header:** A dark promotional strip precedes a pale-green navigation region with centered brand, links left and sales/search/account/trial utilities right.
- **Hero:** A two-column pale-green area pairs mobile-app copy and QR code at left with a large hand-drawn phone-and-hand illustration right.
- **Proof:** A centered user-count statement and app-store rating lead into the feature content.
- **Feature sequence:** Four spacious alternating image/text modules cover contacts, email creation, landing pages and performance tracking; tall phone mockups illustrate each.
- **Accordion region:** A pale-gray band places four tool disclosures left and a notification phone mockup right; the first disclosure is expanded.
- **Closing proof and action:** A centered serif testimonial precedes a yellow QR-download band.
- **Resources and footer:** Three related-content previews sit above a warm ochre footer with related links, multiple navigation groups, store badges, social icons, language control and legal text.
### Information hierarchy
- **Hero:** A small uppercase platform label leads into a two-line serif headline, followed by larger sans-serif explanation and download guidance.
- **Download route:** A prominent QR code and platform-compatible action communicate the mobile destination.
- **Feature roles:** Each alternating module uses a moderate heading, paragraph and occasional outlined action; images remain the main supporting evidence.
- **Accordion state:** The first tool answer is visible beneath its heading; the other three show only titles and chevrons.
- **Social proof:** Large serif statements and testimonial text interrupt the product sequence.
- **Related content:** Small uppercase categories precede serif linked titles and short descriptions.
### Typography
- **Family pairing:** A warm editorial serif serves major headlines and quotations; a neutral sans-serif serves navigation, descriptions and controls. Exact identities are unverified.
- **Hero title:** Approximately 48px, medium serif, with tight 48–52px line-height.
- **Hero body:** Approximately 24px sans-serif with 32px line-height.
- **Feature headings:** Approximately 32px regular sans-serif with 40px line-height; supporting text around 16px with 24px line-height.
- **Proof and quote:** Approximately 40px serif, centered with compact line-height.
- **Accordion titles:** Approximately 32px regular sans-serif.
- **Footer:** Links are approximately 14px, with small legal copy around 10–11px.
### Colors & surfaces
- **Canvas:** Sampled #FFFFFF supplies the main feature and resource regions.
- **Hero green:** Sampled #DCE7CC supplies the pale green hero.
- **Yellow action band:** Sampled #FBDB48 supplies the bright download section and repeated action accents.
- **Footer ochre:** Sampled #E1B667 supplies the warm footer surface.
- **Accordion background:** Sampled #F6F6F4 provides the pale-gray tool region.
- **Primary ink:** Sampled #231C16 supplies warm near-black text and outlines.
- **Mockup accent:** Sampled #F7F6B6 supplies pale yellow within the illustrated email example; muted teal appears in links and chart controls.
### Components
- **QR blocks:** Large black QR codes are placed directly on the hero and yellow download backgrounds, with platform guidance nearby.
- **Phone mockups:** Tall outlined devices have rounded corners, small top notches and hard dark offset shadows; each contains a different interface example.
- **Outlined actions:** Small white/transparent pills use thin dark borders and compact bold labels.
- **Accordion:** Four large title rows use left chevrons and thin dark separators, with paragraph content visible under the first title.
- **Testimonial:** Large centered serif text sits directly on white, followed by a small attribution.
- **Related previews:** Three equal-width image-led columns use category labels, teal serif titles and body copy without enclosing cards.
- **Footer utilities:** App-store badges, social icons and a rectangular language dropdown share the lower row.
- **Chat:** A dark pill-shaped Chat with us launcher appears lower right.
### Visual rhythm
- **Content widths:** Feature modules use a centered approximately 1040px area, while the hero spans a wider two-column frame.
- **Alternating composition:** Phone mockups switch sides between modules, creating a steady left-right progression.
- **Section breathing room:** Large roughly 120–180px gaps separate feature regions and proof statements.
- **Phone scale:** Device illustrations are around 250px wide and 500px tall, visually anchoring each module.
- **Footer density:** Compact link groups contrast with the open upper page and large download band.
### Responsive
- **Evidence limit:** Only a desktop page is observed; accordion behavior, downloads and mobile layouts are unverified.
- **Feature recommendation:** Stack heading/copy before each phone example, maintaining a consistent reading order.
- **Download recommendation:** Provide direct store links alongside QR codes for users already browsing on a phone.
- **Navigation recommendation:** Collapse primary links and simplify sales utilities while keeping account and trial actions accessible.
- **Accordion/footer recommendation:** Preserve large disclosure targets and stack resource/footer columns without shrinking text excessively.
### Adaptation guidance
- **Asset system:** Use coherent hand-drawn artwork and device mockups with consistent dark outlines and offset shadows.
- **Content modules:** Reuse alternating feature sections, centered proof statements, disclosure lists and a dedicated download band.
- **Accessibility:** Provide descriptive alternatives for product images, accessible accordion states and a text equivalent to QR destinations.
- **Privacy:** Use representative contact and campaign data inside mockups.
- **Evidence discipline:** Treat displayed user counts, ratings and offer text as captured content rather than current verified 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.