## 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/bytemail/045a2cef-1fc1-40ba-865c-126b992dab68-1793253732-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bytemail/045a2cef-1fc1-40ba-865c-126b992dab68-1793253665308-full.webp
- Component on Kage: https://kage.design/component/bytemail-navigation

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

Build a responsive top-of-page navigation with an optional slim announcement bar. Use a single centered content container, a small brand mark at left, restrained horizontal navigation in the middle, and one visually dominant action at right. Keep the announcement compact and dismissible if appropriate. Use a near-white background, dark navy-black text around #07151b, muted gray text around #6c7478, and one accent color around #3568e8. Use 12–14px utility text, 14px nav text, a clear focus state, 999px pill radius for the primary button, and 8–12px spacing increments. Keep the header sticky only if that improves the product's task flow; otherwise let it scroll naturally.

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