Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Sidebird 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:** Sidebird
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbb66151c40fa4074617c_6acbba68007da85685c19958_cms-a20d987ba2541c570f320e03.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:** Minimal creator-tool pricing page with heavy rounded headings, dark product previews and a distinctive curved lavender pricing surface.
### Page composition
- **Canvas:** 1440 × 5206 screenshot px.
- **Sequence:** Sparse navigation; centered pricing headline; warped single-plan card; editor demonstration; small testimonial; three alternating feature rows; FAQ panel; repeated curved CTA overlapping dark footer.
### Information hierarchy
- **Priority:** Large price and blue Subscribe button dominate the hero. Feature headings and screenshots explain the plan below; FAQ remains a simple readable list.
### Typography
- **Family:** Heavy rounded sans serif headings, neutral body and small handwritten annotations; exact fonts unverified.
- **Scale:** Estimated screenshot hero 56–60 px, major section heading 48 px, feature heading 32 px, body 16–18 px and price approximately 72 px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF, near-white #FAFBFC and preview/footer darks #191919/#1A1A1A/#1B191B/#1E1E1E.
- **Accents:** Lavender-blue gradient pricing card, saturated blue actions and muted green chart/status details; exact accent hex values not sampled.
### Components
- **Pricing:** Bowed top/bottom silhouette, rounded corners, large diffuse shadow, monthly/yearly capsule toggle and rising green line.
- **Features:** Dark rounded UI crops, approximately 24 px corners; selected event/status areas use light green.
- **FAQ/footer:** Pale outlined rounded panel with three visible questions; curved closing banner overlaps charcoal footer link columns.
### Visual rhythm
- **Spacing:** Approximately 140–200 screenshot px separates major features. Alternating text/image alignment and the dark previews punctuate extensive white space.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Stack feature rows, simplify curved surfaces to avoid clipping pricing text and fit toggle/CTA comfortably within mobile gutters.
### Adaptation guidance
- **Preserve:** Distinctive bowed pricing surface, sparse single-plan focus and dark product imagery.
- **Replace:** Use verified pricing, trial terms and supported functionality; do not copy reference claims or testimonial identities.
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.