MasterClass Design System

Overview

MasterClass presents itself as a cinematic streaming platform for expert-led education, wrapped in an unapologetically dark visual environment. The design language draws heavily from premium entertainment platforms—think Netflix's moody atmosphere meets editorial magazine typography—with a distinctive twist: the brand's electric magenta ({colors.primary}) punctuates an otherwise monochromatic near-black canvas like stage lighting on a dimmed set.

The dominant mood is aspirational and immersive. By bathing almost every surface in {colors.surface-dark} (#0d0d0e), the system ensures that instructor photography, headline type, and call-to-action buttons command absolute attention through contrast alone. This isn't a utilitarian SaaS dashboard; it's a velvet-rope experience where darkness creates intimacy and focus.

Where brand voltage lives most aggressively is in conversion surfaces: the {component.button-primary} family glows in {colors.primary}, the promotional banner ({component.promo-banner}) uses the same magenta for its CTA, and the hero section's divider rule ({component.hero-divider}) bleeds a 3px stripe of the color to anchor the layout. The brand color appears sparingly but decisively—it never backgrounds large areas, always acting as interactive or accent punctuation.

The single typography move defining this system is the deployment of Sohne Schmal—a hyper-condensed, Impact-style face—for all display and title roles. At {typography.display-xl} (80px), headlines like "LEARN FROM THE BEST, BE YOUR BEST." feel cinematic, almost theatrical, while remaining crisply legible thanks to tight tracking (0.8px letter-spacing). Body copy defaults to standard Sohne at small sizes (12–14px) with surprisingly heavy weights (600), creating a dense, information-rich texture that feels more like film credits than web copy.

Shape language leans toward the conservative: {rounded.DEFAULT} (8px) handles most cards and buttons, with {rounded.lg} (12–16px) reserved for instructor photo cards to soften the human portraiture. The checkbox list items—the signature onboarding component—use the default radius, feeling tactile and app-like against the dark field. Nothing reaches pill territory except theoretical avatar circles.

The site operates as two distinct visual dialects: the main dark-surface experience (homepage, course browsing, video player) where {colors.surface-dark} dominates, and occasional light-surface interruptions like the {component.promo-banner} which briefly inverts to white canvas before returning to darkness. A third micro-dialect exists in the warm-toned {colors.surface-warm} used for gold-accented promotional copy.

Key Characteristics:

• Dark-first canvas ({colors.surface-dark} #0d0d0e) across all primary surfaces; white ({colors.canvas}) reserved for overlay banners only
• Electric magenta brand voltage ({colors.primary} #e32652) applied exclusively to CTAs, active states, and accent rules—never as field background
• Condensed impact-style headlines via Sohne Schmal at {typography.display-xl} (80px / 500 weight / 0.85 line-height)
• Dense body text in Sohne at {typography.body-sm} (12px / 600 weight / 0.72px letter-spacing) creating high-information-density UI
• Inset shadow system for focus states rather than outer drop shadows; borders live inside elements
• Instructor photography as primary depth layer; images carry {rounded.lg} and float on {colors.surface-dark}
• Signature {component.checkbox-list-item} pattern for onboarding/segmentation flows with custom {component.checkbox-custom} controls
• Two-tier navigation: thin {component.utility-nav} (32px) atop full {component.top-nav-bar} (72px)
• Generous vertical rhythm: sections breathe with {spacing.section-lg} (88px) and {spacing.section-xl} (96px) padding

Colors

Brand & Accent

• Primary ({colors.primary} — #e32652): Electric magenta used for all primary buttons ({component.button-primary}), promotional CTAs ({component.promo-banner-cta}), the hero divider rule ({component.hero-divider}), and link interactions. Never used as a field background.
• Primary Hover ({colors.primary-hover} — #c91f47): Slightly deepened magenta for hover states on {component.button-primary-hover}.
• Primary Active ({colors.primary-active} — #b01b3e): Pressed/depressed state for {component.button-primary-active}, providing tactile feedback on interaction.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white, used exclusively for the promotional banner overlay ({component.promo-banner}) and any inverted-content moments. Not the primary page background.
• Surface Dark ({colors.surface-dark} — #0d0d0e): Near-black primary canvas for the entire site body, header bars, hero section, and footer. The dominant background token.
• Surface Soft ({colors.surface-soft} — #222326): Dark charcoal used for elevated cards like {component.checkbox-list-item} and the {component.browse-button} background. Provides subtle lift from the deeper canvas.
• Surface Elevated ({colors.surface-elevated} — #191c21): Slightly lighter than soft, used for hover states on list items ({component.checkbox-list-item-hover}).
• Surface Card ({colors.surface-card} — #272c33): Medium-dark gray for active/selected states ({component.checkbox-list-item-active}) and placeholder image fills.
• Surface Input ({colors.surface-input} — #222326): Input field background matching surface-soft, used by {component.search-input}.
• Surface Banner ({colors.surface-banner} — #ffffff): White background for the promotional announcement strip spanning viewport width.
• Surface Warm ({colors.surface-warm} — #211d0d): Very dark warm brown/gold tint for gold-accented promotional zones (Mother's Day messaging).

Text

• Ink ({colors.ink} — #ffffff): Pure white, the primary text color for headlines ({component.hero-headline}), navigation links ({component.top-nav-link}), and body copy on dark surfaces.
• Heading Light ({colors.heading-light} — #f4f4f5): Off-white (2% gray), used for subheading text like {component.hero-subhead} to create hierarchy below pure-white headlines without harshness.
• Body ({colors.body} — #9ea0a9): Medium gray for secondary descriptive text, captions, and muted UI labels. Provides comfortable reading contrast against dark surfaces.
• Muted ({colors.muted} — #949aa8): Slightly cooler gray than body text; used for utility navigation ({component.utility-nav}), timestamps, and tertiary metadata.
• Muted Soft ({colors.muted-soft} — #6a7080): Deeper gray for disabled or very low-priority text; placeholder hints in form fields.
• On Primary ({colors.on-primary} — #ffffff): White text rendered atop {colors.primary} buttons—satisfies WCAG AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): White text on dark surfaces (synonymous with ink in this system).
• On Banner Dark ({colors.on-banner-dark} — #000000): Black text for the promotional banner's headline and close icon, which sits on white background.
• Accent Gold ({colors.accent-gold} — #eed37f): Warm golden yellow for special promotional text highlights within dark containers.
• Accent Gold Text ({colors.accent-gold-text} — #211d0d): Very dark brown for text rendered on or near gold accent backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — #394451): Subtle blue-gray for minimal separators and inactive input borders. Used in {extensions.shadows.inset-hairline} treatment.
• Border Strong ({colors.border-strong} — #43454c): Medium gray-blue for default focus rings ({component.search-input-focus}) and active element outlines via {extensions.shadows.inset-border}.
• Border Muted ({colors.border-muted} — #596170): Lighter gray for decorative dividers between content groups when stronger separation isn't needed.
• Focus Ring ({colors.focus-ring} — #949aa8): Light gray used for the 2px inset focus indicator on interactive elements ({extensions.shadows.inset-focus}}).

Semantic

• Error ({colors.error} — #e32642): Aligned with primary brand red for error states and validation failures.
• Success ({colors.success} — #22c55e): Standard green for confirmation states, completed checkboxes, and positive feedback.
• Link ({colors.link} — #e32652): Links inherit the primary brand color, making them visually identical to CTAs in hue.
• Link Hover ({colors.link-hover} — #ff4d7a): Brightened magenta for link hover states, providing clear interaction feedback.

Typography

Font Family

MasterClass employs a dual-typeface system built around the proprietary Sohne family from Klim Type Foundry, supplemented by the serif display face Ivar Display Condensed (Hoefler&Co). The primary face, Sohne, handles all body text, UI elements, navigation, and functional labeling at weights ranging from 400 (regular) to 600 (semibold). It provides exceptional readability at the small sizes (11–14px) favored throughout the interface, with its humanist geometry preventing the coldness that often plagues grotesques at display sizes.

For headlines and titles, the system deploys Sohne Schmal ("schmal" meaning "narrow" in German)—an ultra-condensed variant that channels Impact's authority while retaining Sohne's refined proportions. This face appears exclusively in {typography.display-xl}, {typography.display-lg}, and {typography.title-md} roles, always between 500 (medium) weight. Its extreme width compression allows massive point sizes (up to 80px) without consuming horizontal real estate—a critical advantage for the bold, stacked headline treatments visible in the hero section.

Ivar Display Condensed makes a singular appearance in the {typography.title-sm} role, likely reserved for promotional sub-brands or special campaign lockups (such as the "GET 50% OFF THIS MOTHER'S DAY" treatment in the banner). Its serifs introduce a momentary editorial warmth amid the otherwise sans-serif environment.

The fallback stack degrades gracefully: "Sohne Schmal", Impact-fallback, Helvetica, Arial, sans-serif for display faces and Sohne, Helvetica, Arial, sans-serif for body text, ensuring the design intent survives even when proprietary fonts fail to load.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 80px | 500 | 0.85 (68px) | 0.8px | Hero headline (H1); maximum impact statement | | {typography.display-lg} | 56px | 500 | 1.0 | 0.56px | Section headlines; secondary hero moments | | {typography.title-md} | 28px | 500 | 0.85 (23.8px) | 0.28px | Card titles; modal headings; H2 equivalents | | {typography.title-sm} | 24px | 400 | 1.1 | 0.02em | Promotional campaign headlines (serif) | | {typography.heading-md} | 16px | 600 | 1.25 (20px) | 0.48px | Section questions; form labels; H3 equivalents | | {typography.body-md} | 14px | 400 | 1.5 | 0 | Descriptive paragraph text; longer form copy | | {typography.body-sm} | 12px | 600 | 1.25 (15px) | 0.72px | Utility labels; metadata; navigation secondary | | {typography.caption} | 11px | 500 | 1.3 | 0.04em | Timestamps; legal text; fine print | | {typography.button} | 16px | 600 | 1.25 | 0 | Primary and secondary button labels | | {typography.button-sm} | 12px | 600 | 1.25 | 0.72px | Small button variants; tag labels | | {typography.nav-link} | 14px | 400 | 1.4 | 0 | Top navigation menu items | | {typography.label} | 13px | 400 | 1.4 | 0 | Form field labels; checkbox text | | {typography.mono} | 13px | 400 | 1.5 | 0 | Code snippets; technical data |

Principles

MasterClass's typographic hierarchy relies on extreme size contrast rather than weight variation to establish order. The jump from {typography.display-xl} (80px) down to {typography.heading-md} (16px)—a 5:1 ratio—is among the most aggressive in contemporary consumer web design. This works because the dark canvas swallows visual noise, allowing oversized type to dominate without feeling oppressive. Weight remains relatively restrained: headlines sit at 500 (medium) while body text pushes to 600 (semibold) at small sizes, an inversion of conventional practice where headlines go bold and body stays regular.

Letter-spacing plays a subtle but critical role. The display faces receive positive tracking (+0.8px at 80px, +0.28px at 28px) to prevent the ultra-condensed forms from clumping, while the smallest body size ({typography.body-sm}) gets even tighter tracking (+0.72px) to maintain word cohesion at 12px. This asymmetrical approach—loosening large type, tightening small type—reflects optical correction principles usually reserved for print design.

Color also carries hierarchy weight. Pure {colors.ink} (#ffffff) reserves itself for headlines and primary actions, while {colors.body} (#9ea0a9) handles supporting copy. The 60% brightness difference between these tokens does as much work as the 68px size differential between display and body roles. Uppercase is used liberally in headlines ("LEARN FROM THE BEST, BE YOUR BEST.") but never in body text or UI labels, creating a shouted-whispered dynamic between marketing moments and functional interfaces.

Note on Font Substitutes

Sohne and Sohne Schmal are proprietary fonts available exclusively through Klim Type Foundry's licensing program. For open-source implementations or prototyping, substitute with the following Google Fonts pairings:

• Display/Headline substitute: Oswald (Google Fonts) — a condensed grotesque with similar Impact-like authority at medium weights. Use at 500–600 weight with +0.02em to +0.01em letter-spacing.
• Body substitute: Inter or DM Sans (Google Fonts) — both offer excellent readability at 12–14px with similar humanist geometry to Sohne. Inter's tabular figures align well with the data-dense UI patterns seen in the checkbox lists.
• Serif display substitute (Ivar Display Condensed): Playfair Display or Libre Baskerville at condensed widths, though no open-source font perfectly matches Ivar's particular warmth.

CSS variable mapping for implementation:

--font-display: "Oswald", "Sohne Schmal", Impact, sans-serif;
--font-body: "Inter", "Sohne", -apple-system, BlinkMacSystemFont, sans-serif;
--font-serif: "Playfair Display", "Ivar Display Condensed", Georgia, serif;

Layout

Spacing System

• Base unit: 4px (derived from the xxs token).

• Tokens:

  • {spacing.xxs} (2px) — Micro-adjustments; internal icon spacing
  • {spacing.xs} (4px) — Gap between inline elements; icon margins
  • {spacing.sm} (8px) — Tight component internal padding; checkbox gaps
  • {spacing.md} (12px) — List item internal padding; form field gaps
  • {spacing.base} (16px) — Standard card padding baseline; grid gutters
  • {spacing.lg} (20px) — Button padding horizontal; card padding generous
  • {spacing.xl} (24px) — Section-internal grouping margins; card stacks
  • {spacing.xxl} (32px) — Large component margins; container padding
  • {spacing.section-sm} (48px) — Minor section vertical rhythm
  • {spacing.section-md} (64px) — Major section breaks; footer padding
  • {spacing.section-lg} (88px) — Hero section vertical padding
  • {spacing.section-xl} (96px) — Maximum section breathing room

• Section padding (vertical): {spacing.section-lg} (88px) — applied to the {component.hero-section} and major content bands.

• Card internal padding: {spacing.base} (16px) horizontal × {spacing.lg} (20px) vertical for {component.checkbox-list-item}; {spacing.lg} (20px) all-around for denser cards.

• Gutters: 16px–32px depending on context; the main container uses {spacing.xxl} (32px) horizontal padding at desktop widths.

Grid & Container

• Max content width: 1440px for the full-page wrapper (main element); 1264px for centered content sections (section elements). This dual-max approach allows background elements (like the instructor photo grid) to bleed edge-to-edge while text content remains constrained and readable.
• Density choice: Editorial-cinematic density. Unlike marketplace grids that pack 3–4 columns tightly, MasterClass uses generous whitespace and oversized imagery. The hero splits roughly 45% text column / 55% image column at desktop, with the text column maxing around 520px for optimal reading measure (65–75 characters).
• Desktop grid behavior: The instructor photography area uses a masonry-like irregular grid (visible in the screenshot: one large portrait, two smaller stacked cards, another portrait). This is likely implemented via CSS Grid with grid-template-columns and varying row-span values rather than a strict column system.
• Hero column split: Left column (text) takes ~40–45% width containing headline, subhead, divider rule, question prompt, and checkbox stack; right column (imagery) occupies the remainder with overlapping instructor portraits in varied aspect ratios.

Whitespace Philosophy

The system practices aggressive containment of density. While individual components like the checkbox list pack information tightly (12px font, 0.72px letter-spacing, compact padding), the macro-layout breathes expansively. Sections are separated by 64–96px vertical padding, and the hero area leaves nearly 100px of dark void above the headline. This creates a pulsing rhythm: dense clusters of interactive UI floating in oceans of dark negative space. It mirrors cinema's editing rhythm—rapid cuts between intimate close-ups (checkbox items) and wide establishing shots (full-bleed hero).

Header Architecture

[Viewport Width: 1440px max]
┌─────────────────────────────────────────────────────────┐
│ [Utility Nav: 32px height]                              │
│ MasterClass │ Certificates │ OnCall │ Executive │ Work  │
├─────────────────────────────────────────────────────────┤
│ [Main Nav: 72px height]                                 │
│ [Logo]  [Browse ▾] [🔍 Search........]   Gifts View..  │
│                                         LogIn [CTA]     │
└─────────────────────────────────────────────────────────┘

The header employs a two-tier architecture: a thin 32px utility bar at the very top carrying secondary navigation links (Certificates, OnCall, etc.) in {typography.caption} size text, followed immediately by the 72px primary navigation containing the logo, browse dropdown, search field, and primary CTA. Both bars share {colors.surface-dark} background but are visually separated by implicit spacing. At 1440px viewport, content centers with approximately 32px lateral padding.

Hero Section

[Container: 1264px centered, 88px vertical padding]
┌────────────────────┬──────────────────────────────────┐
│                    │  ┌──────────┐ ┌────────────────┐  │
│  LEARN FROM THE    │  │ INSTRUCTOR│ │ INSTRUCTOR     │  │
│  BEST, BE YOUR     │  │  PHOTO 1 │ │  PHOTO 2       │  │
│  BEST.             │  │ (large)  │ │ (small top)    │  │
│                    │  └──────────┘ ├────────────────┤  │
│  ── [magenta]      │                │ INSTRUCTOR     │  │
│                    │  ┌──────────┐  │  PHOTO 3       │  │
│  What brings you   │  │ INSTRUCTOR│ │ (portrait)     │  │
│  to MasterClass    │  │  PHOTO 4 │ │                │  │
│  today?            │  │         │  ├────────────────┤  │
│                    │  └──────────┘  │ INSTRUCTOR     │  │
│  ☐ Develop my..    │                │  PHOTO 5       │  │
│  ☐ Learn about AI  │                │ (bottom)  [⏸]  │  │
│  ☐ Become a better │                └────────────────┘  │
│  ☐ Cultivate a     │                                   │
│  healthy...        │                                   │
│  ☐ Learn about     │                                   │
│  science...        │                                   │
│  ☐ Become a better │                                   │
│  chef              │                                   │
│  ☐ Improve my..    │                                   │
└────────────────────┴──────────────────────────────────┘

The hero follows a asymmetric split-gate layout. The left rail (text column) contains the complete conversion narrative in sequence: headline → subhead → brand-color divider → question prompt → segmented checkbox list (scrollable if extended). Each checkbox item is a full-width {component.checkbox-list-item} with consistent padding and hover state treatment. The right rail displays an overlapping masonry grid of instructor photographs, each cropped to different aspect ratios (some square-ish 4:5, others vertical 3:4, some wider 5:4), creating dynamic visual interest that avoids rigid grid monotony. A semi-transparent pause overlay ({component.pause-overlay}) sits in the bottom-right corner suggesting video autoplay behavior.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat Baseline) | No shadow; {colors.surface-dark} background | Page body, footer, static sections | | 1 (Inset Border) | inset 0 0 0 1px {colors.hairline} | Default input fields, inactive controls | | 2 (Inset Focus) | inset 0 0 0 2px {colors.border-strong} | Focused inputs, keyboard-navigable elements | | 3 (Inset Emphasis) | inset 0 0 0 2px {colors.focus-ring} | Primary focus state, highlighted selections | | 4 (Soft Glow) | 0 0 16px 8px rgba(158,160,169,0.25) | Elevated cards, dropdown menus, modals |

MasterClass's elevation philosophy is inverted relative to Material Design conventions. Rather than lifting elements off the canvas with outer drop shadows, the system pushes borders inward using box-shadow: inset syntax. This creates a recessed, carved appearance that feels appropriate for the dark-theme environment—like matte-black automotive trim or high-end audio equipment chassis where details are milled into the surface rather than stacked atop it.

The darkest surface ({colors.surface-dark} #0d0d0e) serves as the true "zero" plane. Elements requiring distinction (input fields, checkboxes, list items) receive inset shadows in progressively lighter gray values, simulating physical indentations. When true elevation is needed (dropdowns, modals, tooltip-like surfaces), the system deploys a diffuse outer glow in {extensions.shadows.soft-glow}—a cool-toned, low-opacity scatter that reads as ambient light spill rather than directional casting.

This approach eliminates harsh shadow edges that can look muddy against dark backgrounds. The result is a tactile, hardware-inspired depth language where interaction surfaces feel pressed into the chassis rather than floating above it.

Decorative Depth

Beyond the shadow system, instructor photography functions as the primary decorative depth layer. The hero's right-column image grid creates visual stratification through overlapping frames, varied corner rounding ({rounded.lg}), and implicit z-index layering. Images appear to float slightly above the background due to their lighter luminance values (skin tones, clothing textures) against the near-black canvas. The pause button overlay adds a final depth scrim with its semi-transparent black background and circular white icon.

The {component.hero-divider}—a 3px horizontal rule in {colors.primary}—acts as a geometric depth anchor, providing a single sharp vector interrupting the otherwise soft photographic field.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Custom checkbox controls ({component.checkbox-custom}); small tags | | {rounded.DEFAULT} | 8px | Buttons ({component.button-primary}, {component.browse-button}); list items ({component.checkbox-list-item}); search input; most interactive surfaces | | {rounded.md} | 12px | Larger card containers; moderate image corners | | {rounded.lg} | 16px | Instructor photograph cards ({component.instructor-card-image}); prominent media containers | | {rounded.xl} | 20px | Feature cards; hero imagery panels; softest container edges | | {rounded.pill} | 9999px | Tags; pills; fully rounded caps (theoretical/reserved) | | {rounded.circle} | 50% | Avatar placeholders; the {component.pause-overlay} button; perfectly round icons |

The radius vocabulary spans only seven steps from sharp (4px) to fully round (50%), with the vast majority of components clustering at the 8px default. This conservatism ensures visual coherence—nothing feels jarringly round or unexpectedly sharp. The progression from 4→8→12→16→20px follows a roughly arithmetic sequence (+4px per step), making it predictable for designers extending the system.

Photography Geometry

Instructor and celebrity photography throughout the site follows variable-aspect-ratio cropping with {rounded.lg} (16px) corner rounding. The hero grid specifically mixes orientations:

• Vertical/portrait (3:4 – 4:5): Head-and-shoulders shots emphasizing facial recognition; used for the primary large instructor image and bottom-right card.
• Near-square (4:5 – 5:6): Chest-up compositions balancing detail with context; middle-left card position.
• Horizontal/wider (5:4 – 6:5): Environmental or gestural shots showing hands/body language; upper-right smaller card.

All images appear to use object-fit: cover behavior, centering faces within the frame. No borders surround the images—they blend directly onto {colors.surface-dark} with only the rounded corners defining their shape. This treatment makes photography feel printed onto the surface rather than contained within frames.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.checkbox-list-item-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal call-to-action surface, appearing as "Get MasterClass" in the navigation and promotional contexts. Background {colors.primary}, text {colors.on-primary} in {typography.button} (16px/600), rounded {rounded.DEFAULT} (8px), padding 12px vertical × 24px horizontal. Flat styling with zero box-shadow—relies entirely on color contrast for visibility. State variants include {component.button-primary-hover} (deepened magenta background) and {component.button-primary-active} (further darkened). The small variant {component.button-primary-sm} reduces to {typography.button-sm} (12px) with tighter 8px×20px padding, used within the promotional banner's constrained height.

{component.button-primary-sm} — Compact CTA variant for space-constrained contexts like the {component.promo-banner}. Maintains full {colors.primary} background and white text but scales down to 12px font with 8px×20px padding. Shares the same radius and flat-shadow treatment as its full-size sibling.

{component.browse-button} — Secondary action button labeled "Browse" with a dropdown chevron indicator. Uses {colors.surface-soft} (#222326) background against the darker nav, creating subtle elevation through luminance shift. Text in {colors.ink}, {typography.button} weight, {rounded.DEFAULT} corners, 12px×20px padding. Functions as a category navigation trigger rather than conversion endpoint.

{component.button-secondary} — Text-only navigation links ("Gifts", "View Plans", "Log In") rendered as transparent-background buttons with {colors.ink} text in {typography.nav-link} (14px/400). Zero border-radius (sharp corners), minimal 8px×0 padding. These behave as styled anchor elements within the navigation rail, distinguished from primary actions by absence of fill color.

Navigation

{component.top-nav-bar} — The primary 72px-tall navigation header spanning full viewport width. Background {colors.surface-dark}, text {colors.ink}. Contains the MasterClass logo mark ({component.logo-mark}), browse dropdown ({component.browse-button}), search input ({component.search-input}), utility links ({component.button-secondary} group), and primary CTA ({component.button-primary}). Content constrains to 1440px max-width with ~32px lateral padding. Fixed or sticky positioning implied by typical landing page patterns.

{component.utility-nav} — Thin 32px auxiliary navigation bar positioned above the main header. Background matches {colors.surface-dark}, text in {colors.muted} at {typography.caption} (11px) size. Carries tertiary links: "MasterClass", "Certificates", "OnCall", "Executive", "At Work". These represent sub-brand or enterprise-level destinations separate from the consumer funnel.

{component.top-nav-link} — Individual navigation menu item within either nav bar. Transparent background, {colors.ink} text, {typography.nav-link} styling, padded 8px vertical × 12px horizontal. Hover/active states would invert color or add underline (per implementation convention). The active variant {component.top-nav-link-active} maintains the same structure for the currently-selected section.

{component.logo-mark} — MasterClass wordmark in {colors.primary} (magenta) using {typography.heading-md} (16px/600). The iconic "M" symbol precedes the wordmark. Renders as a clickable home link; no background fill, transparent container.

Inputs & Forms

{component.search-input} — Full-width search field in the navigation bar. Background {colors.surface-input} (matching {colors.surface-soft}), text {colors.ink}, {typography.button} sizing (16px). Contains a left-aligned search icon (magnifying glass) absolutely positioned with ~16px left offset; text padding begins at 44px left to accommodate. Rounded {rounded.DEFAULT} (8px). Placeholder text reads "What do you want to learn today?" in {colors.muted}. Focus state ({component.search-input-focus}) applies {extensions.shadows.inset-border} treatment (2px inset in {colors.border-strong}). No outer shadow elevation—maintains the carved-in aesthetic.

{component.checkbox-list-item} — The signature interactive component driving the hero onboarding flow. Full-width rectangular tile with {colors.surface-soft} background, {rounded.DEFAULT} corners, 16px×20px internal padding. Text renders in {colors.body-md} (14px) describing user interests ("Develop my career...", "Learn about AI..."). Each item contains a leading {component.checkbox-custom} control (20px square, {rounded.sm}, {colors.muted} border) followed by label text. These stack vertically with consistent spacing, forming a scrollable interest-selection list.

{component.checkbox-list-item-hover} — Hover state for the checkbox item, elevating background to {colors.surface-elevated} (#191c21)—a subtle 1-step luminance increase signaling interactivity without full activation. Transition timing should match {extensions.motion.duration-fast} (200ms).

{component.checkbox-list-item-active} — Selected/checked state for the checkbox item. Background lifts further to {colors.surface-card} (#272c33), and the nested {component.checkbox-custom-checked} control fills with {colors.primary} magenta, displaying a white checkmark glyph. This three-state progression (default → hover → active) creates clear tactile feedback in the dark environment.

{component.checkbox-custom} — Unchecked checkbox control (custom-styled, not browser-default). 20px×20px square, transparent background, 2px solid {colors.muted} border, {rounded.sm} (4px) corners. Positioned to the left of label text with ~8–12px gap. On checked state, transitions to {component.checkbox-custom-checked}.

{component.checkbox-custom-checked} — Checked/appears-when-selected checkbox control. Background fills with {colors.primary} (#e32652), border matches background color (invisible seam), maintaining {rounded.sm} shape. Contains a white SVG checkmark or tick glyph (~12px) centered within. The magenta fill creates strong visual pop against the dark card surface, serving as the primary selection indicator.

Cards & Containers

{component.promo-banner} — Full-viewport-width announcement strip (currently "GET 50% OFF THIS MOTHER'S DAY"). Background {colors.surface-banner} (white), creating a jarring but intentional inversion from the surrounding dark page. Contains three children: left-aligned promotional text in {typography.title-sm} (serif, 24px) mixing {colors.primary} and {colors.on-banner-dark}; center-aligned urgency text ("OFFER ENDS TOMORROW") in uppercase {typography.body-sm}; and a {component.promo-banner-cta} button. Padding is 12px vertical × 32px horizontal. A {component.promo-close} (X icon) sits at the far right for dismissal.

{component.promo-banner-cta} — Small primary-style button contained within the banner. Identical treatment to {component.button-primary-sm}: {colors.primary} background, white text, 8px×20px padding, {rounded.DEFAULT}. Triggers the same conversion flow as the main navigation CTA.

{component.promo-close} — Dismissal control for the promotional banner. 24px×24px clickable area (or slightly larger touch target), transparent background, {colors.on-banner-dark} (black) X icon, positioned absolute/flex-end within the banner. Zero border-radius.

{component.instructor-card} — Container for individual instructor photography in the hero grid. Transparent background (images show through), {rounded.lg} (16px) corners applied to child image. No padding—image bleeds to edge. May contain optional overlay content like name/title on hover (not visible in static screenshot).

{component.instructor-card-image} — The <img> or <div> with background-image inside {component.instructor.card}. Rounded {rounded.lg}, object-fit: cover, aspect-ratio varies by grid position (see Photography Geometry section). Background fallback color {colors.surface-card} (#272c33) loads before image decodes, preventing flash-of-empty.

{component.pause-overlay} — Circular button (48px diameter, {rounded.circle} = 50%) overlaid on the bottom-right of the instructor image grid. Semi-transparent {rgba}(0, 0, 0, 0.6) background with white pause-icon (two vertical bars) centered. Suggests the image area may auto-play video or serve as a carousel control. High z-index to float above photograph stack.

Hero Section

{component.hero-section} — Top-level container for the above-the-fold conversion area. Spans full viewport width with {colors.surface-dark} background. Vertical padding {spacing.section-lg} (88px) top and bottom. Centers inner content at 1264px max-width. Contains the two-column layout described in the Layout section (text rail + image rail).

{component.hero-headline} — The H1-level message: "LEARN FROM THE BEST, BE YOUR BEST." Rendered in {typography.display-xl} (80px/500 weight) using Sohne Schmal, color {colors.ink} (white). Uppercase, tight line-height (0.85), slight positive letter-spacing (0.8px). Maximum visual weight in the entire system—this is the typographic climax.

{component.hero-subhead} — Supporting paragraph beneath the headline: "Get unlimited access to thousands of bite-sized lessons." Styled in {typography.body-md} (14px/400) with color {colors.heading-light} (near-white, softer than pure ink). Provides breathing room before the divider rule.

{component.hero-divider} — Horizontal rule element (3px tall × 32px wide) in {colors.primary} magenta, positioned between subhead and question prompt. Acts as a brand-color anchor and visual separator. Sharp corners (no radius).

{component.hero-question} — Prompt text introducing the checkbox list: "What brings you to MasterClass today?" Styled in {typography.heading-md} (16px/600) in {colors.ink}. Sets up the interactive segmentation flow.

Footer

{component.footer} — Page-bottom container (partially inferred). Background {colors.surface-dark} matching the page body, text {colors.muted} in {typography.body-sm} (12px). Vertical padding {spacing.section-md} (64px). Likely contains link columns, legal text, social icons, and copyright. Extends the seamless dark-field aesthetic to page end.

Do's and Don'ts

Do

• Do reserve {colors.primary} (#e32652) exclusively for conversion actions (buttons, CTAs, active indicators) and the hero divider rule—never use it as a background fill for large containers or cards.
• Do apply {typography.display-xl} (80px Sohne Schmal) to the primary hero headline only; cascade down through {typography.display-lg} and {typography.title-md} for subsequent hierarchy levels rather than scaling the display face uniformly.
• Do use the inset shadow system ({extensions.shadows.inset-border}, {extensions.shadows.inset-focus}) for all focus and border treatments on form elements—outer drop shadows break the carved-in material metaphor.
• Do maintain the {rounded.DEFAULT} (8px) radius as the default for 90% of interactive surfaces; reserve {rounded.lg} (16px) specifically for instructor photography cards and {rounded.sm} (4px) solely for custom checkbox controls.
• Do set checkbox list items ({component.checkbox-list-item}) against {colors.surface-soft} (#222326) with clear three-state progression (default → hover at {colors.surface-elevated} → selected at {colors.surface-card}) for accessible interaction feedback.
• Do allow generous vertical rhythm in major sections—{spacing.section-lg} (88px) minimum between content bands—to preserve the cinematic breathing room that defines the dark-canvas experience.
• Do render instructor photographs with {rounded.lg} corners and no external borders, letting the luminance contrast against {colors.surface-dark} provide natural definition.
• Do use {typography.body-sm} (12px/600/0.72px tracking) for all metadata, labels, and utility text—this dense typesetting is a signature characteristic of the system's information-rich aesthetic.
• Do keep the promotional banner ({component.promo-banner}) as the sole white-canvas exception; ensure it spans full viewport width and includes a dismissible close control.
• Do pair the primary CTA ({component.button-primary}) with a secondary text-link alternative ({component.button-secondary} style) in the navigation to provide low-commitment paths alongside conversion triggers.
• Do apply {typography.title-sm} (serif Ivar Display Condensed) only for campaign-specific headline treatments within the banner or special promotions—never mix it into the core navigation or body hierarchy.

Don't

• Don't substitute {colors.link} or {colors.link-hover} for {colors.primary} in button backgrounds—links share the hex value but semantic usage differs (inline text vs. block actions).
• Don't bold the display headlines beyond 500 weight—Sohne Schmal at 500 already commands maximum presence; heavier weights destroy the elegant condensed proportions.
• Don't add gradient overlays or backdrop blurs to the hero section—the {colors.surface-dark} canvas is intentionally flat and opaque; depth comes from photography and inset shadows only.
• Don't expand the radius vocabulary beyond the documented scale—if a new component needs rounding, select from {rounded.sm}, {rounded.DEFAULT}, {rounded.md}, {rounded.lg}, {rounded.xl}, {rounded.pill}, or {rounded.circle}.
• Don't use {colors.canvas} (#ffffff) as the main page background—that token exists solely for the promotional banner overlay; the primary surface is always {colors.surface-dark}.
• Don't apply outer box-shadows to elevated elements in the dark theme; always prefer the glow treatment ({extensions.shadows.soft-glow}) or inset border techniques for depth.
• Don't reduce {typography.display-xl} below 64px even on narrower viewports—the headline scale is non-negotiable for brand impact; allow horizontal overflow or switch to {typography.display-lg} only at tablet breakpoint.
• Don't mix font families beyond the established trio: Sohne (body/UI), Sohne Schmal (display), and Ivar Display Condensed (promotional serif). Introducing a fourth face fractures the typographic voice.
• Don't remove letter-spacing from {typography.body-sm} (0.72px) or {typography.display-xl} (0.8px)—these optical corrections are essential for legibility at extreme sizes.
• Don't implement checkbox controls using browser-default styling—always build the custom {component.checkbox-custom} / {component.checkbox-custom-checked} pair with magenta fill-on-select behavior.
• Don't place light-colored text ({colors.ink} or {colors.heading-light}) directly on {colors.surface-card} (#272c33) or lighter surfaces—reserve those text tokens for {colors.surface-dark} and {colors.surface-soft} backgrounds only; step down to {colors.body} or {colors.muted} on mid-tone surfaces.

Motion & Animation

Transition Tokens

/* Core transition primitives extracted from computed styles */
--transition-all: all 0.2s ease;
--transition-background: background 0.25s ease;
--transition-color-shadow: color 0.2s ease, box-shadow 0.2s ease;
--transition-expand-collapse: max-height 0.5s ease, visibility 0.5s ease;
--transition-border: border-color 0.2s ease;
--transition-opacity: opacity 0.25s ease;
--transition-transform: transform 0.2s ease, padding 0.2s ease;
--transition-carousel: transform 0.3s cubic-bezier(0.29, 1.185, 1, 1);

Keyframe Animations

• Results_fade__UD4aZ — Fade-in reveal for results or content blocks, likely triggered on scroll-into-view or state change.
• Carousel_scrolling-vertical__HWt3L — Continuous vertical marquee/scroll animation for testimonial or instructor carousel panels (y-axis translation loop).
• Carousel_scrolling-horizontal__z_t2A — Continuous horizontal scrolling animation for thumbnail rows or category carousels (x-axis translation loop).
• GlobalCarousel_shine__s_d_L — Sweep highlight or "shine" effect passing across carousel cards, creating a polished, premium reflection movement (gradient mask translate).

Interaction Patterns

• Checkbox state morphing: The {component.checkbox-custom} control animates its background-color transition from transparent to {colors.primary} over {extensions.motion.duration-base} (250ms) when toggled, with the checkmark glyph scaling or fading in simultaneously.
• List item elevation: Checkbox list items ({component.checkbox-list-item}) smoothly interpolate their background from {colors.surface-soft} through {colors.surface-elevated} on hover (200ms), creating a tactile "press" sensation.
• Carousel momentum: The instructor image grid and any horizontal scrolling areas use the custom bounce-easing (cubic-bezier(0.29, 1.185, 1, 1)) giving overshoot and settle behavior reminiscent of iOS scroll physics.
• Banner slide-down/promo reveal: The {component.promo-banner} likely animates in from the top viewport edge using transform: translateY(-100%) to translateY(0) over 300–400ms with ease-out timing.
• Focus ring expansion: Form inputs grow their inset shadow from 1px ({extensions.shadows.inset-hairline}) to 2px ({extensions.shadows.inset-border}) on focus, with color transitioning toward {colors.focus-ring} over 200ms.
• Button press scale: Primary buttons may incorporate a subtle transform: scale(0.98) on active/{component.button-primary-active} state (200ms ease), providing physical click feedback.
• Pause overlay fade: The {component.pause-overlay} likely fades in (opacity 0→1) after 2–3 seconds of video/image playback, using {extensions.motion.duration-base} easing.
• Image parallax: The hero instructor photos may exhibit subtle parallax displacement (translate-Y tied to scroll position) adding depth to the layered composition.

Imagery Style

• Photographic realism with studio lighting: All instructor imagery is professional portrait photography featuring controlled lighting, shallow depth of field (bokeh backgrounds), and high-production-value retouching consistent with entertainment industry standards.
• Subject matter: Celebrity and expert instructors shown from chest-up or head-and-shoulders, expressing confidence and approachability through direct eye contact and authentic expression (smiles, engaged posture). No stock-photo poses—each subject conveys personal authority.
• Color treatment: Photographs retain naturalistic color palettes (warm skin tones, neutral clothing, environmental context) without heavy filtering or duotone effects. They rely on inherent contrast against {colors.surface-dark} rather than stylized grading.
• Role in composition: Imagery dominates the hero's right column, occupying roughly 55% of viewport width at desktop. It serves as the emotional hook while the left-column text delivers the value proposition—classic "show, tell" split.
• Aspect ratio variety: Deliberately mixed crop ratios (vertical 3:4, near-square 4:5, horizontal 5:4) within the masonry grid prevent visual monotony and allow each subject to be framed optimally for their pose/environment.
• Corner treatment: Universal {rounded.lg} (16px) rounding on all image containers softens the photographic edges, harmonizing with the UI's rounded-component language while maintaining rectilinear professionalism.
• Layering and overlap: Images in the hero grid appear to slightly overlap or nest within each other's bounding boxes, creating a collage-like depth that suggests abundance and curation quality.
• No graphic overlays on images: Unlike many SaaS sites that tint or gradient-mask photography, MasterClass displays images cleanly—only the pause button overlays, and it's positioned at the extreme corner to minimize obstruction.
• Placeholder strategy: Before image load, containers show {colors.surface-card} (#272c33) as background fill—a mid-tone dark gray that prevents jarring flash-between during lazy-loading sequences.
• Video integration hint: The presence of {component.pause-overlay} strongly implies that hero imagery may be extracted frames from video content, or that clicking triggers video playback, positioning photography as the entry point to motion content.

Icon System

• Library: Custom SVG icon set (no detected third-party library usage in the framework analysis). Icons are inline SVGs or sprite-referenced, sized and colored via currentColor.
• Specific icons observed:
  • Search magnifying glass (within {component.search-input})
  • Chevron/down arrow (on {component.browse-button} dropdown indicator)
  • Close/X icon (on {component.promo-banner})
  • Pause/two-vertical-bars (on {component.pause-overlay})
  • Checkmark/tick (inside {component.checkbox-custom-checked})
  • Checkbox outline square (unchecked state of {component.checkbox-custom})
  • MasterClass "M" logo mark (wordmark companion)
• Treatment: Stroke-based icons (not filled) for line-weight consistency; color set to currentColor inheriting from parent text color (typically {colors.ink} or {colors.muted}). Stroke width appears uniform at 1.5–2px.
• Size alignment: Icons scale relative to adjacent text—search icon ~20px×20px within the 48px-tall input field; chevron ~10–12px beside 16px button text; close icon 16–18px; pause icon 20px within 48px circle. Generally, icons sit at 1.0–1.25× the cap height of their associated text.
• Alignment: Vertically centered with text baselines via flexbox (align-items: center); horizontally offset with 8–12px gap from text content. No icon-only buttons observed outside the pause overlay.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — evident from _next/static asset paths and server-component patterns
- Styling:        CSS Modules with custom utility classes (mc-* prefix) + inline token references; potential PostCSS pipeline
- Fonts:          Self-hosted OTF files (Ivar Display Condensed detected via @font-face); Sohne loaded via proprietary CDN or bundled; fallback to Oswald/Inter for development
- Animation:      CSS transitions (extracted) + JS-driven keyframes (carousel, shine); potential Framer Motion for complex scroll-triggered reveals
- Icons:          Custom inline SVGs (no library); consider Lucide for rapid prototyping then swap to production assets
- Component lib:  Custom component library (c-button, mc-clickable conventions suggest internal design system); no shadcn/Radix detected

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column hero; checkbox list collapses to accordion or shorter visible count (3–4 items); nav becomes hamburger menu; instructor grid becomes horizontal scroll or single featured image; promo banner text truncates or stacks vertically | | Tablet | 768px – 1024px | Two-column hero maintains but narrows (50/50 split); search input may hide behind icon toggle; instructor grid reduces to 2-column instead of masonry | | Desktop | 1025px – 1440px | Full layout as documented: 45/55 hero split, full navigation visible, masonry instructor grid, all padding at designed values | | Wide | > 1440px | Content centers at max-width (1264px sections, 1440px wrapper); additional lateral negative space in {colors.surface-dark} |

Touch Targets

• {component.button-primary}: 48px height (from 12px×24px padding plus font metrics) — exceeds WCAG AAA 44×44 minimum ✓
• {component.button-primary-sm}: ~36px height (8px×20px padding) — falls short of 44px; recommend increasing vertical padding to 10px for mobile touch compliance
• {component.search-input}: 48px explicit height — compliant ✓
• {component.checkbox-list-item}: ~44–48px total height (16px×20px padding + 14px font) — borderline; recommend 20px vertical padding minimum for mobile
• {component.checkbox-custom}: 20px×20px — too small for reliable touch; should be wrapped in larger hit area (min 44px) with visual feedback at 20px
• {component.promo-close}: 24px×24px — inadequate; expand invisible touch target to 44px while keeping 24px icon size

Collapsing Strategy

• Navigation: The two-tier header ({component.utility-nav} + {component.top-nav-bar}) collapses into a single hamburger-menu bar on mobile. The {component.browse-button} dropdown moves into the menu panel. Search becomes an icon-triggered overlay or moves below hero.
• Hero columns: The asymmetric text/image split reflows to single-column stacking: headline → subhead → divider → question → checkbox list → instructor image (now full-width or horizontally scrollable). Headline size scales down from {typography.display-xl} (80px) to {typography.display-lg} (56px) at tablet, potentially {typography.title-md} (28px) at mobile—though brand guidelines may protect the large size.
• Checkbox list: Visible item count reduces from 7+ to 3–4 with a "Show more" expander, or converts to a multi-select chip/tag interface to save vertical space. The custom {component.checkbox-custom} controls must maintain 44px tap targets via padding expansion.
• Instructor grid: Masonry layout flattens to single-column vertical stack or horizontal swipe carousel (snap-scroll) on mobile. Image aspect ratios normalize to 4:5 or 1:1 for predictable rendering.
• Promotional banner: Full-width strip persists but stacks text elements vertically: headline (serif) on line 1, urgency text on line 2, CTA button on line 3. Close icon remains fixed right. Font size may reduce from {typography.title-sm} (24px) to {typography.title-md} (28px equivalent) or lower.
• Footer: Multi-column link grid collapses to stacked accordion sections or simple vertical link lists. Social icons may move to a dedicated row.

Image Behavior

• Hero illustrations (instructor grid): On mobile, the multi-image collage likely reduces to a single featured instructor image displayed at full content width (with {rounded.lg} intact) or a horizontally-swipeable row (overflow-x: auto; snap-scroll). Aspect ratio locks to 4:5 or 3:4 portrait orientation for facial emphasis.
• Logo mark: Proportionally scales down (max-width: 120–140px) within the mobile hamburger bar; never disappears.
• Pause overlay: May hide on mobile devices where autoplay/video is less central, or relocate to a persistent bottom-positioned control bar.

Iteration Guide

1. Initialize with Next.js App Router and configure the font loading: import Sohne and Sohne Schmal from your local /fonts directory (or use next/font/local for self-hosted OTF files), setting CSS variable assignments for --font-display, --font-body, and --font-serif.
2. Extract all tokens from the YAML frontmatter via {section.token} path references—never hard-code a hex, pixel, or font-size value that has a corresponding token. Set up your CSS custom properties or Tailwind config to map these paths (e.g., --color-primary: #e32652 → referenced as var(--color-primary) or tw-[var(--color-primary)]).
3. Build the dark-canvas shell first: Apply {colors.surface-dark} (#0d0d0e) to the body background, set default text color to {colors.ink} (#ffffff), and verify that your root container respects the 1440px max-width with 32px lateral padding.
4. Implement the two-tier navigation header as a fixed/sticky element: 32px utility bar (hidden on mobile) + 72px main bar. Place the logo, Browse dropdown, search input (with inset-shadow focus treatment), and primary CTA in the main bar. Ensure {component.button-primary} uses exact padding (12px×24px) and {rounded.DEFAULT} (8px).
5. Construct the hero section with 88px vertical padding and the asymmetric two-column layout. Left column (max ~520px wide): render the H1 in {typography.display-xl} (80px Sohne Schmal, uppercase, 0.8px tracking), subhead, 3px magenta divider, question prompt, then the checkbox list. Right column: build the masonry image grid with {rounded.lg} corners.
6. Build the checkbox list component as a reusable pattern: each {component.checkbox-list-item} gets {colors.surface-soft} background, 16px×20px padding, {rounded.DEFAULT}, and a custom 20px checkbox (unchecked: {colors.muted} border; checked: {colors.primary} fill + white checkmark). Implement three states (default/hover/selected) with smooth background-color transitions (200ms).
7. Add the promotional banner as a full-viewport-width strip with white background, inserting it between the nav and hero (or above nav). Use {typography.title-sm} (serif) for the headline, include the dismissible X icon, and attach the small primary CTA. Test collapse behavior at <768px.
8. Apply motion tokens: Wire up the extracted CSS transitions (--transition-color, --transition-transform, etc.) to interactive elements. Implement the carousel keyframes (vertical/horizontal scrolling, shine effect) for any rotating content areas.
9. Run accessibility audits: Verify that all touch targets meet 44×44px minimum (expand {component.button-primary-sm} and {component.promo-close} if needed). Check that {colors.primary} on {colors.on-primary} achieves 4.5:1 contrast ratio (it passes: #e32652 on #fff ≈ 4.6:1). Validate that the inset-focus pattern is perceivable to keyboard users.
10. Font setup for development environments: Map proprietary fonts to Google Fonts substitutes in your local configuration: assign Oswald (weight 500) to the --font-display variable for Sohne Schmal, Inter (weight 400/600) to --font-body for Sohne, and Playfair Display (weight 400) to --font-serif for Ivar Display Condensed. Adjust letter-spacing values to compensate for metric differences (+0.02em for Oswald at large sizes). Production builds should swap these references to the licensed source files.

Known Gaps

• Hover state specifics: While {component.*-hover} and {component.*-active} variants exist in the frontmatter, exact hover color values (particularly for {component.button-primary-hover}'s precise shade and whether list items gain subtle transforms) were inferred rather than extracted from computed styles. Implement per-stack convention.
• Loading/skeleton states: No skeleton loader, shimmer placeholder, or spinner designs were extractable from the static screenshot. Recommend designing dark-themed skeleton components using {colors.surface-card} with pulse animation.
• Form validation states: Beyond focus (documented), error, warning, and success states for form inputs (including the search field and any email/password captures) are absent. Map to {colors.error} and {colors.success} tokens.
• Authenticated/dashboard surfaces: The screenshot shows the anonymous/homepage experience only. Member dashboards, course players, progress trackers, and settings pages likely introduce additional surface variants and components not represented here.
• Video player chrome: The pause overlay hints at video functionality, but actual player controls (playbar, volume, fullscreen, settings gear) are undocumented and would constitute a significant subsystem.
• Sub-brand palettes: Enterprise ("Executive"), corporate ("At Work"), and certification ("Certificates") offerings referenced in the utility nav may have distinct color accents or layout modifications not visible on the consumer homepage.
• Mobile-specific components: Hamburger menu panel, bottom-tab navigation (common in educational apps), and responsive search overlay are architecturally necessary but visually absent from the desktop-focused capture.
• Internationalization/RTL support: No RTL (right-to-left) layout considerations or translated-copy length accommodations are addressed; the condensed Sohne Schmal headline face may require substitution in CJK or Arabic locales.
• CSS variable naming mismatches: The extracted markup shows mc-bg-neutral-1000, mc-theme-dark, and mc-background--color-light class names whose semantic mapping to our canonical token names required interpretation. Direct variable references (e.g., --theme_button-background-primary) were not found in the source—styling appears class-based rather than design-token-variable-based in the current implementation.
• Exact promotional banner dimensions: The banner's vertical padding and font-size scaling at breakpoints are estimated from the desktop capture; mobile behavior (stacking vs. horizontal scroll vs. dismissal persistence) is unknown.