## 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/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792649017-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792648920300-full.webp
- Component on Kage: https://kage.design/component/koi-feature-grid

## Before you start
Ask what the user's product helps people do and what its most compelling in-context interaction is. Apply these rules to the user's product and brand.

Create a dark, editorial feature section with a nearly black background and subtle separation from adjacent bands. Start with a wide product showcase that is allowed to sit in generous negative space, followed by a centered eyebrow, headline, supporting sentence, and a small interaction hint. Use a restrained white hierarchy: 10–11px uppercase eyebrow with letter spacing, 24–32px headline, and 12–14px muted body copy. Place a large rounded software frame below, with layered panels, soft shadows, and a faint blue-violet atmospheric glow. Use a 12-column or flexible grid and keep content aligned to a consistent max-width. Small hints, chips, and keyboard prompts should feel discoverable but not noisy. On narrow screens, turn the showcase into a single-column image or interactive mockup.

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