arcjet.com
Design analysis
A slim, high-contrast navigation keeps the brand and primary product links visible without competing with the cinematic 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/arcjet/88e490fa-ec93-4198-849b-d528e634d4ff-1790057130-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/arcjet/88e490fa-ec93-4198-849b-d528e634d4ff-1790056993895-full.webp - Component on Kage: https://kage.design/component/arcjet-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create an original navigation for that product. Build a slim dark navigation bar for a technical software product. Use a full-width layout with a compact brand mark at left, four or five restrained text links beside it, and small utility links plus a rounded sign-up button at right. Keep the content vertically centered in a 56–72px bar with generous horizontal padding and a max-width container. Use near-black `#070809`, warm white `#f2f0ed`, muted gray `#8c8b8d`, and a very thin red or magenta accent line such as `#d92d58` only as a detail. Use a geometric sans-serif, 12–14px navigation text, medium weight for the brand, and subtle chevrons for dropdowns. Buttons should be pill-shaped with a 1px border and a light fill on the primary action. Add hover states that brighten text and gently tint the border; on mobile collapse links into a menu button. Never: use logos, product names, copy, illustrations or imagery from the reference.
kage