## 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/proofrr/efb49965-9fe0-4b8e-8298-39615e0bc43e-1789538489-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/proofrr/efb49965-9fe0-4b8e-8298-39615e0bc43e-1789538465981-full.webp
- Component on Kage: https://kage.design/component/proofrr-navigation

## Before you start
Ask what the user's product, audience, and brand direction are, then apply the principles below to that product rather than copying the reference.

Build a responsive top navigation bar for a modern SaaS landing page. Use a full-width white surface with a restrained shadow or bottom border. Keep the logo/wordmark left-aligned, place a small set of informational links near the center, and group sign-in plus a primary trial CTA on the right. On small screens, collapse secondary links into a menu while preserving the primary action. Use a clean sans-serif, 14px utility text, medium-weight links, and a vivid blue pill button around #2563EB with white text. Keep generous horizontal padding, a 10–14px radius, and a compact 64–72px height. Include a small theme toggle only if it supports the product. Ensure keyboard focus states and sufficient contrast.

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