payflip.xyz
Design analysis
A compact dark navigation anchors the page with brand at left, centered product links, and a bright lime app CTA at 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/payflip/0e07de96-2e0c-4347-b2be-d38a87386064-1789538771-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/payflip/0e07de96-2e0c-4347-b2be-d38a87386064-1789538648080-full.webp - Component on Kage: https://kage.design/component/payflip-navigation ## Before you start Ask what the user's product, brand, and primary navigation goals are, then apply the principles below to their product rather than reproducing this reference. Build a compact dark desktop navigation bar. Use a near-black background (#0b0c0f), a subtle bottom border (#20232a), a small brand lockup on the left, horizontally spaced muted-gray links in the center, and one high-contrast lime button on the right. Keep the content in a centered max-width container with generous horizontal padding; align all items vertically and make the CTA slightly rounded with bold dark text. Use a small, restrained type scale and ensure the layout collapses cleanly on mobile into a menu trigger. Interaction: links brighten on hover, the CTA gains a slight lift or glow, and the mobile menu is keyboard accessible. ### Never - Never copy logos, product names, copy, illustrations, or imagery from the reference. - Never make the navigation visually heavy or overcrowded. - Never sacrifice contrast or keyboard accessibility.
kage