## 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/albie/924ea594-904d-48ee-866c-6d109761f321-1791439549-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/albie/924ea594-904d-48ee-866c-6d109761f321-1791439457023-full.webp
- Component on Kage: https://kage.design/component/albie-navigation

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

Build a responsive top navigation with a small brand mark on the left, a short set of high-priority links in the middle/right, a low-emphasis sign-in action, and one visually dominant primary CTA. Use a warm editorial display typeface for the brand if appropriate, with a clean readable sans-serif for navigation. Keep the header around 56–72px tall, align everything to a centered max-width container, and use generous horizontal padding. Use a deep navy text colour around #17263A, a light or section-matched background, a dark navy pill CTA with a subtle shadow, and a radius of 999px. On small screens collapse links into a menu while keeping the CTA visible or available immediately.

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