## 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/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060661-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/railway-com/2043945d-689d-427f-b51d-92aa383b8c92-1789060635-full.webp
- Component on Kage: https://kage.design/component/railway-navigation

# Build a dark SaaS navigation header

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

## Goal
Create a slim, premium website navigation header for a technical or software product. The header should feel calm, precise, and trustworthy, with the brand on the left, primary navigation in the middle, and account or conversion actions on the right. It should sit above the page content as a distinct dark band.

## Design language

### Layout and alignment
- Use a full-width header with a centered content container, approximately 1120–1240px wide depending on the product's layout.
- Keep the header compact: approximately 64–72px tall on desktop.
- Align all items to a single horizontal center line.
- Place the brand mark or wordmark at the far left; reserve enough space for it without making it dominant.
- Place primary navigation after the brand with generous separation. Use a small, consistent gap between navigation items.
- Push utility actions to the far right with auto spacing. Treat the secondary account action and primary conversion action as a visually related group.
- Use a subtle continuation of the page surface beneath the header if the design includes a hero or panel immediately below it.
- On smaller screens, collapse primary links into a menu button while keeping the most important action visible when space allows.

### Typography hierarchy
- Use a clean sans-serif suited to product interfaces.
- Navigation labels should be compact and legible, around 14–15px with medium weight.
- Keep labels in sentence case or the product's established casing system; avoid oversized display typography in the header.
- Give the main conversion action slightly more emphasis through weight, contrast, or a bordered treatment rather than a much larger font.
- Use a smaller, muted style for dropdown indicators if present.

### Colour
- Start with a deep near-black background around `#111019` or `#12111A`.
- Use a warm off-white for primary text and the brand, around `#F3F1F4`.
- Use a softened secondary text colour around `#B7B3BE` for less prominent controls.
- Use a subtle cool-dark border or separator around `#292735` only where needed.
- Choose hover and focus colours from the product's brand palette, maintaining strong contrast against the dark surface.
- Ensure keyboard focus states are clearly visible and meet accessible contrast requirements.

### Borders and radius
- Keep the header visually clean with few or no visible borders.
- If a container edge or lower divider is needed, use a 1px low-contrast line.
- Use a modest radius, approximately 6–10px, for bordered or filled action controls.
- Avoid excessive pills or rounded cards unless they are part of the product's established brand language.

### Interaction
- Navigation items with child pages should include a small chevron or caret and expose a dropdown on click or hover, while remaining keyboard accessible.
- Dropdown menus should use the same dark surface, a subtle border, a moderate shadow, and comfortable internal padding.
- Add a restrained colour or brightness change on hover; do not animate the entire header.
- Keep transitions quick and subtle, approximately 150–200ms.
- Provide visible focus states for links, dropdown triggers, the menu button, and conversion actions.
- On mobile, make the menu easy to dismiss and prevent the open navigation from obscuring critical controls.

## Responsive behaviour
- Preserve the left/right alignment logic on desktop.
- At tablet and mobile widths, reduce horizontal padding and hide or collapse nonessential links into an accessible menu.
- Maintain adequate touch targets of at least 44px for interactive controls.
- Avoid forcing navigation labels onto multiple lines.

## Never
- Never copy the reference site's logos, wordmarks, product names, navigation labels, or calls to action.
- Never reuse the reference's exact copy, iconography, spacing measurements, or visual assets.
- Never include illustrations, screenshots, or imagery from the reference.
- Never assume the user's product has the same information architecture; ask for its navigation structure and adapt the component accordingly.
- Never sacrifice keyboard navigation, mobile usability, or colour contrast for visual similarity.