## 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/harbor/210c2f1c-cc35-4a7c-ab88-9680504ac3f6-1789970603-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/harbor/210c2f1c-cc35-4a7c-ab88-9680504ac3f6-1789970506977-full.webp
- Component on Kage: https://kage.design/component/harbor-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 global navigation bar. Use a restrained white surface, a small brand mark and wordmark on the left, a horizontal set of primary links in the middle, and secondary authentication plus one vivid primary CTA on the right. Keep the content in a centered max-width container with generous horizontal padding; collapse links into a menu on narrow screens. Use dark navy text around `#09243A`, muted gray secondary text around `#5E6870`, a blue CTA around `#168BE3`, a 999px pill radius, and a subtle bottom border around `#E8ECEF`. Typography should be compact, highly legible, and medium-weight. Make hover states change link color and slightly deepen the CTA.

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