## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060643-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Component on Kage: https://kage.design/component/mintlify-navigation

## Before you start
Ask what the user's product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create a navigation header for that product rather than reproducing a reference literally.

## Design the section
Build a clean, minimal SaaS website header with three aligned zones:

- **Left:** the user's brand mark and wordmark, linked to the homepage.
- **Center:** a short set of primary navigation links. Links that reveal grouped destinations should use a small downward chevron and have a clear hover/focus state.
- **Right:** a low-emphasis account action such as “Sign in” and a high-emphasis conversion action such as “Contact sales”, “Start free”, or the user's equivalent.

Use a full-width header with a centered content container. Keep the content width around 1120–1200px, with approximately 24px horizontal padding on desktop and 16–20px on smaller screens. The header should be around 64px tall, vertically centering every element. Separate it from the page with a 1px bottom border in a very light neutral rather than a heavy shadow.

## Reusable design language

### Layout and alignment
- Use a three-column flex layout: brand on the left, navigation centered or visually balanced in the middle, actions on the right.
- Keep the navigation links horizontally spaced by roughly 28–36px; avoid crowding.
- Use a compact brand area with a symbol and wordmark, but let the user's own identity determine its proportions.
- Align action controls to the same vertical centerline as the navigation.
- On narrow screens, preserve the brand and one menu trigger, hide or collapse desktop navigation, and decide whether the primary action remains visible based on the product's conversion priority.

### Typography
- Use a modern sans-serif UI font, preferably the user's brand font or a neutral system fallback.
- Brand wordmark: approximately 20–22px, semibold or bold.
- Navigation and secondary action labels: approximately 14–15px, medium weight.
- Primary action label: approximately 14px, medium or semibold.
- Keep line height close to 1.2 for controls and avoid oversized navigation text.

### Colour
- Page and header background: white or a warm near-white, approximately `#FFFFFF` to `#FCFCFB`.
- Main text: near-black, approximately `#111111` to `#181818`.
- Secondary text: muted charcoal, approximately `#5F6368` to `#6B6B6B`.
- Divider: very light gray, approximately `#E8E8E8` or `#EEEEEE`.
- Primary button: near-black, approximately `#111111`, with white text.
- Secondary button: transparent or white with a 1px border around `#E5E5E5`.
- Use the user's accent colour sparingly for the brand mark or focus indication, maintaining sufficient contrast.

### Borders, radius, and controls
- Use subtle 1px borders on secondary controls and the header divider.
- Give buttons a restrained radius around 6–8px; use the user's established radius scale if one exists.
- Keep button height around 34–40px with horizontal padding around 14–16px.
- Chevrons should be small, light, and optically aligned with their labels.
- Avoid pills unless they are a deliberate part of the user's brand system.

### Interaction
- Navigation links should transition smoothly to a darker or more prominent text colour on hover, with a visible keyboard focus ring.
- Buttons should have a slight background or border shift on hover and a clear pressed state.
- Dropdown indicators should rotate or otherwise communicate expanded state when a menu opens.
- Ensure focus styles are visible against the white header and that all controls have accessible names.
- Keep dropdowns aligned to their trigger, with a clean surface, modest shadow, and enough spacing for comfortable pointer and keyboard use.

## Never
- Never copy the reference's logo, wordmark, product name, navigation labels, or calls to action.
- Never use the reference's exact brand colours or branding assets; adapt the system to the user's product.
- Never add decorative illustrations, hero imagery, or unrelated promotional content to this navigation section.
- Never make the header visually dominant through oversized typography, heavy shadows, or excessive decoration.
- Never rely on colour alone for hover, focus, active, or expanded states.