flow.google.com
Design analysis
A compact black navigation bar keeps the brand left, section links centered, and utility/social actions on the right. Its restrained contrast lets the visual-heavy hero dominate.
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/google-flow-for-ios-android/998b1c85-b331-490a-bec1-b2413c6fadd0-1790056895-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/google-flow-for-ios-android/998b1c85-b331-490a-bec1-b2413c6fadd0-1790056849877-full.webp - Component on Kage: https://kage.design/component/google-flow-for-ios-android-navigation ## Before you start Ask what the user's product is, who it serves, and what brand personality, typography, and color system it uses. Apply the principles below to that product rather than reproducing the reference. Build a compact, responsive top navigation for a dark creative-software landing page. Use a full-width near-black background (#050505), a left-aligned wordmark placeholder, a centered row of 5–6 short section links, and a right utility cluster for pricing, social icons, and an overflow menu. Keep the header around 48–64px tall, horizontally padded by 20–32px, and use a 12–14px neutral sans-serif with muted gray links (#8f8f8f) and bright white active text. Align everything to one baseline, provide generous but even gaps, and use a subtle bottom border or 1px accent rule. On small screens collapse the links into a menu button while preserving the primary action. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage