## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060611-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060072254.webp
- Design on Kage: https://kage.design/designs/pitch-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type). Wait for their answers before designing. Apply everything below to that product, not to the reference product.

## Page structure
1. **Announcement strip and navigation** — Place a very slim announcement bar at the top, followed by a white navigation row with a compact brand mark on the left, a few utility links, and pill-shaped login and bright accent signup actions on the right.
2. **AI-led hero** — Use a tall, airy hero with a soft white-to-lavender glow and floating, blurred presentation or product fragments around a centered AI input composer. Put the primary prompt field in a rounded white card with a thin lavender border, a small secondary control row, and a compact purple generate button; add a short supporting line and a horizontal row of customer logos near the bottom.
3. **Why/product introduction** — Transition to a white section with a small uppercase eyebrow, a large two-line heading, and a concise paragraph. Follow it with a generous two-column feature row: explanatory copy and a purple-accented icon on the left, and a large rounded editor screenshot or product mockup on the right.
4. **Large whitespace pause** — Preserve a deliberately long vertical gap after the first product feature so the next proof section feels like a new chapter rather than a continuation of the hero.
5. **Payoff metrics** — Introduce a subtle lavender-tinted area with a small eyebrow and three evenly spaced numerical proof points. Use oversized purple numbers, short labels, and lots of surrounding whitespace.
6. **Workflow introduction** — Add an eyebrow, a large heading about moving from the first draft through completion, and a short paragraph aligned to the left. Keep the background white with a very light lilac wash.
7. **Step-one creation showcase** — Present a large rounded white panel with a numbered purple heading, a product/editor image, small interface badges, and a short feature explanation along the bottom. Let the next step card peek in from the right to imply a horizontally scrollable sequence.
8. **Customer testimonial mosaic** — Use a dense grid of small rounded testimonial tiles beneath the workflow. Mix saturated purple, lime green, black, and photographic cards; combine quotes, portraits, customer names, and company marks. Center a trust statement in one of the grid positions and add a simple customer-stories link below.
9. **Toolkit introduction** — Center a small eyebrow, a large heading, and a muted explanatory paragraph introducing the complete toolkit.
10. **Toolkit bento grid** — Build an asymmetrical multi-card grid of feature modules: AI agent, slide editor, viewer analytics, pitch rooms, brand library, team organization, and visual media. Alternate white, pale lavender, and deep purple cards, with rounded corners, compact copy, and embedded interface illustrations or screenshots. Finish with a centered dark-purple start CTA.
11. **Integrations section** — Add a centered API-interest micro-CTA above a heading about fitting into an existing workflow. Arrange recognizable generic integration symbols in a loose orbit around a large purple gradient pill, then add a centered integrations link.
12. **Dark solutions section** — Change rhythm and colour abruptly to a full-width deep purple section. Center a small eyebrow, a large light-lavender heading, and a tab row for audience segments. Below, use a two-column case-study layout with a rounded image on the left and audience-specific copy plus a lime testimonial card on the right; include white and lime CTAs.
13. **Templates section** — Continue on the same dark background with a split layout: oversized light-lavender “templates” typography and explanatory copy with a white browse button on the left, and a layered typographic template-category visual with a few preview cards on the right.
14. **FAQ section** — Add a centered FAQ heading and a compact vertical accordion list of rounded, translucent lavender rows. Each row has a centered question and a circular plus control at the far right.
15. **Footer CTA** — Return to a white footer with a very faint oversized background word treatment, a small brand mark and social links in the header row, then a large rounded deep-purple CTA panel containing a large light-lavender headline, login/signup buttons, and a small copyright line anchored at the bottom.

## Design language
- Build hierarchy through an editorial type scale: tiny uppercase eyebrow labels, bold near-black headings with tight line height, medium-weight body copy, and occasional oversized numerals or display words.
- Change density deliberately: keep the hero and first feature extremely spacious, compress the proof and testimonial sections into grids, use a modular bento rhythm for the toolkit, then slow down again for integrations and the dark-section FAQs.
- Use purple as the product signature: soft lavender and lilac washes around #F0E9FF and #DCCBFF, vivid purple accents around #5B20D6, and deep section backgrounds around #291064 or #321070. Use white and near-black #111118 as primary neutrals.
- Reserve a sharp lime accent around #C7F36A for signup buttons, selected testimonial cards, small feature surfaces, and contrast against purple. Keep the rest of the palette restrained rather than adding many unrelated colours.
- Pair a friendly geometric sans-serif for headings with the same or a closely related clean sans-serif for body text. Use bold, rounded display lettering for large headings; keep paragraphs small, dark gray, and comfortably spaced.
- Treat cards and product mockups as large rounded rectangles, generally 16–24px radius. Use thin lavender borders, very soft shadows, and occasional translucent overlays; avoid heavy borders and realistic elevation.
- Use screenshots, UI fragments, and interface diagrams as the visual language instead of generic illustrations. Crop and layer them inside cards, especially in the workflow and toolkit sections.
- Make buttons compact pills with short labels, high contrast, and small arrow or plus affordances. Use white pills on dark sections, purple pills on white sections, and lime only for high-priority contrast.
- Where motion is implemented, use slow floating/blurred movement for hero fragments, gentle horizontal motion for the workflow cards, and subtle hover lift or colour changes for cards and accordions. Keep transitions smooth and understated.

## Never
- Do not copy the reference product’s logo, wordmark, product name, tagline, exact copy, customer logos, testimonials, screenshots, illustrations, photography, or icon set.
- Do not present the result as Pitch or imply an affiliation with Pitch.
- Replace all content and visual assets with the user’s own product, audience, brand assets, and neutral or generated placeholders.