## 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/adant-2-0/1b13b0a2-e64e-418d-a933-0f40a66c40ee-1792044356-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/adant-2-0/1b13b0a2-e64e-418d-a933-0f40a66c40ee-1792044250464-full.webp
- Component on Kage: https://kage.design/component/adant-2-0-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary conversion goal are. Then apply the following principles to that product rather than reproducing the reference.

Build a slim announcement bar followed by a clean SaaS navigation. Keep the header centered within a max-width container, with the logo at left, a small set of low-contrast links in the middle, and one high-contrast account/action button at right. Use a white or near-white background, a 1px cool-gray bottom rule, and restrained microcopy. Typography should use a modern sans-serif: 11–12px for the announcement, 12–14px for navigation, and semibold 12–13px for the action. Use generous horizontal padding, 16–24px vertical rhythm, pill-shaped controls with 999px radius, and subtle hover colour shifts. Collapse links behind a menu button on narrow screens and preserve the announcement's hierarchy without letting it dominate.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the announcement louder than the product's primary action.
- Never crowd the navigation with secondary links.