Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Wistia 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:** Wistia
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6de70e8221f130836555_6acb6bcdb206c0d3f8f2dd07_cms-b3d887232f62d9607a9a6e70.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, colorful pricing page with light-blue brush textures, rounded white plan cards and a detailed comparison matrix.
### Page composition
- **Capture:** 1440 × 6266 screenshot pixels; estimated CSS scale approximately 1×.
- **Structure:** Navigation, blue hero/billing toggle, four paid-plan cards, free-plan strip, customer logos, five-plan comparison, pale promotion, blue FAQ, saturated CTA and footer.
### Information hierarchy
- **Priority:** Hero and large prices lead into plan actions/benefits; detailed feature groups support comparison before FAQ and closing actions.
### Typography
- **Family:** Sans serif with light display headlines and bold pricing; exact family unverified.
- **Estimated CSS sizes:** Hero 52px, section titles 40px, prices 56px, plan names 36px and body 16–18px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, FAQ #EBF5FD, stripe gray #F8F8F9, CTA blue #045BCF, hero #CCE7FB and promotion cream #FDF7E7.
- **Accents:** Green, blue, violet and pink distinguish plan columns and checkmarks.
### Components
- **Elements:** Annual/monthly pill, discount sticker, shadowed cards, trial buttons, subscribe links, alternating table rows, info icons and chevron FAQ.
- **Estimated geometry:** Content 1280px wide, 20px plan gutters, 16px card radii, 32px padding and 60px CTA buttons.
### Visual rhythm
- **Spacing:** Large plan cards give way to dense comparison rows; colored bands reset the rhythm after the table.
### Responsive
- **Suggested adaptation:** Stack plan cards and preserve horizontal comparison scrolling; place FAQ heading above questions. Mobile behavior is not shown.
### Adaptation guidance
- **Transfer:** Preserve plan-color consistency and summary/detail progression. Replace historical pricing and limits with actual terms.
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.