## 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/spira-maxima/726c84dd-363c-4980-b0d9-b04757b4422a-1791266562-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/spira-maxima/726c84dd-363c-4980-b0d9-b04757b4422a-1791266451959-full.webp
- Component on Kage: https://kage.design/component/spira-maxima-navigation

## Before you start
Ask what the user's product, brand, navigation items, and primary conversion action are, then apply these principles to that product.

Build a responsive top navigation with a thin promotional announcement bar and a dark, rounded inner nav. Use a near-black background (#080909), white primary text, muted gray secondary text (#98999d), a warm coral/orange accent (#ff7b22), and a subtle electric blue accent (#45baff). Keep the announcement bar around 28px tall with centered copy and a compact outlined or white CTA. Place the main nav in a centered max-width container, approximately 72px tall, with generous horizontal padding, a compact brand mark area on the left, links in the middle, and a high-contrast pill action plus small account/control button on the right. Use 14–16px UI text, 8–14px gaps, 999px button radii, and a faint white border at 10–15% opacity. On mobile collapse links into a menu while retaining the primary action.

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