## 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/meetpaw/a0a465d2-81ef-4df0-b440-a946faf696c8-1792389686-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/meetpaw/a0a465d2-81ef-4df0-b440-a946faf696c8-1792389630481-full.webp
- Component on Kage: https://kage.design/component/meetpaw-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand personality and primary navigation links should be. Then apply the following principles to create an original navigation bar for that product.

Build a slim, desktop-first navigation header with a white background and a 1px cool-gray bottom border. Use a centered max-width content row, with a compact product mark and wordmark aligned left, low-emphasis text links aligned right, and one small outlined credibility or community badge at the far edge. Keep the header around 44–52px tall, with 24–32px horizontal padding. Use a near-black text color such as #171717, muted links around #666666, and a warm orange accent around #f36b18 for active or brand details. Typography should be a clean system sans-serif; the wordmark is semibold at 13–15px and links are 12–13px.

Maintain generous horizontal breathing room, 18–24px gaps between links, subtle 6–8px corner radii, and visible keyboard focus states. On narrow screens, collapse secondary links into a menu button while preserving the product mark and primary action.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the exact navigation labels or badge treatment.
- Never make the header visually heavier than the hero.