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

Design analysis

Three review cards create social proof through avatars, reviewer context, star ratings, short quotes, and a linked restaurant summary at the bottom of each card.

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/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146315-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146276379-full.webp
- Component on Kage: https://kage.design/component/opentable-testimonials

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that context rather than reproducing a restaurant-booking site.

Build a testimonial carousel for authentic customer feedback. Use these rules:
- Introduce it with a heading and a short, low-contrast supporting line.
- Present three equal columns on desktop with subtle vertical separators or individual white cards; collapse to one swipeable card on mobile.
- Each testimonial begins with a small circular initials/avatar treatment, reviewer name and location/context, then a compact star row and relative date.
- Use 14px readable quote text, 13px metadata, charcoal #30343b, muted #737982, and warm red #c43d51 for ratings.
- Add a quiet “more info” or related-item strip below each quote, separated by a pale #edf0f1 rule. Include a right-edge circular carousel control only when there are more items.
- Avoid making reviews feel promotional: preserve line length, whitespace, and varied but constrained quote lengths.

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

More components