## 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/fide-island/e90b7c78-4279-44cf-a252-bbd8cdefeb5b-1789711571-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fide-island/e90b7c78-4279-44cf-a252-bbd8cdefeb5b-1789711455018-full.webp
- Component on Kage: https://kage.design/component/fide-island-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and visual identity it has. Apply the following principles to that product rather than copying the reference.

Build a responsive site header with two stacked layers: a very thin dark announcement/status bar and a clean primary navigation beneath it. Keep the announcement concise, with a small status indicator at left and a compact offer/control at right. In the main row, align a small product mark and wordmark left, restrained uppercase or mono-style navigation links in the middle, and an outlined secondary action plus a filled primary action on the right. Use generous horizontal padding, a warm off-white background (#f5f4f1), near-black text (#171717), cobalt blue for the primary button (#285dcc), 1px neutral borders, pill-shaped controls, and a calm editorial hierarchy. Make the header sticky only if it benefits the product; preserve clear keyboard focus and collapse links cleanly on mobile.

Never: use the reference's logos, product names, copy, illustrations, imagery, or exact branding.