## 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/open-for-sales/9a311215-a6aa-4eac-b69d-0b0434feabcf-1793253811-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/open-for-sales/9a311215-a6aa-4eac-b69d-0b0434feabcf-1793253735957-full.webp
- Component on Kage: https://kage.design/component/open-for-sales-navigation

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

Build a two-tier SaaS header: a very slim announcement bar above a generous navigation row. Keep the overall composition quiet and highly legible: a pale near-white background (#fafafa), black text (#111111), muted gray announcement text (#777777), and a thin accent rule or small accent block only if it supports the brand. Use a max-width content container around 780–840px at this viewport, with the brand on the left, navigation links visually centered, and actions grouped on the right. Use 14–16px body text, medium-weight nav labels, and a compact 12–13px announcement line. Give the row approximately 24px vertical padding and 28–36px horizontal gutters. The primary action should be a black pill or brand-colour pill with white text; the secondary action should be a subtle text link. Add a close affordance to the announcement only when useful. On smaller screens, collapse links into a menu and preserve the announcement without causing layout shift.

Never: use the reference logo, product name, exact copy, illustrations, imagery, or branded assets.