## 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/layernote/c87f4990-99cd-473d-ba2e-c718b2a2f8cb-1790402576-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/layernote/c87f4990-99cd-473d-ba2e-c718b2a2f8cb-1790402512875-full.webp
- Component on Kage: https://kage.design/component/layernote-navigation

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

Build a compact SaaS navigation bar: a small brand mark at the left, a short row of text links in the middle or beside it, and a low-friction secondary action plus a dark primary button on the right. Use a white background, a 1px #edf1f0 bottom border, 16px horizontal padding, 12–13px neutral text, and an 8–12px pill radius for the primary action. Keep the header around 56–64px tall on desktop and collapse links into a menu on mobile. Align every item to one optical baseline and make hover/focus states subtle but clear.

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