opencode.ai
Design analysis
A restrained monochrome header anchors the page with a wordmark, compact text links, and a high-contrast 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/opencode-2-0/565a21f1-5840-46fe-9e23-a71210513fd4-1791957896-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/opencode-2-0/565a21f1-5840-46fe-9e23-a71210513fd4-1791957827568-full.webp - Component on Kage: https://kage.design/component/opencode-2-0-navigation ## Before you start Ask what the user's product is, who it serves, and what brand personality it should have. Apply the principles below to that product rather than reproducing the reference. Build a slim desktop-first navigation bar for a developer-focused product. Use a centered max-width container with a left-aligned text wordmark, a compact horizontal link group, and one dark primary action on the right. Keep the header quiet: off-white background, 1px light-gray bottom border, generous horizontal padding, and a monospace or technical sans-serif typeface. Use small 13–14px links with muted gray color, clear hover darkening, and a near-black button with 4px radius, compact padding, and an optional download icon. Preserve alignment at mobile by collapsing links into a menu while keeping the primary action visible. Never: use the reference logo, product name, copy, illustrations, or imagery.
kage