## 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/fish-audio-drama-3/b8b3d5d8-1af1-45c3-b814-ec39ae20de20-1792217026-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fish-audio-drama-3/b8b3d5d8-1af1-45c3-b814-ec39ae20de20-1792216963457-full.webp
- Component on Kage: https://kage.design/component/fish-audio-drama-3-navigation

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

Build a responsive site header with two stacked layers: a compact promotional announcement bar and a clean primary navigation row. Keep the content inside a centered max-width container. Put the brand mark and name on the left, a concise set of navigation links in the middle, and secondary login plus a high-contrast signup button on the right. Use a warm off-white background around `#f7f6f3`, near-black text around `#171717`, and a dark brown/black promotion accent around `#4b2d16`. Use small, legible sans-serif text, medium-weight links, generous horizontal padding, and a softly rounded navigation surface with a subtle shadow or border. Make the announcement bar dense but readable, with a clear expiry message and a compact action.

On mobile, collapse the links behind a menu control while preserving the primary CTA. Make the header sticky only if it supports the product experience and does not obscure content.

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