## 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/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060887-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060739807.webp
- Design on Kage: https://kage.design/designs/lovable-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, typeface). Wait for the answers before writing any code — everything below is a design language to apply to *their* product, not a template to clone.

## Page structure
- **Top nav** — slim bar on cream: logo left, five/six text links centre-right, outline "Log in" pill and solid black "Get started" pill on the right.
- **Hero** — full-bleed aurora gradient (white haze → blue → violet → magenta) with a centred display headline, one-line subhead, and a large white rounded prompt input (plus/attach affordance left, placeholder text, mode selector and mic icon right).
- **Platform trio** — left-aligned section heading with a two-line intro, then three equal cards on a light background, each holding a soft, dimmed product mockup above a bold one-line claim and a short muted paragraph.
- **Dark showcase** — one near-black rounded container inset from the page edges: centred section heading + subhead, then five feature blocks (e.g. hosting, integrations, payments, security, cross-device). Each block is a small semibold sub-heading with a two-line description above a large rounded visual panel with glowing gradient artwork.
- **Logo wall** — a hairline-bordered grid of customer logos on the left; heading, short paragraph, and a quiet button on the right.
- **Customer proof carousel** — centred heading, subhead, and a text link; one large white card (customer mark, two-line context, pull-quote, avatar/role, "read story" button, and a right-hand column of three big metrics), with adjacent cards peeking at the edges and prev/next arrows below.
- **Stats** — left-aligned heading and intro, then three stacked oversized numbers with small uppercase-ish labels, laid over a rising multi-colour area chart that fills the section.
- **Final CTA** — small eyebrow label, centred heading, and the same prompt input component repeated verbatim.
- **Footer** — a white rounded card with five columns of links (company / product / resources / legal / community), logo at left, language selector bottom-left; a blue→pink→orange gradient band closes the page.

## Design language
- **Base and ink**: warm cream page background (#F5F3EE), near-black text (#111111), warm gray for support copy (#6E6A64). Cards and inputs are pure white (#FFFFFF) separated by warm hairlines (#E7E3DB), not shadows.
- **One gradient does the emotional work**: blue #4E7CF6 → violet #9A5CF5 → magenta #F04FA0, softened with white haze. Use it full-bleed behind the hero, as soft glows inside dark panels, and as the closing footer band. Never use it as small accent chips on light sections.
- **Black is the action colour**: solid #111 pill buttons with white text for primary actions; outline pills with #E7E3DB borders for secondary. Links stay plain text with a small arrow glyph.
- **One dark moment**: all infrastructure/feature storytelling lives in a single near-black #191919 container (radius ~28px) inset from the page edges. Light sections never mix dark cards into them — the page alternates light → dark → light.
- **Type**: one grotesque sans (Inter/Geist-class). Display ~64px at 500–600 weight with -0.02em tracking for the hero; ~40px section headings; 18px semibold feature sub-heads; 14–15px body at 1.5 line-height; 12px captions. Stat numbers are the biggest rhythm break: ~56–64px medium, one per line.
- **Rhythm and density**: generous vertical padding (~120–160px) between sections. Density peaks in the dark showcase (heading→visual, repeated) and the footer's five link columns; it drops to one big number per row in the stats section so the figures land hard.
- **Radius and shadow**: 16–20px radius on cards, inputs, and visual panels; fully rounded pill buttons; ~28px on the dark container. Shadows are nearly absent on light surfaces — depth comes from hairlines and gradient glow instead.
- **Signature component**: the large white prompt input (plus affordance, quiet placeholder, mode label + mic) is the product's interface rendered as the hero. Repeat it at the end of the page so the entry point bookends the story. If the user's product has a core interactive surface, elevate it the same way.
- **Visuals are abstract and glowing**: mockups rendered as soft, dimmed shapes with a single gradient highlight or rim light, plus floating icon nodes and starfield/certificate-disc motifs for concepts like security and global scale. Never raw screenshots with hard browser chrome.
- **Motion**: gentle — fade-up on scroll, ~4px lift on card/button hover, carousel slide with side-peek, slow drift on gradient glows. Durations 200–400ms, ease-out. No bounce, no parallax excess.

## Never
- Do not reuse the reference's name, heart-shaped logo, wordmark, headline copy, testimonial quotes, or its customer logos.
- Do not copy its illustrations, icon set, or photography; create neutral original artwork in the same glowing-gradient style.
- Never present the result as the reference product or include any of its branding.