## 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/lorikeetcx-ai/66a45b6c-3f5c-4089-bde2-7a0aa025402f-1789141728989-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lorikeetcx-ai/66a45b6c-3f5c-4089-bde2-7a0aa025402f-1789141715501.webp
- Design on Kage: https://kage.design/designs/lorikeetcx-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, logo, colours, typefaces, existing photography). Wait for the answers before writing any code. Apply everything below to *their* product and brand — this prompt describes a design language, not a clone of the reference site.

## Page structure
Build a single scrolling landing page with these sections, top to bottom:

1. **Floating pill navigation** — white rounded bar pinned near the top: small colourful logo mark + wordmark left; five plain text links centred; black pill CTA button right.
2. **Hero** — centred two-line serif headline (~72px), two lines of 14–15px grey sans subcopy, one black pill CTA; below it a single candid photograph in a large rounded-corner card on a soft cream gradient wash.
3. **Proof bento** — serif section heading plus one-line subcopy, then an asymmetric grid: two testimonial cards (photo left, serif pull-quote, name/role, brand logo bottom-right) and four stat cards, each with a 64–96px serif numeral, a 12–13px label, a brand mark, and its own gradient tint (mint, blue-green, butter-yellow, white).
4. **Logo wall** — two rows of roughly six monochrome grey customer logos, evenly spaced, no borders or cards.
5. **Comparison split** — two columns under opposing headings: left shows a grey, dead-ended chat mockup ending in a deflection line; right shows a mint-tinted email mockup with a concrete, resolved reply. Beneath, a scenario switcher: a thin gradient progress bar with three text tabs, active tab in ink, inactive in grey.
6. **Channels statement** — a centred serif line like "Your tools. Your rules." with small line icons (voice, email, chat) floating above and beside it; deliberately empty space.
7. **Escalation section** — two-line serif heading, short subcopy, then one focal object: an app icon inside a white rounded square with a soft rainbow glow, ringed by small white pill chips naming workflow steps and API calls.
8. **Integration diagram** — centred serif heading and caption; thin curved connector lines (magenta→orange gradient) sweep in from the left and right edges toward small tool icons arranged along a gentle arc.
9. **Resolution card** — serif two-line heading plus subcopy, then a single white card: success chip, circular customer photo, short quoted outcome line, name and timestamp.
10. **Stories carousel** — serif heading; three cards in a row with the centre one larger and the side ones cropped by the viewport; photo top, quote, name/role, brand logo; dot pagination below.
11. **Closing CTA** — one oversized serif line and a black pill button, nothing else.
12. **Footer** — large wordmark bottom-left over a blurred magenta/green gradient bloom; two link columns right (Product, Company); legal row plus small circular compliance badges.

## Design language
- **Type pairing**: one editorial serif (Canela/Tiempos-like) for every headline, section title, stat numeral and pull-quote, at 56–96px with tight leading; one neutral sans at 13–15px for body, labels, nav and UI chrome, in muted grey.
- **Canvas and ink**: warm cream background (~#F7F3EC), near-black ink (~#141414). Never pure white as the page background; white appears only as card surfaces.
- **Colour discipline**: saturation lives in blurred gradient washes, not flat fills — mint (~#DCF2DF), blue-green (~#D8E9EE), butter (~#F5EEC8) behind cards; magenta→orange (~#F05BC0 → #FF8A5B) reserved for the progress bar, connector lines, glows and the footer bloom, always at low opacity and heavily blurred.
- **Cards and depth**: radius 16–24px, hairline borders or none; soft diffuse shadows only on embedded UI mockups; tinted stat cards may carry a white inner panel for contrast.
- **Hierarchy**: big serif numbers and headlines do the persuasion; body copy stays tiny, quiet and centred. Only one focal object per airy section.
- **Rhythm**: alternate dense sections (bento grid, comparison, carousel) with airy statement sections (≥120px vertical padding, one line of type plus one object) so the page breathes after every proof block.
- **Buttons**: black pill, white 13px text, fully rounded; secondary affordances are underlines or tinted chips, never outlined buttons.
- **Photography**: warm, candid, people mid-task, inside rounded cards; no stock-smile collages.
- **Logos**: always monochrome grey (~#9A9A9A) at a consistent height, both in the wall and inside cards.
- **Motion and state**: dot pagination for carousels, gradient progress bar with active/inactive tab states, gentle fades on slide change; no parallax or aggressive animation.

## Never
- Do not use the reference brand's name, bird logo, wordmark, exact gradient recipes, testimonial quotes, customer names, photos or icon set.
- Do not reuse its headline copy or marketing phrasing; write copy for the user's product.
- Never present the result as that product or imply any affiliation.