Factmag
Marquee Hero
Loading
Belmond
Deep teal and warm sand, clean sans-serif, expansive coastal serenity.
Click any value to copy. Roles are suggestions, not gospel.
- #0d9a7foklch(61.3% 0.114 174)Dominant
- #14345coklch(32.4% 0.081 255)Surface
- #dcb4acoklch(80.3% 0.048 31)Ink
- #5c7e9coklch(57.9% 0.060 246)Accent
- #b1bbccoklch(79.0% 0.027 261)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Montserrat | 60px | 500 | 1.1 | 0.6px | Aa Bb Cc |
| h2 | Montserrat | 40px | 400 | 1.1 | 0.6px | Aa Bb Cc |
| h3 | Montserrat | 26px | 400 | 1.2 | 0.6px | Aa Bb Cc |
| body | Montserrat | 10px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Montserrat | 10px | 300 | 2 | 0.6px | Aa Bb Cc |
| button | Montserrat | 13px | 300 | 1.8 | 0.6px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0d9a7f;
--color-surface: #14345c;
--color-ink: #dcb4ac;
--color-accent: #5c7e9c;
--color-detail: #b1bbcc;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(54 96 145 / 0.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Belmond.
Reference design system (extracted from the live site):
- Palette: #0d9a7f, #14345c, #dcb4ac, #5c7e9c, #b1bbcc
- Typefaces: Montserrat
- 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/belmond-com--fr-hotels-africa-south-africa-cape-town-belmond-mount-nelson-hotel
