## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/monarchmoney-com/635efc73-78c7-4e34-907f-7c8ed3a65d95-1789146549196-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/monarchmoney-com/635efc73-78c7-4e34-907f-7c8ed3a65d95-1789146543288.webp
- Design on Kage: https://kage.design/designs/monarchmoney-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type choices, logo, imagery, and product screenshots). Wait for their answers before proceeding. Apply the system below to their product and content, not to the reference product.

## Page structure
1. **Promotion bar** — Place a thin full-width orange announcement strip above the navigation with centered promotional text.
2. **Floating navigation** — Use a white, lightly rounded navigation bar over the hero, with a compact brand area, a small set of dropdown-style links, and contrasting sign-in/sign-up actions.
3. **Hero media** — Fill a wide, tall hero with a warm lifestyle image or video relevant to the user’s product. Add restrained translucent dashboard/data overlays and a curved brand-colour graphic line to make the media feel like an active product environment.
4. **Hero message card** — Anchor a large white or translucent rounded card near the lower-left of the hero. Use a prominent serif headline, short sans-serif supporting copy, and one orange pill CTA.
5. **Trust strip** — Follow the hero with a light horizontal band containing review count, award/publication marks, and laurel-like separators.
6. **Product introduction** — Use a centered eyebrow, large serif headline, concise paragraph, and a large product dashboard screenshot beneath it on a quiet warm-white background.
7. **All-in-one feature panel** — Introduce a softly gray rounded section with a centered heading and explanatory text. Arrange four feature cards around a centered mobile/product mockup in a loose two-column composition; make the first card more prominent and keep the others lighter.
8. **Accounts feature** — Create an airy two-column row with an orange eyebrow and serif heading/copy on the left and layered account cards or product UI on the right.
9. **Transactions feature** — Reverse the arrangement: show a transaction-list screenshot on the left and the explanatory heading/copy on the right.
10. **Recurring payments feature** — Return to copy on the left and overlapping subscription/bill cards on the right.
11. **Reports feature** — Place a reporting or flow visualization screenshot on the left and copy on the right.
12. **Goals feature** — Place goal progress cards on the right and the explanatory content on the left.
13. **Cross-device feature** — Show desktop and mobile product views on the left with copy on the right, emphasizing continuity across devices.
14. **Data connectivity panel** — Use a split card: white copy area with eyebrow and large serif heading on the left, and a saturated yellow/orange partner-logo or integration visualization area on the right.
15. **Member testimonials** — Add a centered serif section heading followed by a three-column grid of white testimonial cards. Use small yellow star rows, readable body text, and muted source labels; continue for three rows to create a dense proof section.
16. **Press quote feature** — Add a large pale-gray rounded panel with a vertical stack of muted publication names on the left and one oversized editorial quote with attribution on the right.
17. **Community resources** — Use a horizontal layout with a square lifestyle photo on the left and a heading plus two compact white resource cards on the right. Each card has a short description and a small outlined pill action.
18. **Pricing conversion card** — Create a white rounded split card with pricing/trial copy and orange CTA on the left and a cropped lifestyle/product phone image on the right.
19. **Closing CTA** — Use a large orange rounded rectangle spanning most of the content width, with a centered white serif statement and a white pill button.
20. **Footer** — Finish with a white rounded footer containing the brand area and several compact link columns. Keep the typography smaller and the spacing orderly rather than visually dramatic.

## Design language
- Build hierarchy with a pairing of expressive editorial serif headlines and neutral sans-serif UI/body text. Use oversized but tightly leading serif titles for section openings, medium sans-serif paragraphs, and small uppercase orange eyebrows.
- Keep the page spacious and calm in its main feature sections, then increase density in the testimonial grid, resource cards, integration panel, and footer. Alternate image and copy sides to create a steady scroll rhythm.
- Use a warm near-white canvas around `#F7F6F3`, white cards around `#FFFFFF`, soft gray panels around `#F0EFEC`, dark text around `#171717`, and a vivid orange accent around `#FF6333` or `#FF6A2A`. Reserve yellow around `#FFC83D` for integration/brand imagery and stars.
- Let orange carry actions and wayfinding: promotion bar, eyebrows, pill buttons, progress details, selected accents, and the final CTA. Avoid using it as a general background except for deliberate conversion moments.
- Use generous section padding, broad content widths, and a restrained editorial grid. Let product screenshots be large and legible, with surrounding whitespace rather than excessive decoration.
- Pair rounded rectangles with mostly modest corner radii, approximately `12–18px` for panels and `999px` for buttons. Use thin warm-gray borders and very soft shadows only where screenshots or cards need separation; avoid heavy elevation.
- Treat product UI images as visual evidence: place them in clean frames, allow layered cards to overlap slightly, and keep their scale secondary to the headline while still readable.
- Use lifestyle photography selectively in the hero, community section, and pricing card. Crop images with rounded corners and warm, natural light so they soften the otherwise interface-led page.
- Keep buttons compact, friendly, and pill-shaped with short action labels. Use outlined secondary resource actions and solid orange primary actions.
- Where motion is added, use slow hero-media movement, subtle screenshot reveal/parallax, and gentle card hover elevation; preserve a calm editorial feel and never make the page feel like a dashboard animation demo.
- On smaller screens, collapse navigation, stack split rows, move product screenshots below their copy, reduce headline size, and turn multi-column testimonials into a single readable column.

## Never
- Do not copy any logos, wordmarks, product names, exact copy, publication marks, illustrations, photography, or icon sets from the reference.
- Do not present the result as Monarch or imply affiliation with it.
- Do not reproduce the reference financial data, screenshots, people, award names, or brand-specific promotional language; replace them with original assets and content for the user’s product.