## 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/articos-mcp/b74b5a52-121a-40b3-9410-436e13736de5-1791957709-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/articos-mcp/b74b5a52-121a-40b3-9410-436e13736de5-1791957659853-full.webp
- Component on Kage: https://kage.design/component/articos-mcp-navigation

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

Build a two-tier responsive header for a premium B2B software site. Use a near-black background around `#0d0d0b`, a 1px low-contrast divider around `#29261b`, warm ivory text around `#eee9dc`, and muted gold accents around `#c7aa45`.

- Make the top announcement bar short, centered, and unobtrusive, with one highlighted link and a dismiss control at the far right.
- Place the main navigation in a max-width container with generous horizontal padding: brand mark at left, a small set of dropdown links in the middle, and login plus one rounded gold CTA at right.
- Use a quiet uppercase or small sans-serif treatment for utility text, with 11–13px navigation labels and a clearly larger but still compact CTA.
- Keep vertical rhythm tight: approximately 12–16px for the announcement row and 48–60px for the primary row.
- Use subtle hover colour changes, dropdown chevrons, keyboard focus states, and a collapsed mobile menu.
- Keep borders hairline-thin and radius modest, around 999px for the CTA and 6–10px for menus.

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