## 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/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789141941-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789138980717-full.webp
- Component on Kage: https://kage.design/component/mercury-navigation

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

Build a compact responsive header with an optional announcement bar above it. Use a near-black navy background (#171721), white wordmark, small muted navigation labels (#9b9ba8), and one saturated blue-violet primary button (#665cff). Keep the header content in a centered max-width row with generous horizontal alignment, a small logo at left, a restrained link group in the middle, and the main action at right. The announcement should be short, centered, and visually quieter than the navigation. Use 12–14px UI text, 8px button radius, and about 16–24px vertical padding total. On small screens collapse links behind a menu while preserving the primary action.

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