Kage Design logo kage
apps.marcoluthi.com
Badgey navigation component

Design analysis

A very light top bar keeps the product identity at left and a single high-contrast download action at right. Its restrained treatment lets the product visuals dominate.

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/badgey/bd3040e3-7307-4350-8c61-c2e3eef7de7a-1792994545-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/badgey/bd3040e3-7307-4350-8c61-c2e3eef7de7a-1792994501677-full.webp
- Component on Kage: https://kage.design/component/badgey-navigation

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

Build a minimal, full-width product navigation bar. Use a centered max-width container with a compact product mark and name on the left, and one pill-shaped primary action on the right. Keep the bar visually quiet: near-white background, black text, generous horizontal padding, and no unnecessary menu links. Use a small sans-serif wordmark, 14–16px, medium weight; the action should be 12–14px with a black fill, white text, and a 999px radius. Align items vertically and preserve a 40–56px height. On small screens, keep both sides visible and reduce horizontal padding. Add a subtle hover/press state to the action.

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

More components