Kage Design logo kage
scalebrowser.net
Scalebrowser navigation component

Design analysis

A restrained sticky-style header uses a compact brand lockup, sparse utility links, and two contrasting account/download actions.

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/scalebrowser/2a4622f4-ebe3-4b20-ac5d-aef2ae1302c9-1792216896-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/scalebrowser/2a4622f4-ebe3-4b20-ac5d-aef2ae1302c9-1792216866183-full.webp
- Component on Kage: https://kage.design/component/scalebrowser-navigation

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

Build a full-width product navigation bar. Use a constrained centered inner row, a small emblem plus wordmark on the left, a short set of utility links in the middle, and low-emphasis login plus dark primary action on the right. Keep the height compact, with a white background, a 1px #edf0f2 bottom border, near-black #161b22 text, muted #65707b secondary text, and 8px button radius. Use 12–13px typography, medium weight for the brand and links, and 16–24px horizontal padding. On mobile, collapse links into a menu while retaining the primary action.

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

More components