Kage Design logo kage
granola.ai
granola.ai call to action component

Design analysis

A centered elevated panel presents a final free-use proposition with supporting copy and paired primary/secondary actions.

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-9.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-cta-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.

Create a final conversion panel centered within a quiet light section. Use a large rounded warm-white card with a very subtle shadow or border, generous internal padding, a prominent serif headline, one short explanatory paragraph, and two actions: a filled dark primary button and an outlined secondary button. Keep the panel narrower than the viewport so the surrounding whitespace frames it. Use near-black text (#222222), warm off-white (#f8f8f3), dark charcoal button (#292929), and a thin neutral outline (#bcbcb4). Buttons should be keyboard accessible, clearly labeled for the user’s product, and stack or wrap gracefully on mobile.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the reference offer, pricing language, or exact card styling
- include more than one dominant primary action

More components