Kage Design logo kage
granola.ai
granola.ai feature grid component

Design analysis

A sparse benefit section uses a large serif statement followed by separated icon-and-copy rows, making functional advantages easy to scan.

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-1789141837-2.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-feature-grid

## 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 benefits section with a large serif section heading at the top and three horizontally separated rows beneath it. Each row should have a small line icon or abstract glyph at left and one concise benefit sentence at right. Use generous vertical spacing, thin light-gray rules (#ecece6), a white/off-white background, and a clear left alignment grid. Heading typography should be editorial serif at roughly 42–56px; row copy should be 13–15px sans-serif. Keep icons monochrome and functional, with subtle hover emphasis on the row.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- duplicate the reference’s benefit wording or icons
- turn the section into a dense card grid

More components