granola.ai
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
kage