MasterClass

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. Prioritize Pitch Black (#000000) for large background areas and Charcoal Canvas (#222326) for primary surfaces to maintain the dark theme. Use Action Raspberry (#e32652) exclusively for primary calls to action, maintaining its vivid impact. All interactive elements will have a minimum border-radius of 4px, with important buttons using 8px. Utilize Sohne Schmal at 64px or 80px for monumental headings with tight negative letter-spacing for dramatic effect. Employ consistent 4px padding on badges and 16px horizontal padding for most buttons. Ensure input fields have a 1px #ffffff border and a 0px radius for a stark, integrated look. Use the inset box-shadow rgb(148, 154, 164) 0px 0px 0px 2px inset for selected or active body elements to indicate focus. Do not introduce light backgrounds for core content sections; the system is strictly dark-mode dominant. Avoid using multiple chromatic colors close together; allow Action Raspberry (#e32652) to stand out as the primary accent. Do not use generic system fonts; always specify Sohne for body and most headings, Sohne Schmal or Ivar Display Condensed for display. Do not deviate from the established spacing scale (multiples of 4px) to maintain consistent density. Do not use standard button shadows; rely on inset borders or subtle color shifts for interaction states. Avoid large imagery with distracting backgrounds; prioritize portraits or product shots with minimal context. Do not use highly rounded corners (e.g., >20px) on main cards or primary buttons, as this clashes with the structured feel.