Skip to content
Browse
Library

MasterClass. Black-box stage lit by magenta spotlights.

  • Media
  • Dark theme
  • 11 colors
  • 3 typefaces

MasterClass reads as a darkened gallery wall — a near-black canvas where editorial type and portrait photography do the heavy lifting. The visual hierarchy is built on extreme contrast: a hot magenta primary action (#e32652) and warm gold accents (#eed37f) punctuate an otherwise monochrome stage, creating the feeling of spotlights on a black-box stage. Typography is the system's true voice — ultra-condensed display faces at 64–80px with sub-unity line-heights deliver cinematic headline presence, while Sohne at restrained sizes keeps the interface calm and editorial. Surfaces stay nearly invisible: cards sit on a slightly elevated dark plate with thin hairline borders rather than shadows, letting portrait imagery own the page. The overall register is premium, quiet, and theatrical — content first, chrome last.

Visit masterclass.com
Screenshot of MasterClass
Captured from masterclass.com on October 11, 2026

MasterClass design system

MasterClass

Brand1

  • Primary action buttons, active states, and key interactive accents — warm crimson against matte black creates theatrical urgency

Accent2

  • Decorative category pill borders, subtle brand warmth, and section highlights — adds luxury through restraint

  • Green action color for filled buttons, selected navigation states, and focused conversion moments.

Neutrals8

  • Elevated surface for secondary panels and the sticky bottom promotional bar

  • Nested surface for body blocks and form panels within cards

  • Page canvas and primary background — the stage floor from which all content rises

  • Card surfaces and raised containers — one step lighter than canvas to define interactive zones

  • Inactive button fills and dormant control surfaces

  • Muted helper text, icon strokes, and low-emphasis dividers

  • Secondary text, hairline borders, and inactive outlines on dark surfaces

  • Primary text, icon fills, and high-contrast borders — the dominant ink on the dark stage

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Magenta Spotlight

4.50 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.