Kage Design logo kage
hanomi.ai
hanomi.ai feature grid component

Design analysis

A dark, high-contrast feature band centers a large integration headline, places a 3D product object in the middle, and connects it visually to three downstream software cards.

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/hanomi-ai/e6570335-e597-4dea-b51d-b53895fecbf1-1790500615-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hanomi-ai/e6570335-e597-4dea-b51d-b53895fecbf1-1790500563313-full.webp
- Component on Kage: https://kage.design/component/hanomi-feature-grid-3

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Apply the following principles to that product rather than reproducing this reference.

Create a dramatic dark integration section. Use a black or near-black background (#050505), a large uppercase or display-style white heading near the top, and a central product object or abstract system node beneath it. Draw thin connector lines from that node to three evenly spaced cards representing supported destinations or integrations. Cards should be white or pale gray with 12–16px radius, subtle shadow, and a compact visual preview plus label. Keep the composition centered, highly structured, and responsive: on mobile, stack the cards and replace long connector lines with a simple vertical progression. Use white lines at low opacity and one warm orange accent (#f47b20) for the central object or highlights.

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

More components