Studio
Studio
The MasterClass design system uses a dark-themed visual language. The primary brand color is Action Raspberry (#e32652); text is Pure White (#ffffff) on a Charcoal Canvas (#222326) background. Typography is set in Sohne, Sohne Schmal and Ivar Display Condensed. This DESIGN.md contains 15 color tokens and a 8-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of MasterClass.
Independent Style Review
Midnight Stage Presence
MasterClass employs a dark, cinematic UI, reminiscent of a premium streaming platform. Dominant blacks and deep charcoals create a sophisticated environment, allowing vibrant accents to punctuate interactive elements and brand moments. Typography is bold and confident, commanding attention within the high-contrast setting. Component surfaces are subtle, often inset, maintaining a flat aesthetic that emphasizes content and celebrity figures over overt ornamentation.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Pitch Black | #000000 | --color-pitch-black | Primary background for footers and expansive content sections, subtle borders, text for badges |
| Charcoal Canvas | #222326 | --color-charcoal-canvas | Default page background, card backgrounds |
| Graphite Base | #0d0d0e | --color-graphite-base | Background for subtle surface differentiation, text buttons, and darker borders |
| Deep Slate | #272c33 | --color-deep-slate | Card backgrounds, button backgrounds for secondary actions |
| Subtle Ash | #191c21 | --color-subtle-ash | Secondary background color for body sections |
| Muted Stone | #211d0d | --color-muted-stone | Text color for muted elements, borders on certain components |
| Iron Gray | #43454c | --color-iron-gray | Button backgrounds, inset shadow on interactive elements |
| Silver Mist | #9ea0a9 | --color-silver-mist | Text color for secondary information, muted icons, disabled states |
| Light Steel | #d4d5d9 | --color-light-steel | Subtle body text color, borders |
| Pure White | #ffffff | --color-pure-white | Primary text color, active states, badge backgrounds, clear button borders |
| Ghostly Gray | #f4f4f5 | --color-ghostly-gray | Hover states for text and icons, borders for ghost buttons, light text |
| Action Raspberry | #e32652 | --color-action-raspberry | Primary action buttons, prominent icons — a vibrant pop against dark backgrounds for conversion |
| Interactive Lime | #dcff00 | --color-interactive-lime | Green action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color |
| Highlight Gold | #eed37f | --color-highlight-gold | Accent borders for interactive cards or highlighted content, decorative elements |
| Subtle Cadet | #596170 | --color-subtle-cadet | Background for small, less prominent interactive elements |
| Font | Weights | Fallback |
|---|---|---|
| Sohne | 400, 600 | Inter |
| Sohne Schmal | 500 | condensed sans-serif like Oswald or Anton |
| Ivar Display Condensed | 400 | Condensed serif like Playfair Display SC or IBM Plex Serif |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 12px | 1.45 | --text-caption |
| body-sm | 14px | 1.45 | --text-body-sm |
| body | 16px | 1.45 | --text-body |
| body-lg | 20px | 1.45 | --text-body-lg |
| heading-sm | 22px | 1.45 | --text-heading-sm |
| heading | 24px | 1.3 | --text-heading |
| heading-lg | 32px | 1.3 | --text-heading-lg |
| display-sm | 48px | 1.3 | --text-display-sm |
