Cartier WAW 2025
Specimen
Loading
French brand of high-end sneakers. – Belledonne Paris
Soft, muted concrete tones and clean sans-serifs evoke quiet luxury and timeless minimalism.
Click any value to copy. Roles are suggestions, not gospel.
- #90866eoklch(62.2% 0.037 88)Dominant
- #c5c0b3oklch(80.8% 0.019 89)Surface
- #4b4539oklch(39.3% 0.021 85)Ink
- #7c8482oklch(60.6% 0.010 179)Accent
- #c7c2b6oklch(81.5% 0.017 88)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Mier Bold | 14px | 400 | 1.14 | 0 | Aa Bb Cc |
| h2 | Mier Bold | 14px | 400 | 1.14 | 0 | Aa Bb Cc |
| h3 | Mier | 12px | 700 | 1.33 | 0 | Aa Bb Cc |
| body | Mier | 12px | 400 | 1.33 | 0 | Aa Bb Cc |
| caption | Mier Bold | 10px | 400 | 1.6 | 0 | Aa Bb Cc |
| button | Mier | 12px | 400 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #90866e;
--color-surface: #c5c0b3;
--color-ink: #4b4539;
--color-accent: #7c8482;
--color-detail: #c7c2b6;
}
/* CSS variables exposed by source */
:root {
--text-boxes-shadow-visible: 0;
--font-heading-style: normal;
--gap-xs: .3rem;
--font-demi-style: "normal";
--spacing-sections-desktop: 0px;
--color-badge-foreground: 62,59,53;
--font-body-family: "Mier", sans-serif;
--color-background: 250,250,248;
--color-badge-background: 250,250,248;
--color-button-text: 255,255,255;
--spacing-sections-mobile: 0px;
--color-button: 62,59,53;
--font-body-weight-bold: 700;
--color-secondary-button: 250,250,248;
--font-heading-scale: 1.0;
--text-boxes-border-width: 0px;
--color-shadow: 62,59,53;
--color-background-contrast: 197,197,174;
--space: 2.4rem;
--text-boxes-shadow-blur-radius: 5px;
--text-boxes-radius: 0px;
--font-body-style: normal;
--color-secondary-button-text: 62,59,53;
--font-body-weight: 400;
--font-demi-family: "Mier Demi", sans-serif;
--text-boxes-shadow-horizontal-offset: 0px;
--text-boxes-shadow-vertical-offset: 4px;
--font-heading-family: "Mier Bold", sans-serif;
--color-foreground: 62,59,53;
--font-body-scale: 1.0;
--text-boxes-shadow-opacity: 0.0;
--font-heading-weight: 400;
--text-boxes-border-opacity: 0.1;
--font-demi-weight: "500";
--color-link: 62,59,53;
--color-badge-border: 62,59,53;
--inputs-shadow-opacity: 0.0;
--header-height: 58px;
--buttons-shadow-horizontal-offset: 0px;
--collection-card-shadow-opacity: 0.0;
--focused-base-box-shadow: 0 0 0 .3rem rgb(250,250,248), 0 0 .5rem .4rem rgba(62,59,53, .3);
--mobile-ratio-percent: 100%;
--drawer-shadow-opacity: 0.0;
--blog-card-border-opacity: 0.1;
--drawer-shadow-blur-radius: 5px;
--alpha-link: .85;
--media-border-width: 1px;
--variant-pills-border-width: 1px;
--blog-card-shadow-visible: 0;
--blog-card-corner-radius: 0.0rem;
--collection-card-border-opacity: 0.1;
--buttons-border-opacity: 1.0;
--duration-long: .5s;
--page-width-margin: 0rem;
--buttons-radius-outset: 0px;
--inputs-border-width: 1px;
--variant-pills-shadow-vertical-offset: 4px;
--inputs-border-opacity: 0.55;
--grid-mobile-vertical-spacing: 8px;
--collection-card-shadow-visible: 0;
}Drop-in prompt
Build a landing page in the visual style of French brand of high-end sneakers. – Belledonne Paris.
Reference design system (extracted from the live site):
- Palette: #90866e, #c5c0b3, #4b4539, #7c8482, #c7c2b6
- Typefaces: Mier Bold, Mier, Arial
- Macrostructure: Specimen
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/belledonne-com
