## 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/bonds/92b84629-52db-439e-9b50-1b68fbcd9bda-1792562652-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bonds/92b84629-52db-439e-9b50-1b68fbcd9bda-1792562529975-full.webp
- Component on Kage: https://kage.design/component/bonds-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand personality and primary actions are. Apply the principles below to that product rather than reproducing this reference.

Build a compact full-width navigation bar for a playful consumer product. Use a near-black navy background (`#050511`), a small brand mark area on the left, and a right-aligned pair of pill controls: a secondary dark outlined action and a white primary action. Keep the bar about 56px tall on desktop, with 16–28px horizontal padding, vertically centered controls, 12–16px corner radii, and bold compact sans-serif labels. Maintain strong contrast and make the primary action visually dominant. On mobile, collapse spacing and preserve only the most important action if needed. Add hover/focus states with a subtle lift and visible keyboard ring.

Never: use the reference's logos, product names, copy, illustrations, imagery, or exact visual assets.