Kage Design logo kage
payflip.xyz
Payflip feature grid component

Design analysis

A guarantee section combines a bold promise with a lifecycle/state-machine panel, market-opportunity metrics, and supporting use-case tiles.

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-1789538773-6.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-5

## Before you start
Ask what promise your product can credibly guarantee and what lifecycle states or proof points support it, then adapt this pattern.

Build a dark trust section with a centered eyebrow, a headline containing one lime phrase, and a short explanatory paragraph. Beneath, use a two-column layout: the larger left panel is a lifecycle state machine with a header, horizontal states such as pending/complete/returned, status colours, and concise descriptions; the narrower right panel explains the market opportunity with a bold metric and supporting copy. Add a row of four small use-case tiles below, then a full-width positioning note. Use #111318, #171b22, #0c0e12, off-white #f2f3f4, muted #8d929c, lime #d8f21e, green #54d89b, amber #e4c32c, and 8px radii.

Ensure the state machine is comprehensible with colour plus labels, not colour alone. Collapse to one column on mobile and keep the metric visually prominent.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never make unsupported guarantees or fabricate statistics.
- Never use colour as the only state indicator.

More components