Generate a new design based on this screen using your own content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: June 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:** June
- **Category:** Comparison Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad91181d0b61fedf68d46_6acad8816cd44b3ad4d82c8a_cms-9c17a91ce77f7eb686869255.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
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.
Juneโs comparison page strikes a flawless balance between minimalist and modern design. Clean lines, ample white space, and restrained accents create a crisp, professional atmosphere. Micro-animations and subtle shadows add polish without overwhelming, establishing a visual calm ideal for B2B products.
Layout and Structure
The page structure is thoughtfully linear, guiding visitors from a focused hero section into a side-by-side competitor comparison. Scannable cards, clear section breaks, and clever use of sticky elements ensure information is easily digestible. A clear call-to-action appears both near the start and end, supporting conversion while respecting UX best practices.
Visual Elements
Distinctive custom illustrations and soft, geometric icons punctuate the content. Muted, brand-consistent color blocks highlight key differences without resorting to harsh contrasts. Thereโs light use of animationโsuch as hover effects and gentle transitionsโthat signals interactivity and depth, creating a delightful browsing experience.
Color Palette and Typography
A restrained palette of cool greys, whites, and a signature June blue fosters trust and continuity. Typography is elegant and contemporary, with a highly legible sans-serif for body text and bold headings that establish a clear hierarchy. Key phrases and metrics are highlighted in accent colors, drawing the eye without disrupting flow.
User Experience Patterns
Intuitive navigation, sticky headers, and persistent CTAs make for seamless exploration. Content is organized into digestible sections with visual cues leading the user forward. Interactive comparison toggles add control, while concise, benefit-driven language maximizes clarity.
Unique or Notable Elements
The side-by-side comparison modules are exceptionally scannableโleveraging slim dividers and card-like containers for quick parsing. Branded icons and playful, friendly illustrations soften the professionalism, making June feel both innovative and approachable. The overall tone is quietly confident and user-first.