Kage Design logo kage
botbus.io
BotBus navigation component

Design analysis

A compact fixed-style header establishes the product identity on the left and keeps primary destinations, download action, language, and utility icons aligned in a single restrained row.

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/botbus/3351c24c-0aff-40a1-9a6d-203e8c2d3da7-1791525844-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/botbus/3351c24c-0aff-40a1-9a6d-203e8c2d3da7-1791525750475-full.webp
- Component on Kage: https://kage.design/component/botbus-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 compact dark website navigation bar. Use a near-black background around #101010, a very thin warm accent line at the top, and a centered max-width content row with a small product mark and wordmark on the left. Place a short set of navigation links in the middle or toward the right, followed by one outlined or subtly elevated primary download/action button, then utility controls such as a repository icon and language selector. Keep the header approximately 52–64px tall, with generous horizontal padding, 12–14px muted text, and a high-contrast active action. Use small radii around 999px for the pill button and subtle borders around #2a2a2a. Keep alignment crisp and avoid visual clutter.

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

More components