## 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/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106742-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106649540-full.webp
- Component on Kage: https://kage.design/component/frigade-assist-api-navigation

## Before you start
Ask what the user's product is, who it is for, and what their brand personality, colours, and navigation structure are. Then apply the principles below to create an original announcement bar and primary navigation for that product—not a copy of the reference.

## Build this component
Create a responsive two-tier website header:

1. **Announcement strip**
   - Place a slim, full-width strip above the main navigation.
   - Use a soft brand-tinted blue background, approximately `#A9C8F3` to `#B8D3F6`, with dark navy text around `#1D2939`.
   - Center a short announcement message horizontally, followed by a small right-pointing arrow or equivalent link affordance.
   - Keep the strip approximately 36px tall on desktop, with 12–14px medium-weight text.
   - Make the entire announcement content clickable, and provide a clear hover state such as slightly darker text or a subtle underline.

2. **Primary navigation row**
   - Use a white or near-white background, approximately `#FFFFFF` or `#FCFDFE`.
   - Add a subtle bottom border around `#E6EAF0`; avoid heavy shadows. The header should feel crisp and lightweight.
   - Constrain the contents to a wide centered container, approximately 1180–1240px, with 24px horizontal padding on smaller screens.
   - Align the brand mark or wordmark at the far left, navigation links in the central area, and account/action controls at the far right. Preserve a strong single-line baseline alignment.
   - Use a desktop height of roughly 78–80px, with comfortable vertical centering.

## Layout and alignment rules
- Keep the navigation row as a three-zone flex layout: brand, primary links, and actions.
- Use consistent gaps of roughly 28–36px between primary navigation items.
- Dropdown links should include a small downward chevron with a restrained stroke and a 4–6px gap from the label.
- Keep the left and right edges aligned to the same container as the rest of the page.
- On narrow screens, replace the full navigation with a compact menu button while retaining the primary CTA if space allows. The announcement message may truncate or wrap gracefully.

## Typography hierarchy
- Use a modern sans-serif UI typeface with high legibility.
- Navigation labels: approximately 14–15px, medium weight, colour `#202733`.
- Announcement text: approximately 13px, medium weight.
- Buttons: approximately 14px, semibold.
- Avoid oversized type; this header should support the page rather than dominate it.

## Controls and visual treatment
- Secondary account button: white background, dark text, a 1px border around `#D8DEE8`, 8–10px radius, and a subtle shadow or inset highlight. Include a small chevron if it opens a menu.
- Primary CTA: saturated product blue around `#086BE8` or `#126FE8`, white semibold text, 8–10px radius, and a restrained blue shadow such as `rgba(8,107,232,0.25)`. Use a slightly darker blue on hover.
- Buttons should have approximately 12–16px horizontal padding and 36–38px height.
- Use a small, simple brand symbol or wordmark placeholder only when the user's product provides one; otherwise use a neutral text-based brand treatment.
- Keep borders, shadows, and radii consistent across the header. Prefer subtle separation over decoration.

## Interaction and accessibility
- Make dropdown indicators and menu buttons keyboard accessible.
- Provide visible focus rings using the product's accent colour with sufficient contrast.
- Ensure the header remains usable at 200% zoom and on touch devices; make tap targets at least 44px where practical.
- If dropdowns are present, use clear open, hover, and focus states without shifting the layout.
- Maintain adequate colour contrast for all text and controls.

## Never
- Never reuse the reference product's logo, product name, brand name, announcement copy, navigation labels, or CTA copy.
- Never copy the exact colours, spacing measurements, typography, or visual details if they conflict with the user's brand.
- Never include illustrations, screenshots, or imagery from the reference.
- Never reproduce the reference page verbatim; use the structural principles to create a product-specific navigation.