---
title: "MasterClass design system"
variant: extended
source: https://www.masterclass.com/
captured_at: 2026-10-12
theme: dark
industry: education
generator: Design DNA (https://four.wiralomi.com/style/masterclass-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# MasterClass · Design System

> A cinematic stage for learning from the best

**Theme:** dark · **Industry:** education · **Source:** https://www.masterclass.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

MasterClass pairs an almost-black canvas with bold editorial typography and cinematic instructor photography. Spacious, modular sections and restrained pink accents keep discovery and membership actions clear.

## North star

Use a black editorial stage, let instructor imagery carry the color, and reserve pink for the clearest membership action.

## Overview

The page is built on a near-black canvas, with white typography providing strong contrast and dark charcoal surfaces separating selectable items, cards, and controls. A vivid pink is reserved for the primary membership action and small brand accents, rather than spread across the interface. The hero uses an oversized condensed uppercase display headline opposite a mosaic of instructor portraits, making the people and the promise of learning the visual focus. Sohne handles navigation, body copy, controls, and most headings; a distinct display face gives the opening statement a poster-like editorial quality. Sections retain generous separation and use centered or split compositions depending on their purpose, while card groups and category choices remain compact and scannable. Photography is richly colored and cinematic against the dark surroundings. Hairline borders and subtle inset outlines define interactive elements without relying on prominent drop shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Stage Black | `#000000` | `--color-stage-black` | brand | Dominant page canvas and backdrop behind navigation, content sections, and cinematic imagery. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Primary headings, navigation, body copy, and text on the pink membership button. |
| Carbon Edge | `#0d0d0e` | `--color-carbon-edge` | surface | Near-black button and navigation details, with inset outlines and subtle component edges. |
| Class Pink | `#e32652` | `--color-class-pink` | accent | Primary Get MasterClass CTA and small brand marks. |
| Slate Panel | `#272c33` | `--color-slate-panel` | surface | Dark testimonial cards and selected card or button surfaces. |
| Muted Gold | `#eed37f` | `--color-muted-gold` | semantic | Rare measured button-edge detail; not a defining page color. |
| Charcoal Control | `#222326` | `--color-charcoal-control` | surface | Dark selectable controls and navigation surfaces, including the hero interest options. |
| Shadow Graphite | `#191c21` | `--color-shadow-graphite` | surface | Lower edge of the measured dark gradient treatment; supporting depth rather than a broad section color. |
| Lime Signal | `#dcff00` | `--color-lime-signal` | semantic | Very rare button color in the measured data; not a defining brand color in the screenshot. |
| Warm Paper | `#fffef2` | `--color-warm-paper` | neutral | Minor off-white heading and text variation; the dominant interface text remains white. |
| Olive Shadow | `#211d0d` | `--color-olive-shadow` | surface | Isolated dark card or promotional surface, not a recurring section background. |
| Soft Silver | `#9ea0a9` | `--color-soft-silver` | neutral | Muted text on dark category controls and secondary interface details. |
| Cool Mist | `#f4f4f5` | `--color-cool-mist` | neutral | Small supporting text variation against dark surfaces. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-surface` → `#272c33` (Slate Panel) · `--color-surface-2` → `#222326` (Charcoal Control) · `--color-surface-3` → `#211d0d` (Olive Shadow) · `--color-surface-4` → `#0d0d0e` (Carbon Edge) · `--color-text` → `#ffffff` (Studio White) · `--color-border` → `#0d0d0e` (Carbon Edge) · `--color-accent` → `#e32652` (Class Pink) · `--color-on-accent` → `#ffffff` (Studio White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#272c33` | 14.05:1 | AAA |
| `#ffffff` | `#222326` | 15.71:1 | AAA |
| `#ffffff` | `#211d0d` | 16.85:1 | AAA |
| `#e32652` | `#000000` | 4.67:1 | AA |
| `#e32652` | `#272c33` | 3.12:1 | AA-large |
| `#e32652` | `#222326` | 3.49:1 | AA-large |
| `#e32652` | `#211d0d` | 3.74:1 | AA-large |

### Gradients

- `linear-gradient(0deg, rgb(25, 28, 33) 0px, rgba(25, 28, 33, 0.5) 50%, rgba(25, 28, 33, 0) 90%)`
- `linear-gradient(to left, rgb(0, 0, 0) 12%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0) 45%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sohne | `--font-body` | webfont | 400, 600 | Navigation, body copy, controls, buttons, and most section headings. | Inter |

- **Sohne:** Use a clean sans-serif voice with restrained tracking; measured weights are 400 and 600. Buttons use semibold text and capitalization.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 500 | 0.85 | 0.01em | uppercase | Sohne Schmal | Hero statement, set in condensed uppercase display lettering. |
| h1 | 64px | 400 | 1.1 | 0.005em | — | Ivar Display Condensed | Prominent editorial page heading where a distinct display face is used. |
| h2 | 48px | 600 | 1.25 | 0.03em | — | Sohne | Primary section titles such as membership and instructor headings. |
| h3 | 32px | 600 | 1.25 | 0.03em | — | Sohne | Subsection headings for content and discovery areas. |
| h4 | 24px | 600 | 1.25 | 0.03em | capitalize | Sohne | Compact category or FAQ group headings. |
| body | 20px | 400 | 1.6 | 0.01em | — | Sohne | Introductory descriptions and longer supporting copy. |
| caption | 16px | 400 | 1.5 | 0.02em | — | Sohne | Supporting notes, card details, and secondary labels. |
| button | 16px | 600 | 1.25 | 0.01em | capitalize | Sohne | Membership CTA and selectable action labels. |
| nav | 16px | 400 | 1.5 | 0.02em | — | Sohne | Top navigation and primary site links. |
| link | 12px | 400 | 1.45 | 0.02em | — | Sohne | Small supporting links and tertiary destinations. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 20, 24, 32, 48, 64, 96 px.
- Section rhythm 96px · element gap 20px · card padding 72px · max content width 1200px.

The page uses a broad desktop composition with a measured maximum width of 1200px and generous section rhythm. The hero is a two-column split: left-aligned headline and interest choices beside a portrait mosaic. Later sections alternate among centered headings, split features, card grids, and full-bleed video. The measured spacing scale is based on an 8px unit, with a spacious density and substantial section gaps. Keep controls and cards grouped into clear, scannable modules.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `12px` · badge `9999px` · nav `8px` · link `8px` · xs `4px` · sm `8px` · md `12px` · lg `16px` · pill `9999px`
- Shadow `inset` (other): `rgb(148, 154, 164) 0px 0px 0px 2px inset`
- Shadow `inset-2` (button, link): `rgb(67, 69, 76) 0px 0px 0px 2px inset`
- Shadow `inset-3` (nav, other, footer): `rgb(39, 44, 51) 0px 0px 0px 1px inset`
- Shadow `inset-4` (other, footer): `rgb(148, 154, 164) 0px 0px 0px 1px inset`
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is mostly flat: dark surfaces sit directly against the black canvas, with restrained inset outlines defining selected controls and links. Avoid floating panels and heavy drop shadows. Rounded card and button edges soften the modular layout, while gradient overlays appear to support image fades and text legibility.

## Imagery

Photography is the defining media: instructor portraits and class imagery appear as a varied, tightly arranged mosaic in the hero and as card imagery throughout discovery sections. Images retain natural, vivid wardrobe and background color, contrasting with the black canvas rather than receiving a uniform color overlay. The page also includes full-bleed class-highlight video; preserve cinematic framing and let people remain the focal point.

## Components

### Primary membership CTA

Bright pink button with white semibold Sohne text; the dominant action against the black navigation and page canvas.

### Hero interest selector

Stacked charcoal choices with white labels and outlined checkboxes, presented below a short prompt.

### Instructor portrait mosaic

Uneven multi-column portrait arrangement with varied image heights, rounded media corners, and cinematic crops.

### Class discovery cards

Dark modular cards pair instructor or class imagery with concise titles and discovery affordances.

### Category controls

Compact dark category buttons use light text and restrained outlines to support browsing.

### FAQ accordion

Grouped question controls on the dark canvas, organized under clear section labels with minimal visual framing.

### Email signup

Simple email field and submission action paired with brief explanatory copy and consent text.

### Measured component styles

- **Primary button** (“Get”): background #e32652 · text #ffffff · radius 8px · padding 12px 24px · 600 16px Sohne · capitalize
- **Secondary button** (“Develop my career or leadership skills”): background #222326 · text #ffffff · radius 0px · padding 12px 16px · 400 16px Sohne
- **Link** (“New Featuring Prince Harry and Dr. Mary-”): transparent background · text #ffffff · radius 8px · padding 0px · 400 16px Sohne
- **Input**: transparent background · text #ffffff · radius 0px · padding 12px 16px · 400 16px Sohne
- **Card** (““As I traveled around Africa, I was comp”): background #272c33 · text #ffffff · radius 8px · padding 48px 96px · 400 16px Sohne
- **Badge** (“New”): background #ffffff · text #000000 · radius 20px · padding 4px 12px · 600 12px Sohne · capitalize
- **Navigation item** (“MasterClass Certificates On Call Executi”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Sohne

## Do

- Keep the main canvas black and text high-contrast.
- Use pink sparingly for the primary membership action.
- Let instructor photography carry most of the page's color.
- Use condensed uppercase display type for the hero statement.
- Group choices and cards into clear, scannable modules.
- Separate sections with generous measured spacing.
- Use subtle inset outlines instead of heavy shadows.

## Don't

- Do not turn the page into a bright, multicolor interface.
- Do not use pink as a broad section background.
- Do not flatten instructor photography into generic illustrations.
- Do not center every section; preserve intentional split layouts.
- Do not add prominent floating shadows or decorative gradients everywhere.
- Do not use the rare lime or gold samples as core brand colors.

## Agent prompt

Build a new page in the MasterClass visual style: a cinematic, editorial learning experience on a Stage Black (#000000) canvas. Use Studio White (#ffffff) for readable copy and reserve Class Pink (#e32652) for the primary action. Set controls and selectable rows on Charcoal Control (#222326), with Slate Panel (#272c33) for cards where needed. Use Sohne-like sans-serif typography for navigation, body, and controls; give the hero a bold condensed uppercase display headline. Compose the opening area as a left-aligned message and choices beside a tightly framed instructor portrait mosaic. Let natural portrait colors provide visual richness. Use spacious section breaks, modular card groups, restrained rounded corners, and subtle inset borders rather than heavy shadows. Keep sections varied: split features, centered discovery headings, video, testimonials, FAQ, and signup.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned condensed headline and stacked interest choices beside a portrait mosaic. | Learning-goal selection, Primary membership CTA | Uppercase display headline, Charcoal choice rows, Instructor portrait mosaic, Pink action button |
| 2 | feature-grid | Left-aligned section heading with membership benefits arranged in two columns. | Benefits overview, Membership and gift links | Dark canvas, Compact benefit list, Simple text links |
| 3 | product-grid | Centered heading above a three-column instructor or class presentation. | New-class discovery, Watch trailer | Portrait-led cards, New label, Video action |
| 4 | category-nav | Centered discovery headings above a dense, multi-column category and class browsing area. | Trending discovery, Category filtering | Dark category controls, Class imagery, Compact card grid |
| 5 | pricing | Compact two-column plan prompt with supporting value details and adjacent actions. | Plan selection prompt, Explore classes | Short pricing copy, Text links, Minimal framing |
| 6 | feature-split | Two-column feature section with centered heading and certificate-related media. | Career advancement, Certificate exploration | Dark promotional card, Proof-point copy, Action link |
| 7 | feature-split | Two-column team-focused block with left-aligned headline and supporting media. | Contact sales, Learn more | Uppercase eyebrow heading, Team imagery, Text links |
| 8 | testimonials | Single-column testimonial area with centered heading and a carousel-like set of member stories. | Member social proof, Story browsing | Slate testimonial cards, Quoted copy, Grouped navigation controls |
| 9 | video | Full-bleed video highlight area with category choices and repeated title treatment. | Category selection, Class preview playback | Full-bleed media, Video controls, Dark text-support gradient |
| 10 | newsletter | Centered signup block with email field, explanatory copy, and consent text. | Email sample request, Marketing consent | Email input, Submit button, Compact form copy |
| 11 | faq | Single-column FAQ with centered title, category headings, and stacked questions. | Accordion-style question browsing, Topic grouping | Dark background, Grouped question rows, Minimal separators |
| 12 | footer | Four-column footer combining signup, grouped navigation, and supporting links. | Newsletter signup, Explore and about navigation | Dense link groups, Email input, Consent copy, Dark footer |

## Source CSS custom properties (selected)

```css
--mc-color-red-100: #ffd6d6;
--mc-color-red-200: #ffadad;
--mc-color-red-300: #ff8585;
--mc-color-red-400: #ff5c5c;
--mc-color-red-500: #ff3333;
--mc-color-red-600: #ff0000;
--mc-color-red-700: #e00000;
--mc-color-red-800: #b80000;
--mc-color-red-900: #8f0000;
--mc-color-pink-100: #feb0c2;
--mc-color-pink-200: #ea5d7e;
--mc-color-pink-300: #e84a6f;
--mc-color-pink-400: #e84a6f;
--mc-color-pink-500: #e32652;
--mc-color-pink-600: #d61a46;
--mc-color-pink-700: #c71a42;
--mc-color-pink-800: #b5173c;
--mc-color-pink-900: #a21536;
--mc-color-yellow-100: #ffdcad;
--mc-color-yellow-200: #ffca85;
--mc-color-yellow-300: #ffb856;
--mc-color-yellow-400: #ffa733;
--mc-color-yellow-500: #ff9000;
--mc-color-yellow-600: #e88503;
--mc-color-yellow-700: #d17a08;
--mc-color-yellow-800: #b95c05;
--mc-color-yellow-900: #663a00;
--mc-color-green-100: #c2ebd2;
--mc-color-green-200: #a3e0bc;
--mc-color-green-300: #85d6a5;
--mc-color-green-400: #66cc8f;
--mc-color-green-500: #3ebb70;
--mc-color-green-600: #38a865;
--mc-color-green-700: #2e8a53;
--mc-color-green-800: #246b40;
--mc-color-green-900: #194d2e;
--mc-color-purple-100: #d4caf7;
--mc-color-purple-200: #b7a7f1;
--mc-color-purple-300: #9a83ec;
--mc-color-purple-400: #7d60e6;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/masterclass-com