## 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-1792044246-5.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-gallery

## Before you start
Ask what demonstrations, case studies, or media the user's product can show and which channels matter to its audience. Build an original gallery around those answers.

Build a media gallery with a small uppercase eyebrow, a bold centered heading, and a one-line supporting sentence. Use a responsive grid: two wide featured cards on the first rows, followed by a denser row of narrow portrait or square cards and a final row of supporting items. Each card should have a strong thumbnail treatment, a small category or platform badge, a visible play affordance, and bottom-aligned title plus one-line description over a subtle dark gradient. Vary the card sizes while preserving a consistent 8–12px radius and grid rhythm. Finish with a lightweight row of channel links.

Design language: warm ivory #f4f1e8, black #171715, saturated yellow #ffd21c for play buttons, and image surfaces that can use original gradients or user-provided media. Heading 34–42px, body 14px, card titles 13–16px, metadata 9–10px uppercase. Use 8–12px gaps, 24–32px card padding, 1px dark borders, and restrained shadows. Add hover scale or overlay controls, but respect reduced-motion preferences. On mobile switch to a two-column or swipeable layout and preserve readable captions.

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