Belmond
Marquee Hero
Loading
Deathandcompany
Deep charcoal expanse, elegant script dances above cool, metallic textures.
Click any value to copy. Roles are suggestions, not gospel.
- #1877b5oklch(54.8% 0.127 244)Dominant
- #685014oklch(44.5% 0.081 86)Surface
- #89c7efoklch(80.2% 0.085 238)Ink
- #9e8769oklch(63.7% 0.051 74)Accent
- #b9b9bdoklch(78.7% 0.006 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Diplomata SC | 27px | 400 | 1.1 | 0 | Aa Bb Cc |
| h2 | Diplomata SC | 27px | 300 | 1.1 | 0 | Aa Bb Cc |
| h3 | Diplomata SC | 14px | 300 | 1.1 | 1px | Aa Bb Cc |
| body | EB Garamond | 18px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Oswald | 23px | 300 | 1.5 | 1px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #1877b5;
--color-surface: #685014;
--color-ink: #89c7ef;
--color-accent: #9e8769;
--color-detail: #b9b9bd;
}
/* CSS variables exposed by source */
:root {
--fa-style-family-classic: "Font Awesome 6 Free";
--PhoneInputCountrySelectArrow-color: currentColor;
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
--PhoneInput-color--focus: #03b2cb;
--PhoneInputCountryFlag-aspectRatio: 1.5;
--PhoneInputInternationalIconPhone-opacity: 0.8;
--PhoneInputCountrySelectArrow-color--focus: #03b2cb;
--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
--PhoneInputCountryFlag-height: 1em;
--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
--PhoneInputCountrySelectArrow-width: 0.3em;
--PhoneInputCountrySelectArrow-transform: rotate(45deg);
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
--fa-style-family-brands: "Font Awesome 6 Brands";
--PhoneInputCountryFlag-borderWidth: 1px;
--PhoneInputCountrySelectArrow-borderWidth: 1px;
--PhoneInputCountrySelect-marginRight: 0.35em;
--PhoneInputInternationalIconGlobe-opacity: 0.65;
--PhoneInputCountrySelectArrow-opacity: 0.45;
--PhoneInputCountryFlag-borderColor--focus: #03b2cb;
--PhoneInputCountrySelectArrow-marginLeft: 0.35em;
}Drop-in prompt
Build a landing page in the visual style of Deathandcompany.
Reference design system (extracted from the live site):
- Palette: #1877b5, #685014, #89c7ef, #9e8769, #b9b9bd
- Typefaces: Diplomata SC, EB Garamond, Oswald
- Macrostructure: Marquee Hero
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/deathandcompany-com--private-events
