Kage Design logo kage
composio.dev
Composio Instant feature grid component

Design analysis

A left-aligned narrative pairs with a right-side branching integration diagram, making the value of connected apps immediately scannable.

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/composio-instant/90b73b03-e2b9-4385-8074-6e8e2bc32f62-1792562873-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/composio-instant/90b73b03-e2b9-4385-8074-6e8e2bc32f62-1792562787795-full.webp
- Component on Kage: https://kage.design/component/composio-instant-feature-grid-3

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

Create a spacious split feature section. Put a large left-aligned heading with a highlighted phrase and a three-line explanation on the left; place a branching node-and-card workflow diagram on the right. The diagram should show one central source connected by curved lines to two or three destination cards, with labels and status badges. Use a 50/50 grid, 64px outer padding, black 34–40px heading, gray 14px body, thin #e8e8e8 card borders, 8px radii, and restrained blue accents. On smaller screens stack the narrative above the diagram.

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

More components