aside.com
Design analysis
A compact top bar places brand identity at the left, a small set of centered navigation links, and a high-contrast download action at the right.
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/aside/f609b01b-1081-4ce1-af9f-cbdda1611f88-1789452074-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/aside/f609b01b-1081-4ce1-af9f-cbdda1611f88-1789452037588-full.webp - Component on Kage: https://kage.design/component/aside-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand personality and primary conversion action are. Apply the principles below to that product rather than reproducing the reference. Build a minimal desktop-first navigation bar. Keep the brand mark/name aligned to the left, place a short set of evenly spaced links near the center, and reserve the strongest visual contrast for one right-aligned primary action. Use generous horizontal padding, a compact height, and a transparent or very lightly tinted background so the page hero remains dominant. Use a clean sans-serif typeface, 12–14px navigation text, medium weight, and a small pill button with near-black #111111 fill and white text. Keep links in #111111 or #4B5563, use 16–20px gaps, and provide visible hover colour/opacity transitions. Use a 999px radius for the action and no heavy borders. Never: copy logos, product names, copy, illustrations, or imagery from the reference.
kage