Kage Design logo kage
getelva.ai
Elva navigation component

Design analysis

A compact floating navigation anchors the page with restrained links, a small wordmark, and two clear account actions. The pill-shaped container separates it subtly from the black canvas 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/elva/1eb2f570-9576-4b74-bb9a-568459f8b568-1789452091-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/elva/1eb2f570-9576-4b74-bb9a-568459f8b568-1789452038199-full.webp
- Component on Kage: https://kage.design/component/elva-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and visual identity it should use. Then apply the principles below to that product rather than reproducing the reference.

Build a minimal dark SaaS navigation bar. Use a centered max-width container around 88–92% of the viewport, with a nearly black background (#050506), a very subtle lighter panel (#0b0b0d), 1px rgba(255,255,255,.08) border, and a 16px pill radius. Align a compact brand mark at left, a small horizontal link group in the middle, and authentication actions at right. Keep the wordmark and links low-contrast white/gray (#f2f2f2 and #94949b), reserving a bright filled pill for the primary action and an outlined pill for the secondary action. Use 14px body text, generous horizontal padding, and 10–12px gaps. On mobile collapse the links into a menu button while preserving the primary action. Add hover states that slightly brighten borders and text.

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

More components