## 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/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073896-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073866-full.webp
- Component on Kage: https://kage.design/component/fly-navigation

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and navigation items they want. Then apply the principles below to create a navigation header for their product—do not reproduce the reference literally.

## Build this component
Create a responsive website header/navigation bar for the user's product. It should feel like a polished developer-focused SaaS product: calm, precise, slightly playful, and highly usable.

### Layout and alignment
- Use a full-width, bright header with a centered content container, approximately 1120–1240px wide.
- On desktop, arrange the header in one horizontal row with three logical zones:
  - left: brand mark and wordmark;
  - center: primary navigation links;
  - right: secondary and primary calls to action.
- Keep the brand grouped tightly and align all controls to the same vertical center line.
- Use generous horizontal padding, approximately 24–40px, and a compact header height around 76–88px.
- Allow the center links to breathe evenly rather than crowding them together. Use roughly 24–32px between links.
- Keep the primary action visually last and easiest to find.
- On smaller screens, collapse the navigation links into a menu button while preserving the brand and the most important action. Ensure the header does not overflow horizontally.

### Typography hierarchy
- Use a modern sans-serif or humanist grotesk with excellent UI legibility.
- The brand wordmark should be noticeably larger and heavier than the navigation, around 24–30px with a bold weight.
- Navigation links should be medium-sized, around 15–16px, with medium weight and relaxed line height.
- Action labels should use 14–15px medium or semibold text.
- Use sentence case for links and buttons; avoid unnecessary all caps.

### Colour
- Use a near-white header background such as `#FFFFFF` or `#FCFCFD`.
- Use a dark ink colour for the wordmark, approximately `#211B3A`.
- Use a softened slate-purple for navigation text, approximately `#625F70`, shifting toward the ink colour on hover.
- Give the secondary action a very pale lavender fill, approximately `#F0ECFF`, with a slightly darker lavender border around `#D8D0EF`.
- Give the primary action a saturated violet fill, approximately `#7437DE` or `#6F32D8`, with white text. On hover, deepen it slightly and add a subtle lift.
- If the product has a colourful hero area beneath the header, allow only a restrained glimpse of it below the navigation; do not let it reduce text contrast or header clarity.

### Borders, radius, and depth
- Keep the header mostly flat and editorial rather than card-like.
- Use a very subtle bottom divider or shadow, such as `rgba(40, 30, 70, 0.08)`.
- Give buttons a medium-soft radius of approximately 8–10px.
- Use consistent button heights around 40px and horizontal padding around 20–24px.
- The logo mark may have a more expressive shape, but keep it optically balanced with the text and aligned to the header grid.

### Interaction and accessibility
- Make every navigation item a real link with a clear hover and keyboard-focus state.
- Use a visible focus ring in a complementary violet or blue, with sufficient contrast.
- Buttons should have clear hover, active, and disabled states without relying only on colour changes.
- Provide an accessible mobile menu with an accurate `aria-expanded` state and a labelled menu control.
- Maintain at least 44px of pointer/touch target area for interactive controls.
- Preserve readable contrast and do not allow decorative artwork or gradients to interfere with navigation.

## Never
- Never use the reference brand's logo, icon, wordmark, product names, navigation labels, or button copy.
- Never copy the exact spacing, typography, colours, artwork, or visual asset treatment from the reference.
- Never include the reference site's illustrations, characters, imagery, or decorative objects.
- Never assume the user's product is a developer tool; adapt the content and tone to the user's actual product and brand.
- Never sacrifice responsive behaviour, keyboard navigation, or text readability for visual similarity.