payflip.xyz
Design analysis
A broad six-card grid communicates that one payment behavior can work across many contexts, followed by a compact summary strip.
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-1789538772-5.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-feature-grid-4 ## Before you start Ask which environments, channels, or user contexts your product supports, then turn the six most useful ones into this grid. Create a dark section with a centered eyebrow and headline that frames the breadth of the product. Add a muted supporting line. Below, use a 3-column by 2-row grid of compact cards. Each card contains a lime two-digit index, a small monochrome context icon, a bold title, and one sentence of explanation. Finish with a full-width dark summary bar containing a short bold statement on the left and a sequence of small pill tokens connected by arrows on the right. Use #08090c background, #151820 cards, #f2f3f4 text, #8f949e muted text, #d9f21f accent, and subtle #242934 borders. Cards should have equal heights, responsive stacking, and hover borders that shift toward the accent without becoming neon. ### Never - Never copy logos, product names, copy, illustrations, or imagery from the reference. - Never use six vague feature labels; each context must imply a distinct use case. - Never overload cards with interface screenshots.
kage