## 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/runwayml-com/e724fd81-b6a6-43a2-b9ac-10cfe806f6fa-1789074881-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/runwayml-com/e724fd81-b6a6-43a2-b9ac-10cfe806f6fa-1789074862354-full.webp
- Component on Kage: https://kage.design/component/runwayml-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create an original announcement bar and global navigation for that product—do not reproduce the reference literally.

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

1. **Announcement bar**
   - Place a full-width, high-contrast promotional strip above the navigation.
   - Keep the message short and horizontally centered or optically balanced.
   - Include one compact, outlined call-to-action on the right side with a directional affordance such as an arrow or chevron.
   - Use a deep blue-to-indigo gradient as a starting point, approximately `#263F92` to `#3530A8`, but tune it to the user's brand colours.
   - Use white text, with the announcement message slightly more prominent than supporting details.
   - On small screens, allow the text to wrap cleanly or collapse into a shorter message; keep the CTA tappable and avoid horizontal overflow.

2. **Primary navigation**
   - Use a white or near-white background, approximately `#FFFFFF` or `#FAFAFA`.
   - Build a single horizontal row with three zones: brand mark at the left, primary navigation in the middle, and utility actions at the right.
   - Keep the content inside a wide centered container with approximately `20–24px` horizontal padding on desktop and `16px` on mobile.
   - Use a compact header height of roughly `64px`; align every item to the same vertical center.
   - The left brand area should reserve enough width to anchor the layout without forcing the central links off balance. Use the user's own wordmark or brand treatment.
   - Primary links should be short, evenly spaced, and set in a clean sans-serif at approximately `14px`, medium weight, with generous horizontal gaps around `24–32px`.
   - Mark links with submenus using small downward chevrons. Keep the chevron visually secondary and align it tightly with the label.
   - The right utility area should contain a low-emphasis secondary action and a dark, filled primary action. Use approximately `8px` between adjacent buttons.
   - For a light secondary button, use a very pale neutral background such as `#F3F4F4`; for the primary button, use a near-black colour such as `#202020` with white text. Adapt these values to the user's brand.

## Visual language
- **Typography:** Use a modern sans-serif. Announcement text should be around `14–16px`; navigation and secondary controls around `14px`; primary buttons can use `14px` medium or semibold weight. Keep line heights tight but readable, around `1.2–1.4`.
- **Spacing:** Use an 8px-based rhythm. Suggested values: `8px` internal control gaps, `12px` button horizontal padding, `16px` row padding, `24px` navigation gaps, and `32–40px` between major header zones where space allows.
- **Borders and radius:** Keep the navigation mostly borderless. Use a subtle bottom divider only if needed, around `#E8E8E8`. Use approximately `6–8px` corner radius for buttons and `8–10px` for the announcement CTA. Avoid excessive pill shapes unless they fit the product's existing language.
- **Alignment:** Maintain a shared max-width, usually around `1200–1280px`, between the announcement content and navigation content. Preserve optical balance when the center link group is wider than the utility group.
- **Interaction:** Add clear hover and focus states. Navigation links can shift to `#555555` or gain a subtle underline; chevrons should rotate or indicate menu state when a dropdown opens. Buttons should darken or increase contrast on hover. Use a visible `2px` focus outline with sufficient contrast. Dropdowns should open from the corresponding trigger, align to the trigger edge, and close on outside click or Escape.
- **Responsive behaviour:** At tablet widths, reduce navigation gaps before hiding content. At narrow widths, replace the link group with a menu button, keep the brand visible, and retain only the most important utility action. Ensure the announcement bar does not make the header excessively tall.

## Never
- Never use the reference site's logo, wordmark, product names, event names, or exact promotional copy.
- Never copy the reference navigation labels, ordering, or wording; invent labels appropriate to the user's product.
- Never reuse the reference site's imagery, illustrations, gradients as an exact reproduction, or visual assets.
- Never create a pixel-for-pixel replica; use the structural and interaction principles to make a distinct header for the user's brand.
- Never sacrifice keyboard navigation, focus visibility, contrast, or mobile usability for visual similarity.