## 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/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073921-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073887-full.webp
- Component on Kage: https://kage.design/component/replicate-navigation

## Before you start
Ask the user what their product does, who it is for, and what visual brand direction they want. Then apply the principles below to their product rather than reproducing this reference literally.

## Build this section
Create a responsive website header with two stacked layers:

1. **Announcement strip**
   - Place a slim, full-width announcement bar at the very top, approximately 40px high on desktop.
   - Center a short promotional message with a small abstract accent mark on the left and a chevron on the right.
   - Add a dismiss/close control at the far right with generous hit area and an accessible label.
   - Separate the strip from the navigation with a subtle 1px bottom border.

2. **Primary navigation**
   - Use a horizontal layout with a maximum content width around 1150–1200px and automatic side margins.
   - Keep the brand mark or wordmark at the far left, the search control next to it, navigation links toward the right, and the primary CTA at the far edge.
   - On smaller screens, collapse secondary links into a menu and let the search control reduce to an icon or a compact field.
   - Preserve a single clear alignment line across the brand, search, links, and CTA.

## Design language

- **Overall composition:** The header should feel editorial, modern, and lightly technical. Use a pale near-white base with a very soft pink-to-purple glow concentrated behind the navigation, fading toward the edges. The glow should support the hierarchy without reducing contrast.
- **Layout:** Desktop navigation height should be approximately 72–80px. Use 16–24px gaps between major groups and 20–32px horizontal page padding. Keep the announcement content centered independently from the navigation content.
- **Typography:** Use a clean sans-serif system or contemporary grotesk font. Announcement text should be 13–14px, medium weight. Navigation links should be 14–15px, regular to medium weight. The CTA should be 14px and medium or semibold. Use tight, natural line-height and avoid oversized display text.
- **Search field:** Make the search input approximately 450px wide on large screens and 36px high. Use a thin light-gray border, near-white or translucent white fill, 0–2px radius, and muted gray placeholder text. Include a search icon on the left and a small keyboard-shortcut badge on the right with a slightly darker neutral fill.
- **Colours:** Use a background around `#fffaff` or `#ffffff`; primary text around `#202024`; secondary text around `#68636d`; borders around `#ded9df`; shortcut badge around `#e5e2e5`; and an atmospheric gradient using pale pink `#f7b5ef`, lavender `#d9b9ff`, and near-white transparency. Keep all text high contrast against its immediate background.
- **Borders and radius:** Prefer crisp, restrained geometry. Use 1px borders and mostly square corners or a subtle 1–3px radius for inputs and controls. The primary CTA may use a small radius of 0–2px rather than a pill shape.
- **CTA:** Use a dark near-black fill such as `#252329`, white text, compact horizontal padding of roughly 14–18px, and a small leading icon. Make its hover state slightly lighter and its focus state clearly visible.
- **Icons:** Use simple monochrome line icons with consistent stroke weight. The announcement chevron, search icon, dropdown indicator, close icon, and CTA icon should remain visually secondary to the text.
- **Interaction:** Links should transition to darker text or a subtle underline on hover. Dropdown indicators should communicate that a menu is available. The announcement close button should remove the strip without shifting the page in an awkward way. Inputs and buttons need visible keyboard focus rings. Respect reduced-motion preferences.
- **Responsive behaviour:** At tablet widths, reduce search width and gaps before hiding links. At mobile widths, stack or collapse the navigation cleanly; do not allow the CTA and search field to become cramped. Ensure the close button remains easy to tap.
- **Accessibility:** Use semantic `header`, `nav`, and form elements; provide labels for icon-only controls; support keyboard navigation; and maintain sufficient contrast.

## Never
- Never use the reference site's logos, wordmarks, product names, or exact promotional copy.
- Never copy the reference site's brand-specific iconography, visual assets, or imagery.
- Never reproduce the exact navigation labels, spacing measurements, or implementation; adapt the structure to the user's product.
- Never add illustrations or imagery from the reference.
- Never sacrifice legibility or responsive behaviour to match the screenshot exactly.