Kage Design logo kage
notchpop.com
NotchPop feature grid component

Design analysis

Three cards turn trust concerns into concrete product behaviors, pairing blue visual panels with direct, benefit-led explanations.

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/notchpop/1c698f48-5c0e-4cfb-974b-c3c3cf38c197-1790316297-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/notchpop/1c698f48-5c0e-4cfb-974b-c3c3cf38c197-1790316211358-full.webp
- Component on Kage: https://kage.design/component/notchpop-feature-grid-4

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than copying the reference.

Build a three-column trust-and-security card row. Each card uses a rounded white surface, subtle gray border, and a blue gradient preview panel occupying roughly the top half. The preview should show an abstract key, permission control, or live-data widget relevant to the user's product. Below it, use a 15–17px bold title and 13–14px readable explanation with 22–24px padding. Keep all cards equal height, use 16px gaps, and stack them on narrow screens. Add restrained hover elevation and a visible focus state, but avoid alarmist colors; use navy, blue, white, and soft gray.

Never: use logos, product names, copy, illustrations, or imagery from the reference.

More components