Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: UXCam Demo Request
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** UXCam
- **Category:** Demo Request
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c7adf1bb86f6df89e30_1659623070058-screenshot-device-337832601a29aab4c93fe32b48c00c79-1659603851036.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 restrained demo-request landing page with navy typography, soft blue pill actions, pale-gray background, and a dark information-rich footer.
- **Character:** Clear and service-oriented, balancing a compact form with three reassuring icon-led reasons to speak with the team.
### Page composition
- **Capture and scale:** The screenshot is 1440 ร 2281 pixels. Approximate dimensions below refer to screenshot pixels; CSS scale is unverified.
- **Header:** A white navigation bar places the UXCam logo left and compact links, outlined demo, and filled trial actions right.
- **Main area:** A centered large heading and subtitle precede a two-column region: three reassurance items left and a roughly 460 px-wide form right.
- **Proof and footer:** A centered trust statement and six monochrome customer logos follow. The lower navy footer combines link groups, compliance badge/copy, newsletter form, social icons, and legal copy.
### Information hierarchy
- **Primary task:** The heading introduces demo booking; the form is the main conversion element.
- **Reassurance:** Three blue headings with circular line-icon backgrounds explain credibility, fit, and human assistance.
- **Secondary content:** Customer logos reinforce trust before the footer. The footer newsletter remains a distinct secondary form.
### Typography
- **Family:** A rounded contemporary sans serif is visible; exact identity is unverified.
- **Display:** The main heading is approximately 52โ56 px bold with compact line-height.
- **Body and form:** Subtitles, reassurance descriptions, and field text are around 16 px with 24 px line-height. Reassurance headings are approximately 18 px bold.
- **Footer:** Group labels are around 18 px semibold, newsletter title approximately 24 px, and link/legal text roughly 12โ14 px.
### Colors & surfaces
- **Foundation:** Sampled sRGB #F6F6F6 defines the main surface, #FFFFFF the header and fields, and #EBEBEB the icon circles.
- **Navy:** Sampled #161E34 defines the footer and provides the main heading/brand ink reference.
- **Action:** Sampled blue #5D97FE supports primary actions and reassurance headings. Pale blue-gray labels remain quieter.
- **Footer contrast:** White headings and muted blue-gray copy sit on navy, with blue social marks and actions.
### Components
- **Form fields:** Four stacked single-line fields capture names, email, and phone. Inputs are approximately 50 px high, with fine gray borders and 4โ5 px radii. Phone includes a separate flag segment.
- **Discussion field:** A visible label precedes a roughly 150 px-high textarea with placeholder text and a resize grip.
- **Primary action:** A compact blue Submit pill, approximately 48 px high, aligns with the form's left edge.
- **Reassurance icons:** Three large pale circular disks contain simple navy line illustrations, aligned beside title/description stacks.
- **Newsletter:** Two white fields, a small consent checkbox with dense explanatory copy, and a blue Submit action occupy the footer's right side. The compliance badge sits in a separate column.
### Visual rhythm
- **Spacing:** Use roughly 90โ120 px between title and form region, 16โ18 px field gaps, and approximately 45โ50 px between reassurance items.
- **Proof row:** Give the logo strip generous vertical space and distribute marks evenly without enclosing cards.
- **Footer density:** The large dark footer supports more compact spacing than the main conversion region, while retaining clear group separation.
### Responsive
- **Observed state:** Only desktop is visible.
- **Recommended reflow:** Stack reassurance and form, wrap the customer logos, and collapse footer groups into a readable single/two-column sequence.
- **Form usability:** Keep inputs full width with 20โ24 px side gutters, and preserve legible consent copy instead of shrinking it to fit.
### Adaptation guidance
- **Preserve:** Retain the centered demo introduction, reassurance/form split, soft blue actions, trust strip, and distinct navy footer.
- **Adapt:** Use authentic demo questions, customer marks, compliance material, and consent wording supplied for the new product.
- **Avoid:** Do not copy leadership claims or customer/compliance evidence without support. Keep the demo form visually primary over newsletter signup.
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.