## 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/openswarm/378a218c-dbaf-492a-bc34-8c3bcee33f67-1791525665-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/openswarm/378a218c-dbaf-492a-bc34-8c3bcee33f67-1791525640433-full.webp
- Component on Kage: https://kage.design/component/openswarm-navigation

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

Build a responsive SaaS navigation bar with a compact brand lockup on the left, a small set of evenly spaced links centered or slightly right of center, and one dark pill-shaped primary action on the far right. Keep the header visually light so it can sit over a bright visual hero: use near-black text `#101820`, a translucent or transparent background, generous horizontal padding, and a max-width container around 840–1200px. Use a small geometric or abstract brand mark placeholder, not a copied logo. Typography should be a clean sans-serif at 12–14px with medium weight; the primary action can be 12px semibold with 12px horizontal padding, a `#111111` fill, white text, a 999px radius, and a subtle shadow. Align everything to one baseline and collapse links behind a menu button on small screens. Add understated hover opacity or underline transitions.

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