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

Design analysis

A cream split section balances a bold numerical product visual on the left with benefit-led copy, checkmarks, and dual actions on the right.

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-1789146557-5.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-3

## 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.

Build a two-column benefit section on a warm cream background (`#fff3e4` or similar). The left column should be a rounded rectangular visual with a deep blue base, a large abstract numerical/value callout, and a few playful geometric accents; the right column should contain a dark navy serif heading, a concise paragraph, four checkmarked benefits, and a blue primary button beside a secondary text link. Use a 48/52 split, 64–96px vertical padding, 22–28px gap, 16–20px corner radius, and strong alignment between heading and controls. Make the value visual decorative and explain the same information in accessible text. Stack visual above copy on mobile.

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

More components