## 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/sapien/bf276bc9-8a7f-4325-84fe-38ac6dd29868-1791093737-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sapien/bf276bc9-8a7f-4325-84fe-38ac6dd29868-1791093700749-full.webp
- Component on Kage: https://kage.design/component/sapien-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand personality and conversion goal are. Apply the principles below to that product rather than copying the reference.

Build a full-width desktop-first navigation bar. Use a warm off-white background around #f7f7f3, a compact brand lockup on the left, and a right-aligned row of low-emphasis text links plus one dark primary button. Keep the content within a centered max-width container with generous side padding. Use a clean sans-serif hierarchy: small 13–14px links, medium-weight brand name, and a 14px button label. Give the primary button a near-black #1d1d1b fill, white text, 6–8px radius, and a small arrow or directional affordance. Keep the bar around 72px tall with a subtle bottom rule or no visible border. On mobile, collapse secondary links into a menu while retaining the primary action.

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