Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Livestorm 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:** Livestorm
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbb9b2d1be8ecd2912dc7a_6acb63e2c72e79fb6db622ad_cms-1c601728bccaa535f048f915.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:** Detailed usage-based pricing page with pale-blue comparisons, four plan cards, blue actions, and gentle 3D illustrations.
### Page composition
- **Canvas:** 2880 ร 16440 image px; CSS estimates assume unverified 2ร.
- **Sequence:** Split pricing hero, four plans, extensive grouped comparison tables, reviews, enterprise banner, FAQ, blue trial banner, footer.
### Information hierarchy
- **Primary:** Usage-pricing proposition and plans.
- **Comparison:** Repeated plan columns across usage, integrations, security, services, and platform features.
- **Support:** Reviews and FAQ follow detailed evaluation.
### Typography
- **Family:** Neutral sans serif; exact identity unverified.
- **Hero:** Approximately 48px CSS.
- **Section headings:** Approximately 32px.
- **Plan headings:** Approximately 22โ24px.
- **Body/table:** Approximately 13โ16px.
- **Precision:** Estimated under 2ร.
### Colors & surfaces
- **Canvas:** #FFFFFF.
- **Pale tables:** #F0F6FA and #F0F6F9.
- **Dark enterprise panel:** #12262A.
- **Borders:** #EAEEF1.
- **Secondary pale:** #F5F8F9.
- **Actions:** Bright blue, exact token unverified.
- **Precision:** Flat samples.
### Components
- **Plans:** Rounded pale cards, price/limits, filled signup/contact actions.
- **Table:** Thin row rules, info icons, green checks, highlighted enterprise column.
- **Reviews:** Award panel beside quote card.
- **FAQ:** Expandable-looking rows; first answer visible.
- **Closing:** Rounded blue gradient band.
### Visual rhythm
- **Rhythm:** Dense comparison groups separated by generous headings.
- **Alignment:** Plan columns remain consistent across tables.
- **Breaks:** Review/banner sections interrupt long numeric content.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Scroll tables with persistent labels or stack comparisons; reduce cards to fewer columns.
### Adaptation guidance
- **Preserve:** Usage definition, clear plan columns, detailed feature grouping.
- **Content:** Use current supplied limits/prices/reviews.
- **Behavior:** Pricing calculator and FAQ toggles 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.