Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Pitch Landing 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:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca44a9147fe7980379107_1659675151180-62ec9cadc09ba3bfc00c05d4_screenshot-device-5d6ed15b1961d0ad8c8eb842002cb395-1659618919325.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:** A spacious presentation-software landing page with bold geometric typography, vibrant violet accents, colorful collaboration motifs, and large product demonstrations.
- **Character:** The white foundation feels polished and playful. Rounded gradient testimonial panels and circular portrait accents repeat throughout the long page.
### Page composition
- **Capture and scale:** The image measures 1440 ร 12038 pixels. Sizes below are approximate screenshot pixels; browser/CSS scale is not verified.
- **Hero:** A full-width navigation row precedes a centered two-line headline, three-line supporting paragraph, two floating circular portraits, and a large editor screenshot. A two-row customer-logo grid and video link follow.
- **Feature sequence:** A centered use-case introduction and tabbed region lead into alternating feature explanations and violet testimonial panels. Further sections cover creation tools, brand styles, and collaboration.
- **Lower page:** A four-category, three-column template gallery is followed by another testimonial, a two-column product-update feature, a full-width purple conversion banner, and a white four-column footer.
- **Content frame:** Most broad modules use approximately 1120 px width, centered. Reading introductions narrow to roughly 600โ700 px.
### Information hierarchy
- **Display hierarchy:** The headline dominates the opening; similarly bold centered section titles create repeated entry points down the page.
- **Feature hierarchy:** Short body paragraphs introduce tabbed or vertical feature-navigation regions. The active option is purple, with explanatory text beneath.
- **Social proof and conversion:** Testimonials interrupt the feature sequence, while the logo grid provides early reassurance. The most prominent lower conversion action is a yellow-orange button on purple.
### Typography
- **Family:** A geometric sans serif with heavy, rounded heading forms is visible; exact font identity is unverified.
- **Display sizes:** Estimate the hero at 76โ80 px, weight 750โ800, line-height around 1.1, and slightly tight tracking. Main section headings are approximately 54โ60 px.
- **Supporting copy:** Hero copy is around 23โ24 px; section descriptions approximately 18โ20 px with generous 1.6 line-height. Template captions and footer links are roughly 16 px.
- **Component type:** Testimonial copy is approximately 27โ29 px semibold with 1.35 line-height. Tabs use 14โ16 px bold uppercase labels with expanded tracking.
### Colors & surfaces
- **Foundation:** Sampled sRGB values include #FFFFFF, charcoal #2B2935, and very pale lavender-gray #F7F6F9.
- **Violet system:** Sampled saturated colors include #5653FF, #6F53FE, #6C52FF, #6F51FD, and #7550FC. These appear across solid or gradient media and brand-accent regions.
- **Accents:** Yellow portrait rings and the yellow-orange final button provide warm contrast; exact warm-accent hex values are not verified.
- **Secondary content:** Muted gray copy and monochrome customer logos keep supporting material quieter than the purple controls and media.
### Components
- **Header:** Logo left, a broad text navigation row, a small jobs badge, outlined sign-in, and filled violet trial action. Buttons have small corner radii.
- **Hero media:** A large editor window includes slide thumbnails, canvas, toolbars, and collaboration indicators. Subtle shadow and a small radius lift it from the white page.
- **Tabs and feature rails:** Horizontal tabs use a fine baseline and violet active underline. Vertical feature lists use a dotted rail, circular markers, bold labels, and an expanded active description.
- **Capture limitations:** Some demonstration regions are visibly blank, including the large use-case carousel area; another appears as a plain violet rectangle. Do not infer hidden slides or animation frames.
- **Testimonials:** Wide violet-to-purple panels have approximately 24โ28 px radii, generous padding, white quote text on the left, and a ringed circular portrait/name/logo arrangement on the right. One lower portrait is visibly a flat yellow circle.
- **Gallery and footer:** Twelve landscape template thumbnails form four groups of three, with small radii, fine borders, and captions below. The footer has four link columns, a fine bottom rule, copyright, and social icons.
### Visual rhythm
- **Major spacing:** Large white intervals, often approximately 140โ200 px, separate key modules. Keep heading, description, and related controls closer at roughly 24โ48 px.
- **Repetition:** The alternation of feature explanation and purple quotation creates a consistent long-page cadence.
- **Gallery rhythm:** Use equal thumbnail ratios and aligned captions, approximately 50โ60 px column gutters, and clear spacing between category rows.
### Responsive
- **Observed state:** Only a wide desktop layout is evidenced.
- **Recommended stacking:** Reduce display headings to approximately 36โ44 px CSS on phones, stack portrait/quote panels and the update feature, and collapse gallery columns progressively.
- **Controls:** Convert long navigation to a compact menu, make tabs scrollable when necessary, and keep feature descriptions adjacent to their selected labels.
- **Media:** Scale product screenshots proportionally and provide useful close-up alternatives when interface text becomes unreadable.
### Adaptation guidance
- **Preserve:** Keep the bold centered headline system, large product evidence, white-space generosity, purple testimonial rhythm, categorized template gallery, and contrasting final conversion banner.
- **Adapt content:** Choose authentic product views and relevant feature groupings. Use only supplied customer quotes and logos, and vary module count to suit the new content.
- **Avoid:** Do not reproduce blank capture regions as intentional product UI or invent what unrendered media would contain. Use a real static demonstration or omit unavailable material.
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.