proofrr.com
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.
kage