Kage Design logo kage
getinboxzero.com
Inbox Zero navigation component

Design analysis

A compact white header establishes the brand on the left, keeps a small set of links centered, and makes the blue primary action prominent on the 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/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389757-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389697138-full.webp
- Component on Kage: https://kage.design/component/inbox-zero-navigation

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

Build a minimal SaaS navigation bar. Use a full-width white background, a thin accent rule at the top, a restrained logo/wordmark area on the left, four to five small navigation links in the middle, and a secondary login link plus one blue rounded primary button on the right. Keep the content in a centered max-width container with generous horizontal padding. Use near-black text (#171717), muted gray links (#555555), a vivid blue action button (#3478e5), 14px semibold button text, and a 1px subtle shadow or border. Use 20–24px vertical height around the controls, 12px corner radius, and clear hover/focus states.

Never use the reference's logo, product name, copy, illustrations, or imagery.

More components