## 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-1789146209-1.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-hero

## Before you start
Ask what the user's product, audience, offer, and brand are, then apply these principles to that context.

Create a dark, full-width membership hero directly below the navigation. Use a two-column layout: the left column contains a condensed oversized headline, one short supporting sentence, a saturated accent CTA, a secondary light CTA, a small guarantee note, and a multi-option preference quiz with square checkboxes and a subdued disabled Continue button; the right column is a tightly cropped grid of portrait/video tiles with varied aspect ratios and rounded corners. Use #050505 as the base, white typography, muted #b7b7b7 body text, hot pink #ed1f58 for primary actions, and charcoal #252629 for quiz rows. Keep the headline around 44–52px desktop with compact line-height, 16px body copy, 14px controls, 12px radii, and generous 28–40px spacing between groups. Add a subtle play/pause affordance only if the visual is animated. Stack the columns and move the quiz below the media on mobile.

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