## 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/dockfix-5-0/2c092be4-cae6-431a-8bc7-3fef5352fd95-1789279441-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/dockfix-5-0/2c092be4-cae6-431a-8bc7-3fef5352fd95-1789279362906-full.webp
- Component on Kage: https://kage.design/component/dockfix-5-0-navigation

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

Build a responsive top-of-page navigation with a very slim announcement strip above it. Keep the header visually light so it can sit over a large hero image: use a near-black announcement bar (#171513), warm off-white text (#f1eee7), and a transparent or softly tinted navigation surface. Use a constrained 1120px content row, a compact product mark on the left, sparse text links in the middle, and price plus one high-contrast action on the right. Use a restrained grotesk sans-serif, 10–12px utility text, and a 28–32px wordmark scale. Give the button a warm coral/red fill around #e85b47, white text, 9999px radius, and generous horizontal padding. Keep header height around 64px after a 18–22px announcement strip; align everything to a consistent baseline and support mobile with a menu button.

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