## 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/openflowkit-2/3de20331-4179-415d-a7ba-29915155b155-1791957758-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/openflowkit-2/3de20331-4179-415d-a7ba-29915155b155-1791957697393-full.webp
- Component on Kage: https://kage.design/component/openflowkit-2-navigation

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

Build a responsive global navigation bar for a modern software product. Use a full-width, warm off-white background (`#fbfaf7`) and a centered max-width content row around 650–680px on this narrow canvas. Align the product mark and wordmark on the left, a small set of primary links in the middle, and theme/settings plus a bordered GitHub or secondary action on the right. Use a clean grotesk/sans-serif: 12–13px medium labels, generous horizontal gaps, and a 1px bottom border in `#e8e5df`. Keep the bar approximately 56–64px tall with 24–32px side padding. Buttons should have 6–8px radius, white fill, subtle border, and a compact icon-plus-label treatment. Collapse the middle links into a menu on small screens.

Never use the reference's logo, product name, copy, illustrations, imagery, or exact icons.