Beauxartsparis Fr
Split Studio
Loading
Masterclass
Deep charcoal canvas, crisp sans-serif, punctuated by vibrant jewel-toned portraits.
Click any value to copy. Roles are suggestions, not gospel.
- #d0294eoklch(56.3% 0.200 15)Dominant
- #042435oklch(24.7% 0.049 237)Surface
- #7cccecoklch(80.5% 0.091 226)Ink
- #5c84a4oklch(59.6% 0.066 243)Accent
- #b2c4d4oklch(81.2% 0.030 245)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Sohne Schmal | 80px | 500 | 0.85 | 0.8px | Aa Bb Cc |
| h2 | Sohne | 32px | 600 | 1.25 | 0.96px | Aa Bb Cc |
| h3 | Sohne | 16px | 600 | 1.25 | 0.48px | Aa Bb Cc |
| body | Sohne | 16px | 400 | 1.5 | 0.32px | Aa Bb Cc |
| button | Sohne | 16px | 600 | 1 | 0.16px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d0294e;
--color-surface: #042435;
--color-ink: #7cccec;
--color-accent: #5c84a4;
--color-detail: #b2c4d4;
}
/* CSS variables exposed by source */
:root {
--spacing-12: 96px;
--spacing-scale-6: 24px;
--spacing-scale-12: 96px;
--radius-sm: 0.8rem;
--text-9: 48px;
--spacing-5: 20px;
--radius-md: 1.2rem;
--radius-lg: 1.6rem;
--spacing-6: 24px;
--text-3: 12px;
--font-scale-11: 80px;
--text-6: 24px;
--font-scale-12: 96px;
--font-scale-5: 20px;
--text-8: 32px;
--spacing-scale-11: 80px;
--spacing-scale-4: 16px;
--spacing-8: 32px;
--text-0: 0px;
--spacing-3: 12px;
--spacing-10: 64px;
--text-7: 28px;
--font-scale-9: 48px;
--color-text-error: #ff3333;
--spacing-scale-7: 28px;
--spacing-11: 80px;
--text-11: 80px;
--spacing-7: 28px;
--spacing-scale-2: 8px;
--spacing-scale-8: 32px;
--font-scale-10: 64px;
--font-scale-2: 8px;
--spacing-4: 16px;
--spacing-1: 4px;
--text-4: 16px;
--font-scale-7: 28px;
--spacing-scale-9: 48px;
--font-scale-0: 0px;
--font-scale-1: 4px;
--spacing-0: 0px;
--font-scale-6: 24px;
--text-12: 96px;
--text-10: 64px;
--spacing-scale-3: 12px;
--spacing-scale-1: 4px;
--font-scale-4: 16px;
--text-5: 20px;
--spacing-scale-10: 64px;
--spacing-9: 48px;
--font-scale-8: 32px;
--spacing-scale-0: 0px;
--text-2: 8px;
--spacing-2: 8px;
--font-sohne: "Sohne";
--text-1: 4px;
--font-scale-3: 12px;
--spacing-scale-5: 20px;
--radius-xl: 2.4rem;
--color-mc-outline-dark: #9ea0a9;
--mc-color-primary-700-rgb: 199,26,66;
}Drop-in prompt
Build a landing page in the visual style of Masterclass.
Reference design system (extracted from the live site):
- Palette: #d0294e, #042435, #7cccec, #5c84a4, #b2c4d4
- Typefaces: Sohne Schmal, Sohne
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/masterclass-com
