Design analysis

A compact, low-contrast navigation keeps the product identity at left, utility links centered, and one outlined primary action at right. Generous horizontal padding and thin dividers make the header feel precise without competing with the hero.

Prompt preview

## 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/milliseconds-ai/6fac96f3-e489-4913-80bc-8c862b5f9e82-1790056991-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/milliseconds-ai/6fac96f3-e489-4913-80bc-8c862b5f9e82-1790056904819-full.webp
- Component on Kage: https://kage.design/component/milliseconds-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary action should be. Apply the following principles to that product rather than reproducing the reference.

Build a compact desktop-first navigation bar for a technical software product. Use a nearly black background (`#101012`) with a subtle bottom border (`#29292d`), approximately 44–48px of vertical height, and 44px side padding on a 900px canvas. Align the brand mark and wordmark on the left, a single row of 6–8 text links in the center/right, and one outlined CTA at the far right. Use a restrained grotesk or system sans-serif: 11–12px navigation labels, medium weight, muted gray (`#c1bec5`), and brighter white on hover. Keep the logo treatment as a neutral placeholder generated for the user's brand. The CTA should have a 1px gray border, square-ish 2px radius, 14px horizontal padding, and a small arrow icon. Add keyboard-visible focus states and collapse links into a menu on narrow screens.

Never: copy the reference logo, product name, navigation labels, copy, illustrations, imagery, or exact brand treatment.