## 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/oats/88861292-7fec-4a47-8882-69e9dc773ed4-1789452062-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/oats/88861292-7fec-4a47-8882-69e9dc773ed4-1789452033551-full.webp
- Component on Kage: https://kage.design/component/oats-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and navigation destinations it needs. Then apply the principles below to that product rather than reproducing the reference.

Build a responsive top navigation for a focused software product. Use a full-width warm off-white background, a thin bottom border, a compact brand mark and wordmark on the left, a small horizontal set of primary links in the middle, and secondary sign-in plus a high-contrast rounded primary button on the right. Keep the content in a centered max-width container with generous horizontal padding. Use a neutral sans-serif, 13–14px navigation text, 8–12px gaps, and a 36px button height. Approximate colours: background #FAFAF7, text #171716, muted text #575752, border #E7E6E0, primary button #171716 with white text, accent yellow #F4D21F. Use 8px button radius and subtle hover colour changes; collapse links into a menu on small screens.

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