Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Huspray Pricing 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:** Huspray
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ff1da5ae71a5d0e3b3cfef_1660886317198-pricing-Laptop%2520Medium-1660886231556.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 pricing with green gradient hero, white plan cards, and a dark footer; the capture contains layout overlap.
### Page composition
- **Canvas:** 1440 ร 4528 screenshot px. Navigation/hero, three plan cards, comparison, FAQ, closing signup, and footer. FAQ visibly overlaps comparison rows in the middle.
### Information hierarchy
- **Priority:** Plan heading and trial introduction precede Free, Team, and Enterprise cards. Team price and annual toggle receive green emphasis.
### Typography
- **Scale:** Approximate screenshot headings 44 px bold, plan names 24 px, prices 36 px, body 18 px, comparison 16 px. Sans serif family/CSS scale unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #F8F9FD, #FFFFFF, footer #222A35, and pale #F9FBFC. Green gradient, checks, toggle, and actions unify the page.
### Components
- **Details:** Plan cards roughly 360 screenshot px wide with 12 px corners and soft shadows; check lists, comparison groups, paired closing actions, and newsletter form. Some plan actions appear unusually compressed in the capture.
### Visual rhythm
- **Spacing:** About 32 px card gaps and broad section padding; middle-page collision disrupts the otherwise regular vertical rhythm.
### Responsive
- **Adaptation:** Mobile is not shown. Stack plans and use scrollable comparison; resolve FAQ/table collision rather than reproducing it.
### Adaptation guidance
- **Transfer:** Preserve green pricing hierarchy and equal plan anatomy. Correct overlap/undersized actions, and replace prices, trial terms, and limits with verified data.
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.