Belmond — About
Marquee Hero
Loading
Drop Dead Generous | Global Generosity Experiment
Warm, soft ochre expanse—clean sans serif floats on a gentle, airy canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #fcfc54oklch(96.2% 0.182 109)Dominant
- #fcfc76oklch(96.5% 0.156 109)Surface
- #9c7c24oklch(60.1% 0.109 88)Ink
- #ac6e5foklch(60.1% 0.083 34)Accent
- #ddddb3oklch(88.7% 0.055 107)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 80px | 400 | 1.08 | 0.8px | Aa Bb Cc |
| h2 | Inter | 80px | 400 | 1.08 | 0.8px | Aa Bb Cc |
| h3 | Inter | 15px | 400 | 1.3 | -0.15px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.3 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.3 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fcfc54;
--color-surface: #fcfc76;
--color-ink: #9c7c24;
--color-accent: #ac6e5f;
--color-detail: #ddddb3;
}
/* CSS variables exposed by source */
:root {
--container--width: 1872px;
--nav--height: 5rem;
--small-width: 45rem;
--section--padding-top: 0px;
--cursor-default: url("https://cdn.prod.website-files.com/6729d1838c7972450264d992/672dbcdec7833bd205b49f01_cursor-1.svg")
2 0,
auto;
--_color---grey--cavas: #f1f1f2;
--section--padding-bottom: 0px;
--_color---transparent: transparent;
--_color---yellow--mid: #fcff51;
--cursor-text: url("https://cdn.prod.website-files.com/6729d1838c7972450264d992/672dc4943b275d8d7044b217_cursor-text.svg")
9 19,
text;
--_color---green--mid: #55bd74;
--team--gap: 1rem;
--_color---grey--surface-mid: #616161;
--_color---black--text: #2c2c2c;
--corner-radius: .5rem;
--_color---black--100: black;
--rich-text-spacing--small<deleted|variable-7451048f-a548-4a4f-480b-5620ea6e4520>: 1.5rem;
--hero-grad--h: 10%;
--_color---purple--mid: #9887ff;
--rich-text-spacing--tiny<deleted|variable-56443fbf-15bd-aaec-338f-210295e4e59b>: .5rem;
--cursor-hover: url("https://cdn.prod.website-files.com/6729d1838c7972450264d992/672dbd3943fc3eaa667ca692_cursor-2.svg")
12 0,
pointer;
--container--padding: 2rem;
--_color---grey--stroke-subtle: #d9d9d9;
--team--y: 10px;
--_color---grey--dark-grey: #2c2c2c;
--hero--below: 0;
--hero--min-h: 40rem;
--nav--logo-height: 3.4rem;
--hero--middle: 1;
--_color---white--100: white;
--hero--top: 2;
}Drop-in prompt
Build a landing page in the visual style of Drop Dead Generous | Global Generosity Experiment.
Reference design system (extracted from the live site):
- Palette: #fcfc54, #fcfc76, #9c7c24, #ac6e5f, #ddddb3
- Typefaces: Inter
- 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/dropdeadgenerous-org
