Kage Design logo kage
marqly.com
Marqly 6.0 testimonials component

Design analysis

A compact testimonial section builds trust with four evenly sized quotes, each paired with a small avatar, name, and role/location metadata.

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/marqly-6-0/c854bda3-2558-4a76-a0fe-ed0b4296df4d-1789452135-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/marqly-6-0/c854bda3-2558-4a76-a0fe-ed0b4296df4d-1789452075868-full.webp
- Component on Kage: https://kage.design/component/marqly-6-0-testimonials

## Before you start
Ask what the user's product is, who it serves, and what its brand personality should be. Apply the principles below to that product rather than copying the reference.

Build a testimonials section with a small eyebrow and a strong two-line heading above a four-card row. Each card should contain a short invented customer quote, a compact circular avatar treatment, customer name, and role or location. Use a white or very pale gray background, cards in #fafafa or #ffffff, near-black text #171719, muted metadata #737373, and tiny pastel avatar accents. Keep cards around 16px radius with a faint #e8e8e6 border and minimal shadow; use 14px quote text and 12px metadata. Align card heights, preserve comfortable line-height, and switch to a horizontal scroll or one-column stack on mobile. Add accessible carousel controls only if the layout becomes a carousel.

Never: use the reference logo, product name, copy, illustrations, imagery, or brand assets.

More components