Kage Design logo kage
public.com
public.com navigation component

Design analysis

A compact white header establishes the brand, exposes a small set of topical links, and keeps sign-in and sign-up actions persistently visible.

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/public-com/cb41c975-325f-4844-b439-84e9d28bd7b7-1789146533-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/public-com/cb41c975-325f-4844-b439-84e9d28bd7b7-1789146490836-full.webp
- Component on Kage: https://kage.design/component/public-navigation

## Before you start
Ask what the user's product and brand are, then apply these principles to that context rather than reproducing the reference.

Build a compact desktop-first navigation bar for a modern financial or software product. Use a white background, a small brand mark area at left, three or four centered text links with restrained chevrons, and two right-aligned account actions: a dark filled primary button and a light outlined secondary button. Keep the bar about 56–64px tall, align everything to one horizontal baseline, use generous side padding, and preserve a clear mobile collapse behavior. Use near-black text (#111111), white (#FFFFFF), a thin pale border (#E9E9E9), 999px button radius, and a neutral sans-serif at 12–14px. Make hover states change text opacity and button fill subtly.

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

More components