## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067452-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Component on Kage: https://kage.design/component/beehiiv-navigation

## Before you start
Ask the user what their product is, who it is for, and what their brand identity should feel like. Then apply the principles below to create an original navigation header for that product rather than reproducing the reference.

## Design the section
Build a responsive marketing-site navigation bar with a dark, premium SaaS feel. Treat the header as a single horizontal alignment system: a brand area on the left, a concise set of primary navigation links in the middle, and account/conversion actions on the right.

### Layout and alignment
- Use a full-width header with a centered content container, approximately 1120–1240px wide, and 20–32px horizontal padding.
- Set the desktop bar height around 76–80px.
- Align all items vertically to the center on one baseline system.
- Keep the brand mark visually separated from the navigation by a generous gap; keep navigation links evenly spaced rather than using unrelated individual margins.
- Push account and CTA actions to the far right with flex alignment and a clear 16–24px gap between action groups.
- On smaller screens, collapse the primary links into a menu button and preserve one prominent CTA if space allows. Keep the header height compact and avoid wrapping navigation labels.

### Typography hierarchy
- Use a modern sans-serif with clean geometric or neutral forms.
- Brand treatment should be bold and compact, while navigation labels should be medium-weight and approximately 14px.
- Use 14–15px semibold text for buttons.
- Maintain strong legibility and slightly relaxed letter spacing; do not rely on all-caps labels.

### Colour
- Use a very deep near-black navy or violet background, approximately `#09071A` to `#100D24`.
- Use a faint cool divider below the header, approximately `#242039`, with low contrast against the background.
- Set navigation and secondary action text to a soft off-white/lavender, approximately `#E8E6F2`.
- Use a bright neutral primary CTA, approximately `#F4F3F7`, with dark text around `#171525`.
- If the product brand calls for an accent, reserve it for hover states or a small active indicator rather than colouring every navigation element.

### Borders, radius, and controls
- Give the secondary outlined action a 1px border around `#37334B`, with a restrained radius of approximately 7–9px.
- Give the primary CTA a similar 7–9px radius and no heavy shadow.
- Use button heights around 36px, with horizontal padding of 14–18px.
- Keep the divider at 1px and avoid card-like elevation; the navigation should feel integrated into the page rather than floating above it.

### Interaction
- Make all navigation items keyboard accessible with visible focus rings using the brand accent or a high-contrast outline.
- On hover, gently brighten link text and slightly increase border contrast on the outlined action; avoid dramatic movement.
- Give the primary CTA a subtle hover shift in brightness or a 1–2px upward transform, but keep transitions around 150–200ms.
- If navigation items have dropdowns, indicate them with a small chevron and open menus on click or keyboard interaction, not hover alone.
- Ensure the mobile menu has a clear open/close state, sufficient touch targets of at least 44px, and a logical reading order.

## Never
- Never use the reference company's logo, product name, navigation labels, button copy, or other branded copy.
- Never copy the exact spacing, word lengths, visual marks, or arrangement if they do not suit the user's product.
- Never include illustrations, decorative imagery, or stock photography in this navigation component.
- Never make the header inaccessible, hide focus states, or depend on colour alone to communicate interaction.
- Never turn every item into a button or add unnecessary gradients, shadows, or visual clutter.