## 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/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106560-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106517952-full.webp
- Component on Kage: https://kage.design/component/mock-magic-video-presets-navigation

## Before you start
Ask the user what their product is, who it is for, and what their 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.

## Build a minimal dark navigation header
Create a full-width website header for the user's product. It should feel calm, premium, and highly usable, with the navigation hierarchy expressed through spacing, weight, and contrast rather than decoration.

### Layout and alignment
- Use a full-width header with a centered inner container and generous side padding.
- Keep the header compact: approximately 72–88px tall on desktop.
- Place the brand area on the left, with a small abstract brand mark or neutral placeholder beside the product name. The mark should be created for the user's brand, not copied from any reference.
- Place utility links in a horizontal group toward the right, followed by one clearly emphasized primary call-to-action.
- Vertically center every element on one baseline system.
- Use flexible spacing so the brand stays left-aligned and the navigation/action group stays right-aligned.
- On smaller screens, collapse secondary links into a menu or otherwise preserve a clean, accessible mobile header.

### Typography hierarchy
- Use a modern sans-serif font with crisp rendering.
- Set the brand name in a semibold weight, around 15–16px.
- Set navigation links around 15–16px with regular or book weight.
- Use slightly stronger weight for the primary action, around 14–15px semibold.
- Keep line heights tight but comfortable, and avoid oversized display typography in the header.

### Colour
- Use a near-black page and header background, approximately `#050505` to `#0A0A0A`.
- Use near-white for the brand name and primary button text, approximately `#F5F5F3`.
- Use muted warm-grey or cool-grey for secondary links, approximately `#B8B8B5` to `#C8C8C5`.
- Make the primary button a light neutral surface, approximately `#F1F1EF` or `#F5F5F3`, with dark text around `#151515`.
- Keep the palette restrained; do not introduce gradients unless they are genuinely part of the user's brand.

### Borders, radius, and surfaces
- Add a subtle 1px bottom divider across the header, approximately `rgba(255,255,255,0.08)`.
- Keep the main header surface flat and untextured.
- Give the primary button a medium rounded radius, approximately 7–9px, rather than a fully pill-shaped treatment.
- Use a generous button height, around 44–48px, with horizontal padding around 20–24px.
- Keep the brand mark simple, geometric, and small enough not to compete with the product name.

### Interaction
- Add a gentle colour transition to navigation links on hover and keyboard focus; move them from muted grey toward near-white.
- Give the primary button a subtle hover state, such as a slightly brighter surface, a small elevation change, or a 1px upward translation.
- Make all links and buttons keyboard accessible with a clearly visible focus ring.
- Preserve the header's visual calm: avoid dramatic animations, bouncing, or oversized hover effects.
- Ensure sufficient contrast and provide an accessible mobile menu if links collapse.

### Responsive behaviour
- Reduce horizontal padding on tablet and mobile while preserving comfortable touch targets.
- Keep the brand visible at all widths.
- At narrow widths, hide or collapse secondary navigation links behind a menu trigger and keep the primary action visible only if it still fits comfortably; otherwise place it inside the menu.

## Never
- Never use the reference's logos, brand marks, product names, navigation copy, or button copy.
- Never copy the exact spacing, typeface, dimensions, or visual identity of the reference.
- Never add illustrations, photography, or imagery from the reference.
- Never assume the user's brand is dark, monochrome, or SaaS-like; adapt the palette, typography, and tone when their product requires it.
- Never sacrifice keyboard access, responsive behaviour, or readable contrast for visual similarity.