## 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/father/e7444c2f-2da8-491a-acc7-45230a85c8b9-1789538598-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/father/e7444c2f-2da8-491a-acc7-45230a85c8b9-1789538499004-full.webp
- Component on Kage: https://kage.design/component/father-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 the reference.

Build a responsive global navigation for a dark, editorial product site. Use a full-width near-black background (#111214), a very thin accent rule near the top, and a centered max-width content row with generous left/right padding. Place a simple brand mark on the left, sparse text links in the middle, and one outlined pill CTA on the right. Use small muted sans-serif navigation text (#a8a8aa), bright text for the CTA, 1px borders in #34363a, and a 999px radius. Keep the header visually quiet: approximately 72–88px tall on desktop, with consistent 24–32px gaps. Collapse links into a menu button below tablet width, preserving the CTA hierarchy. Add subtle hover transitions for link colour and border brightness.

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