## 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/speechka/662d10a3-b9d2-40f0-bccc-e5bde29d7609-1790229789-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/speechka/662d10a3-b9d2-40f0-bccc-e5bde29d7609-1790229722330-full.webp
- Component on Kage: https://kage.design/component/speechka-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and visual identity it should use. Apply the principles below to that product rather than reproducing the reference.

Build a compact navigation bar over a large media-led hero. Keep the content inside a centered max-width container with generous side padding. Use a dark, nearly black translucent or solid surface against the hero, a small brand mark at left, one high-priority accent button at right, and a circular icon-only menu control. Use a clean geometric sans-serif: small navigation text, medium-weight button text, and a restrained brand label. Use approximately #111111, #f5f5f5, and a vivid warm red such as #ef171b; keep borders subtle at approximately #292929 and use 8–12px radii, with a fully round menu button. Preserve strong contrast and make the bar sticky or overlayed only if that suits the product. Add hover/focus states to the button and menu control, and make the mobile menu keyboard accessible.

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