finalframe.photo
Design analysis
A compact black navigation bar keeps the product identity left-aligned and groups sparse utility links, language, authentication, and a bright primary action on 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/finalframe/10bde091-c6ec-4ca8-aeab-6378e76e091a-1790402731-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/finalframe/10bde091-c6ec-4ca8-aeab-6378e76e091a-1790402604641-full.webp - Component on Kage: https://kage.design/component/finalframe-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand personality and primary conversion goal are. Apply the principles below to that product rather than reproducing the reference. Build a compact responsive navigation bar for a dark software product. Use a near-black background (#050606), a thin low-contrast bottom border (#262a29), and a centered max-width content row with generous horizontal padding. Put a small product mark and wordmark on the left; place a short set of links, an optional locale control, a sign-in action, and one mint-green primary button (#08c99a) on the right. Use a neutral sans-serif, 12–14px text, medium weight for the CTA, and 8px radius. Keep the header height around 40–56px, align every control vertically, and collapse links into a menu on narrow screens. The CTA should have a subtle hover lift or brightness change. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage