Kage Design logo kage
huly.io
huly.io navigation component

Design analysis

A slim dark navigation bar anchors the page with the Huly mark at left, primary links in the middle, and GitHub, sign-in, and sign-up actions at right.

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/huly-io/19c62401-9349-4b6e-b026-941cb593ca56-1790434839-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/huly-io/19c62401-9349-4b6e-b026-941cb593ca56-1790434806578-full.webp
- Component on Kage: https://kage.design/component/huly-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 following principles to that product rather than reproducing this reference.

Build a responsive global navigation bar for a dark, premium software landing page. Use a full-width near-black background (#090b0e) with a subtle bottom edge and a centered max-width content row. Keep the left brand area compact, place primary navigation links beside it with generous horizontal spacing, and align utility actions such as repository access, sign in, and sign up to the right. Use a modern sans-serif: 14–15px links, medium weight, white or cool-gray text, and slightly brighter hover states. Make the primary sign-up action a small outlined or softly filled pill with a 999px radius; keep secondary actions visually quieter. Use 20–24px horizontal page padding, 12–16px vertical padding, and a 1px low-contrast border. On mobile, collapse the links into a menu while preserving the brand and the strongest action.

Never use the reference logo, product name, exact copy, illustrations, screenshots, or imagery.

More components