Kage Design logo kage
monarchmoney.com
monarchmoney.com feature grid component

Design analysis

A split panel pairs a concise connectivity message with a vivid partner-icon field, communicating broad integration coverage at a glance.

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/monarchmoney-com/635efc73-78c7-4e34-907f-7c8ed3a65d95-1789146615-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/monarchmoney-com/635efc73-78c7-4e34-907f-7c8ed3a65d95-1789146549196-full.webp
- Component on Kage: https://kage.design/component/monarchmoney-feature-grid-3

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

Build a rounded split integration section: an off-white text panel on the left and a vivid accent panel on the right containing an orderly field of circular integration icons. Use a saturated golden-yellow or brand-specific accent for the icon field, with varied icon colors, consistent circle sizes, and intentional spacing. The text side should use a small uppercase eyebrow, editorial serif heading, and short sans-serif explanation. Use a 16px radius, minimal border, and a clean vertical center alignment. On mobile, stack the text above the icon field and reduce the icon count while retaining visual density.

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

More components