Kage Design logo kage
wealthfront.com
wealthfront.com gallery component

Design analysis

Three tall, image-led story cards form a horizontally aligned gallery with dark overlays, compact metadata, bottom-aligned headlines, summaries, and circular arrow controls.

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-4.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-gallery

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

Build a three-card customer-story gallery on a pale neutral background. Cards should use a large fixed image or media area with a dark gradient overlay, 12px rounded corners, and text anchored to the bottom. Add a small pill-shaped metadata label near the top, a bold two-line story title, one short supporting line, and a circular arrow affordance in the lower corner. Maintain equal card heights and consistent gaps, while letting images carry emotional variety. Include hover elevation or a subtle image scale transition and make the entire card keyboard-focusable. Collapse to a horizontal scroll or one-column stack on small screens.

Never: copy the reference's logos, product names, copy, illustrations, imagery, customer identities, or exact story labels.

More components