Kage Design logo kage
payflip.xyz
Payflip navigation component

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.

More components