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