## Reference images

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

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/retriever-ai/4363ca9a-43f9-447c-8e7d-56b17f2dfed5-1792044245-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/retriever-ai/4363ca9a-43f9-447c-8e7d-56b17f2dfed5-1792044106345-full.webp
- Component on Kage: https://kage.design/component/retriever-hero

## Before you start
Ask what the user's product does, who the ideal customer is, and what action the hero should drive. Apply the following structure to that brand and create original content.

Build a full-width hero with a two-part composition: a text-and-actions area layered over the left side of a soft, scenic or product-relevant visual field, followed by enough visual height for the image to breathe. Start with a tiny uppercase or sentence-case eyebrow, then a very large, tight headline with one expressive phrase, a short two-line explanation, and a pair of contrasting CTAs. Add a low-key proof row beneath the buttons using three short metrics separated by thin dividers. Keep the content in a constrained left column while the background visual spans the full section and remains readable under a subtle pale overlay.

Design language: warm ivory #f4f1e8, black #111210, sky blue #83c8e9, muted green #8ba66c, and coral #ff735f. Use a display sans-serif around 44–58px with tight -0.05em tracking, 16px body text, and 11–12px proof labels. Use 48–64px desktop padding, 20px mobile padding, 6px button radii, thin dark borders, and a low-contrast overlay rather than a heavy gradient. The primary button should be dark with light text; the secondary should be pale blue or transparent with a border. Maintain strong contrast and stack actions on narrow screens.

Never: copy logos, product names, copy, illustrations, or imagery from the reference.