## 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/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789142159-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789141806972-full.webp
- Component on Kage: https://kage.design/component/ravio-testimonials

## Before you start
Ask who the user's customers are, what measurable outcome is credible, and whether the content should be a carousel or a static story. Apply these principles to the user's product and brand.

Build a customer proof section with a left-aligned two-line editorial serif heading and a dark or outlined case-study CTA aligned to the right. Under it, provide a lightweight customer selector row with subdued wordmarks or text labels and previous/next controls. The active story should be a three-part card: a pale warm metric panel, a wider quote panel, and an image/avatar panel. Use #f5f6f0 for the card, 1px #e6e8e2 dividers, 10px corner radius, serif for the metric and main heading, sans-serif for labels, and generous internal padding. Include clear attribution and make carousel controls accessible with visible focus states. On mobile, stack the three panels and turn the selector into a scrollable row.

Never: copy the reference's customer logos, names, testimonials, people, portraits, claims, copy, or imagery.