## 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/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106502-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106472876-full.webp
- Component on Kage: https://kage.design/component/hob-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 navigation header for that product—not a copy of the reference.

## Design language

Build a single horizontal website navigation bar with a calm, premium SaaS feel. Keep the structure lightweight and let whitespace create hierarchy.

### Layout and alignment
- Use a full-width header with a white or near-white background and a centered inner container.
- Set the inner content to a maximum width of approximately 1200–1280px, with 24–32px horizontal padding on desktop.
- Use a compact brand mark at the far left, followed by the primary navigation with a deliberate gap of roughly 44–56px.
- Keep navigation items on one baseline and align all controls vertically around the center of a 64–72px header.
- Push utility actions to the far right with `margin-left: auto`.
- Place the secondary action before the primary action, with an 12–16px gap between them.
- On smaller screens, replace the full navigation with a menu button while preserving the primary call to action if space allows.

### Typography hierarchy
- Use a modern sans-serif system or brand font with excellent legibility at small sizes.
- Render navigation labels at approximately 14–15px, medium weight, with a relaxed line height.
- Keep button labels at 13–14px and use a slightly stronger weight than navigation labels.
- Avoid oversized type; this component should feel like a quiet frame for the page rather than a hero section.

### Colour
- Use an approximately white background such as `#FFFFFF` or `#FCFCFB`.
- Use near-black text such as `#171717` for navigation and primary button text.
- Use muted charcoal such as `#525252` for secondary labels or dropdown indicators.
- Style the secondary action as white or transparent with a subtle neutral border around `#E5E5E5`.
- Use one warm, high-contrast brand colour for the primary action, such as amber `#F2A900`, while adapting it to the user's brand palette.
- Keep contrast accessible and reserve saturated colour for the main action or small brand detail.

### Borders, radius, and shape
- Keep the header itself borderless, or use an extremely subtle bottom divider such as `#F1F1F1` when separation is needed.
- Use pill-shaped buttons with a radius of approximately 999px.
- Give the secondary button around 14–18px horizontal padding and 8–10px vertical padding.
- Make the primary button visually denser and slightly more prominent while keeping its height aligned with the secondary button.
- If the brand mark includes a small abstract accent, keep it compact, geometric, and legible at 24–32px wide.

### Interaction
- Make every navigation label visibly interactive with a subtle colour transition on hover and keyboard focus.
- For items with submenus, show a small downward chevron and open the menu on click or keyboard activation; do not rely on hover alone.
- Add a restrained hover state to the secondary button, such as a pale neutral fill.
- Darken or slightly shift the primary button on hover, and provide a clear focus ring using the product's accent colour.
- Ensure touch targets are at least 44px high, even if the visible text is smaller.
- Support keyboard navigation, Escape-to-close for menus, and an accessible mobile menu with an announced expanded/collapsed state.

## Never
- Never reuse the reference's logo, brand mark, product name, navigation copy, button copy, illustrations, or imagery.
- Never reproduce the exact spacing, dimensions, colour values, or visual arrangement as a pixel-for-pixel copy.
- Never add decorative imagery or a large hero treatment to this navigation component.
- Never hide essential navigation behind hover-only interactions or remove visible focus states.