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

Design analysis

A rating headline establishes credibility with oversized star symbols, followed by a horizontally scrolling row of compact customer quote cards. The pink stars and restrained cards create a clear trust signal.

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/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146825-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146795796-full.webp
- Component on Kage: https://kage.design/component/lemonade-testimonials

## Before you start
Ask what the user's product, customers, and brand voice are, then adapt this proof pattern rather than copying it.

Create a social-proof section with a centered credibility headline, one explanatory sentence, a prominent rating treatment, and a row of customer quote cards. Use a white or very light background, charcoal type #454545, and an accent rating colour around #f50087. Render stars accessibly with text or an aria label, not colour alone. Below, use three to four white cards with 12px radius, a subtle border #e9e9e9, soft shadow, small avatar placeholders or initials, customer name, handle or role, and a short quote. Keep the desktop row horizontally balanced; on mobile use a swipeable carousel with visible pagination and keyboard controls. Use 32–38px heading typography, 26–32px stars, 14px metadata, and 15px quote text. Avoid excessive claims and provide a link to the complete review source when appropriate.

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

More components