tryobra.com
Design analysis
A compact black utility bar fixes the product identity, section links, language/login controls, and a bright primary action in one dense 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/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152083-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152039794-full.webp - Component on Kage: https://kage.design/component/tryobra-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand personality and primary conversion goal are. Apply the following principles to that product rather than reproducing the reference. Build a compact desktop navigation bar for a product-led marketing site. Use a nearly black background (#0b0d0d), a thin warm-white bottom rule, small uppercase monospace or condensed labels, and one high-contrast orange primary button (#ff5425). Keep the brand mark at the far left, product sections in a tight horizontal cluster, and account/language utilities at the right. Use 32–36px height, 1px separators, 12–16px horizontal padding, and clear hover states that shift text toward orange. On smaller screens collapse links into a menu while preserving the primary action. Never: copy logos, product names, copy, illustrations, or imagery from the reference.
kage