## 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/cloudflare-com/1ca6ff30-a094-43e2-8124-fd26c9356e55-1789213790-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cloudflare-com/1ca6ff30-a094-43e2-8124-fd26c9356e55-1789213761908-full.webp
- Component on Kage: https://kage.design/component/cloudflare-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and navigation priorities are. Apply the principles below to that product rather than reproducing the reference.

Build a responsive global navigation bar. Keep a left-aligned brand mark area, a centered or right-weighted set of primary navigation links, and a compact utility cluster for secondary actions, sign-in, and search. Use a white background, near-black text (`#1f1f1f`), subtle gray dividers (`#e6e6e6`), and a small magenta or brand-color top rule only if it fits the user's identity. Use 14–15px text, medium weight for links, generous horizontal padding, and 52–64px height. Dropdown indicators should be understated; on mobile collapse links into a menu button. Make keyboard focus, hover states, and a sticky-on-scroll behavior accessible.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the header visually louder than the hero.
- Never hide essential navigation behind unexplained icons on desktop.