Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Unbounce Landing Page Analyzer
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Unbounce
- **Category:** Free Side Product
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c5edf1bb861a0f89c6b_1659620385194-screenshot-device-fc560fc4608baf8033d3299f9a71e93a-1659598057218.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:** A spacious lead-generation page uses tall, condensed-looking sans-serif typography, a white canvas and a contrasting charcoal explanation section.
- **Character:** Thin blue line icons, small yellow/pink accents and a long outlined form give the page an analytical, practical tone.
### Page composition
- **Capture:** The source measures 1440 ร 3528 pixels. Dimensions below approximate image pixels; CSS scale is unverified.
- **Header:** Brand sits left within a roughly 1180-pixel container; a small widely tracked uppercase page label sits right with a short horizontal rule.
- **Hero:** A large centered two-line title precedes a parenthetical line, explanatory paragraph and short reassurance sentence.
- **Main section:** A two-column composition pairs an illustration, benefit heading and five icon-led performance categories left with a tall form panel right.
- **Testimonial:** A full-width white region below the form has a portrait left and oversized quotation plus attribution right.
- **Formula section:** A charcoal band contains a large centered heading, short introduction and three pale rectangular explanation cards.
- **Footer:** A compact white row combines brand, copyright, two legal links and four circular social icons.
### Information hierarchy
- **Hero title:** Oversized dark text is the strongest element, supported by much smaller light-gray copy.
- **Form task:** Small uppercase labels establish a long sequence of fields; the large blue Analyze My Page button is the dominant action.
- **Benefits:** Five blue icons introduce headings and short explanations in a consistent vertical list.
- **Proof:** A large lightweight quotation provides a clear break from the denser form.
- **Method:** Three equal explanation cards form the final informational layer before the footer.
### Typography
- **Family:** A narrow sans serif is visible in headings, body and form labels; exact identity is unverified.
- **Hero:** Approximately 68 pixels, regular weight, with around 80-pixel line height.
- **Section headings:** Around 40 pixels for the benefit heading and 64 pixels for the dark-section title.
- **Body:** Approximately 16 pixels with 25โ28-pixel leading, light weight and soft gray tone.
- **Benefit titles:** About 30 pixels; formula-card titles around 28 pixels.
- **Form:** Small uppercase labels around 11โ12 pixels contrast with a roughly 20-pixel CTA label.
### Colors & surfaces
- **Measured base:** White #FFFFFF dominates the upper page; charcoal #303030 fills the formula section.
- **Cards:** Warm near-white #FAF8F6 appears in the final explanation cards.
- **Accent:** Saturated blue defines icons, legal links and the form CTA; exact blue hex is unverified.
- **Decoration:** Yellow blocks/rules and small pink accents punctuate the otherwise neutral page.
- **Depth:** A fine outline and broad soft shadow lift the long form. Other regions are largely flat.
### Components
- **Form panel:** Approximately 510 pixels wide, with square or nearly square corners, thin pale border and roughly 32-pixel inner padding.
- **Fields:** Full-width outlined inputs and selectors are about 38 pixels high. The conversion-rate field is shorter with a large percent symbol beside it.
- **Choice groups:** Five traffic-source checkboxes stack with generous gaps; email opt-in uses two radio choices. A separate agreement checkbox precedes underlined legal links.
- **Form action:** A centered blue rectangle around 234 ร 76 pixels has minimal corner rounding.
- **Benefit items:** Roughly 50-pixel blue outline icons sit beside title/description stacks.
- **Portrait:** A rectangular headshot has offset yellow outline and pink decorative blocks.
- **Formula cards:** Three equal pale panels around 350 pixels wide use generous padding and small colored tabs at the left edge.
- **Social controls:** Four dark circular icons align at the footer's right.
### Visual rhythm
- **Hero whitespace:** Large gaps surround the title and introductory copy before the two-column section begins.
- **Main asymmetry:** The long form extends alongside the entire benefit list, balancing dense controls with open explanatory content.
- **Field cadence:** Labels sit close to controls, while groups use larger vertical gaps.
- **Section transition:** A fine horizontal rule introduces the testimonial; a broad charcoal surface clearly marks the method section.
### Responsive
- **Evidence:** Only desktop is observed; form validation and mobile behavior are unverified.
- **Recommended reflow:** Stack benefits and form, then reduce the three formula cards to one column.
- **Recommended type:** Reduce oversized headings toward 36โ42 pixels and maintain readable body contrast and size.
- **Controls:** Keep labels associated with inputs, preserve usable checkbox/radio targets and provide explicit validation messages.
- **Footer:** Allow legal and social groups to wrap without squeezing the logo.
### Adaptation guidance
- **Preserve:** Keep the condensed typographic character, long form, blue line icons and charcoal closing section.
- **Structure:** Build hero, benefits/form, testimonial, methodology and footer as independent responsive regions.
- **Fidelity:** The opening illustration visibly shows a thin laptop profile with extensive white space; do not invent an unseen screen interface.
- **Content:** Use supplied analysis categories and claims; the screenshot does not verify their technical accuracy.
- **Behavior:** Define form submission, validation and consent behavior explicitly; no resulting report is shown.
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.