## 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/narrative/6cc395b9-2f9b-4168-8f15-3f16c6d79112-1789538584-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/narrative/6cc395b9-2f9b-4168-8f15-3f16c6d79112-1789538531078-full.webp
- Component on Kage: https://kage.design/component/narrative-navigation

## Before you start
Ask what the user's product is, who it is for, and what its brand voice and visual identity are. Then apply the principles below to that product rather than reproducing this reference.

Build a slim, full-width product navigation bar. Use a three-zone layout: compact brand mark/name at the left, a small set of primary product links centered, and secondary sign-in plus one dark rounded primary CTA at the right. Keep the header around 56–64px tall with generous horizontal padding and align everything to one baseline. Use a near-white background, black text, muted gray secondary links, a subtle 1px top accent if appropriate, 13–14px typography, and a pill button with a 999px radius. On mobile, collapse the links behind a menu while preserving the CTA.

Never: use the reference's logo, product name, copy, illustrations, imagery, or distinctive branded assets.