zernio.link
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.
kage