## 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-1789146613-0.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-navigation

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

Build a responsive top-of-page navigation system with a narrow promotional announcement bar above a rounded, elevated navigation container. Use a warm coral-to-orange announcement background, white text, and a compact centered message. Place the brand mark and wordmark on the left, primary links in the middle, and low-emphasis sign-in plus high-emphasis sign-up actions on the right. Use a warm off-white page background, near-black text, orange accent `#ff6b35`, subtle gray border `#e8e5df`, and a 14–18px radius on the nav container. Keep the nav height compact, align all items to one baseline, and use generous horizontal padding. On mobile, collapse links into a menu button while preserving the account CTA. Add a light shadow and keep the nav visually distinct from the page content.

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