## 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/asimov-1/d16421bf-78be-4064-9aab-fabd3467d820-1792562772-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/asimov-1/d16421bf-78be-4064-9aab-fabd3467d820-1792562736076-full.webp
- Component on Kage: https://kage.design/component/asimov-1-navigation

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

Build a responsive product-site navigation bar. Use a centered, width-constrained inner row inside a white rounded rectangle that can float over the hero on desktop and become a full-width sticky header on mobile. Keep the brand mark at the left, use small uppercase or compact navigation labels with generous horizontal spacing, and group secondary links toward the middle. End with one filled accent button for the primary commercial action. Use near-black text (#171717), a warm white surface (#fffdf9), and an orange accent around #ff6500. Keep the bar about 40px tall on desktop with a 10px radius, subtle shadow or border, and 24–32px side gutters. Use a condensed grotesk or technical sans for navigation labels, with clear hover underlines or slight colour shifts and an accessible mobile menu.

Never: use the reference logo, product name, exact copy, illustrations, imagery, or branded assets.