Kage Design logo kage
payflip.xyz
Payflip feature grid component

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.

More components