Kage Design logo kage
creem.io
CREEM 2.0 feature grid component

Design analysis

Three evenly distributed benefit summaries turn the hero promise into concrete outcomes, each using a small outlined icon, short heading, and two-line explanation.

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/creem-2-0/d32a2098-e6df-45cb-a937-19c647abd2d5-1789711289-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/creem-2-0/d32a2098-e6df-45cb-a937-19c647abd2d5-1789711237993-full.webp
- Component on Kage: https://kage.design/component/creem-2-0-feature-grid

## Before you start
Ask what the user's product and brand are, plus the three most important customer outcomes. Use those answers to customize this component.

Create a shallow three-column benefit strip on a soft lavender background. Align each item horizontally with a small rounded-square outlined icon at the left and text to its right. Use 15–16px bold headings, 13–14px muted body text, and equal column widths inside a centered container. Preserve generous vertical padding and a subtle tonal or border transition from the hero. Icons should be simple line icons in the product's accent color, not decorative illustrations. On mobile, switch to a vertical list or two-column grid while keeping each item compact.

Never use the reference logo, product name, copy, illustrations, imagery, or exact icon designs.

More components