Kage Design logo kage
proofrr.com
Proofrr testimonials component

Design analysis

A centered testimonial heading introduces three equal quote cards with star ratings, readable review copy, and compact avatar/name metadata.

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/proofrr/efb49965-9fe0-4b8e-8298-39615e0bc43e-1789538491-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/proofrr/efb49965-9fe0-4b8e-8298-39615e0bc43e-1789538465981-full.webp
- Component on Kage: https://kage.design/component/proofrr-testimonials

## Before you start
Ask what the user's product, audience, and brand are, then use original customer-proof content and styling for that context.

Build a testimonials section with a centered uppercase eyebrow and a bold heading containing a subtle italic accent. Below, create three equal-width white cards in a responsive grid. Give each card a thin #E5E7EB border, 16px radius, soft shadow, generous 24px padding, a row of five small gold stars near the top, a 15px quote with comfortable line height, and an author row at the bottom with a circular neutral avatar placeholder, bold name, and muted role. Keep quote lengths balanced so card bottoms align. Use a white background, dark #111827 text, muted #64748B metadata, and #F2B01E star accents. Stack cards on narrow screens.

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

More components