## 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/scrape-anything-by-context-dev/b0e64468-3924-45db-a4d8-d7cbe8044a77-1791871392-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/scrape-anything-by-context-dev/b0e64468-3924-45db-a4d8-d7cbe8044a77-1791871314047-full.webp
- Component on Kage: https://kage.design/component/scrape-anything-by-context-navigation

## Before you start
Ask what the user's product, audience, and brand direction are, then apply the principles below to that product rather than copying this reference.

Build a responsive site header with two stacked layers: a very slim announcement bar and a white primary navigation row. Keep the announcement centered with small high-contrast text and a subtle directional cue. In the main row, align a compact brand mark and name left, a restrained set of dropdown navigation links near the center, and two actions right: a low-emphasis secondary action and a dark pill-shaped primary action. Use a light cool-white background, near-black text, muted gray navigation labels, and a blue accent around #2F6DCE. Use approximately 24px horizontal padding on mobile and 44px on desktop, a 52–58px navigation height, 11–13px labels, and a 999px radius for action buttons. Add hover states, keyboard focus rings, and collapse links into a menu on small screens.

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