## 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/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192838731-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192834410.webp
- Design on Kage: https://kage.design/designs/loqua-landing-page

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

## Page structure
- Sticky top nav: small wordmark left; text links (Pricing, Blog, Use Cases, FAQ) and a solid dark pill CTA button right.
- Hero: two stacked lines of large serif display copy ("From X… / From Y…" parallel construction), one short sans sub-paragraph, one black pill CTA plus a small "try free" line. Small floating badges/stickers at the edges.
- WPM comparison band: two cards side by side — a plain card showing the "old way" number vs a lime-tinted card showing the product's number with a sticker badge ("Fast") and an inline waveform/dictation button. Under a thin rule with a right-aligned micro-caption.
- Full-bleed dark section: huge white serif headline ("One shortcut. Any app. Zero delay."), short sub-copy, then a dense wrapped grid of pill chips each with a small app logo + name, then two platform selector pills (macOS / Windows).
- Feature chapters (Dictation, Translation, Capture to Ask, Ask & Edit, Command to Go): each opens with a large centred serif chapter title, then alternating two-column rows — one side small icon, serif sub-headline in italic-adjacent style, short sans paragraph and a numbered micro-list; the other side a demo/video panel with a "Play this demo" caption and pill play button. Alternate which side holds text vs media down the page.
- "Try it now" interactive section: left column serif heading + explanation, right column a live input demo ("Press to start speaking") beside a sample quote card, with a small flat illustration of a person at a laptop.
- Full-bleed dark testimonial wall: white serif headline, then a single dense column of dark quote cards, each with avatar, name, role, quote.
- Objection-handling card inside the dark section: "Not sure if it's right for you?" with small illustrated character and three pill buttons linking to third-party AI assistants.
- Founders' letter: centred serif italic long-form paragraph block, signed "— The Team", small plane doodle.
- Developer-grant banner: dark strip, one line of copy + arrow button.
- Footer: light, four link columns, social icons, language selector.

## Design language
- Warm cream/ivory background (~#F5F1E8) with near-black text (~#1A1A1A); a single lime/olive accent (~#B5D334 / #C6E24A) reserved for highlights, comparison cards and chips; white cards on cream.
- Hierarchy via a large editorial serif (display, often 48–96px, centred for chapter titles) contrasted with a compact neutral sans (13–16px) for body. Chapter titles are the section markers — no dividers needed.
- Rhythm: light feature rows alternate text/media sides so no two consecutive rows mirror; every 2–3 light sections, a full-bleed black band resets the pace and carries social proof or breadth claims.
- Density shifts: airy hero and chapters vs dense chip grid and testimonial wall — compress line-height and spacing in the dense bands.
- Cards: soft rounded corners (12–20px), thin light borders, minimal or no shadows; dark-section cards are slightly lighter charcoal (#242424) with subtle borders.
- Buttons: black pill (primary), white/cream pill (secondary), small rounded rectangles for play buttons.
- Interaction cues: inline waveform animation for voice input, sticker-style badges (rotated, saturated) for emphasis, hover-lift on pills.
- Illustration style: small flat spot illustrations with limited palette; doodles (sparkles, plane) as micro-accents, never full-bleed art.

## Never
Do not copy Loqua's name, wordmark, taglines, testimonial copy, illustration set, or the specific app-logo chip list. Never present the result as Loqua's site; rebuild the design language for the user's own product.