Kage Design logo kage
granola.ai
granola.ai testimonials component

Design analysis

A charcoal testimonial section centers a large heading above bordered quote cards, combining editorial typography with customer attribution.

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/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789141839-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789138376488-full.webp
- Component on Kage: https://kage.design/component/granola-testimonials

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

Build a dark testimonial section with a centered serif heading and a two- or three-card horizontal layout. Each card should use a thin muted border (#77746d), generous padding, a compact customer/category label, a large readable quote in a serif face, and an attribution row with a small avatar placeholder and role. Use charcoal (#292929), warm white text (#f5f3eb), and muted secondary text. Cards may overflow horizontally on mobile as a scrollable carousel, with keyboard-accessible controls and clear focus states.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- use the reference testimonials, people, or portraits
- make the quote text too small to read comfortably

More components