## 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/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074850-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074817179-full.webp
- Component on Kage: https://kage.design/component/convex-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original navigation header for that product—not a copy of the reference.

## Design language

Build a single, horizontal website navigation bar for a developer-focused product. The component should feel confident, compact, and premium, with a dark editorial appearance and clear separation between primary navigation and utility actions.

### Layout and alignment
- Use a full-width header with a deep near-black brown background, approximately `#261b1d` or an equivalent brand-adjusted dark tone.
- Keep the content in a centered max-width container, roughly 1180–1280px wide, with 32–48px horizontal padding on desktop.
- Align all items vertically to the center in a header approximately 72–88px tall.
- Place the wordmark or product name on the far left, followed by the primary navigation in one compact horizontal group.
- Use generous but controlled gaps: about 28–36px between primary navigation items and 20–28px between the brand and navigation group.
- Push secondary trust signals and account actions to the far right with flex spacing or an auto margin.
- On smaller screens, collapse or hide lower-priority navigation into a menu; preserve the brand and the most important account or conversion action.

### Typography hierarchy
- Use a bold, distinctive sans-serif treatment for the brand name, with a large optical size around 28–34px and tight letter spacing.
- Use a clean sans-serif for navigation labels at approximately 15–16px, medium or semibold weight.
- Keep utility metadata smaller, around 11–13px, with reduced contrast so it supports rather than competes with navigation.
- Use sentence case for labels and avoid excessive typographic decoration.
- Keep line heights tight and vertically center multi-line utility content.

### Colour
- Use a deep charcoal-brown or similarly warm dark background, approximately `#261b1d`.
- Use warm white for the wordmark and primary navigation, approximately `#f7f3f0`.
- Use muted taupe-gray for supporting metadata, approximately `#a59a98`.
- Use slightly lighter translucent dark surfaces for utility controls, approximately `rgba(255,255,255,0.045)` to `rgba(255,255,255,0.08)`.
- Maintain strong contrast for primary labels while keeping secondary statistics and metadata subdued.
- If the user's brand uses a different colour system, preserve the same contrast relationships rather than these exact values.

### Borders, radius, and surfaces
- Keep the main header visually flat with no heavy border or shadow unless needed to distinguish it from the page content.
- Place utility groups inside subtle dark pills or rounded rectangles with approximately 16–22px corner radius.
- Use thin, low-contrast borders around pills only when needed, such as `rgba(255,255,255,0.05)`.
- Make the primary account action a compact rounded button with a slightly brighter surface than the surrounding utility controls.
- Keep icon containers simple and geometric; use small monochrome icons aligned precisely with their labels.

### Interaction
- Make navigation labels visibly interactive with a subtle colour shift on hover, moving from warm white toward a brighter white.
- For items with submenus, show a small downward chevron with consistent spacing and rotate or otherwise indicate its open state.
- Give utility pills and the account button a restrained hover state: slightly lighter background, no dramatic scale animation.
- Ensure keyboard focus is visible with a clear outline or accessible high-contrast ring.
- Preserve adequate hit areas even though the visual treatment is compact.
- If utility cards include a service name and a metric, make the service name the stronger line and the metric a quieter secondary line.

### Responsive behaviour
- At tablet widths, reduce gaps and container padding before removing items.
- At mobile widths, retain the brand, a menu trigger, and one highest-priority action; move primary links and utility details into an accessible drawer or popover.
- Do not let the header wrap awkwardly or cause horizontal scrolling.

## Never
- Never reuse the reference product's logo, wordmark, product name, navigation labels, metrics, or account copy.
- Never copy the exact layout content or third-party service badges from the reference.
- Never use the reference's brand-specific wording, icons, illustrations, or imagery.
- Never treat the approximate colours and dimensions as immutable; adapt them to the user's product while preserving the underlying hierarchy and interaction principles.