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

Design analysis

A pale integration-focused hero uses a large serif promise, a download CTA, supporting copy, and a horizontal partner/logo strip.

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-1789141840-8.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-hero-2

## 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 an integration hero on a very light neutral background (#f7f8f2). Use a small eyebrow, an oversized serif headline, and a dark rounded CTA aligned to the left. Below, place a two-column explanatory row with a concise serif statement and supporting sans-serif paragraph, followed by a horizontally scrolling or evenly spaced partner/integration strip. Keep partner tiles neutral and consistent in height, with subtle borders and generous whitespace. The integration strip should communicate breadth without becoming the main visual focus.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- reuse the reference integration names, headline, or broken logo assets
- overload the hero with technical details

More components