## 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/geardex-app/fc33b7d0-970c-45a6-93bf-9b94f05b130c-1791941528-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/geardex-app/fc33b7d0-970c-45a6-93bf-9b94f05b130c-1791941487258-full.webp
- Component on Kage: https://kage.design/component/geardex-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply these principles to that product rather than reproducing the reference.

Build a dark SaaS header with two stacked horizontal rows: a very short announcement bar with tiny centered utility text and a subtle link, then a primary navigation row with the product mark/name at left, grouped links in the middle, and sign-in plus one vivid primary action at right. Use a near-black background (#080a09), muted gray text (#8d9690), off-white labels (#e9eee9), and an emerald accent (#25c889). Keep the header content in a centered max-width container, vertically align all controls, use 12–13px body text, 10–11px announcement text, and generous horizontal padding. Add a faint bottom border, small 6–8px corner radius on the CTA, and clear hover/focus states. On small screens collapse the links into a menu while preserving the brand and CTA.

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