Kage Design logo kage
useomnia.com
Omnia Agent feature grid component

Design analysis

A large integrations section presents a clear heading followed by a dense, scannable three-column directory of consistent connector 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/omnia-agent/49497126-f7d8-48a0-b56b-a26990811c92-1790920877-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/omnia-agent/49497126-f7d8-48a0-b56b-a26990811c92-1790920840559-full.webp
- Component on Kage: https://kage.design/component/omnia-agent-feature-grid-2

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

Create an integrations directory section with a centered, bold heading above a three-column grid. Each connector card should be consistent in height and spacing, with a soft cream/white surface, 14–18px radius, subtle border, and gentle shadow. Include a shallow decorative media strip at the top using a generic abstract pattern, then a connector name, small capability badges such as read/write or authentication type, and a two-line description. Use generous vertical spacing between rows and keep the whole directory easy to scan. Make the grid responsive: three columns desktop, two tablet, one mobile. Use generic icon placeholders or programmatic symbols, not third-party brand marks.

Never: use the reference logo, product name, exact copy, illustrations, imagery, or branded assets.

More components