Kage Design logo kage
phantom.com
phantom.com feature grid component

Design analysis

A category label and carousel controls introduce a horizontally arranged set of colorful product-benefit cards, allowing several capabilities to be scanned at once.

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/phantom-com/df84c488-d9fa-4f45-8b51-bd3e334c55b2-1789146859-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/phantom-com/df84c488-d9fa-4f45-8b51-bd3e334c55b2-1789146834018-full.webp
- Component on Kage: https://kage.design/component/phantom-feature-grid

## Before you start
Ask what the user's product capabilities are, which category they belong to, and whether the section needs carousel behavior. Use the rules below to create an original version.

Build a full-width feature section with a small rounded category label at the top left, optional previous/next controls at the top right, and a three-column row of large rounded cards. Each card should combine a short benefit headline with a strong visual area such as a UI mockup, abstract composition, or product render. Use varied but coordinated surfaces—soft violet, near-black, warm off-white, and saturated accent colors—while keeping text contrast accessible. Cards should have approximately 24px radius, consistent gaps around 22px, and equal heights. Let the row clip or scroll horizontally on smaller screens; controls should update the visible cards and expose accessible labels. Keep the section surrounded by ample pale-lavender whitespace.

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

More components