Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Tona 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:** Tona
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6362acf91adbed5ee056_6acb629a81513cf526d0a421_cms-4800916c7d64b076d277204e.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 pastel pricing with a prominently highlighted middle plan.
### Page composition
- **Canvas:** 2880 × 6404 screenshot px. Navigation, rounded blue/lavender hero-pricing block, three plans, FAQ, warm gradient contact banner, and footer.
### Information hierarchy
- **Priority:** Plan headline and three short trial assurances precede billing toggle; Plus is identified as most popular with a drawn arrow and purple action.
### Typography
- **Scale:** Estimated CSS at assumed 2× capture: heading 48 px bold, plan titles 32 px, prices 40 px, body 16 px, FAQ heading 40 px. Family unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #F9FAFB, #FFFFFF, highlighted #F2F1FF, text #282522, gradient #DDE2FF/#DBECFF. Purple titles/actions and warm peach/pink contact gradient add emphasis.
### Components
- **Details:** Estimated 32 CSS px outer corners, connected white plan container, inset lavender center column, emoji plan icons, shadowed buttons/arrows, billing switch, thin FAQ rules, and circular contact portraits.
### Visual rhythm
- **Spacing:** Broad 72–100 CSS px hero padding, evenly aligned feature rows, and a narrower FAQ column.
### Responsive
- **Adaptation:** Mobile is not shown. Stack plans while retaining middle-plan emphasis and keep assurances readable.
### Adaptation guidance
- **Transfer:** Preserve pastel grouping and explicit plan differentiation. Replace prices, limits, trial promises, and popularity claims 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.