MasterClass
Cinematic, aspirational, and intensely polished. A deep black canvas elevates high-production instructor portraits and streaming-style media carousels, while vibrant crimson conversion buttons cut sharply through the dark layout.
Visit siteColour
Background#000000
Text#ffffff
Accent#e32652
Surface#222326
Muted#9ea0a9
Typefaces
- Display
- Sohne Schmal
- Body
- Sohne
- Mono
- —
- Source
- self_hosted
- Scale
- 12 · 14 · 16 · 20 · 22 · 24
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 4px
Capture
- Category
- education
- Sections
- 12
- Captured
- 2026-08-30
- Rhythm
- dark x12
Type rules
- display headlines set in bold condensed uppercase or high-contrast editorial serifs
- body text maintained around 49 characters per line for readability
Colour rules
- pure black backgrounds dominate over 75 percent of the page area
- crimson accent reserved strictly for key conversion buttons and promotion banners
Voice rules
- short punchy imperatives in bold condensed typography
- lead with instructor prestige and learning outcomes
Holds it together
- use solid black as the base canvas with dark charcoal surfaces for interactive tiles and forms
- apply the vibrant crimson accent exclusively to primary call-to-action buttons and promotional callouts
- display catalog items in cinematic streaming-style poster cards with clean white typography
Contrast
text on background21.0:1 AAA
muted text on background8.1:1 AAA
text on surface15.7:1 AAA
accent on background4.7:1 AA
background on accent4.7:1 AA
Type, measured
- Body
- 20px / 1.6
- Measure
- 49 characters
- Display
- 80px / 0.85
- Tracking
- 0.01em display
- Scale ratio
- 1.41
Voice
- Tone
- aspirational, direct, authoritative
- Sentences
- short
- Person
- second
- Vocabulary
- plain
- Calls to action
- get, explore, try, start
Built with
- Builder
- —
- Framework
- next
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 5 items
- Length
- 10.3 screens
Sections in page order
3 marked strong · 12- 00
hero
High-contrast cinematic hero section pairing star-studded portrait tiles with an interactive direct-to-questionnaire onboarding flow.
- Mood
- bold + luxurious
- Layout
- 2 col · split · balanced
- 01
feature
Stark high-contrast dark section with clean grotesque typography, subtle line icons, and a bold punch of red on the primary CTA.
- Mood
- bold + quiet
- Layout
- 1 col · split · airy
- 02
showcase
Polished dark streaming catalog selector featuring a bold centered headline anchored by rows of outlined category pill buttons.
- Mood
- luxurious + quiet
- Layout
- 1 col · stacked · balanced
- 03
showcase
Sleek streaming-style course carousel featuring cinematic portrait cards against a deep black background.
- Mood
- luxurious + editorial
- Layout
- 1 col · stacked · balanced
- 04
cta
High-contrast dark CTA block centered with stark white type and a vivid crimson primary button.
- Mood
- bold + quiet
- Layout
- 1 col · centered · airy
- 05
feature
A warm, high-end split feature showcasing a framed certificate against rich wood paneling with refined serif typography.
- Mood
- luxurious + warm
- Layout
- 2 col · split · balanced
- 06
cta
StrongA sleek, cinematic B2B promotion card pairing dramatic documentary photography with bold condensed typography on a dark surface.
- Mood
- bold + luxurious
- Layout
- 4 col · split · balanced
- 07
testimonial
StrongAn intimate, dark-mode testimonial slider featuring a quiet floating quote card layered over candid member photography.
- Mood
- quiet + editorial
- Layout
- 1 col · asymmetric · airy
- 08
video
StrongFull-bleed cinematic video background overlaid with a clean, high-contrast category menu for interactive previewing.
- Mood
- luxurious + warm
- Layout
- 1 col · full bleed · airy
- 09
cta
A restrained, dark email capture section featuring a minimal split-form layout against solid black.
- Mood
- quiet + clinical
- Layout
- 1 col · split · airy
- 10
faq
Clean, restrained dark FAQ accordion structured into categorized rows with subtle chevron icons.
- Mood
- quiet + clinical
- Layout
- 1 col · stacked · balanced
- 11
footer
Deep black, understated footer balancing a clean newsletter sign-up with structured multi-column navigation links and app badges.
- Mood
- quiet + luxurious
- Layout
- 1 col · grid · balanced
