## 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/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711533-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711433120-full.webp
- Component on Kage: https://kage.design/component/qagent-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and visual system it should use. Then apply the principles below to that product rather than reproducing this reference.

Build a slim, full-width SaaS navigation bar. Keep the content inside a centered max-width container with generous horizontal padding; place a compact brand mark and wordmark on the left, a small set of informational links centered or nearby, and secondary sign-in plus one high-contrast primary CTA on the right. Use a warm off-white background (#f5f1e7), a very subtle bottom border (#ded8ca), near-black text (#24231f), muted gray secondary text (#6d6a62), and a restrained brick-red accent (#a94338). Use compact 12–14px utility typography, a slightly heavier brand wordmark, 4–6px button radius, and 12–16px vertical spacing. Collapse links into a menu on narrow screens while preserving the primary CTA.

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