masterclass.com
Design analysis
A compact split section turns the membership promise into a scannable checklist while retaining two conversion buttons and a strong question-led heading.
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-1789146210-2.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-feature-grid ## Before you start Ask what the user's product, audience, and brand are, then adapt this structure to their offer. Build a dark benefits band with a two-column layout. On the left, place a bold two-line heading and two side-by-side actions; on the right, show six concise benefits in a vertical checklist with small line icons. Use black (#050505), white #f5f5f5 headings, #c7c7c7 supporting text, thin #454545 outlines for the secondary action, and a hot-pink primary button. Align both columns to a shared top baseline, use 24–32px gaps, 14–16px row spacing, and 8px button radii. Ensure the checklist wraps cleanly and becomes a single-column stack on mobile. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage