Kage Design logo kage
duvi.ai
Duvi feature grid component

Design analysis

A typographic introduction leads into a large visual showing a customer question, live inventory/product context, and an assistant response. It communicates the whole interaction rather than a single UI feature.

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/duvi/fdecc34f-2fb4-47cd-8615-09e917d211ca-1789884152-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/duvi/fdecc34f-2fb4-47cd-8615-09e917d211ca-1789884106277-full.webp
- Component on Kage: https://kage.design/component/duvi-feature-grid-3

## Before you start
Ask what the user's product, audience, and brand are, then apply these principles to that product rather than reproducing the reference.

Design a dark feature band that introduces an outcome-oriented workflow. Use a two-line headline with the first line in off-white and the second in a muted gray, followed by a concise explanatory paragraph. Below or beside it, create a wide composite mockup: a light product/detail panel next to a dark assistant conversation panel. The product panel should use a soft neutral surface (#e8e5dc), dark type, a restrained product image placeholder, price/status metadata, and a clear action. The assistant panel should use #0d1011, thin separators, compact message bubbles, and a subtle send field. Keep alignment editorial, with generous negative space and a clear visual reading order. Include responsive stacking and accessible labels for every simulated control.

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

More components