## 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/marqly-6-0/c854bda3-2558-4a76-a0fe-ed0b4296df4d-1789452129-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/marqly-6-0/c854bda3-2558-4a76-a0fe-ed0b4296df4d-1789452075868-full.webp
- Component on Kage: https://kage.design/component/marqly-6-0-navigation

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

Build a compact full-width navigation bar for a modern SaaS landing page. Use a white background, a thin bottom divider, and a centered content row with a small brand mark and wordmark on the left, 5–7 concise navigation links in the middle, and a sign-in link plus a dark pill-shaped primary button on the right. Keep the header around 26–32px tall on desktop, with 16–24px horizontal page padding. Use a clean grotesk sans-serif: 11–12px navigation text, medium weight for actions, and a near-black #171719 for primary text. Use muted gray #6f7378 for secondary links, a pale gray #e8eaed divider, and a black #171719 button with white text and 999px radius. On mobile, collapse links into a menu button while retaining the main CTA. Add subtle hover colour transitions and a slight underline or opacity change for active links.

Never: use the reference logo, product name, copy, illustrations, imagery, or brand assets.