## 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/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146600-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146540058-full.webp
- Component on Kage: https://kage.design/component/copilot-money-navigation

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

Build a responsive top-of-page navigation system with:
- A 28px announcement bar above a roughly 54px navigation row.
- Full-width dark background, compact centered content, and a max-width around 840px.
- Brand mark and wordmark aligned left; primary links centered; login and one rounded primary action aligned right.
- Use a cool near-black background such as #020d1b, soft white text #e8edf5, muted text #a9b5c6, and an accent blue near #1769ff.
- Typography should be clean geometric sans-serif: 14px utility text, 15px links, medium-weight button label.
- Use 8px button radius or a soft pill, 1px translucent borders, and 16–24px horizontal gaps.
- Make the announcement dismissible, collapse links into a menu on small screens, and preserve a prominent CTA.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference;
- copy the exact navigation labels or brand identity;
- allow the announcement bar to crowd or obscure the navigation.