## 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/autocaptioner-com/ff4d8c71-c21f-4141-9075-b069f1384c25-1792109431-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/autocaptioner-com/ff4d8c71-c21f-4141-9075-b069f1384c25-1792109412255-full.webp
- Component on Kage: https://kage.design/component/autocaptioner-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 this reference.

Build a responsive top navigation bar. Use a clean white surface with a subtle bottom border, a compact brand mark and wordmark on the left, horizontally spaced product links in the center, and utility controls on the right. Keep the header around 48–64px tall, align everything to a centered max-width container, and use generous horizontal padding. Use near-black text such as #171717, muted gray links around #666666, and a primary blue CTA around #2878df with a 9–12px radius. Typography should use a bold 14–16px brand label and 12–14px navigation labels. Add chevrons only where a menu has children, make the CTA clearly dominant, and collapse links into a mobile menu below tablet width.

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