## 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/moji/682da163-2f11-4698-8415-78d5458fc05f-1789193060-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/moji/682da163-2f11-4698-8415-78d5458fc05f-1789192951631-full.webp
- Component on Kage: https://kage.design/component/moji-gallery

## Before you start
Ask what workflows or product moments the user's audience most needs to understand, and what screenshots or live UI can represent them. Ask whether the brand prefers dark or light presentation.

Create a dark product showcase section with an eyebrow, a large two-line heading, and a short supporting sentence at the top. Below it, place one centered wide screenshot as the primary focal point and two smaller screenshots side by side beneath it, each with a short caption and optional one-line explanation. Use a charcoal background #202123, image frames #151617, warm-white text #f1efe9, and muted text #9b9992. Give screenshots 10–14px radii, subtle 1px translucent borders, and restrained shadows; preserve their aspect ratios and allow horizontal overflow only when intentional. Add small caption labels and a gentle reveal/hover zoom, with reduced motion support. On mobile, stack the gallery in reading order.

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