Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Zencal 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:** Zencal
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb699e5e515b69c7964f43_6acb67c964e67c0972a8b628_cms-5f85632b19d6495db795ed44.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:** Warm editorial pricing page with serif display headings, detailed comparison tables, portrait testimonials, and strong color bands.
### Page composition
- **Canvas:** 2880 ร 14398 image px; CSS estimates assume an unverified 2ร capture.
- **Top:** Deep-green navigation and centered pricing introduction.
- **Pricing:** Three plan columns plus feature-label column on a pale warm surface.
- **Middle:** Plum testimonial band, competitor comparison table, mint testimonial band.
- **Lower:** Deep-blue multi-column FAQ, plum customer strip, and dark-blue footer/newsletter.
### Information hierarchy
- **Primary:** Free-product proposition and three plan prices.
- **Comparison:** Shared feature rows use checks, crosses, counts, and peach section bars.
- **Proof:** Large portrait testimonials interrupt tables.
- **Support:** FAQ and personal onboarding CTA address pricing questions.
### Typography
- **Family:** Serif display headings paired with compact sans-serif body; exact families unverified.
- **Hero:** Approximately 40โ44 CSS px, medium serif.
- **Section headings:** Approximately 30โ32px serif.
- **Prices:** Approximately 36px.
- **Body:** Approximately 14โ16px with 22px line-height.
- **Table labels:** Approximately 12โ14px.
- **Precision:** Font metrics and assumed 2ร scale are estimates.
### Colors & surfaces
- **Warm surfaces:** #FDF0EA and #FEF8F4.
- **FAQ blue:** #073E66.
- **Footer blue:** #05253D.
- **Hero green:** #025143.
- **Testimonial plum:** #5E2A39.
- **Section-bar peach:** #F6B897.
- **Testimonial mint:** #A0D5C6.
- **Precision:** Flat colors sampled from screenshot; photography adds other shades.
### Components
- **Tables:** Fine horizontal rules, left labels, aligned plan data, and peach group rows.
- **Plan CTAs:** Rectangular colored buttons with modest rounding.
- **Testimonials:** Cutout portrait beside serif quote on full-width colored band.
- **Competitor section:** Two data columns and compact expandable-looking peach rows.
- **FAQ:** Text question/answer groups on blue background, not white cards.
- **Footer:** Newsletter input, peach submit, navigation columns, and social marks.
### Visual rhythm
- **Rhythm:** Dense tables alternate with short high-contrast testimonial bands.
- **Spacing:** Broad insets and generous section headings; tighter table-row spacing.
- **Color:** Warm pale comparison surfaces contrast with dark blue/green support areas.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Use scrollable or stacked comparison tables, reduce FAQ columns, and stack portrait/quote pairs.
- **Readability:** Keep feature labels tied to values on narrow screens.
### Adaptation guidance
- **Preserve:** Transparent comparison hierarchy, warm palette, serif accents, and testimonial breaks.
- **Content:** Use current supplied plan values and verified competitor information.
- **Behavior:** Pricing calculations, expansion, and purchase actions are not demonstrated.
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.