## 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/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146615-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146549729-full.webp
- Component on Kage: https://kage.design/component/ynab-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply these principles to that product rather than copying the reference.

Build a two-tier responsive site header: a slim promotional announcement bar above a primary navigation row. Keep the announcement text centered or left-aligned with a subtle dismiss control. Use a deep navy background for the main row, a bold wordmark area, horizontally grouped navigation links with dropdown indicators, and right-aligned login plus a bright lime rounded primary button. Use approximately #171957 navy, #f7f4e8 warm off-white, and #b7ed58 lime; use 14–16px utility text, 16px navigation text, and a stronger 24–28px brand treatment. Give the rows generous horizontal padding, 32–40px total vertical height, 1px translucent separators, and 6–8px button radius. On smaller screens collapse links into a menu while keeping the main CTA visible.

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