Kage Design logo kage
opensend.cc
opensend.cc navigation component

Design analysis

A compact, restrained navigation anchors the page with a wordmark, centered product links, a theme control, and a dark GitHub action.

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/opensend-cc/cb8c9d86-a0e5-47f8-893c-550f6137189a-1791180189-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/opensend-cc/cb8c9d86-a0e5-47f8-893c-550f6137189a-1791180114349-full.webp
- Component on Kage: https://kage.design/component/opensend-navigation

## Before you start
Ask what the user's product, brand, navigation items, and primary destination are, then apply the principles below to that product.

Build a slim desktop-first navigation bar for a developer-focused website. Use a centered content rail about 788px wide inside a subtle page border. Align the brand at left, a small horizontal link group in the middle, and utility controls plus one dark primary button at right. Use an off-white background (#fafafa), 1px neutral borders (#e5e5e5), near-black text (#262626), muted gray links (#737373), 12–13px typography, and 8px control radii. Keep the bar visually quiet and let the primary action provide the only strong contrast. On smaller screens collapse or hide secondary links while preserving the brand and primary action.

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

More components