Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Veed Affiliate 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:** Veed
- **Category:** Affiliate Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ee97d3c33cc72961bee86c_1659802886466-screenshot-device-867a67f2f0a537ea2a71511d4c265855-1659802794423.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:** Friendly affiliate-program landing page with pale-gray canvas, navy headings, product imagery, and soft pastel decoration.
### Page composition
- **Canvas:** 1440 × 3551 screenshot px.
- **Header:** Navigation and centered brand, followed by breadcrumb.
- **Hero:** Affiliate copy and dark Apply Now pill left; editor/photo collage right.
- **Body:** Three numbered explanation columns, editing feature pair, large rounded white tools panel, repeated CTA, and black footer.
### Information hierarchy
- **Primary:** Earn money with VEED headline and application action.
- **Process:** Three numbered steps explain Apply, Promote, Earn.
- **Product proof:** Editor screenshots and subtitle UI support the affiliate message.
- **Conversion:** Repeated Apply Now before footer.
### Typography
- **Family:** Rounded geometric sans serif; exact family unverified.
- **Hero:** Approximately 48 screenshot px, bold.
- **Section headings:** Approximately 36–40px, bold.
- **Body:** Approximately 16–18px with 26px line-height.
- **Labels:** Approximately 14px, uppercase.
- **Precision:** Sizes are screenshot estimates.
### Colors & surfaces
- **Canvas:** #F7F7F7.
- **Panels:** #FFFFFF.
- **Footer:** #000000.
- **Pastel illustration surface:** #E1F1FF.
- **Other pale shade:** #F7F6F9.
- **Heading/buttons:** Dark navy, exact flat token unverified.
- **Art accents:** Peach, mint, pink, and pale blue.
- **Precision:** Samples include WebP compression.
### Components
- **Buttons:** Dark navy pills approximately 50px screenshot height.
- **Process markers:** Small dark circles with white numbers.
- **Collage:** Editor window, floating photo strip, and pastel shapes.
- **Tools panel:** Large white rounded rectangle with text/icons left and subtitle mockup right.
- **Feature selector:** Outline icons in a horizontal row.
- **Footer:** Dense link groups and small cookie-consent overlay.
### Visual rhythm
- **Spacing:** Broad gaps between hero, process, feature sections, and final action.
- **Alignment:** Repeated two-column pairings use shared content edges.
- **Contrast:** Large white tool panel interrupts the pale-gray page.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Stack hero and feature pairs, reduce process to vertical steps, and wrap footer links.
- **Images:** Preserve legible crops and avoid shrinking detailed editor controls excessively.
### Adaptation guidance
- **Preserve:** Affiliate explanation, simple three-step process, product proof, and repeated application CTA.
- **Content:** Use supplied program terms and current eligibility; do not invent commissions.
- **Behavior:** Application and tool-selector interactions are not shown.
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.