## 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/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060548-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060515-full.webp
- Component on Kage: https://kage.design/component/madebydaedalus-navigation

## Before you start
Ask the user what their product is, who it serves, and what their brand personality, colours, typography, and primary call to action are. Then apply the principles below to create an original navigation header for their product rather than reproducing the reference.

## Design language

Build a clean, single-row website header for a modern digital product, studio, or consultancy. The header should feel calm, precise, spacious, and editorial.

### Layout and alignment
- Use a wide centered container with a maximum width of roughly 1160–1240px and responsive horizontal padding of about 24px on mobile and 40–56px on larger screens.
- Align the brand identity to the far left and the navigation/action group to the far right on one horizontal baseline.
- Use a header height of approximately 96–104px on desktop, with content vertically centered.
- Place the primary navigation links in a compact horizontal cluster with around 30–36px between items.
- Follow the navigation with a distinct outline CTA button, separated by roughly 30–40px of space.
- Add a full-width 1px divider beneath the header content, using a very light neutral tone.
- On smaller screens, preserve the generous vertical rhythm but collapse the links into a menu button or other accessible mobile navigation pattern. Keep the primary CTA discoverable.

### Brand area
- Reserve a compact left-side area for the user's own wordmark, icon, or text identity.
- Keep the mark visually modest: it should occupy approximately 150–180px in width on desktop, without competing with the CTA.
- Vertically center the brand and avoid adding a surrounding card, shadow, or heavy background treatment.

### Typography hierarchy
- Use a contemporary sans-serif with a friendly but controlled appearance; use the user's brand font where available.
- Navigation labels should be small and readable, approximately 12–14px, with medium or regular weight and comfortable line height.
- The CTA label can be slightly smaller or equal in size to the navigation, but use a medium weight for emphasis.
- Avoid oversized display typography in the header; the hierarchy should come from spacing, position, and the outlined action.

### Colour
- Use an off-white or white page background, approximately `#FCFBF9` or `#FFFFFF`.
- Use a near-black charcoal for text, approximately `#202020` or `#252525`.
- Use a soft neutral divider and button border, approximately `#D9D7D3` to `#E2E0DC`.
- If the user's brand has an accent colour, reserve it for subtle hover states or a small brand detail rather than filling the entire header.

### Borders and radius
- Keep the bottom divider extremely subtle: 1px, solid, and low contrast.
- Style the CTA as a transparent or background-matched outlined button with a 1px neutral border.
- Use a small-to-moderate corner radius of roughly 8–10px; do not make it pill-shaped.
- Give the CTA generous horizontal padding, approximately 16–18px, and vertical padding around 12–13px.
- Do not use drop shadows, gradients, glass effects, or thick borders.

### Interaction
- Make every navigation item a real link with a clear hover and keyboard-focus state.
- On hover, use a restrained treatment such as a slight colour darkening, a thin underline, or a subtle opacity change; avoid animated jumps.
- Give the CTA a polished hover state, such as a charcoal background with a light label, or a brand-colour border/background if appropriate to the user's system.
- If the CTA includes an arrow or directional symbol, position it to the right of the label with about 10–14px of spacing. It may translate a few pixels on hover, but keep the motion brief and subtle.
- Ensure focus indicators remain visible and meet accessible contrast requirements.
- Use semantic `<header>`, `<nav>`, links, and a clearly labelled mobile menu control where needed.

## Never
- Never use the reference's logo, wordmark, icon, product name, or brand-specific identity.
- Never copy the reference's navigation labels, CTA wording, or any other exact copy.
- Never copy illustrations, decorative shapes, imagery, or distinctive visual assets from the reference.
- Never reproduce the reference as a pixel-perfect clone; adapt the layout principles to the user's product and brand.
- Never hide navigation or interaction states behind hover alone, and never sacrifice mobile usability for desktop fidelity.