## 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/wabi/178ae01c-68f8-4ebc-a83a-f929389d1aa9-1791439261-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wabi/178ae01c-68f8-4ebc-a83a-f929389d1aa9-1791439245752-full.webp
- Component on Kage: https://kage.design/component/wabi-navigation

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

Build a minimal, airy top navigation. Use a full-width header with a small brand mark or wordmark aligned to the left and a compact navigation/action cluster aligned to the right. Keep the header height restrained, with generous horizontal padding and vertical centering. Use a neutral sans-serif for utility links, a subtle muted gray for secondary navigation, and a pill-shaped outlined primary action with a very soft shadow. Suggested palette: white `#FFFFFF`, text `#303030`, muted text `#747474`, border `#E5E5E5`. Use a 999px radius for the pill, a 1px border, and a faint shadow such as `0 8px 20px rgba(0,0,0,.08)`. Maintain a quiet hierarchy: brand first, one low-emphasis link, then one clear CTA. On hover, slightly darken the link and lift or deepen the button shadow.

Never: copy the reference's logo, product name, exact copy, illustrations, imagery, or brand assets.