## 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/keet/3f4c1a62-9831-48e4-b5b3-36349228cf18-1790229826-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/keet/3f4c1a62-9831-48e4-b5b3-36349228cf18-1790229767831-full.webp
- Component on Kage: https://kage.design/component/keet-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Then apply the following principles to that product rather than reproducing this reference.

Build a slim, centered website navigation on a white background. Keep the content in a max-width container around 340–420px on desktop, with a small brand mark/name on the left and 4–6 short links on the right. Use a very light, low-contrast treatment: near-black text around #202020, muted gray inactive links around #666666, and a soft gray selected pill around #f5f5f3 with 8–12px radius. Use a clean sans-serif at 12–14px, medium weight for the active item, and 16–22px horizontal gaps. Give the bar 18–28px top padding and enough height for comfortable tapping; on mobile collapse to a compact menu button.

Add hover and keyboard-focus states, and make the active item obvious without using a heavy border. Keep the navigation visually secondary to the page content.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the exact navigation labels or brand mark.
- Never make the header visually heavy or full-width with a dark background.