botbus.io
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.
kage