Kage Design logo kage
tonebird.ai
ToneBird testimonials component

Design analysis

A heading introduces a dense but approachable grid of short customer quotes, each in a lightly bordered card with an avatar and identity line.

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/tonebird/16d0d272-e4c0-4394-9450-270e8dcbe6b2-1790229840-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tonebird/16d0d272-e4c0-4394-9450-270e8dcbe6b2-1790229760726-full.webp
- Component on Kage: https://kage.design/component/tonebird-testimonials

## Before you start
Ask who the product's real audiences are and what outcomes they can credibly describe. Generate a diverse, authentic testimonial layout without inventing unsupported claims.

Create a centered testimonial heading and a three-column grid of compact quote cards. Each card should contain a small avatar or initials, name/role metadata, and a short quote with comfortable line height. Use 16–20px gaps, equal card heights where practical, and enough internal padding for text to breathe. Cards should be white with #e9edeb borders, 12–16px radii, and a subtle shadow or background lift. Keep the heading around 32–40px and quote text 12–14px. On mobile, use one column or a horizontally scrollable carousel with keyboard controls and visible pagination.

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

More components