Kage Design logo kage
openwhispr.com
OpenWhispr for iOS navigation component

Design analysis

A compact top bar pairs the OpenWhispr mark with centered product links, a GitHub indicator, and a prominent blue download 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/openwhispr-for-ios/fdca984f-87fc-4407-a067-b1821a770c20-1791957715-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/openwhispr-for-ios/fdca984f-87fc-4407-a067-b1821a770c20-1791957682462-full.webp
- Component on Kage: https://kage.design/component/openwhispr-for-ios-navigation

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

Build a responsive top navigation bar for a privacy-focused software product. Use a white background, a restrained horizontal container with generous side gutters, a small brand mark and wordmark on the left, simple low-contrast navigation links in the middle, and a compact community/social metric followed by a blue pill-shaped primary download button on the right. Use a modern rounded sans-serif: 14px navigation text, 15–16px button text, medium weight. Keep the header around 72–80px tall, vertically centered, with 24–32px horizontal padding. Use near-black text (#111318), muted gray secondary text (#555b66), blue action color around #3978df with a subtle hover darkening, and no heavy borders; add a very light bottom divider only if needed. Collapse the links into a menu on narrow screens while retaining the primary action.

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

More components