Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Qatalog Landing 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:** Qatalog
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbd1f3f1e28b55422383bc_6acbcfedc4b48999da42f373_cms-7be11ff26010c2481e8d610d.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 product marketing with pale surfaces, orbit-like line graphics, and layered interface cards.
### Page composition
- **Canvas:** 1440 × 6222 screenshot px. Navigation, centered hero, scattered product-card collage, large workflow preview, split feature explanation, asymmetrical feature collage, business-input CTA, awards, and footer.
### Information hierarchy
- **Priority:** Large two-line proposition leads to concrete interface examples. Product flexibility and security precede the central Build input and secondary demo action.
### Typography
- **Scale:** Approximately 72 screenshot px hero/closing heading, 48 px section headings, 24 px descriptions, and 16 px navigation. Regular sans serif family and CSS scale unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #F6F8FA canvas, #F8FAFD, #FFFFFF cards, and subtle pale lavender rings. Black-to-gray headings, bright blue interface accents, and mint buttons create hierarchy.
### Components
- **Details:** Rounded floating cards roughly 20 px radius with soft shadows contain workflows, people, documents, and timelines. Closing input has a deeply rounded white shell and mint Build button.
### Visual rhythm
- **Spacing:** Very large section gaps and a roughly 1200 screenshot px content width. Overlapping cards contrast with sparse centered typography.
### Responsive
- **Adaptation:** Mobile is not shown. Simplify card collages into a vertical sequence and reduce orbit graphics while retaining readable product examples.
### Adaptation guidance
- **Transfer:** Preserve the quiet palette, lightweight typography, and interface-led storytelling. Use genuine product views and verified security 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.