flowcub.com
Design analysis
A restrained navigation sits over the opening visual, keeping attention on the oversized hero message while providing lightweight access to the template catalogue and account actions.
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/flowcub-com/a37af876-acd7-4211-984b-565faddfb31d-1790420143-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/flowcub-com/a37af876-acd7-4211-984b-565faddfb31d-1790420112256-full.webp - Component on Kage: https://kage.design/component/flowcub-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand personality and primary conversion goal are. Then apply the following principles to that product rather than reproducing the reference. Build a minimal desktop-first website navigation. Use a transparent or white surface that can sit over a light hero, a compact brand mark at the left, sparse primary links in the middle, and one high-contrast rounded action on the right. Keep the navigation inside a max-width container of about 860px with 24px horizontal padding. Use a modern grotesk sans-serif, 14px body text, medium-weight links, and a clear 16–18px logo treatment. Use near-black text (#111111), white or translucent-white background (#FFFFFF or rgba(255,255,255,.82)), and a bright accent button around #27F276 with black text. Give controls 999px radius, 1px #E6E6E6 borders where needed, and 10–14px internal padding. On mobile, collapse links into a menu button without shifting the brand or CTA. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage