Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Butter Comparison 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:** Butter
- **Category:** Comparison Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbd073b6b24eada54884b_6acbbc315fa786bc87a9dad1_cms-36b2a50bc0d71905fd0f0e23.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:** Playful comparison page with bright yellow branding, heavy friendly type, abundant social proof and a long structured feature table.
### Page composition
- **Canvas:** 1440 ร 9787 screenshot pixels; CSS estimates are near screenshot scale, with capture scale unverified.
- **Sequence:** Yellow split hero; editorial introduction; blue benefit panel; testimonial masonry; two use-case cards; comparison table; case studies; oversized FAQ; dark CTA/footer.
### Information hierarchy
- **Priority:** Comparison title and paired free/demo actions lead to narrative context, benefits and proof.
- **Detail:** Table groups features under category bands. FAQ uses eight large collapsed rows before the final conversion band.
### Typography
- **Family:** Rounded geometric sans-serif, with very heavy headings; exact font is unverified.
- **Scale:** Estimated CSS hero 48px, section titles 40โ44px, introductory paragraphs 28โ32px, body 18โ22px and deliberately oversized stacked FAQ display around 180โ200px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF; deep ink #090D1E; yellow #FFF26D; pale yellow #FFFAD7; pale blue #EDF6FD.
- **Accents:** Mint shapes on case-study panels, light blue social icons and dark navy primary actions.
### Components
- **Cards:** Rounded white testimonial cards with avatars and soft shadows; two broad use-case cards; three illustrated logo case studies.
- **Table:** Three-column bordered comparison with yellow header and pale category rows; text is centered in product columns.
- **FAQ:** Large white pill-like rows, bold questions and right plus icons. Estimated 24โ32px card radii; hero actions roughly 60px high.
### Visual rhythm
- **Spacing:** Large 100โ160px CSS gaps separate narrative and proof chapters; dense table rows create a contrasting factual middle.
### Responsive
- **Guidance:** Mobile is not shown. Stack proof/case-study cards and provide a readable horizontal-scroll or labeled comparison layout; reduce oversized FAQ display.
### Adaptation guidance
- **Transfer:** Retain approachable comparison hierarchy and mixed narrative/table evidence. Replace competitive claims, rates and endorsements with verified target content.
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.