## 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/papermark-data-rooms/d90c2ffc-2788-45c6-a044-36fe7b171e0c-1792994576-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/papermark-data-rooms/d90c2ffc-2788-45c6-a044-36fe7b171e0c-1792994482140-full.webp
- Component on Kage: https://kage.design/component/papermark-data-rooms-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand voice and visual identity are. Apply the principles below to that product rather than reproducing this reference.

Build a responsive top navigation with a slim announcement bar and a main header. Keep the announcement text centered and unobtrusive, with a small dismiss affordance if appropriate. In the main row, use a left-aligned brand mark, a restrained set of navigation links with small dropdown indicators, and right-aligned login plus a high-contrast primary action. Use a generous horizontal container, approximately 20–28px side padding on mobile and 36–56px on desktop. Typography should be a modern sans serif: 13–14px navigation text, 11–12px announcement text, and medium-weight buttons. Use near-black text (#171717), white background (#FFFFFF), and a very subtle bottom border (#E7E7E7). Buttons may use a 2–4px radius, compact height, and strong contrast rather than decoration. Collapse links into a menu on small screens and keep the primary action visible when possible.

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