Everlane
Split Studio
Loading
Maisonmargiela
Pale sage and cream, crisp sans-serifs, expansive negative space whispering quiet luxury.
Click any value to copy. Roles are suggestions, not gospel.
- #8f806foklch(60.9% 0.031 71)Dominant
- #4a423aoklch(38.5% 0.017 67)Surface
- #c4bdb4oklch(80.2% 0.015 74)Ink
- #7c7c7coklch(58.6% 0.000 90)Accent
- #554d43oklch(42.5% 0.019 73)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Margiela Sans | 14px | 700 | 1.4 | 1px | Aa Bb Cc |
| h3 | Margiela Sans | 14px | 600 | 1 | 0 | Aa Bb Cc |
| body | Margiela Sans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Margiela Sans | 14px | 500 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #8f806f;
--color-surface: #4a423a;
--color-ink: #c4bdb4;
--color-accent: #7c7c7c;
--color-detail: #554d43;
}
/* CSS variables exposed by source */
:root {
--mm-ecru-95-rgb: 18, 18, 18;
--mm-ecru-70: #484847;
--mm-danger-50: #f4502f;
--header-height: 40px;
--mm-info-10: #b3d1ff;
--mm-info-40: #428eff;
--mm-success-70: #2d7652;
--mm-info-70: #004bbd;
--mm-danger-20: #faa999;
--mm-danger-40: #f66c51;
--mm-ecru-05: #f7f7f2;
--mm-info-80: #00398f;
--mm-ecru-80: #313130;
--mm-info-50: #1f69ff;
--mm-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--mm-success: #41aa75;
--mm-success-80: #246042;
--vh-initial: 9px;
--mm-danger-90: #571205;
--mm-ecru-40: #a5a5a1;
--safe-area-inset-bottom: 0px;
--mm-ecru-30: #c1c1bd;
--mm-danger-60: #e4300c;
--mm-body-bg-rgb: 247, 247, 242;
--mm-warning-90: #5c3d00;
--mm-warning-10: #ffe2a8;
--mm-body-bg: #f7f7f2;
--mm-info-05: #dbeaff;
--mm-success-95: #0b1e14;
--mm-success-90: #163b29;
--mm-body-line-height: 1.5;
--mm-body-font-family: Margiela Sans, Helvetica Neue, Arial, sans-serif;
--mm-black-rgb: 0, 0, 0;
--mm-warning-30: #ffca61;
--mm-body-color-rgb: 18, 18, 18;
--mm-body-color: #121212;
--mm-danger-30: #f88972;
--mm-info-30: #6ba6ff;
--mm-success-05: #e1f4ec;
--mm-info: #1f69ff;
--mm-danger-05: #fde7e2;
--mm-font-sans-serif: "Margiela Sans", "Helvetica Neue", Arial, sans-serif;
--mm-danger-70: #b8270a;
--mm-warning-20: #ffd37a;
--mm-warning-60: #d68f00;
--swiper-theme-color: #007aff;
--mm-black: black;
--mm-font-monospace: "Margiela Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
--mm-danger-rgb: 244, 80, 47;
--mm-warning: #ffaa00;
--mm-danger-10: #fccac0;
--mm-body-font-weight: 400;
--mm-danger-80: #881d07;
--mm-gray-light-8: rgba(26, 26, 26, 0.8);
--mm-danger-95: #270802;
--mm-info-rgb: 31, 105, 255;
--mm-white: white;
--mm-warning-rgb: 255, 170, 0;
--swiper-navigation-size: 44px;
--mm-ecru-60: #646462;
}Drop-in prompt
Build a landing page in the visual style of Maisonmargiela.
Reference design system (extracted from the live site):
- Palette: #8f806f, #4a423a, #c4bdb4, #7c7c7c, #554d43
- Typefaces: Margiela Sans
- 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/maisonmargiela-com--en-dk-jeans-si1la0002s30561967-html
