## 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/creem-2-0/d32a2098-e6df-45cb-a937-19c647abd2d5-1789711289-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/creem-2-0/d32a2098-e6df-45cb-a937-19c647abd2d5-1789711237993-full.webp
- Component on Kage: https://kage.design/component/creem-2-0-navigation

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

Build a responsive header with two stacked layers: a compact promotional announcement strip and a calm primary navigation bar. Use a warm coral strip (approximately #ff695f) with small high-contrast text and a lightweight outbound-link affordance. Below it, use a white header around 48px tall, a left-aligned brand mark rendered as the user's own text or icon, centered navigation links with modest gaps, and a right-aligned rounded primary button. Keep the content in a max-width container with generous horizontal padding. Use a dark near-black sans-serif for navigation, 13–14px text, medium weight, and subtle chevrons for expandable items. Give the button a pale peach fill (#ffc19c), thin dark border, and 8px radius. On small screens collapse links into a menu button while preserving the announcement message.

Never use the reference logo, product name, copy, illustrations, imagery, or exact navigation labels.