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

Design analysis

Several alternating text-and-product rows explain individual capabilities, using consistent editorial typography and small UI demonstrations.

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-5.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-2

## 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.

Create a vertical feature showcase made from multiple alternating two-column rows. Each row has a small uppercase orange eyebrow, a large serif benefit-oriented heading, a concise explanatory paragraph, and a product screenshot or mockup opposite it. Alternate image-left/text-right and text-left/image-right to create rhythm, while keeping a consistent max-width and vertical spacing. Use warm off-white `#f8f7f3`, ink `#1d1d1b`, orange `#d96e3f`, pale UI surfaces, thin `#e4e1db` borders, and restrained shadows. Product visuals should be framed as floating cards or devices with 8–16px radii. Ensure each row has enough whitespace to stand alone; collapse to text then image on mobile.

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

More components