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

Design analysis

Two equal product cards compare managed investing with self-directed investing. Each combines a visual panel, title, bullet benefits, CTAs, disclosures, and related links.

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/wealthfront-com/3e3be85e-7bdd-4e6a-8630-f389b2c5e8da-1789146564-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfront-com/3e3be85e-7bdd-4e6a-8630-f389b2c5e8da-1789146504390-full.webp
- Component on Kage: https://kage.design/component/wealthfront-feature-grid

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Then apply the following principles to that product rather than reproducing this reference.

Create a two-column comparison section with a shared centered or split heading row: one option for customers who want guided automation and one for customers who want control. Each card should include a large rounded visual area at the top, a white content panel below, a clear product title, three short check-mark benefits, primary and secondary actions, a small disclosure, and a list of related links. Use a very light lavender page background #f8f7fc, white cards, deep indigo headings around #38238f, subtle #e4e2ec borders, and 10–14px radii. Keep both columns equal in width and align their CTA/link baselines where practical. Use responsive stacking and do not rely on color alone to distinguish options.

Never: copy the reference's logos, product names, copy, illustrations, imagery, account names, or exact performance figures.

More components