## 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/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146209-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146173702-full.webp
- Component on Kage: https://kage.design/component/masterclass-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 interface.

Build a responsive two-tier navigation for a premium digital product. Use a near-black background (#050505), a very thin hot-pink accent rule (#e91e56), and white text with muted gray secondary labels. Keep the upper utility strip short and low emphasis; put the main navigation beneath it with a compact brand mark area, a rounded Browse control, a wide search field, and right-aligned utility links plus one vivid primary CTA. Use a 28–32px horizontal gutter on desktop, 12–16px gaps, 8px control radii, and a clear type hierarchy: tiny utility text, 14px nav labels, 14–16px CTA text. Collapse secondary links into a menu on small screens while preserving search and the primary action. Make focus states visible and keyboard accessible.

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