Kage Design logo kage
usefastlane.ai
Fastlane 2.0 navigation component

Design analysis

A very compact white header keeps the brand mark at left and a single dark action at right, preserving maximum attention for 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/fastlane-2-0/959a4273-adb0-42a9-9dfc-df0ea320e78d-1792735307-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fastlane-2-0/959a4273-adb0-42a9-9dfc-df0ea320e78d-1792735248580-full.webp
- Component on Kage: https://kage.design/component/fastlane-2-0-navigation

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

Build a compact, responsive top navigation for a modern SaaS landing page. Use a full-width white background, a small brand mark or text lockup aligned to the left within a centered max-width container, and one high-contrast rounded action aligned right. Keep the header about 56–72px tall on desktop and reduce padding on mobile. Use a clean sans-serif: 14–16px medium navigation text, strong contrast, and generous horizontal breathing room. Use near-black #111111 for text, white #FFFFFF for the surface, and a near-black #171717 button with white text; use a subtle bottom border #eeeeee only if needed. Buttons should have 10–14px radius, clear hover brightness or slight lift, and accessible focus rings. Collapse secondary navigation into a menu on narrow screens while retaining the primary action.

Never: copy logos, product names, copy, illustrations, or imagery from the reference.

More components