Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Vowel Features 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:** Vowel
- **Category:** Features Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f272d20ae83fa93158870e_1660054990752-864dee92-5312-4189-9f3e-c9fc9c9b5147-name%3DVowelFeaturesPage.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 long dark product-features page with oversized heavy white headings, lavender accents, violet pills, and large authentic interface screenshots.
- **Character:** The composition is bold and demonstration-led. Bright product windows contrast strongly with the deep navy page, while a pale closing region resets the tone for conversion and navigation.
### Page composition
- **Capture and scale:** The screenshot measures 1440 × 8101 pixels. Approximate dimensions below refer to screenshot pixels; CSS scale is unverified.
- **Opening:** A horizontal header contains the Vowel logo, centered navigation, and login/signup at right. A centered three-line display headline uses lavender emphasis on its final phrase, followed by a large meeting-demo image and signup action.
- **Proof and overview:** A violet testimonial panel separates the hero from a centered problem/solution heading and horizontally overflowing question-card carousel.
- **Feature regions:** Five successive sections cover interactive video meetings, transcription, collaborative notes/agendas, recordings, and sharing. Each combines an icon/heading row, a right-aligned replacement-logo group, three short benefit columns, and a large product screenshot.
- **Closing:** A pale lavender full-width region contains a centered conversion headline/button and a footer with logo/award badges, three text-link groups, a social column, and lower legal copy.
### Information hierarchy
- **Primary display:** The hero heading is the dominant opening element; the large demo supplies immediate product context.
- **Feature hierarchy:** Each white section title anchors a consistent pattern. Smaller lavender benefit headings and short descriptions precede the interface example.
- **Supporting proof:** The testimonial and replacement logos provide secondary evidence; signup controls repeat at the header, hero, and closing conversion region.
### Typography
- **Family:** A heavy rounded sans serif is used for display headings, with a neutral sans serif for body text; exact font families are unverified.
- **Display roles:** Hero type is approximately 76–80 px, weight 750–800, line-height around 1.05–1.1, and slightly tight tracking. Feature headings are approximately 44–48 px.
- **Body roles:** Benefit headings are roughly 20–22 px bold; descriptions 16 px with 24 px line-height. Testimonial copy is approximately 21–23 px with 29 px line-height.
- **Metadata:** Navigation uses compact bold text around 14 px. Testimonial attribution is uppercase with expanded tracking; footer text is approximately 15–16 px.
### Colors & surfaces
- **Dark foundation:** Sampled sRGB deep navy #161837 dominates the page. Related sampled #181C3D and slate #3C406C support the upper gradient and carousel cards.
- **Accents:** Sampled violet #694DF8 fills primary actions and the testimonial. Lighter lavender emphasizes selected words, icons, muted headings, and replacement logos.
- **Light regions:** Sampled #F3F2F9 defines the closing/footer surface; #FFFFFF and #F6F6F6 appear in product windows. #000000 supports video-player regions.
- **Contrast:** Keep core headings white on navy and closing headings navy on pale lavender. Supporting copy uses softer lavender-gray rather than pure white throughout.
### Components
- **Hero demo:** A roughly 850 px-wide rounded product image combines participant video, timeline tracks, and a white information sidebar. A large violet Watch Demo pill overlays its center.
- **Testimonial:** A wide violet panel with approximately 12 px radii splits quote text from portrait/name/role using a thin vertical divider.
- **Carousel:** Slate question cards extend beyond both viewport edges. The centered card is more emphasized; small outlined circular previous/next controls sit beneath.
- **Feature header:** A lavender circular line-icon badge precedes each heading. Small muted replacement branding aligns at the opposite side.
- **Product evidence:** Screenshots show meeting participants with notes, searchable transcript results, agenda management, recorded playback with timeline reactions, and a folder-based recording grid. They share broad centered widths, modest corner radii, and minimal outer decoration.
- **Footer:** Award/security badges sit beneath the violet logo. Text columns remain unboxed; social icons appear in vertically stacked white circles.
### Visual rhythm
- **Section cadence:** Repeat heading row → three benefit columns → screenshot, with approximately 140–180 px separation between major sections.
- **Internal spacing:** Allow 35–50 px between section headings and benefits, then 40–70 px before media. Maintain consistent screenshot edges across all five regions.
- **Contrast pacing:** The violet proof panel and slate carousel interrupt the navy flow; the pale final region supplies the largest surface change.
### Responsive
- **Observed state:** Only desktop is shown; carousel motion and alternate slides are not established by the still image.
- **Recommended reflow:** Reduce the hero to approximately 36–44 px CSS, stack benefit columns, move replacement logos below titles, and scale media proportionally.
- **Small-screen evidence:** Use readable product crops or expandable images when full screenshots become too small. Stack testimonial attribution and footer groups, and keep carousel controls usable.
### Adaptation guidance
- **Preserve:** Retain the deep navy/lavender system, heavy display typography, consistent five-part feature pattern, large product evidence, and pale closing region.
- **Adapt:** Select real feature groups and screenshots from the new product. Match each image to its accompanying benefits, varying the section count to fit actual content.
- **Evidence discipline:** Use only supplied testimonials, competitor comparisons, awards, and claims. Do not infer interaction behavior or unseen content from the static screenshots.
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.
.webp)
.avif){kind=small}
