Kage Design logo kage
masterclass.com
masterclass.com card component

Design analysis

Two large promotional cards broaden the offer beyond consumer membership: an image-rich certificate panel followed by a team-focused business panel with clear sales 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/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146211-6.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-card

## Before you start
Ask what the user's adjacent products, audiences, and brand are, then create two related promotional cards for them.

Build two vertically stacked promotional panels on a black page. The first is a wide split card with a dark olive text half, a refined display headline, short proof statement, bright lime/yellow CTA, and a warm photographic certificate half. The second is a dark charcoal business card with an overlapping or offset lifestyle image on the left and a text/action block on the right. Use 16px outer rounding, cropped imagery, high contrast, generous internal padding, and consistent alignment. Palette: #17180d or #242629 surfaces, ivory text, muted gray copy, warm amber imagery, and an energetic lime accent for the certificate action; use hot pink sparingly for business conversion. On mobile, stack the image and text while preserving clear CTA order.

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

More components