Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Hiver 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:** Hiver
- **Category:** Affiliate Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c63df1bb828b8f89caf_1659620686885-screenshot-device-7d5abb9f99408d78e869bb41c9c186b9-1659599094588.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:** Traditional SaaS partner-program landing page, combining a saturated purple hero, a prominent white application form and a long pale-blue explanatory canvas.
- **Personality:** Yellow brand accents and friendly purple-and-yellow illustrations soften a business-oriented referral proposition.
- **Capture:** Observed desktop dimensions are 1440 × 3965 image pixels. CSS dimensions below are estimates assuming approximately 1:1 capture scale; browser scaling is unverified.
### Page composition
- **Header:** The logo sits at the left of an approximately 1120-pixel container. Product navigation, contact link and a small yellow demo pill occupy the upper right.
- **Hero:** A purple gradient with broad diagonal bands fills roughly the first 528 image pixels. The left column contains a two-line partner headline and three-line supporting paragraph.
- **Application placement:** A white form card begins near x742, y185, spans approximately 456 pixels and continues below the hero onto the light-blue background.
- **Logo proof:** Six customer logos appear in a two-row, three-column grid beneath the hero copy, balancing the lower half of the form.
- **Benefit introduction:** A centered lavender panel follows, approximately 895 pixels wide, with a heading and three lines of supporting text.
- **Explanation sequence:** Three spacious alternating text-and-illustration rows explain the referral mechanism, financial reward and signup steps.
- **Closing proof and footer:** A floating award panel bridges the pale-blue and white regions. A ratings strip follows, then a light-gray five-column footer, dark contact strip and narrow legal baseline.
### Information hierarchy
- **Primary action:** The application form is the largest distinct surface in the opening composition, making signup the principal task.
- **Proposition:** The white partner headline leads the left column; its supporting copy explains commissions with a smaller type size and relaxed line spacing.
- **Form order:** First name, last name, business email, company and phone lead to the warm-colored submission button, agreement copy and partner badge.
- **Explanatory headings:** Each alternating row has a short purple question heading, followed by a compact paragraph or stepped text block.
- **Trust layers:** Customer logos provide early reassurance, while the award and three rating groups reinforce credibility near the end.
- **Footer hierarchy:** Small bold category labels organize link lists; compliance marks and platform badges sit in a separate row above them.
### Typography
- **Family:** A humanist-style sans-serif is visible; exact font identity is unverified.
- **Hero heading:** Approximately 36-pixel CSS size, regular weight and 56-pixel line height; the two-line text is left aligned.
- **Hero body:** Approximately 18 pixels with 34-pixel line height, forming a comparatively airy three-line paragraph.
- **Section headings:** Approximately 22–24 pixels, regular-to-medium weight, in purple. Explanatory body copy is approximately 16–17 pixels with 28–30-pixel line height.
- **Form typography:** The centered form title is approximately 20 pixels. Field labels are around 14 pixels; the submit label around 16 pixels.
- **Proof and footer:** Rating scores and proof headings use roughly 20–24 pixels. Footer labels and links are approximately 14 pixels, with 30–38-pixel vertical link spacing.
- **Legal details:** Agreement and baseline text are substantially smaller, around 12–13 pixels, and muted.
### Colors & surfaces
- **Measured background:** The large pale-blue canvas samples #F6FAFD; white cards sample #FFFFFF and the footer background #F6F6F6.
- **Measured lavender:** The benefit panel includes #E1E2F8. Illustration regions also contain #DDDBF5 and #CBC6F3.
- **Measured purple family:** Sampled purple pixels include #5540B5, #5841B4 and #7351B5; lighter illustration accents include #8D7CE4.
- **Measured dark surface:** The contact strip includes #252525.
- **Accent use:** Yellow appears in the logo, demo button, illustrations and review laurels; the application action transitions from yellow to warm peach.
- **Text and depth:** Body text uses cool blue-gray, headings deep purple and hero copy white. Logo tiles and the award panel use soft gray shadows.
### Components
- **Application card:** Approximately 456 × 715 image pixels, with roughly 12-pixel corner rounding and about 43-pixel horizontal inset.
- **Fields:** Five vertically spaced labeled entries use thin gray underline borders rather than full boxes. The phone field divides country selection from the dialing/input area.
- **Submit button:** Approximately 330 × 38 image pixels with minimal rounding and centered dark text. Agreement text and a linked agreement phrase sit below.
- **Customer tiles:** Approximately 174 × 82 image pixels with about 18-pixel corners, white fills and subtle shadows; logos are centered within generous padding.
- **Benefit panel:** Opposite corners have large curved cuts, approximately 80-pixel radii, while the other corners remain square.
- **Explanatory illustrations:** Purple organic backplates support a support-agent scene, coin stacks with an upward arrow, and a person ascending financial bars.
- **Award card:** A centered white rounded card, approximately 620 pixels wide, carries a badge overlapping its upper edge and small decorative colored shapes around it.
- **Ratings strip:** A left-aligned proof statement precedes three numeric rating groups with blue stars, source marks and yellow laurel brackets.
- **Footer utilities:** Compliance marks sit left; workspace and app-store badges sit right. A round purple support control overlays the lower-right edge.
### Visual rhythm
- **Grid:** The hero and footer share roughly 160-pixel outer gutters; explanatory rows use a slightly narrower interior alignment.
- **Vertical spacing:** Large breaks of roughly 100–150 pixels separate explanatory rows, leaving the illustrations and short text blocks isolated.
- **Form cadence:** Labels and underlines recur at approximately 70–85-pixel intervals, with a larger gap before submission.
- **Alternation:** Text-left/image-right, image-left/text-right and text-left/image-right create a clear three-step reading rhythm.
- **Density transition:** The pale-blue middle stays sparse; the proof strip and footer progressively increase information density.
### Responsive
- **Recommendation — opening layout:** Stack the proposition, application form and customer logos; remove the form's dependence on overlapping a fixed-height hero.
- **Recommendation — fields:** Keep field widths fluid with readable labels and a usable country-code selector; use a comfortably sized submission target.
- **Recommendation — explanations:** Stack each text/illustration pair in a consistent reading order and reduce the large desktop whitespace.
- **Recommendation — proof:** Wrap logos and rating groups without reducing their marks to illegible sizes.
- **Recommendation — footer:** Collapse the five link groups into stacked sections and wrap platform badges. No mobile state or breakpoint behavior is evidenced.
### Adaptation guidance
- **Preserve the task focus:** Place the actual partner application beside the proposition, with customer proof immediately adjacent.
- **Reuse the color roles:** Reserve saturated purple for the opening identity, pale blue for explanatory space, white for forms and yellow for selected brand/action emphasis.
- **Keep the explanation concrete:** Use separate mechanism, reward and getting-started sections, each paired with a relevant illustration.
- **Maintain form clarity:** Preserve label-to-field association, required indicators, country selection and agreement placement; implement validation and focus states separately.
- **Control decorative scale:** Retain the diagonal hero bands and asymmetric benefit panel without allowing them to crowd text or the form.
- **Separate proof from navigation:** Keep award and ratings modules above the denser footer rather than mixing them into link columns.
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.