Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Makelog 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:** Makelog
- **Category:** Demo Request
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb7262b10d21a746c47a1b_6acb7102b679c88211a4b7d6_cms-4d6e3bb41ea1d3dfab7fc4ff.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:** Airy demo-request page with a soft grainy rainbow glow, dark navy text and rounded pill controls.
### Page composition
- **Canvas:** 2880 ร 3736 screenshot pixels; CSS estimates assume approximately 2ร scale.
- **Structure:** Announcement pill and navigation; centered demo heading/form on pale background; white FAQ; deep navy footer.
### Information hierarchy
- **Priority:** Book a demo title and short explanation lead directly to email input and scheduling action. Three collapsed FAQ questions follow.
### Typography
- **Family:** Rounded neutral sans-serif; exact font is unverified.
- **Scale:** Estimated CSS hero 46โ48px, FAQ heading 30px, questions 24px and body/input text 17โ18px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF; navy #101A28; pale grays #F3F4F6, #F2F3F5 and #F1F2F4.
- **Atmosphere:** Cyan, pink and warm orange blurred light with visible grain gathers in the upper-left hero.
### Components
- **Form:** Wide soft-gray email pill beside dark scheduling pill; estimated 48px CSS height and fully rounded ends.
- **FAQ:** Narrow centered list, thin rules and right plus icons.
- **Footer:** Brand description/launch badge plus Product and Company columns, legal links and chat launcher.
### Visual rhythm
- **Spacing:** Approximately 100โ120px CSS section padding, with 40โ48px FAQ row spacing and generous form margins.
### Responsive
- **Guidance:** Mobile is not shown. Stack input/action and retain generous FAQ targets; simplify footer columns.
### Adaptation guidance
- **Transfer:** Preserve low-friction demo entry and restrained atmospheric background. Use relevant FAQ and scheduling copy.
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.