## 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/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073939-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073908-full.webp
- Component on Kage: https://kage.design/component/together-navigation

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

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

1. **Announcement bar**
   - Full viewport width, approximately 38–40px tall.
   - Use a near-black background such as `#050505` and white or soft-gray text around `#E8E8E8`.
   - Center one concise announcement with a small accent symbol or status marker at the start and a right-pointing arrow at the end.
   - Keep the text compact, roughly 12–13px, with enough tracking to remain legible. Treat the announcement as a single clickable target with a subtle hover brightness or underline change.

2. **Primary navigation area**
   - Place the header on a very pale cool background, approximately `#EAF4FA` or the product's equivalent brand-tinted canvas.
   - Add generous horizontal padding, around 14px on desktop, and vertical padding of roughly 14–16px.
   - Use two adjacent white navigation surfaces with a small gap between them. The larger left surface contains the brand mark area and the main navigation; the narrower right surface contains utility actions.
   - Give each surface a soft 6–8px radius, a faint border such as `#E5E9ED`, and a very subtle shadow or no shadow. The surfaces should feel like separate controls resting on the same background rather than one undifferentiated bar.

## Layout and alignment rules
- Keep the header content on one horizontal baseline at desktop sizes.
- The primary navigation surface should use a three-part layout: brand area aligned left, navigation links centered or occupying the flexible middle, and open space preserved so the links do not crowd the brand.
- Use a compact brand lockup with a small abstract mark and wordmark, but generate a brand-appropriate mark rather than reproducing any existing logo.
- Main links should be arranged in a single row with even gaps of approximately 22–28px. Links that reveal submenus use a small downward chevron with a 4–6px gap.
- The utility surface should align actions from left to right: an understated decorative divider or accent detail, a compact secondary action, then a dark primary sign-in/action button.
- Use a 12-column or flex layout and avoid absolute positioning except for tiny decorative accents.
- At widths below roughly 900px, collapse the main links into a menu button while retaining the most important action. At mobile widths, stack or merge the two white surfaces into one coherent card with 10–12px outer margins.

## Typography
- Use a clean modern sans-serif with a slightly technical feel; use the product's own font if available.
- Navigation labels: 13–14px, medium weight, near-black `#171717`.
- Secondary utility text: 10–11px, uppercase, medium or semibold weight, with modest letter spacing around `0.08em`.
- Primary button text: 10–11px, uppercase, semibold, with approximately `0.08em` letter spacing.
- Keep line heights tight but comfortable: about 1.2 for controls and 1.4 for the announcement.

## Spacing, borders, and controls
- Use a 4px base spacing rhythm. Typical values: 14px outer inset, 18–24px horizontal control padding, and 8–12px gaps within action groups.
- Main navigation links should have generous click targets even if their visible text is small.
- Use a restrained 1px border in `#E4E8EC` or a brand-compatible equivalent.
- Use 6–8px radius for desktop surfaces and buttons; use 4–6px radius for compact controls. Avoid excessive pill shapes.
- The dark primary button should use approximately `#080808` with white text and a subtle hover state such as `#262626`.
- The small accent element between utility actions may use a pale lavender or another brand accent, for example `#C7B8F2`, but it should remain decorative and not compete with the CTA.

## Interaction and accessibility
- Every navigation item must be keyboard accessible and have a visible focus ring, preferably a 2px brand-colored outline with 2px offset.
- Chevron indicators should rotate or change orientation when a submenu opens. Menus should open predictably on click or keyboard activation, not only on hover.
- Add a subtle color or opacity transition of 150–200ms to links and buttons.
- Maintain strong contrast, preserve a minimum 44px touch target on mobile, and provide an accessible label for the mobile menu.
- Keep the announcement dismissible only if that fits the product; otherwise make it a normal linked notice.

## Never
- Never use the reference site's logo, wordmark, product name, navigation labels, announcement copy, or exact CTA wording.
- Never copy the reference's distinctive graphic mark, decorative accent, or any brand-specific asset.
- Never include illustrations, photography, or imagery from the reference.
- Never reproduce the layout as a pixel-for-pixel clone; adapt the hierarchy, spacing, and interaction model to the user's product and brand.
- Never sacrifice responsive behavior, keyboard access, or readable contrast for visual similarity.