## 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/squadroom/d449f1a3-a1d7-46c0-a9d5-0020447fa3ed-1791871290-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/squadroom/d449f1a3-a1d7-46c0-a9d5-0020447fa3ed-1791871247696-full.webp
- Component on Kage: https://kage.design/component/squadroom-navigation

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

Build a compact desktop-first SaaS navigation bar. Use a near-black background (#090909), a subtle 1px warm accent rule at the top, and a centered max-width layout with the product mark and name on the left, rounded low-contrast navigation links in the middle, and utility links plus one high-contrast CTA on the right. Keep the bar about 48–64px tall, align everything vertically, and use generous horizontal padding. Use a restrained sans-serif type scale: 12–13px navigation text and a slightly bolder 13px CTA. Make the primary button off-white (#f1f1ed) with dark text and a small orange circular arrow accent (#ff7624); use subtle borders (#292929), 9999px radius, and hover states that brighten text and border color. Keep the navigation responsive: collapse links into a menu on narrow screens.

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