## 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/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074881-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074849550-full.webp
- Component on Kage: https://kage.design/component/inngest-navigation

## Before you start
Ask the user what their product is, who the navigation is for, and what visual brand should guide the work. Then apply the principles below to create an original navigation component for that product rather than reproducing the reference.

## Build this component
Create a slim, full-width website header for a modern developer-focused SaaS product. It should feel premium, technical, and understated, with a dark atmospheric surface and highly legible navigation.

### Layout and alignment
- Use a single horizontal row with a maximum content width of roughly 1180–1240px, centered in the viewport.
- Keep the header around 64–72px tall, with generous horizontal padding that compresses gracefully on smaller screens.
- Align the brand mark at the far left, the primary navigation immediately after it, and utility actions at the far right.
- Use flexbox with clear groups: brand, primary links, and utility/CTA actions.
- Give the brand enough separation from the menu to read as the anchor of the page; avoid evenly distributing every item across the full width.
- On narrow screens, collapse the primary links into a menu trigger while preserving the main call-to-action if space permits.

### Typography hierarchy
- Use a compact grotesk or geometric sans-serif with a technical, confident character.
- Brand text may use a slightly heavier weight and modest letter spacing.
- Navigation labels should be uppercase or small-cap styled, approximately 11–13px, medium to semibold, with 0.08–0.14em letter spacing.
- Utility text can be slightly smaller or equally compact, but maintain strong contrast and a consistent baseline.
- The primary CTA should use concise, high-contrast text at about 12–13px with medium or bold weight.

### Colour and surface
- Use a near-black background around #0B0B0C or #101011.
- Use warm off-white text around #F3F0EA for primary labels and muted gray around #A7A5A1 for secondary states.
- Use a light neutral CTA surface around #F4F1EB with dark text around #171717.
- If the brand supports it, add a very subtle grain, starfield, or sparse point texture using low-opacity gray and one restrained accent colour. Keep decorative details behind the content and never let them reduce text contrast.
- Dropdown indicators should be small, simple chevrons with muted contrast.

### Borders, radius, and spacing
- Keep the header visually light: use no border, or a barely visible bottom border around rgba(255,255,255,0.08).
- Use 6–9px radius for the main CTA, with horizontal padding around 16–20px and vertical padding around 10–12px.
- Space navigation items by roughly 24–32px; use smaller gaps inside utility controls.
- Avoid excessive shadows. If the header overlays content, use only a very soft dark shadow or translucent backdrop.

### Interaction
- Links should transition smoothly to a brighter text colour on hover, approximately 150–200ms.
- Dropdown links should expose a clear chevron rotation or subtle menu panel on click/keyboard focus.
- The CTA should slightly brighten or lift on hover and show a visible focus ring for keyboard users.
- Make the entire header accessible: semantic navigation, descriptive labels for icon-only controls, visible focus states, and an escape-friendly mobile/dropdown menu.
- Keep the header fixed or sticky only if it benefits the product experience; if sticky, preserve its compact height and add a subtle surface separation after scrolling.

## Never
- Never copy the reference site's logos, product names, navigation labels, CTA copy, or exact wording.
- Never reuse its exact decorative texture, visual marks, icons, or imagery.
- Never reproduce the exact spacing, proportions, typeface, colour treatment, or menu structure; reinterpret the principles for the user's product and brand.
- Never use illustrations or background imagery from the reference.
- Never sacrifice readability for atmosphere or decorative effects.