Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Bubble 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:** Bubble
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca43e51782c3de43f6202_1659674876872-62ec9c9e17fa63214e80da46_screenshot-device-44dd24b7eec38ee6cb7aac2046b44258-1659617435060.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:** Straightforward pricing page with white cards, blue actions, pale-gray solution panels, and deep-purple closing band.
### Page composition
- **Canvas:** 1440 ร 2721 screenshot px.
- **Sequence:** Navigation, centered pricing headline, billing tabs, four plan cards, compare action, three special-solution panels, dark CTA, footer.
### Information hierarchy
- **Primary:** Free-to-start proposition.
- **Plans:** Four equal cards with names, concise features, and prices.
- **Alternative:** Dedicated/agency/education options below.
- **Conversion:** Blue signup and compare actions.
### Typography
- **Family:** Neutral sans serif; exact identity unverified.
- **Hero:** Approximately 40โ44px bold.
- **Section titles:** Approximately 28px.
- **Body:** Approximately 14โ16px.
- **Plan labels:** Approximately 18px bold.
- **Precision:** Screenshot estimates.
### Colors & surfaces
- **Canvas:** #FFFFFF.
- **Dark band:** #100634.
- **Pale panels:** #F2F3F7 and #F3F5F7.
- **Additional neutral:** #F7F6F9.
- **Actions:** Saturated blue; exact token unverified.
- **Precision:** Flat samples.
### Components
- **Cards:** White rounded rectangles with diffuse shadow.
- **Billing:** Underlined annual/monthly text tabs.
- **Compare:** Full-width blue rectangle.
- **Special solutions:** Broad pale rounded panels.
- **Closing:** Light-blue button on dark-purple surface.
### Visual rhythm
- **Spacing:** Large hero gaps, equal plan columns, repeated broad solution panels.
- **Alignment:** Comparison and solution sections share centered width.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Stack plans, wrap billing tabs, and preserve price-unit clarity.
### Adaptation guidance
- **Preserve:** Free-entry hierarchy and clear specialized alternatives.
- **Content:** Use current supplied pricing; do not copy historical plans.
- **Behavior:** Billing switch and checkout unverified.
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.