Kage Design logo kage
koiscribe.com
Koi feature grid component

Design analysis

A centered feature heading introduces call recording, then a large rounded meeting workspace demonstrates video tiles and an adjacent transcript or assistant panel.

Prompt preview
## 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-1792649018-4.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-3

## Before you start
Ask whether the user's product handles calls, collaboration, or another media-heavy workflow. Translate the structure below into that product's own use case.

Build a focused dark feature band with a centered eyebrow, a 28–34px headline, concise supporting copy, and a small secondary text link. Below it, place a large rounded showcase frame spanning most of the container. The frame should combine a primary media area with a compact side panel for notes, automation, or context. Use layered black and charcoal surfaces, subtle borders, controlled violet or brand-colour highlights, and believable UI density. Add a short four-item benefit row below the visual, with small line icons and two-line explanations. Keep the visual dominant, use 56–80px vertical spacing around the heading, and ensure the layout becomes stacked on mobile.

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

More components