monarchmoney.com
Design analysis
A centered explanatory introduction transitions into a large dashboard preview, making the product tangible before the feature sections begin.
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-1789146614-3.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-hero-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 centered product-introduction section with a small uppercase accent eyebrow, an editorial serif heading, and a narrow paragraph explaining the product's core value. Below the copy, place a large polished product UI preview with a thin border, soft shadow, and restrained radius; the preview should be the visual anchor and occupy most of the content width. Use warm off-white `#f8f7f3`, dark ink `#191919`, orange accent `#d86d3d`, white UI surfaces, and pale gray borders. Keep the text column narrow and the UI image well separated by vertical whitespace. On mobile, scale the preview to fit without clipping and preserve the heading hierarchy. Never use logos, product names, copy, illustrations, or imagery from the reference.
kage