## 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/desert-ant-labs/9afde706-8b4f-4c5f-a9d8-7a634f78e07d-1789106569-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/desert-ant-labs/9afde706-8b4f-4c5f-a9d8-7a634f78e07d-1789106538010-full.webp
- Component on Kage: https://kage.design/component/desert-ant-labs-navigation

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and type choices are. Then apply the principles below to create an original navigation header for my product rather than reproducing the reference.

## Build a minimal split navigation header
Create a single horizontal website header with a compact brand lockup aligned to the left and a short set of navigation links aligned to the right. The component should feel calm, premium, practical, and highly legible, with plenty of empty space around the content.

### Layout and alignment
- Use a full-width header with a centered inner container; choose a sensible maximum width such as 1180–1280px and keep the same horizontal inset on both sides.
- Set the header height around 88–104px on desktop, with all contents vertically centered.
- Place the brand lockup at the far left: a small abstract brand mark followed by the product name. The mark should be a simple geometric or typographic placeholder designed for my brand, not a copied symbol.
- Place navigation on the far right in one horizontal row. Use 4–6 short links, with one item optionally acting as a dropdown and displaying a small downward chevron.
- Keep the space between navigation items consistent, approximately 28–36px. Keep the brand mark and name close together, approximately 8–12px apart.
- On smaller screens, preserve the same hierarchy but collapse the links into a menu button or compact drawer; do not allow the header to wrap awkwardly.

### Typography hierarchy
- Use a modern sans-serif or the brand typeface supplied by me.
- Product name: medium or semibold weight, approximately 16–18px, with tight letter spacing and strong contrast.
- Navigation links: medium weight, approximately 14–16px, with comfortable line height and no decorative text treatment.
- Keep typography understated: avoid oversized headings, all caps, excessive tracking, or bold visual noise.

### Colour
- Use a warm near-white page/header background, approximately `#F8F8F2` or a brand-appropriate equivalent.
- Use a deep charcoal for text, approximately `#171817`, rather than pure black.
- If the brand mark has a tinted tile, use a very pale neutral such as `#E9EAE2`; keep it subtle and low contrast.
- Do not introduce strong borders, gradients, shadows, or accent colours unless they are required by my brand.

### Borders, radius, and surface treatment
- Prefer a borderless header that blends into the page.
- If separation is needed, use a 1px low-contrast bottom border such as `rgba(23,24,23,0.08)` rather than a heavy rule or shadow.
- Give the small brand-mark container a restrained radius, approximately 4–6px. Avoid pill-shaped navigation items and avoid decorative cards.

### Interaction
- Make every navigation item keyboard accessible with visible focus states.
- On hover, slightly deepen the text colour or add a restrained underline/opacity change; keep transitions around 150–200ms.
- The dropdown item should expose its menu on click or keyboard activation, rotate the chevron when open, and provide a clear active/focus state.
- Ensure adequate pointer targets, especially on mobile, without changing the quiet visual language.
- Provide an accessible mobile menu with an obvious close action, focus management, and Escape-key support.

### Responsive behaviour
- Maintain the left/right split on wide screens.
- At tablet and mobile widths, reduce horizontal padding and replace the full navigation row with a menu trigger when the links no longer fit comfortably.
- Keep the header visually light and avoid sticky behaviour unless my product specifically needs persistent navigation.

## Never
- Never copy the reference's logo, brand mark, product name, navigation labels, or exact visual identity.
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the exact spacing, typeface, colours, or pixel measurements as a direct clone.
- Never add prominent hero content, promotional banners, heavy shadows, gradients, or decorative imagery to this navigation component.
- Never sacrifice keyboard accessibility, contrast, or mobile usability for visual minimalism.