## 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/rocketmoney-com/33d2822e-a753-4b7c-bf3f-3f514d417ce5-1789146589-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/rocketmoney-com/33d2822e-a753-4b7c-bf3f-3f514d417ce5-1789146528240-full.webp
- Component on Kage: https://kage.design/component/rocketmoney-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand personality and visual identity are. Apply the principles below to that product rather than reproducing this reference.

Build a responsive primary navigation for a modern consumer software site. Use a full-width white bar with a centered max-width content row, a small brand mark and wordmark on the left, a short set of text links in the middle, and low-emphasis sign-in plus a dark pill-shaped primary action on the right. Use approximately #FFFFFF, near-black #111111, muted gray #5F5F5F, and an accent chosen for the user's brand. Use a clean sans-serif with 14px link text and a clearly legible 14–16px action label. Keep the bar about 72–92px tall, align everything vertically, and use 24–56px horizontal padding depending on viewport size. The primary action should have a 999px radius, while secondary links remain unboxed. Add keyboard focus states and collapse to a menu on narrow screens.

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