Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Cycle 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:** Cycle
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbca488313d4c6c0cc4288_6acbc8e73f3e68cd1058b545_cms-4efa42a1e88bc2821a45bfa0.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:** Playful, highly polished product-marketing page combining heavy black typography, electric blue, pale lavender, floating UI and small 3D eye characters.
### Page composition
- **Canvas:** 1440 ร 14861 screenshot px.
- **Sequence:** Rounded navigation; concentric-ring hero; app demo; logo grid; integration diagram; CRM product section and six benefits; alternating feedback/insight rows; PRD card grid; lavender release section; customization rows; bento feature grid; six testimonials; blue CTA and pale footer.
- **Width:** Estimated screenshot content approximately 1280 px with 80 px outer gutters.
### Information hierarchy
- **Priority:** Three-line oversized hero highlights the final line in blue. Each major capability starts with a large centered or left-aligned heading and product imagery.
- **Proof:** Customer logos appear early; testimonial grid follows detailed feature sections before final conversion.
### Typography
- **Family:** Heavy rounded geometric sans serif for headings, neutral sans serif body; exact fonts unverified.
- **Scale:** Estimated screenshot hero 76โ80 px, major headings 56โ60 px, card titles 24โ26 px and body 18โ24 px depending on section.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF; pale blue-gray #F4F5FA; lavender #F6EDFB/#FAF3FF; footer #F7F7F7; primary blue #115BE4.
- **Accents:** Pastel yellow, green, cyan and lilac shapes outlined in black. Fine cool-gray rules and soft shadows define white product panels.
### Components
- **Hero:** Dotted concentric arcs, floating notification cards, geometric symbols and large cropped product demo with centered video action.
- **Features:** Hub-and-spoke integration diagram; alternating UI/text panels; four unequal PRD tiles; rounded bento cards with dimensional switches, keys and eye motifs.
- **Geometry:** Estimated screenshot panel radii 20โ28 px; pill-shaped primary/secondary actions; testimonial identities appear in colored rounded badges.
### Visual rhythm
- **Spacing:** Approximately 120โ180 screenshot px major-section gaps. Alternating white, lavender and pale-gray areas organize the exceptionally long page; dense UI crops are balanced by open headings.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Stack alternating rows and bento tiles, reduce hero to approximately 40 CSS px and simplify decorative characters. Keep product screenshots readable through focused crops.
### Adaptation guidance
- **Preserve:** Bold type, electric-blue action hierarchy, friendly eye characters and varied rounded grids.
- **Replace:** Use actual target-product UI and verified capabilities/customer proof; avoid reproducing the reference's lengthy content without purpose.
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.