dotverse.app
Design analysis
A sparse header anchors the page with the Dotverse mark on the left and small Mac availability/download links on the right. Its generous whitespace keeps attention on the hero.
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/dotverse/da38b075-ca59-4d6c-be00-140ffcca760c-1793253651-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/dotverse/da38b075-ca59-4d6c-be00-140ffcca760c-1793253624916-full.webp - Component on Kage: https://kage.design/component/dotverse-navigation ## Before you start Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to their product rather than reproducing this reference. Build a minimal desktop-first product navigation. Use a full-width warm off-white background around `#f8f7f2`, a centered content row with a maximum width near 790px, and generous horizontal padding. Align a compact brand mark and wordmark on the left; place one quiet availability/status link and one stronger download/action link on the right. Use a neutral sans-serif with small 11–13px utility text, medium weight for the primary action, and near-black text around `#20201e`. Keep the header approximately 64–72px tall, vertically centered, with no heavy border; a very subtle bottom rule around `#e7e5dc` is acceptable. On narrow screens, preserve the brand and collapse or simplify secondary links without crowding. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage