## 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/retriever-ai/4363ca9a-43f9-447c-8e7d-56b17f2dfed5-1792044244-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/retriever-ai/4363ca9a-43f9-447c-8e7d-56b17f2dfed5-1792044106345-full.webp
- Component on Kage: https://kage.design/component/retriever-navigation

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

Build a responsive site header with two stacked bands: a slim announcement bar and a primary navigation row. Keep the announcement visually distinct but short, with a small icon or decorative mark, concise message, one emphasized link, and a dismiss control. Below it, use a warm off-white background, a left-aligned brand mark rendered as text or a simple geometric placeholder, horizontally spaced navigation links in the middle, and two right-side actions: a quiet text login link and a bordered or filled primary CTA. Use a maximum-width content container with generous horizontal padding and align every item to one baseline.

Design language: use near-black #171715 for text, warm ivory #f4f1e8 for the nav, and a coral accent around #ff735f for the announcement. Use a compact sans-serif at 12–14px for nav labels, medium weight, with a 28–32px bold wordmark. Give the row 56–60px height, 1px #c9c6bb borders, 6–8px button radii, and 16–20px gaps. On small screens collapse links into a menu while preserving the primary CTA. Make the announcement dismissible and give links visible hover/keyboard states.

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