Kage Design logo kage
masterclass.com
masterclass.com call to action component

Design analysis

A deliberately sparse conversion band uses a centered promise, pricing reassurance, and two contrasting actions to create a clear decision point.

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/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146211-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146173702-full.webp
- Component on Kage: https://kage.design/component/masterclass-cta

## Before you start
Ask what the user's product, audience, pricing model, and brand are, then apply this conversion pattern to it.

Build a centered CTA band on near-black. Use a large bold heading, one concise line of reassurance beneath it, and two horizontally aligned buttons: a vivid primary action and a subdued secondary action. Keep the layout intentionally sparse with 56–80px vertical padding, 18–24px between heading and copy, and 12px between buttons. Use #050505, white #f4f4f4, #b8b8b8 supporting text, hot pink #ec2058 primary, and #2f3134 secondary. Buttons should be 120–150px wide, 44–48px tall, and 8px rounded. Stack them on mobile.

Never: use logos, product names, copy, illustrations, or imagery from the reference.

More components