## 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/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789193036-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789192903236-full.webp
- Component on Kage: https://kage.design/component/jackalope-navigation

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

Build a compact desktop-first product navigation bar. Use a full-width, lightly tinted surface with a subtle bottom border, a small brand mark and wordmark aligned on the left, evenly spaced primary links in the center, and utility actions on the right including theme switching and one visually dominant action. Keep the content inside a centered max-width container with generous horizontal padding. Use a calm sans-serif hierarchy: small 13–14px navigation labels, medium-weight brand text, and a compact 14px action button. Use an off-white/lilac surface near #f3f2f8, near-black text #171722, indigo accent near #5144ed, a 1px border near #d9d7e2, 8–10px button radius, and 20–24px vertical height for the bar. Make the links keyboard accessible, add hover color transitions, and collapse into a menu on small screens.

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