Kage Design logo kage
zernio.link
Zernio testimonials component

Design analysis

A customer-story module combines a heading, a tab-like row of customer names, a large quote area, attribution, and a story link.

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/zernio/c501b537-d018-43e7-982b-563c0d4d1135-1791612292-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/zernio/c501b537-d018-43e7-982b-563c0d4d1135-1791612175252-full.webp
- Component on Kage: https://kage.design/component/zernio-testimonials-2

## Before you start
Ask what the user's product, audience, and brand are, then apply the following principles to that product rather than copying the reference.

Build a customer-story section inside a bordered content frame. Use a small accent eyebrow and heading at the top, followed by a horizontal tab row of customer or use-case labels with one active underline. Below, provide a spacious quote area with a large multi-line testimonial, person name, role, organization, and a text link to the full story. Keep the tab row keyboard accessible and make changing tabs update the quote without shifting the overall layout excessively. Use off-white #f5f4f1, dark #252421, muted #77746f, fine borders #dfddd8, and orange-red #ef4525 for the active state. On mobile, allow the tabs to scroll horizontally.

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

More components