Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Hiver Customers 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:** Customers Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c861cef28de6202e337_1659625089394-screenshot-device-4c7e0a354b3eedf359696aa318a349b6-1659605191825.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:** Friendly customer-proof page with navy display type, pastel testimonial cards and playful three-dimensional accents.
### Page composition
- **Capture:** 1440 × 5727 screenshot pixels; estimated CSS scale approximately 1×.
- **Structure:** Announcement/navigation, split hero/video, logo grid, testimonial carousel, case-study columns, dark ratings band, review-card grid, navy CTA and footer.
### Information hierarchy
- **Priority:** Hero promise and customer video lead; logos, detailed stories and ratings progressively reinforce trust.
### Typography
- **Family:** Rounded sans serif; exact family unverified.
- **Estimated CSS sizes:** Hero 56px, section headings 40px, testimonial 22px, body 16px and metadata 14px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, navy #121128/#0D1333, dark violet #201E38, pale blue #EEF6FF and aqua #E8F7FF.
- **Accents:** Yellow CTA/rating stars, blue links and pink/lavender/green review surfaces.
### Components
- **Elements:** Video play overlay, logo grid, portrait quote carousel/arrows, open case-study columns, laurel ratings and rounded reviews with avatars.
- **Estimated geometry:** Content 1120px wide, 16px card radii, 32px padding and 56px CTA buttons.
### Visual rhythm
- **Spacing:** Broad white sections alternate with dense proof cards; dark rating and footer bands provide strong chapter breaks.
### Responsive
- **Suggested adaptation:** Stack hero and case-study columns, reduce review grid and retain carousel navigation. Mobile behavior is unverified.
### Adaptation guidance
- **Transfer:** Preserve varied proof formats and consistent attribution. Replace reference claims and testimonials with genuine 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.