Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Rye 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:** Rye
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadcb08c9a73ab05f1313d_6acadc0badcaf74490d29901_cms-c14f122fa4abf72a7326d300.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:** Futuristic commerce-infrastructure landing page with a luminous green hero, near-black navy body and polished technical illustrations.
### Page composition
- **Canvas:** 2880 × 13894 screenshot pixels; CSS estimates assume approximately 2× scale.
- **Sequence:** Gradient hero; investor-logo grid; split API/code introduction; Inventory, Checkout and Monetization feature chapters; large testimonial; gradient CTA; sparse footer.
- **Grid:** Repeated asymmetric two-card layouts and three-column supporting features within a centered content width.
### Information hierarchy
- **Priority:** Oversized centered headline and dark action introduce the offer. Each product chapter uses an uppercase eyebrow, title and small demo action.
- **Proof:** Code, shopping interfaces, review/shipping visuals and customer quotation provide successive evidence.
### Typography
- **Family:** Geometric sans-serif with rounded forms plus monospace code; exact fonts are unverified.
- **Scale:** Estimated CSS hero 96–104px, chapter titles 46–48px, card headings 28px, body 16px and uppercase labels 12px with tracking.
### Colors & surfaces
- **Sampled palette:** Main navy #010314; dark variants #080A1A, #050717 and #0A0D1C; white #FFFFFF.
- **Accent:** Vivid green gradients transition through mint/white and teal; green outlines, links and testimonial text carry the accent into dark sections.
### Components
- **Cards:** Rounded thin-bordered dark panels alternate with luminous green illustration panels, showing products, phone checkout, fees and orbit-like affiliate marks.
- **Controls:** Uppercase pill actions and small line icons in glossy dark squares; estimated 20px card radii and 44–56px button heights.
- **Hero:** Large rounded lower corners and a horizontal checkmarked use-case strip.
### Visual rhythm
- **Spacing:** Broad 100–140px CSS chapter padding and large testimonial typography create a spacious technical narrative.
### Responsive
- **Guidance:** Mobile is not shown. Stack asymmetric cards, reduce hero text and allow code to scroll; keep diagram labels readable.
### Adaptation guidance
- **Transfer:** Retain green-on-navy atmosphere and product-chapter structure. Use original commerce diagrams and verified claims/investor/customer evidence.
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.