Kage Design logo kage
rocketmoney.com
rocketmoney.com testimonials component

Design analysis

A soft panel combines a strong review headline and star rating with a staggered mosaic of individual customer quotes. The varied card heights create editorial energy while still exposing names and ratings.

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/rocketmoney-com/33d2822e-a753-4b7c-bf3f-3f514d417ce5-1789146591-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/rocketmoney-com/33d2822e-a753-4b7c-bf3f-3f514d417ce5-1789146528240-full.webp
- Component on Kage: https://kage.design/component/rocketmoney-testimonials

## Before you start
Ask what evidence the user's product has from customers and what review policy, tone, and brand colors should be respected. Apply this structure with original customer content.

Design a testimonial section in a broad pale-neutral rounded panel. Use a left column with a 36–48px trust headline, a short supporting statement, a five-star row, and a small disclosure note. On the right, arrange several white quote cards in a staggered two-column mosaic; each card includes a short quote, customer name, and optional star rating. Use #F5F5F5 for the panel, #FFFFFF cards, #111111 text, #5F5F5F metadata, and a warm brand accent for stars. Use 16px card padding, 12–16px card radius, subtle shadows, and 72–112px panel padding. Keep quotes readable, support overflow-safe masonry or CSS grid behavior, and stack the trust summary above cards on mobile.

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

More components