voiskey.ai
Design analysis
A compact black navigation bar establishes the brand, keeps primary links sparse, and makes the desktop download action prominent.
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/voiskey/2d879cee-55b8-45bf-98ab-83ef4a908ee2-1789538447-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/voiskey/2d879cee-55b8-45bf-98ab-83ef4a908ee2-1789538440704-full.webp - Component on Kage: https://kage.design/component/voiskey-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Then apply the following principles to that product rather than reproducing this reference. Build a minimal, full-width website navigation bar. Use a dark near-black background, a small brand mark and wordmark aligned left, sparse text links centered or toward the right, and one high-contrast pill-shaped primary download or signup button at the far right. Keep the content in a centered max-width container with generous horizontal padding. Use a clean geometric sans-serif, small muted navigation text, and a white button with dark text; approximate colours: #050706, #F7F7F5, #A8AAA7. Give the active link a short underline. Use 16–20px vertical padding, a 1px transparent or subtle border, and a 999px button radius. On mobile, collapse secondary links while preserving the main action. Add hover opacity or colour transitions and a visible focus state. Never: - use logos, product names, copy, illustrations, or imagery from the reference - copy the exact navigation labels or brand mark - make the header visually busier than the hero
kage