Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Pitch 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:** Pitch
- **Category:** Comparison Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6de50e8221f1308364f5_6acb6bc6018523cfee2b807d_cms-92e8b1267cc11ae41246f178.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:** Confident presentation-software marketing page with oversized rounded bold typography, white editorial sections and saturated violet-blue gradient conversion areas.
- **Visual language:** Glossy 3D app icons, rockets, celebration objects and geometric slide elements mix with actual product-interface captures.
- **Capture:** The full image is 1440 ร 11291 px and was inspected in seven portions. Dimensions below are image estimates; CSS scale is unverified.
### Page composition
- **Hero:** A full-width violet-blue gradient region includes navigation, a left-aligned two-line switching proposition, short paragraph and yellow account button. Large overlapping PowerPoint/Pitch app imagery fills the right half; six pale customer marks form a bottom strip.
- **Benefits:** A centered two-line heading introduces three equal white cards with 3D icons, bold titles and centered paragraphs.
- **Comparison:** A centered headline/paragraph leads to a large rounded two-column comparison. A raised violet panel on the left contrasts with a plain white competitor column on the right.
- **Feature sequence:** Six spacious alternating image/text rows address design, collaboration, file organization, brand consistency, asynchronous presentation and sharing analytics.
- **Proof and migration:** A wide violet testimonial banner precedes a centered import/export explanation and a large embedded slide deck showing its first slide and navigation bar.
- **Closing sequence:** A template-gallery introduction and two landscape previews lead to a full-width gradient signup band containing a desktop/mobile product composition.
- **Footer:** Four plain link columns on white close with a divider and a brand/copyright/social row. Most content aligns to an approximately 1120 px centered width.
### Information hierarchy
- **Proposition:** Large white hero text leads, followed by restrained supporting copy and a contrasting yellow action with small italic reassurance beneath.
- **Benefits and comparison:** Centered large headings define major sections; card titles and check/minus lists provide more granular evidence.
- **Question-led rows:** Each feature row uses a large question-style heading and one compact paragraph, paired with an explanatory interface image.
- **Proof:** A quote, portrait and organization details sit within a colored banner; a yellow story link adds a secondary action.
- **Migration support:** The embedded presentation is visually prominent beneath a concise explanation and blue account link.
- **Conversion:** The final gradient band repeats the signup action above three short checkmarked benefits and a large product preview.
### Typography
- **Family:** Rounded heavy sans-serif headings contrast with lighter neutral sans-serif body text. Exact font identities are unverified.
- **Display headings:** Hero and major feature headings are approximately 56โ60 image px, weight 700โ800, tight tracking and roughly 60 px leading.
- **Section headings:** Centered titles use similar heavy weight and often wrap across two or three compact lines.
- **Body:** Approximately 18โ19 px with generous 35โ36 px leading in feature paragraphs. Comparison lists use the same light visual weight.
- **Cards:** Titles are about 26โ28 px bold with roughly 36 px leading; supporting centered paragraphs are around 18 px.
- **Small roles:** Navigation, buttons and footer links are approximately 16โ18 px. Reassurance text below the hero button is much smaller and italic.
### Colors & surfaces
- **Measured canvas:** ICC-aware sRGB sampling yields #FFFFFF as the dominant body surface, with pale #FAFAFC and #F9F9FB in interface imagery.
- **Measured foreground:** Dark charcoal #2A2B35 appears prominently in page typography.
- **Measured gradient tones:** #827DEA, #837EEB, #636AF9 and #626FF5 occur in the saturated violet-blue visual system.
- **Action contrast:** Yellow-to-orange signup buttons and yellow testimonial links contrast strongly against violet areas. White header buttons use violet captions.
- **Depth:** Cards have fine pale borders, large rounded corners and soft gray shadows. The raised violet comparison panel adds a colored glow.
### Components
- **Navigation:** White wordmark left, centrally distributed menu links and two white rounded account buttons right. A tiny circular badge accompanies Jobs.
- **Hero CTA:** Approximately 212 ร 48 image px with small 6 px corners, dark bold text and yellow/orange fill.
- **Benefit cards:** Three approximately 356 px-wide cards use about 24 px corners, centered 3D illustrations and generous inner padding.
- **Comparison panel:** A broad white rounded frame contains two lists. The violet inset card projects slightly above its border, with an app icon and five checkmarked statements; the competitor side uses its icon and minus markers.
- **Product figures:** Editor, workspace, template-library and sharing interfaces have small corners and diffuse shadows. Some edges fade softly into white; these are visual examples rather than live controls.
- **Testimonial:** A wide rounded gradient banner pairs quote/story link with a circular portrait outlined in warm rings and centered attribution.
- **Slide embed:** A large landscape deck preview has a black lower control strip with progress segments, previous/next arrows, slide count, share and fullscreen symbols. The capture shows slide 1 of 35; no playback or navigation is demonstrated.
- **Template previews:** Two equal landscape thumbnails sit side by side with thin pale borders. The final signup area overlaps a phone mockup in front of a larger desktop dashboard.
### Visual rhythm
- **Macro spacing:** Large white intervals, often around 120โ180 image px, separate major headings, figures and feature rows.
- **Alternation:** Reversing image/text placement maintains a steady rhythm through six detailed benefit rows.
- **Text measure:** Feature copy occupies about half the content container; centered introductions use narrower measures around 560โ650 px.
- **Card rhythm:** Equal card widths, shared baselines and repeated rounded corners organize the early benefits.
- **Color milestones:** Gradient hero, raised comparison, testimonial and closing conversion band punctuate otherwise white sections.
### Responsive
- **Evidence limit:** Only desktop is available. The following are implementation recommendations.
- **Hero and navigation:** Collapse the menu, stack copy above app imagery and reduce display type without losing the primary action.
- **Cards and comparison:** Stack benefit cards; convert the comparison into clearly labeled paired groups so list meaning survives one-column presentation.
- **Feature rows:** Place headings/copy before related images in a consistent mobile reading order and scale figures proportionally.
- **Embedded deck:** Retain usable navigation and fullscreen access rather than relying on tiny controls in a reduced image.
- **Footer and closing band:** Wrap link columns and checkmarked benefits; simplify overlapping phone/desktop imagery on small screens.
### Adaptation guidance
- **Reusable structure:** Combine a switching proposition, three outcome cards, a clear side-by-side comparison, question-led feature rows and migration help.
- **Visual system:** Reuse violet gradients, rounded heavy headings and glossy 3D objects selectively; keep long explanatory sections on white.
- **Evidence discipline:** Treat competitor claims and captured interfaces as screenshot content, not verified current functionality.
- **Content clarity:** Pair each question with one direct explanation and a relevant figure; use proof and migration content before the final signup request.
- **Accessibility:** Preserve semantic heading order, adequate light-text contrast, descriptive image alternatives and keyboard-accessible deck controls.
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.