Belmond
Marquee Hero
Deep burgundy and warm ochre—clean, generous spacing, a quiet authority.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | GT America Standard Regular | 36px | 400 | 1.5 | -0.25px | Aa Bb Cc |
| h2 | Canela Deck Web | 59px | 400 | 1.2 | -0.55px | Aa Bb Cc |
| h3 | GT America Standard Bold | 24px | 700 | 1.4 | -0.25px | Aa Bb Cc |
| body | GT America Standard Regular | 18px | 400 | 1.5 | -0.25px | Aa Bb Cc |
| button | GT America Standard Regular | 18px | 400 | 1.5 | -0.25px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a4293a;
--color-surface: #681521;
--color-ink: #c68e6e;
--color-accent: #8a7571;
--color-detail: #cd9aa0;
}
/* CSS variables exposed by source */
:root {
--color-focus-blue: #00f;
--color-text-selection: #fff;
--color-grout: #e3e5e5;
--color-neutral-10: #e1e1e1;
--spacer-70: clamp(4rem,5vw + 2rem,6rem);
--color-twitter: #0084b4;
--font-family-serif: serif;
--color-bgd-selection: #1e1e1e;
--color-primary-10: #d9f4ff;
--color-white: #fff;
--color-graphite: #464a4f;
--color-alert-positive: #0ddb91;
--spacer-40: clamp(1.5rem,2vw + 0.5rem,2rem);
--font-family-gt-america-standard-reg: "GT America Standard Regular";
--color-secondary-70: #146c41;
--font-family-gt-america-standard-bold: "GT America Standard Bold";
--spacer-60: clamp(3rem,4vw + 1rem,4rem);
--color-alert-neutral: #0386ff;
--spacer-20: clamp(0.75rem,1vw + 0.25rem,1rem);
--color-action-red-dark-bg: #f70834;
--color-ink: #1e1e1e;
--type-35: clamp(1.25rem,1vw + 0.5rem,2rem);
--color-primary-70: #0b5fde;
--color-action-red: #df072e;
--font-size-body-small: 0.9375rem;
--color-secondary: #18814e;
--spacer-wpadmin-desktop: 32px;
--color-wrought-iron: #0e0e0e;
--font-family-gt-america-standard-reg-italic: "GT America Standard Regular Italic";
--type-60: clamp(2.25rem,3vw + 1rem,3.8125rem);
--color-neutral-0: #fff;
--color-asphalt: #656f77;
--color-gold: #c8980e;
--color-pinterest: #bd081c;
--color-border: #bac5c6;
--color-pear: #d1ce61;
--spacer-30: clamp(1rem,1.5vw + 0.25rem,1.5rem);
--font-family-gt-america-standard-med: "GT America Standard Medium";
--color-black: #0e0e0e;
--color-bgd-content: #fff;
--type-50: clamp(1.875rem,2.3vw + 0.8rem,3.25rem);
--color-slate: #8996a0;
--color-link: #1e1e1e;
--color-link-hover: #1e1e1e;
--color-ivy: #34bd78;
--color-parchment: #f3f4f4;
--color-bluebonnet: #3a56ba;
--color-neutral-20: #bac5c6;
--color-bgd: #fff;
--color-neutral-90: #151515;
--font-family-canela-deck: "Canela Deck Web";
--font-family-canela: "Canela Web";
--color-bluebonnet-light: #dee4f0;
--type-40: clamp(1.625rem,1.6vw + 0.7rem,2.875rem);
--color-neutral-70: #404040;
--type-30: 1.5rem;
--font-family-base: "GT America Standard Regular";
--color-alert-negative: #ff3d5b;
--spacer-10: clamp(0.25rem,0.5vw + 0.125rem,0.5rem);
--color-grey: #c4c5c6;
}Drop-in prompt
Build a landing page in the visual style of Harvard Edu.
Reference design system (extracted from the live site):
- Palette: #a4293a, #681521, #c68e6e, #8a7571, #cd9aa0
- Typefaces: GT America Standard Regular, Canela Deck Web
- 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/harvard-edu