## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146173702-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146166996.webp
- Design on Kage: https://kage.design/designs/masterclass-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, typography). Wait for the answers before writing any code. Everything below is a design language to apply to *their* product, not a template of the reference site.

## Page structure
Build a single dark landing page with these sections, top to bottom:

1. **Utility bar** — a thin, darker strip above the main nav with 4–5 small secondary links (secondary products/audiences). Low emphasis, 12px text.
2. **Primary nav** — wordmark left, a "Browse" dropdown trigger, a wide rounded dark search field with a placeholder question, then right-aligned utility links (gifts/plans/log in) and one filled accent CTA button.
3. **Hero** — split layout: left ~45% holds a two-line ultra-condensed uppercase display statement, one short supporting line with the starting price, two stacked CTAs (filled accent primary + white secondary), and a guarantee microcopy line; right ~55% is a mosaic collage of 5–6 portrait video stills of real people with a small pause control. This is the only place display type and imagery share a viewport.
4. **Onboarding quiz** — "What brings you to [product] today?" with a stacked list of full-width checkbox rows (dark cards, one option each) and a Continue button that sits disabled until a choice is made. Immediately personalizes after the hero.
5. **Membership benefits** — two columns: left a heading plus CTA pair (primary + gift-style secondary); right a six-row icon-led benefit list, one line per benefit.
6. **Class spotlight** — centered two-line section statement, then a full-width cinematic video still with a small "New" pill, an elegant serif class title, an instructor subline, and a "Watch Trailer" button. Sparse, tall, no cards.
7. **Browse by category** — centered heading, then a wrapped pill filter bar (one active "Trending" pill, the rest outlined with small icons), a "Popular now" row with "See all" and carousel arrows, five portrait class cards ("New" badge, serif title, instructor name, duration), dot pagination, and a centered "Explore Classes" button.
8. **Conversion band** — centered short statement, one line of pricing detail with the price bolded, and a paired CTA row (primary + dark secondary).
9. **Certification cross-sell banner** — 50/50 split: left dark panel with a small two-line wordmark, a serif headline, one subline, and a chartreuse accent button; right a photograph of the physical certificate artifact in warm light.
10. **Teams/B2B banner** — an offset card: left photograph of someone working, right dark panel with a small eyebrow, a condensed uppercase headline, two lines of copy, an accent CTA and a text link with arrow.
11. **Testimonials** — centered heading, then a carousel of quote cards: dark quote panel on the left, member photo on the right, name + role below the quote; circular prev/next arrows and dot pagination.
12. **Interactive category video** — full-bleed background video with a left-hand stacked list of all categories in bold text and a pause control; hovering/selecting a category changes the highlight.
13. **Email capture** — two columns: left heading and one line of copy, right a labeled email input, Submit button, a consent checkbox and legal microcopy.
14. **FAQ** — centered heading; accordions grouped under small category labels (e.g. "General", "Pricing & Payment"), each group holding 3–4 dark full-width rows with chevrons.
15. **Footer** — a "Join the inner circle" newsletter block (email + submit + consent), then four link columns (Explore, About, Social, Download) with app-store badges in the last one; a legal bottom bar with copyright and a security note.

## Design language
- **Canvas**: the page is near-black (#000–#0B0B0B). Cards and rows sit on slightly lifted dark surfaces (#141414–#1C1C1C) with 8–12px radius, no visible borders, and at most a faint shadow. Depth comes from tone, not lines.
- **Colour**: strictly black/white/gray plus one crimson accent (~#E0164F) reserved exclusively for primary CTAs, and one chartreuse accent (~#D7DF23) reserved for a single cross-sell banner so it pops as an event. Secondary text is #A6A6A6. Photography is warm and low-key; never introduce a second strong hue.
- **Type, three voices**: (1) an ultra-bold condensed grotesque in uppercase for campaign statements — display size ~72–96px, tight leading ~0.95, minimal tracking; (2) a neutral grotesque (Inter-like) at 700–800 for section headings (~40–48px, centered) and UI; (3) a high-contrast editorial serif used *only* for class/course titles (~26–32px), creating an editorial counterpoint to the display type. Body copy is 15–16px, generous line height.
- **Hierarchy**: big sparse sections carry a centered two-line statement headline with nothing else around it; dense utility sections are left-aligned, tightly stacked rows. CTAs always appear in pairs — filled accent primary next to a quiet secondary (dark or white) — and the primary accent button recurs at least every other section so conversion is never far away.
- **Rhythm and density**: alternate registers down the page — full-bleed cinematic spotlight (120–160px vertical padding, no cards) → tight utility rows (60–80px padding, stacked dark rows) → filter + carousel → band → split banners. Never let two identical layouts touch.
- **Imagery**: every image is a cinematic still of a person — portrait crops ~3:4 for cards, wide cinematic crops for spotlights, always warm-graded; overlay dark gradients where text sits on imagery. Photography is the product: it fills more area than any UI element.
- **Components**: category filters are pill buttons with 14px icons (active = filled light, inactive = outlined dark); class cards stack badge, serif title, name, duration; carousels use circular icon arrows plus small dots; FAQ rows are full-width dark bars with trailing chevrons, grouped under small bold labels; forms use rounded dark inputs with a visible label above.
- **Motion**: keep it restrained — gentle hover lightening of surfaces, arrow-driven carousel slides, an accordion open/close, and a background video in the two cinematic sections with a visible pause control. No decorative animation.

## Never
Do not copy the reference's logo, wordmark, product names, headline copy, instructor names, celebrity imagery, illustrations, or icon set. Never present the output as that brand or use real people's names or likenesses; substitute the user's own brand, subjects and copy throughout.