## 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/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106673-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106613949-full.webp
- Component on Kage: https://kage.design/component/workid-navigation

## Before you start
Ask the user what their product does, who the primary audience is, and what brand personality, colours, and navigation destinations they want. Then apply the principles below to create a tailored version for their product—not a copy of the reference.

## Build a clean desktop website navigation
Create a polished top navigation for a modern software product. The header should feel calm, credible, and highly scannable, with enough whitespace to sit above a large hero or dashboard introduction.

### Layout and alignment
- Use a full-width white header with a centered content container, approximately 1160–1240px wide.
- Set the header height around 80px, with the inner row vertically centered.
- Divide the row into three functional zones:
  - Left: compact brand mark followed by the product wordmark or product label.
  - Middle: primary navigation links, centered or visually balanced between the brand and actions.
  - Right: secondary outlined action followed by a dark filled authentication or primary action.
- Keep the left and right edges aligned to the same container; do not let controls float independently.
- Use horizontal gaps of roughly 28–36px between navigation links and 8–12px between adjacent action buttons.
- On smaller screens, collapse the middle links into a menu button and preserve only the most important action, keeping the header usable without crowding.

### Typography hierarchy
- Use a modern sans-serif system or web font with excellent legibility.
- Navigation labels should be medium-weight, approximately 14–15px, with a near-black colour such as `#111111`.
- The brand label may be slightly heavier, around 18–20px, to establish identity without becoming a headline.
- Button labels should be 14px and medium to semibold; avoid all caps.
- Keep line height tight and vertically center every label within its control.

### Colour
- Use a white or near-white background, approximately `#FFFFFF` or `#FCFCFC`.
- Use near-black text such as `#111111` for navigation and the filled action.
- Use a cool blue accent for a brand mark or small identity element, approximately `#2F80ED` or `#3478E5`, but adapt it to the user's brand.
- Use a very light neutral border such as `#E5E7EB` for the outlined action.
- Keep the palette sparse: the navigation should not introduce more colours than necessary.

### Borders, radius, and controls
- Give the outlined action a subtle 1px border and a softly rounded radius of about 10–12px.
- Give the filled dark action the same height and radius so the pair feels like a deliberate control group.
- Use compact button dimensions around 98–110px wide for the secondary action and 74–84px for the primary action, with 10–16px horizontal padding.
- Keep the brand mark small and simple, roughly 40–44px square, with a rounded radius around 12–14px.
- Avoid heavy shadows; if separation is needed, use a barely visible bottom border or a very soft shadow such as `0 2px 12px rgba(17,17,17,0.04)`.

### Interaction
- On hover, navigation links should transition smoothly to the product's accent colour or a darker emphasis colour, using approximately 150–200ms ease-out.
- The outlined button can receive a faint tinted background on hover; the filled button can shift to a slightly lighter or darker shade.
- Add visible keyboard focus rings with a 2px accent outline and sufficient offset.
- Make the active navigation destination distinguishable through colour, weight, or a subtle underline, but keep it understated.
- Ensure touch targets are at least 44px tall on mobile and that the mobile menu has a clear open and close state.

### Composition principles
- Prioritize visual balance over filling every available space.
- Keep the header intentionally sparse so the product's main content remains the focus.
- Use consistent vertical centering and equal control heights to make the navigation feel engineered and trustworthy.
- Separate exploratory navigation from conversion or account actions through spacing and button styling rather than loud decoration.

## Never
- Never use the reference's logos, product names, navigation copy, or exact brand identity.
- Never copy the reference layout so literally that it looks like a clone; adapt the structure to the user's information architecture.
- Never include illustrations or imagery from the reference.
- Never invent a visually dominant hero, promotional banner, or extra navigation row unless the user's product requires it.
- Never sacrifice responsive behaviour, keyboard accessibility, or readable contrast for visual similarity.