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

Design analysis

A vivid lime panel introduces a memorable product moment with an oversized serif message and a large white interface card, creating a strong visual transition.

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-1789141838-5.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

## 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 full-width CTA band with a bold brand accent background such as lime green (#bdd044). Use a two-column composition: an oversized dark serif headline on the left and a large rounded white or warm-white product interaction card on the right. The card should feel like a simplified live product surface with a minimal input affordance, not a generic illustration. Keep the section padded generously, use 24–32px radii on the card, and ensure strong contrast. Add a subtle card shadow and a small supporting label or action only if needed. On mobile, stack the headline and card with the card full width.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- replicate the exact lime panel, headline, or chat UI
- use low-contrast text on the accent background

More components