monarchmoney.com
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.
kage