## Reference images

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

- Screenshot: https://kage-design-assets.t3.tigrisfiles.io/screenshots/monarchmoney-com/c36b4f9b-2eea-41d5-b467-be7ac7c2ecc4-1789146547872.webp
- Design on Kage: https://kage.design/designs/monarchmoney-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, logo or wordmark, colours, and typefaces. Wait for their answers before proceeding. Apply everything below to that product, not to the reference brand.

## Page structure
- **1200×630 social-card canvas:** Create a fixed 1200×630 image intended for link previews, using a warm off-white background and generous outer margins.
- **Top brand area:** Place the user's placeholder wordmark or text lockup centered horizontally in the upper portion, with a small restrained accent mark if the user provides one.
- **Primary product preview:** Fill the lower portion with a large desktop application mockup, cropped by the bottom and side edges so it feels substantial rather than like a floating screenshot.
- **Secondary device overlay:** Layer a portrait mobile mockup over the lower-right area of the desktop preview, creating the main depth cue while keeping the brand lockup unobstructed.
- **Interface content:** Use placeholder finance or product data appropriate to the user's product, with a compact navigation rail, top tabs, summary cards, and one large visual data area inside the desktop screen; keep it legible only as a preview at social-card scale.

## Design language
- **Build hierarchy through scale:** Keep the brand lockup relatively small and centered, then make the desktop and phone previews the dominant visual mass across roughly the lower two-thirds of the canvas.
- **Use an editorial, product-led composition:** Keep the background quiet and nearly empty above the mockups; let the interface screenshots carry detail and colour instead of adding decorative illustration.
- **Use a warm neutral palette:** Start with an off-white background around `#FAF9F7`, near-black text and device borders around `#171717`, soft interface grays around `#F1F0ED`, and one warm orange accent around `#D9822B`. Adapt the accent to the user's supplied brand colour.
- **Pair a distinctive wordmark treatment with utilitarian UI type:** Use a refined serif or brand-appropriate display face for the wordmark if the user's assets support it, and a clean sans-serif for dashboard labels, values, and navigation.
- **Keep the mockup dense but quiet:** Use thin gray dividers, small uppercase metadata, compact cards, and restrained labels; introduce a few readable data colours such as muted teal, green, yellow, blue, and red only inside charts or status indicators.
- **Use strong device framing:** Give the desktop screen a thick near-black rounded bezel and the phone a smaller rounded black frame with a visible top cutout; use minimal or no shadow, relying on overlap and cropping for depth.
- **Preserve generous whitespace:** Keep the upper brand area open and avoid filling the canvas with extra copy, badges, or decorative elements.
- **Treat the card as a static image:** Render the result as HTML/CSS captured to PNG or as an SVG exported to PNG; there is no interaction or animation in the final asset. Ensure text and important UI details remain inside a safe area while allowing the device mockups to crop naturally at the edges.

## Never
- Do not use the Monarch name, logo, butterfly mark, wordmark, exact copy, screenshots, or distinctive branded assets from the reference.
- Do not reuse the reference product's financial labels, account data, or interface copy; use invented placeholder content suited to the user's product.
- Do not add unrelated logos, wordmarks, product names, illustrations, photography, or icon sets from the reference.
- Never present the result as Monarch or imply affiliation with it; create an original 1200×630 social card inspired only by the composition and visual language.