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

Design analysis

An editorial section introduces three distinct investing approaches as large cards arranged around a central highlighted option. Product mockups and a warm gradient make the comparison feel tangible while preserving clear CTAs.

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/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146556-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146502433-full.webp
- Component on Kage: https://kage.design/component/betterment-feature-grid-2

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

Design a comparison section on a soft cream-to-pale-blue background. Center an elegant dark-navy serif heading above three substantial cards: two secondary cards flanking a slightly more prominent middle card. Each card needs a concise title, a short explanatory paragraph, a primary button plus a quiet secondary link, and a lower visual panel that demonstrates the product using abstract UI mockups—not literal screenshots. Give cards white or near-white surfaces, 18–24px radius, delicate shadows, and dark navy text; use a warm yellow/orange radial glow behind the group to add energy. Let the center card overlap or rise slightly only if the layout remains accessible. On mobile, stack cards with the recommended option first. Include a small performance/legal note beneath the cards.

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

More components